npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.34 → 0.3.36 - Mend

@jumpgroup/jump-design-system 0.3.34 → 0.3.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/dist/collection/components/jump-search-bar/jump-search-bar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"jump-search-bar.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar/jump-search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAiB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,aAAa;;QA6BxB,iEAAiE;QAEjE,kEAAkE;QAElE,kEAAkE;QAElE,kEAAkE;QAElE;;;WAGG;QACH,aAAQ,GAAG,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;gBAE7C,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;gBACrC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC,CAAA;2BAvC6B,UAAU;0BACX,YAAY;4BAKV,GAAG;0BAML,MAAM,IAAI,QAAQ;uBAErB,SAAS,IAAI,QAAQ,IAAI,QAAQ;;IA4B3D,gCAAgC;IAClC,QAAQ,CAAC,EAAE,EAAE,KAAK,GAAG,IAAI,CAAC,YAAY;QACpC,IAAI,SAAS,CAAC;QAEd,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE;YACjB,4BAA4B;YAC5B,IAAI,SAAS,EAAE,CAAC;gBACd,YAAY,CAAC,SAAS,CAAC,CAAC;YAC1B,CAAC;YACD,oBAAoB;YACpB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACvB,CAAC,EAAE,KAAK,CAAC,CAAC;QACZ,CAAC,CAAC;IACJ,CAAC;IAAA,CAAC;IAEA,2DAA2D;IAE3D,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,gBAAgB,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;YAEnH,8DACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAsB,CAAA,CAAC,CAAC,EACpH,OAAO,EAAE,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,GAC5E;YACH,IAAI,CAAC,UAAU,KAAK,QAAQ;gBAC3B,oEAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,gBAAY,oBAAe,EAAC,EAAE,EAAC,QAAQ,EAAC,QAAQ,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;oBACvJ,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,GAAa,CACjD,CAEX,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-search-bar',\n styleUrl: 'jump-search-bar.scss',\n shadow: true,\n})\nexport class JumpSearchBar {\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n jumpSearchBar: HTMLInputElement;\n\n /* ---------------------- @STATE ------------------------- */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() placeholder: string = 'Cerca...';\n @Prop() identifier: string = 'search-bar';\n\n /**\n * Variabile per personalizzare il tempo di attesa prima di eseguire la ricerca\n */\n @Prop() debounceTime: number = 500;\n\n /**\n * Se \"Auto\" la ricerca parte automaticamente al termine della digitazione\n * Se \"Manual\" la ricerca parte solo dopo aver premuto invio -> può avere solo stile outline\n */\n @Prop() searchType: string = 'auto' || 'manual';\n\n @Prop() variant: string = 'outline' || 'filled' || 'linear';\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-search-bar' }) search: EventEmitter;\n\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n\n /**\n * se searchType == 'manual' l'utente deve cliccare sul pulsante per eseguire la funzione\n * se searchType == 'auto' la funzione viene eseguita automaticamente al termine della digitazione\n */\n doSearch = () => {\n if (this.jumpSearchBar) {\n const searchValue = this.jumpSearchBar.value;\n\n console.log('doSearch', searchValue);\n this.search.emit({ search: searchValue });\n }\n }\n\n\n /** Used to filters/searchbar */\ndebounce(fn, delay = this.debounceTime) {\n let timeoutId;\n\n return (...args) => {\n // cancel the previous timer\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n // setup a new timer\n timeoutId = setTimeout(() => {\n fn.apply(null, args);\n }, delay);\n };\n};\n\n /* -------------------- RENDER ------------------------- */\n\n render() {\n return (\n <Host \n class={\"JumpSearchBar \" + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + \" \" + this.variant))} \n >\n <input \n placeholder={this.placeholder} \n type=\"search\" id={this.identifier} class=\"search-input\" ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }} \n onInput={this.searchType === 'auto' ? this.debounce(this.doSearch) : undefined}\n />\n {this.searchType === 'manual' &&\n <jump-button variant=\"secondary\" size=\"medium\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon onClick={() => this.doSearch()}>\n <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n\n}\n"]}

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

@@ -0,0 +1,100 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/SearchBar (WIP)',
+    tags: ['autodocs'],
+    argTypes: {
+        identifier: {
+            name: 'identifier',
+            control: 'text',
+            description: 'L\'id dell\'elemento',
+        },
+        placeholder: {
+            name: 'placeholder',
+            control: 'text',
+            description: 'Il testo del placeholder',
+        },
+        searchType: {
+            name: 'searchType',
+            control: 'select',
+            options: ['auto', 'manual'],
+            description: "Scelta della modalità di ricerca tra quella automatica e quella manuale.",
+        },
+        variant: {
+            name: 'variant',
+            control: 'select',
+            options: ['filled', 'linear', 'outline'],
+            if: {
+                arg: 'searchType',
+                eq: 'auto',
+            },
+            description: 'Solo se tipologia "auto", Scelta dello stile della barra di ricerca tra filled, linear e outline.'
+        },
+        debounceTime: {
+            name: 'debounce-time',
+            control: 'number',
+            description: 'Il tempo di attesa per l\'invio della ricerca in caso di ricerca automatica.',
+            if: {
+                arg: 'searchType',
+                eq: 'auto',
+            }
+        }
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>`);
+};
+export const SearchBar = Template.bind({});
+SearchBar.args = {
+    placeholder: 'Cerca...',
+    searchType: 'manual',
+};
+export const SearchBarManual = Template.bind({});
+SearchBarManual.args = {
+    placeholder: 'Cerca...',
+    searchType: 'manual',
+};
+export const SearchBarAutoOutline = Template.bind({});
+SearchBarAutoOutline.args = {
+    placeholder: 'Cerca...',
+    searchType: 'auto',
+    variant: 'outline',
+};
+export const SearchBarAutoFilled = Template.bind({});
+SearchBarAutoFilled.args = {
+    placeholder: 'Cerca...',
+    searchType: 'auto',
+    variant: 'filled',
+};
+export const SearchBarAutoLinear = Template.bind({});
+SearchBarAutoLinear.args = {
+    placeholder: 'Cerca...',
+    searchType: 'auto',
+    variant: 'linear',
+};
+const TemplateWithListenerExample = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>
+        <div>Il testo cercato è: <span id="page-text">loading..<span> </div>
+        <script>
+            (function() {
+                let container;
+                    container = document.querySelector('#story--${id}');
+                    container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {
+                    container.querySelector('#page-text').innerText = ev.detail.search;
+                });
+            })();
+        </script>`);
+};
+export const SearchBarManualWithListener = TemplateWithListenerExample.bind({});
+SearchBarManualWithListener.args = {
+    placeholder: 'Cerca...',
+    searchType: 'manual',
+};
+export const SearchBarAutoWithListener = TemplateWithListenerExample.bind({});
+SearchBarAutoWithListener.args = {
+    placeholder: 'Cerca...',
+    searchType: 'auto',
+};
+//# sourceMappingURL=jump-search-bar.stories.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"jump-search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar/jump-search-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/SearchBar (WIP)',\n tags: ['autodocs'],\n argTypes: {\n identifier: {\n name: 'identifier',\n control: 'text',\n description: 'L\\'id dell\\'elemento',\n },\n placeholder: {\n name: 'placeholder',\n control: 'text',\n description: 'Il testo del placeholder',\n },\n searchType: {\n name: 'searchType',\n control: 'select',\n options: ['auto', 'manual'],\n description: \"Scelta della modalità di ricerca tra quella automatica e quella manuale.\",\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['filled', 'linear', 'outline'],\n if: {\n arg: 'searchType',\n eq: 'auto',\n },\n description: 'Solo se tipologia \"auto\", Scelta dello stile della barra di ricerca tra filled, linear e outline.'\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.',\n if: {\n arg: 'searchType',\n eq: 'auto',\n }\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>`);\n}\n\nexport const SearchBar = Template.bind({});\nSearchBar.args = {\n placeholder: 'Cerca...',\n searchType: 'manual',\n};\n\nexport const SearchBarManual = Template.bind({});\nSearchBarManual.args = {\n placeholder: 'Cerca...',\n searchType: 'manual',\n};\n\nexport const SearchBarAutoOutline = Template.bind({});\nSearchBarAutoOutline.args = {\n placeholder: 'Cerca...',\n searchType: 'auto',\n variant: 'outline',\n};\n\nexport const SearchBarAutoFilled = Template.bind({});\nSearchBarAutoFilled.args = {\n placeholder: 'Cerca...',\n searchType: 'auto',\n variant: 'filled',\n};\n\nexport const SearchBarAutoLinear = Template.bind({});\nSearchBarAutoLinear.args = {\n placeholder: 'Cerca...',\n searchType: 'auto',\n variant: 'linear',\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>\n <div>Il testo cercato è: <span id=\"page-text\">loading..<span> </div>\n <script>\n (function() {\n let container; \n container = document.querySelector('#story--${id}');\n container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {\n container.querySelector('#page-text').innerText = ev.detail.search;\n });\n })();\n </script>`);\n};\n\nexport const SearchBarManualWithListener = TemplateWithListenerExample.bind({});\nSearchBarManualWithListener.args = {\n placeholder: 'Cerca...',\n searchType: 'manual',\n};\n\nexport const SearchBarAutoWithListener = TemplateWithListenerExample.bind({});\nSearchBarAutoWithListener.args = {\n placeholder: 'Cerca...',\n searchType: 'auto',\n};\n"]}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"jump-search-bar.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar/test/jump-search-bar.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qCAAqC,CAAC,CAAC;QAE7D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,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', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<jump-search-bar></jump-search-bar>');\n\n const element = await page.find('jump-search-bar');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"jump-search-bar.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar/test/jump-search-bar.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,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 { JumpSearchBar } from '../jump-search-bar';\n\ndescribe('jump-search-bar', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [JumpSearchBar],\n html: `<jump-search-bar></jump-search-bar>`,\n });\n expect(page.root).toEqualHtml(`\n <jump-search-bar>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </jump-search-bar>\n `);\n });\n});\n"]}

package/dist/collection/components/jump-tab/jump-tab.css CHANGED Viewed

@@ -4,37 +4,39 @@
   --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);
 }
 :host .Wrapper {
-  display: flex;
-  width: fit-content;
-}
-:host .Wrapper.rounded {
-  border-radius: 50px;
-  background-color: #f8f8f8;
+  /* Stile fullBorder */
 }
-:host(.center) {
+:host .Wrapper.center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-:host(.left) {
+:host .Wrapper.left {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
-:host(.right) {
+:host .Wrapper.right {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-/* Stile fullBorder */
-:host(.fullBorder.inline) {
+:host .Wrapper.fullBorder.inline {
   border-bottom: 1px solid var(--jump-tab-border-color);
 }
-:host(.fullBorder.inline) ::slotted([slot=tab-item]) {
+:host .Wrapper.fullBorder.inline ::slotted([slot=tab-item]) {
   margin-bottom: -1px;
+}
+:host .Content {
+  display: flex;
+  width: fit-content;
+}
+:host .Content.rounded {
+  border-radius: 50px;
+  background-color: #f8f8f8;
+}
+:host .Content.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class JumpTab {
     constructor() {
+        this.disabled = false;
         this.alignment = 'left';
         this.fullBorder = false;
         this.tabGroupName = undefined;
@@ -73,7 +74,7 @@ export class JumpTab {
         }
     }
     render() {
-        return (h(Host, { key: '5692c9c61191b435aa4d54749e091b5305dfec3f', class: "JumpTab" + " " + this.alignment + " " + (this.variant) + " " + (this.fullBorder && 'fullBorder'), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: '1f2d7f7a61778897bfdb21b5c7243908f48ca8a4' }, h("div", { key: 'f959c8d64f35c96ed8b2ae470fdc8c8a63da7ea1', class: "Wrapper " + this.variant }, h("slot", { key: '006c9bfcfd55068064a009f1acb834b7a20c0ac0', name: "tab-item" })), h("div", { key: '119d24cba57a23144c2167b3c378ccd1279d4774' }, h("slot", { key: '975e6edbc7f29cba13fb45bac921fbd9b3e92a6f', name: "tab-content" })))));
+        return (h(Host, { key: 'd266e47e15f07bb230f05248565ade7e0709583a', class: "JumpTab " + (this.variant), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'ce1dcc0a97d3f84e597e1f8d062d5a3c94928607', class: "Wrapper " + this.alignment + " " + (this.fullBorder && 'fullBorder') + " " + (this.variant) }, h("div", { key: '67ba27b40f38e2f9192b766c908f3a84df43070d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') }, h("slot", { key: '4e62fd0e4f7c145e2aab6d0b370fb11bffe3a7ea', name: "tab-item" })), h("div", { key: 'f45e4eb142af620e16d25140e63928a553d11ec5' }, h("slot", { key: 'c667c0a89fa1d4a0694b270e298b2a2fc1be0186', name: "tab-content" })))));
     }
     static get is() { return "jump-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -89,6 +90,24 @@ export class JumpTab {
     }
     static get properties() {
         return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "alignment": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/jump-tab/jump-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,OAAO;;~~yBAIU~~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~~SAAS~~,GAAG,~~GAAG~~,~~GAAG~~,IAAI,CAAC,~~SAAS~~,~~GAAG~~,GAAG,~~GAAG~~,CAAC,IAAI,CAAC,~~OAAO~~,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,IAAI,CAAC,~~YAAY~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~CAAC,~~EAAE,~~EAAE~~,~~EAAE~~,~~GAAE,~~IAAI,CAAC,~~SAAS~~,GAAG,~~EAAE~~,CAAC,~~CAAA~~,CAAC~~;YACxK;gBACA~~,~~4DAAK~~,~~KAAK~~,~~EAAE~~,UAAU,~~GAAG~~,~~IAAI~~,CAAC,~~OAAO~~;~~oBACnC~~,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;gBACN;oBACE,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACA,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- /\n @Prop() alignment: string = 'left';\n\n /\n If true, the jump-tab component have a full bottom border\n /\n @Prop() fullBorder: boolean = false;\n\n @Prop() tabGroupName: string = undefined;\n\n /\n The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class={\"JumpTab\" + \" \" + this.~~alignment~~ + \" \" + (this.~~variant)~~ + \" \" + (this.fullBorder && 'fullBorder')} ~~id={this.tabGroupName}~~ ~~ref={(el)~~ => {this.~~JumpTabEl = el;~~}~~}> \n <div~~>\n <div class={\"~~Wrapper~~ \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- /\n @Prop() disabled: boolean = false;\n\n @Prop() alignment: string = 'left';\n\n /\n If true, the jump-tab component have a full bottom border\n /\n @Prop() fullBorder: boolean = false;\n\n @Prop() tabGroupName: string = undefined;\n\n /\n The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class={\"JumpTab \" + (this.variant) } id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div class={\"Wrapper \" + this.alignment + \" \" + (this.fullBorder && 'fullBorder') + \" \" + (this.variant)}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '')}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}"]}

package/dist/collection/components/jump-tab/jump-tab.stories.js CHANGED Viewed

@@ -7,18 +7,38 @@ export default {
             name: 'tab-group-name',
             control: 'text',
             description: 'Indica la tab attiva',
+            table: {
+                type: { summary: 'string' },
+            },
         },
         variant: {
             name: 'variant',
             control: 'select',
             options: ['inline', 'boxed', 'sheet', 'rounded'],
             description: 'Stile del tab e di tutti i suoi item',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'inline' },
+            },
+        },
+        disabled: {
+            name: 'disabled',
+            control: 'boolean',
+            description: 'Se true, tutte le tab item sono disabilitate',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
         },
         alignment: {
             name: 'alignment',
             control: 'select',
             options: ['left', 'center', 'right'],
             description: 'Allineamento delle tab item',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'left' },
+            }
         },
         fullBorder: {
             name: 'full-border',
@@ -27,8 +47,12 @@ export default {
             if: {
                 arg: 'variant',
                 eq: 'inline'
+            },
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
             }
-        },
+        }
     }
 };
 const Template = (args) => {
@@ -43,7 +67,7 @@ export const TabInline = Template.bind({});
 TabInline.args = {
     tabGroupName: 'Tab 1',
     variant: 'inline',
-    alignment: 'center'
+    alignment: 'center',
 };
 export const TabBoxed = Template.bind({});
 TabBoxed.args = {

package/dist/collection/components/jump-tab/jump-tab.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n },\n alignment: {\n name: 'alignment',\n control: 'select',\n options: ['left', 'center', 'right'],\n description: 'Allineamento delle tab item',\n },\n fullBorder: {\n name: 'full-border',\n control: 'boolean',\n description: 'Se true, il tab ha un bordo inferiore pieno',\n if: {\n arg: 'variant',\n eq: 'inline'\n }\n },\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center' \n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded',\n alignment: 'right'\n};\n\nexport const TabInlineFullBorder = Template.bind({});\nTabInlineFullBorder.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n fullBorder: true \n};\n\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline',\n alignment: 'center'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}
1	+ {"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n table: {\n type: { summary: 'string' },\n },\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'inline' },\n },\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'Se true, tutte le tab item sono disabilitate',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n },\n alignment: {\n name: 'alignment',\n control: 'select',\n options: ['left', 'center', 'right'],\n description: 'Allineamento delle tab item',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'left' },\n }\n },\n fullBorder: {\n name: 'full-border',\n control: 'boolean',\n description: 'Se true, il tab ha un bordo inferiore pieno',\n if: {\n arg: 'variant',\n eq: 'inline'\n },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n }\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded',\n alignment: 'right'\n};\n\nexport const TabInlineFullBorder = Template.bind({});\nTabInlineFullBorder.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n fullBorder: true \n};\n\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline',\n alignment: 'center'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}

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

@@ -33,13 +33,23 @@
 :host .Content.inline {
   color: var(--jump-tabitem-color);
   padding: 12px 24px;
+  border-bottom: 1px solid var(--jump-tabitem-hover-color);
+}
+:host .Content.inline:not(.active) {
+  padding-bottom: 14px;
 }
 :host .Content.inline.active {
   color: var(--jump-tabitem-active-color);
+  border-bottom: 3px solid var(--jump-tabitem-active-color);
 }
 :host .Content.inline.active span {
   font-weight: bold;
 }
+:host .Content.inline:hover:not(.disabled):not(.active) {
+  border-bottom: 3px solid var(--jump-tabitem-hover-color);
+  cursor: pointer;
+  padding-bottom: 12px;
+}
 :host .Content.boxed {
   color: var(--jump-tabitem-color);
   padding: 15px 39px;
@@ -96,17 +106,4 @@
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
-}
-:host(.inline) {
-  border-bottom: 1px solid var(--jump-tabitem-hover-color);
-}
-:host(.inline):hover:not(.disabled):not(.active) {
-  border-bottom: 3px solid var(--jump-tabitem-hover-color);
-  cursor: pointer;
-}
-:host(.inline.active) {
-  border-bottom: 3px solid var(--jump-tabitem-active-color);
 }

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

@@ -18,8 +18,8 @@ export class JumpTabItem {
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '4dc150c666d0387bb0fe8215837a45050deee930', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: 'ef7ea196d84f892abad92c7c28cde1fcbc3b9573', 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: '9c4b48264448f202cb514e63b236aa5dbe44dd11', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '62429460a5e9204775f54be22a713453c276eb0a', class: "label" }, this.label))));
+        return (h(Host, { key: '12f5601927e8d4379e3d32a076f135a0674c06e6', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: '07784f29f22f3f641c2f8b5bc5f38ef04695fc59', 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: '2275bff4b7372974ed6f72480a474b516674668f', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '19bea27cf5056cbf221e6784aa206036f54ae6d4', 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 CHANGED Viewed

@@ -5,7 +5,7 @@ export class JumpTabPanel {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '14fc22857d3f935d1a573375d0bae6267d616099', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '6e690078d627fd44b8542a2979b0a53ad9ba5d2c', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '41c5be2ee7a664d028d781e9c48f7feca1d25bf7' }))));
+        return (h(Host, { key: '04e7e69fddb9e20a702e1811c3ed0ac948304362', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '3ca5c246a4bdb03c725d0c7df1b5b7cf1560abba', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '45f0678c6415e2797f7b751c33ef18ccaccab306' }))));
     }
     static get is() { return "jump-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/jump-search-bar.d.ts ADDED Viewed

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

package/dist/components/jump-search-bar.js ADDED Viewed

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './jump-button2.js';
+import { d as defineCustomElement$2 } from './jump-icon2.js';
+const jumpSearchBarCss = ":host{display:flex;--jump-search-bar-focus-color:var(--secondary-standard, #5E79BA);--jump-search-bar-border-color:var(--neutral-grey-secondary, #707070);--jump-search-bar-bg-color:var(--gray-ultralight, #F8F8F8)}:host jump-button{--jump-button-border-radius:0px 3px 3px 0px}:host input{width:100%}:host(.manual.outline) input{border-radius:3px 0px 0px 3px;border:1px solid var(--jump-search-bar-border-color);padding:12px}:host(.manual.outline) input:focus-visible{outline:2px solid var(--jump-search-bar-focus-color);outline-offset:-2px}:host(.auto.outline) input{border-radius:3px;border:1px solid var(--jump-search-bar-border-color);padding:12px;padding-left:35px;background:url(\"data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E\") no-repeat left;background-size:14px;background-position:10px center}:host(.auto.outline) input:focus-visible{outline:2px solid var(--jump-search-bar-focus-color);outline-offset:-2px;background:url('data:image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z\" fill=\"%235E79BA\"/></svg>') no-repeat left !important;background-size:14px !important;background-position:10px center !important}:host(.auto.linear) input.search-input{border:none;border-bottom:1px solid var(--jump-search-bar-border-color);padding:8px 5px 8px 0;padding-left:35px;background:url(\"data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E\") no-repeat left;background-size:14px;background-position:10px center}:host(.auto.linear) input:focus-visible{outline:2px solid var(--jump-search-bar-focus-color);outline-offset:-2px;background:url('data:image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z\" fill=\"%235E79BA\"/></svg>') no-repeat left !important;background-size:14px !important;background-position:10px center !important}:host(.auto.filled) input.search-input{border:none;border-radius:3px;padding:12px;padding-left:35px;background:url(\"data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E\") no-repeat left;background-size:14px;background-position:10px center;background-color:var(--jump-search-bar-bg-color)}";
+const JumpSearchBarStyle0 = jumpSearchBarCss;
+const JumpSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.search = createEvent(this, "jump-search-bar", 7);
+        /* ---------------------- @LIFECYCLE ------------------------- */
+        /* -------------------- @LISTEN ------------------------------- */
+        /* -------------------- @METHOD ------------------------------- */
+        /* -------------------- LOCAL METHODS ------------------------- */
+        /**
+         * se searchType == 'manual' l'utente deve cliccare sul pulsante per eseguire la funzione
+         * se searchType == 'auto' la funzione viene eseguita automaticamente al termine della digitazione
+         */
+        this.doSearch = () => {
+            if (this.jumpSearchBar) {
+                const searchValue = this.jumpSearchBar.value;
+                console.log('doSearch', searchValue);
+                this.search.emit({ search: searchValue });
+            }
+        };
+        this.placeholder = 'Cerca...';
+        this.identifier = 'search-bar';
+        this.debounceTime = 500;
+        this.searchType = 'auto' ;
+        this.variant = 'outline'  ;
+    }
+    /** Used to filters/searchbar */
+    debounce(fn, delay = this.debounceTime) {
+        let timeoutId;
+        return (...args) => {
+            // cancel the previous timer
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            // setup a new timer
+            timeoutId = setTimeout(() => {
+                fn.apply(null, args);
+            }, delay);
+        };
+    }
+    ;
+    /* -------------------- RENDER ------------------------- */
+    render() {
+        return (h(Host, { key: 'efa1c6cdd7f2cb5d22b50707aee020bab23609b0', class: "JumpSearchBar " + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + " " + this.variant)) }, h("input", { key: '823778b4c704a72ff14662dff408b41b4fe79fb1', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.searchType === 'auto' ? this.debounce(this.doSearch) : undefined }), this.searchType === 'manual' &&
+            h("jump-button", { key: '8f940966131504f605b0aadb272e0c590fb2b32f', variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.doSearch() }, h("jump-icon", { key: 'df8a23cd6a3b8374bfb18fc2a9061ef4af5f887a', slot: "suffix", name: "magnifying-glass" }))));
+    }
+    static get style() { return JumpSearchBarStyle0; }
+}, [1, "jump-search-bar", {
+        "placeholder": [1],
+        "identifier": [1],
+        "debounceTime": [2, "debounce-time"],
+        "searchType": [1, "search-type"],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-search-bar", "jump-button", "jump-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-search-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpSearchBar$1);
+            }
+            break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const JumpSearchBar = JumpSearchBar$1;
+const defineCustomElement = defineCustomElement$1;
+export { JumpSearchBar, defineCustomElement };
+//# sourceMappingURL=jump-search-bar.js.map