npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.0 → 0.3.2 - Mend

@jumpgroup/jump-design-system 0.3.0 → 0.3.2

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 (177) hide show

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

@@ -4,7 +4,7 @@ export class JumpQuantity {
         this.min = 1;
         this.max = undefined;
         this.step = 1;
-        this.label = 'Quantità';
+        this.label = '';
         this.type = 'buttons';
         this.variant = 'vertical';
         this.showButtons = true;
@@ -17,6 +17,15 @@ export class JumpQuantity {
         });
         this.internals.setFormValue(newValue);
     }
+    /**
+     * Get the current value
+     */
+    async getValue() {
+        return this.value;
+    }
+    async reset() {
+        this.value = this.min;
+    }
     componentWillLoad() {
         this.value = this.min;
         this.internals.setFormValue(this.value);
@@ -26,7 +35,6 @@ export class JumpQuantity {
         this.internals.setFormValue('');
     }
     handleChange(event) {
-        // console.log(event.target.value);
         this.value = event.target.value;
     }
     //avoid user can change the value below the min
@@ -36,11 +44,11 @@ export class JumpQuantity {
         }
     }
     render() {
-        return (h(Host, { key: '3c14e68a630e8f8ce14b61b119a141b26d1250d1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'd3012ea3d7d21ec7433ec223f9b55d9547337f57' }, this.label), h("div", { key: '6d637b7fe69f1712f48587003ac491a7d63b54dc', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            h("jump-button", { key: 'a9a3d9368fb78dc4c060190d0069466611963995', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, "-"), h("input", { key: '9e728cdf29440f52d706e9e62961d0e2918cd3d8', ref: (el) => {
+        return (h(Host, { key: '2101c7f3d3f54d29b42659466f9b77f8ad9287c9', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '3e4e1c3e0675283ce6db21877d9e4260c7a2df38' }, this.label), h("div", { key: 'cdcbb08e5d778611d8d50aa38f8900ae7117a166', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            h("jump-button", { key: '70a2656261fbaea52d673ccbca513e0e76b2985b', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '5bb00edd0aa996f27cf4b34d130e5217ef2a7041', library: "lucide", name: "minus", size: "small" })), h("input", { key: '879bfdbc9ddcba94dc9bb478b5c5fb6c17d10389', ref: (el) => {
                 this.inputEl = el;
             }, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
-            h("jump-button", { key: 'cad00efcd74d365d4e9ffb17c6d366b830f2522b', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": this.value >= this.max }, !this.max || this.value < this.max ? '+' : ''))));
+            h("jump-button", { key: '4fc5ea8736ccf4a17397b55c06db4d5a024792ab', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, h("jump-icon", { key: 'a2b77881cac77552fedcc14a5507a1b5c722addc', library: "lucide", name: "plus", size: "small" })))));
     }
     static get is() { return "jump-quantity"; }
     static get encapsulation() { return "shadow"; }
@@ -126,7 +134,7 @@ export class JumpQuantity {
                 },
                 "attribute": "label",
                 "reflect": false,
-                "defaultValue": "'Quantit\u00E0'"
+                "defaultValue": "''"
             },
             "type": {
                 "type": "string",
@@ -181,14 +189,26 @@ export class JumpQuantity {
                 "attribute": "show-buttons",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "value": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "change",
@@ -207,6 +227,44 @@ export class JumpQuantity {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Get the current value",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,~~KAAK~~,EAAE,~~eAAe~~,EAAE,~~KAAK~~,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;~~AAQxG~~,MAAM,OAAO,YAAY;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,~~UAAU~~;~~oBACe~~,SAAS;uBACb,UAAU;2BACxB,IAAI;;;~~IASnC~~,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,~~mCAAmC;QACnC,~~IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,+CAA+C;IAC/C,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACxB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW;YACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS;YAC1C,4DAAK,KAAK,EAAE,6BAA6B;~~gBACtC~~,IAAI,CAAC,WAAW;~~oBACf~~,oEAAa,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,~~QAI7B~~;gBAChB,8DAAO,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;wBACjB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;oBACpB,CAAC,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC;gBACD,IAAI,CAAC,WAAW;oBACf,oEAAa,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,~~eACnB~~,~~IAAI~~,~~CAAC~~,~~KAAK~~,~~IAAI~~,IAAI,~~CAAC~~,~~GAAG~~,~~IAC5C~~,~~CAAC,~~IAAI,~~CAAC~~,~~GAAG~~,~~IAAI~~,~~IAAI~~,~~CAAC~~,~~KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAe,CAC5D,~~CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, ~~State,~~ AttachInternals, Watch, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '~~Quantità~~';\n @Prop() type: 'buttons' \| 'dropdown' \| 'input' = 'buttons';\n @Prop() variant: 'vertical' \| 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n\n @Event({ eventName: 'jump-change' }) change;\n\n ~~@State() value;\n\n~~ inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value);\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n ~~// console.log(event.target.value);\n~~ this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'\n >\n ~~-\n {/{this.value~~ > ~~this.min~~ ~~? '~~-~~' : ''}/}\~~n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'\n ~~only~~-icon~~={this.value~~ >= ~~this.max}~~\n ~~>{!this.max \|\| this.value < this.max ? '+' : ''}~~</jump-button>}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' \| 'dropdown' \| 'input' = 'buttons';\n @Prop() variant: 'vertical' \| 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /*\n Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value);\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,15 +1,12 @@
 :host {
   display: block;
-}
-.JumpTab {
   --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);
 }
-.JumpTab__Wrapper {
+:host .Wrapper {
   display: flex;
   width: fit-content;
 }
-.JumpTab__Wrapper.rounded {
+:host .Wrapper.rounded {
   border-radius: 50px;
   background-color: #f8f8f8;
 }

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

@@ -72,7 +72,7 @@ export class JumpTab {
         }
     }
     render() {
-        return (h(Host, { key: '5adce348b75c58349a4ff443cf2f6b39b646722f', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'dcfe4b594261f40f91bff6fba243fcc2c9d19368', class: "JumpTab__Wrapper " + this.variant }, h("slot", { key: 'ce9cf25e3d5566a2e52469aafeeac6392862c348', name: "tab-item" })), h("div", { key: 'a396fbb89c2299c2cee8b9bd1828ad70faf3caee' }, h("slot", { key: '34f95fe28043b74be2cdba5e0253e50c9326bf01', name: "tab-content" }))));
+        return (h(Host, { key: '325ebf63677d7b1307ebb5be3d521d06efa22a5a', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'afa4eb17c8582aa59f8f3b55237de34fa04871d5', class: "Wrapper " + this.variant }, h("slot", { key: '69023d9ae6ae85ef8270d7c8ea4c881c60889f63', name: "tab-item" })), h("div", { key: '28257b0f8de4c3ef1b7dd7adb58dc2d0ce342164' }, h("slot", { key: '3097cf4876730499e2067aed722ff822582e173f', name: "tab-content" }))));
     }
     static get is() { return "jump-tab"; }
     static get encapsulation() { return "shadow"; }

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":"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~~IAKD~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAA,CAAC;YAC9E,4DAAK,KAAK,EAAE,~~mBAAmB~~,GAAG,IAAI,CAAC,OAAO;~~gBAC5C~~,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;YACN;gBACE,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,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() 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 console.log('Component has been rendered');\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~~\n\n\n~~ render() {\n return (\n <Host class=\"JumpTab\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div class={\"~~JumpTab__Wrapper~~ \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\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() 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 console.log('Component has been rendered');\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\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \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 </Host>\n );\n }\n}"]}

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

@@ -19,9 +19,9 @@ export default {
 const Template = (args) => {
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-tab ${attributes}>
-            <jump-tab-item identifier="tab1" variant=${args.variant} active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab2" variant=${args.variant}  label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab3" variant=${args.variant} label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab1" variant=${args.variant} active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab2" variant=${args.variant}  label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab3" variant=${args.variant} label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
     </jump-tab>`);
 };
 export const TabInline = Template.bind({});
@@ -42,9 +42,9 @@ TabRounded.args = {
 const TemplateDisabled = (args) => {
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-tab ${attributes}>
-        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab3" disabled label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab3" disabled label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
     </jump-tab>`);
 };
 export const OneTabDisabled = TemplateDisabled.bind({});
@@ -56,10 +56,10 @@ const TemplateWithListenerExample = (args, data) => {
     let id = data.id;
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<div style="background-color: #EEEEEE; padding: 2rem;"><jump-tab ${attributes}>
-        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab3" label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab4" label="Tab 4" icon-name="settings" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab3" label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab4" label="Tab 4" icon-name="gear" slot="tab-item"></jump-tab-item>
         </jump-tab>
         <div>La tab attiva ha l'id: <span id="active-tab">loading..<span></div>
         </div>
@@ -102,9 +102,9 @@ const TemplateWithPanel = (args, data) => {
     let id = data.id;
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-tab ${attributes}>
-            <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab2" label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab3" label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab2" label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab3" label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
             <jump-tab-panel identifier="tab1" active slot="tab-content">Tab 1 content</jump-tab-panel>
             <jump-tab-panel identifier="tab2" slot="tab-content">Tab 2 content</jump-tab-panel>
             <jump-tab-panel identifier="tab3" slot="tab-content">Tab 3 content</jump-tab-panel>

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 }\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=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"~~settings~~\" 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};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded'\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=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"~~settings~~\" 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};\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=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"~~settings~~\" 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};\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=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"~~settings~~\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"~~settings~~\" 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":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,YAAY,EAAE;YACV,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACtC;QACD,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC;YAChD,WAAW,EAAE,sCAAsC;SACtD;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACrD,OAAO,UAAU,CAAC,aAAa,UAAU;uDACU,IAAI,CAAC,OAAO;uDACZ,IAAI,CAAC,OAAO;uDACZ,IAAI,CAAC,OAAO;gBACnD,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACZ,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,OAAO;CACnB,CAAC;AAGF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACd,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAC9B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,aAAa,UAAU;;;;gBAI7B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,cAAc,CAAC,IAAI,GAAG;IAClB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IAC/C,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oEAAoE,UAAU;;;;;;;;;;8DAUtC,EAAE;;;;;;;kBAO9C,CAAC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,qBAAqB,CAAC,IAAI,GAAG;IACzB,YAAY,EAAE,WAAW;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzE,oBAAoB,CAAC,IAAI,GAAG;IACxB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,qBAAqB,CAAC,IAAI,GAAG;IACzB,YAAY,EAAE,YAAY;IAC1B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzE,oBAAoB,CAAC,IAAI,GAAG;IACxB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAC,IAAI,EAAE,EAAE;IACpC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,aAAa,UAAU;;;;;;;;;;8DAUiB,EAAE;;;;;;;;SAQvD,CAAC,CAAC;AACX,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7D,kBAAkB,CAAC,IAAI,GAAG;IACtB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,SAAS;CACrB,CAAC","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 }\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};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded'\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};\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};\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-boxed.stories.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
-import feather from "feather-icons";
 export default {
     title: 'Components/Tab/Item/Boxed',
     tags: ['autodocs'],
@@ -16,9 +15,8 @@ export default {
         },
         iconName: {
             name: 'icon-name',
-            control: 'select',
-            options: Object.keys(feather.icons),
-            description: 'Nome dell\'icona'
+            control: 'text',
+            description: "Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>"
         },
         iconPosition: {
             name: 'icon-position',
@@ -47,7 +45,7 @@ const Template = (args) => {
 export const TabBoxedItem = Template.bind({});
 TabBoxedItem.args = {
     label: 'Tab1',
-    iconName: 'settings',
+    iconName: 'gear',
     iconPosition: 'left',
     active: true,
     identifier: 'tab1',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab-item-boxed.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-boxed.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;~~AAC1E~~,~~OAAO,OAAO,MAAM,~~eAAe~~,CAAC~~;~~AAEpC,eAAe;~~IACX,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;~~QACL~~,UAAU,EAAE;~~YACT~~,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,~~QAAQ;YACjB,OAAO,EAAE,~~MAAM~~,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC~~;~~YACnC~~,WAAW,EAAE,~~kBAAkB~~;~~SAClC~~;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,~~UAAU~~;~~IACpB~~,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\~~nimport feather from 'feather-icons';\~~n\nexport default {\n title: 'Components/Tab/Item/Boxed',\n tags: ['autodocs'],\n argTypes: {\n identifier: {\n name: 'identifier',\n control: 'text',\n description: 'Identificatore della tab',\n },\n label: {\n name: 'label',\n control: 'text',\n description: 'Label della tab',\n },\n iconName: { \n name: 'icon-name',\n control: '~~select~~',\n ~~options: Object.keys(feather.icons),\n~~ description: '~~Nome~~ ~~dell\\~~'~~icona~~'\n },\n iconPosition: {\n name: 'icon-position',\n control: 'select',\n options: ['left', 'top'],\n description: 'Posizione dell\\'icona'\n },\n active: {\n name: 'active',\n control: 'boolean',\n description: 'Tab attiva'\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'Tab disabilitata'\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab variant=\"boxed\" tab-group-name=\"tabBoxed\">\n <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabBoxedItem = Template.bind({});\nTabBoxedItem.args = {\n label: 'Tab1',\n iconName: '~~settings~~',\n iconPosition: 'left',\n active: true,\n identifier: 'tab1',\n disabled: false\n};"]}
1	+ {"version":3,"file":"jump-tab-item-boxed.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-boxed.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kGAAkG;SAClH;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Item/Boxed',\n tags: ['autodocs'],\n argTypes: {\n identifier: {\n name: 'identifier',\n control: 'text',\n description: 'Identificatore della tab',\n },\n label: {\n name: 'label',\n control: 'text',\n description: 'Label della tab',\n },\n iconName: { \n name: 'icon-name',\n control: 'text',\n description: \"Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>\"\n },\n iconPosition: {\n name: 'icon-position',\n control: 'select',\n options: ['left', 'top'],\n description: 'Posizione dell\\'icona'\n },\n active: {\n name: 'active',\n control: 'boolean',\n description: 'Tab attiva'\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'Tab disabilitata'\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab variant=\"boxed\" tab-group-name=\"tabBoxed\">\n <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabBoxedItem = Template.bind({});\nTabBoxedItem.args = {\n label: 'Tab1',\n iconName: 'gear',\n iconPosition: 'left',\n active: true,\n identifier: 'tab1',\n disabled: false\n};"]}

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

@@ -1,5 +1,4 @@
 import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
-import feather from "feather-icons";
 export default {
     title: 'Components/Tab/Item/Inline',
     tags: ['autodocs'],
@@ -16,9 +15,8 @@ export default {
         },
         iconName: {
             name: 'icon-name',
-            control: 'select',
-            options: Object.keys(feather.icons),
-            description: 'Nome dell\'icona'
+            control: 'text',
+            description: "Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>"
         },
         iconPosition: {
             name: 'icon-position',
@@ -47,7 +45,7 @@ const Template = (args) => {
 export const TabItem = Template.bind({});
 TabItem.args = {
     label: 'Tab1',
-    iconName: 'settings',
+    iconName: 'gear',
     iconPosition: 'left',
     active: true,
     variant: 'inline',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab-item-inline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-inline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;~~AAC1E~~,~~OAAO,OAAO,MAAM,~~eAAe~~,CAAC~~;~~AAEpC,eAAe;~~IACX,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;~~QACD~~,QAAQ,EAAE;~~YACN~~,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,~~QAAQ;YACjB,OAAO,EAAE,~~MAAM~~,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC~~;~~YACnC~~,WAAW,EAAE,~~kBAAkB~~;~~SAClC~~;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,~~UAAU~~;~~IACpB~~,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\~~nimport feather from 'feather-icons';\~~n\nexport default {\n title: 'Components/Tab/Item/Inline',\n tags: ['autodocs'],\n argTypes: {\n identifier: {\n name: 'identifier',\n control: 'text',\n description: 'Identificatore della tab',\n },\n label: {\n name: 'label',\n control: 'text',\n description: 'Label della tab',\n },\n iconName: { \n name: 'icon-name',\n control: '~~select~~',\n ~~options: Object.keys(feather.icons),\n~~ description: '~~Nome~~ ~~dell\\~~'~~icona~~'\n },\n iconPosition: {\n name: 'icon-position',\n control: 'select',\n options: ['left', 'top'],\n description: 'Posizione dell\\'icona'\n },\n active: {\n name: 'active',\n control: 'boolean',\n description: 'Tab attiva'\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'Tab disabilitata'\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab variant=\"inline\" tab-group-name=\"tabInline\">\n <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabItem = Template.bind({});\nTabItem.args = {\n label: 'Tab1',\n iconName: '~~settings~~',\n iconPosition: 'left',\n active: true,\n variant: 'inline',\n disabled: false\n};"]}
1	+ {"version":3,"file":"jump-tab-item-inline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-inline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACF,QAAQ,EAAE;YACL,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kGAAkG;SAClH;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Item/Inline',\n tags: ['autodocs'],\n argTypes: {\n identifier: {\n name: 'identifier',\n control: 'text',\n description: 'Identificatore della tab',\n },\n label: {\n name: 'label',\n control: 'text',\n description: 'Label della tab',\n },\n iconName: { \n name: 'icon-name',\n control: 'text',\n description: \"Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>\"\n },\n iconPosition: {\n name: 'icon-position',\n control: 'select',\n options: ['left', 'top'],\n description: 'Posizione dell\\'icona'\n },\n active: {\n name: 'active',\n control: 'boolean',\n description: 'Tab attiva'\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'Tab disabilitata'\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab variant=\"inline\" tab-group-name=\"tabInline\">\n <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabItem = Template.bind({});\nTabItem.args = {\n label: 'Tab1',\n iconName: 'gear',\n iconPosition: 'left',\n active: true,\n variant: 'inline',\n disabled: false\n};"]}

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

@@ -1,8 +1,5 @@
 :host {
   display: block;
-}
-.JumpTabItem {
   --jump-tabitem-active-color: var(--secondary-standard);
   --jump-tabitem-color: var(--neutral-grey-secondary);
   --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);
@@ -10,17 +7,7 @@
   --jump-tabitem-rounded-bg-color: white;
   font-family: var(--ff-primary);
 }
-.JumpTabItem.inline {
-  border-bottom: 1px solid var(--jump-tabitem-hover-color);
-}
-.JumpTabItem.inline:hover:not(.disabled):not(.active) {
-  border-bottom: 3px solid var(--jump-tabitem-hover-color);
-  cursor: pointer;
-}
-.JumpTabItem.inline.active {
-  border-bottom: 3px solid var(--jump-tabitem-active-color);
-}
-.JumpTabItem__Content {
+:host .Content {
   display: flex;
   /*Tipologia inline */
   /* Tipologia boxed */
@@ -28,82 +15,95 @@
   /** Tipologia sheet */
   /* Disabilitato */
 }
-.JumpTabItem__Content label {
+:host .Content label {
   font-size: 16px;
 }
-.JumpTabItem__Content.left {
+:host .Content.left {
   flex-direction: row;
   gap: 6px;
   align-items: center;
 }
-.JumpTabItem__Content.top {
+:host .Content.top {
   flex-direction: column;
   gap: 2px;
   align-items: center;
 }
-.JumpTabItem__Content.inline {
+:host .Content.inline {
   color: var(--jump-tabitem-color);
   padding: 12px 24px;
 }
-.JumpTabItem__Content.inline.active {
+:host .Content.inline.active {
   color: var(--jump-tabitem-active-color);
 }
-.JumpTabItem__Content.inline.active span {
+:host .Content.inline.active span {
   font-weight: bold;
 }
-.JumpTabItem__Content.boxed {
+:host .Content.boxed {
   color: var(--jump-tabitem-color);
   padding: 15px 39px;
   background-color: transparent;
   border: 1px solid var(--jump-tabitem-boxed-bg-color);
 }
-.JumpTabItem__Content.boxed:hover:not(.disabled), .JumpTabItem__Content.boxed:hover:not(.active) {
+:host .Content.boxed:hover:not(.disabled), :host .Content.boxed:hover:not(.active) {
   background-color: transparent;
 }
-.JumpTabItem__Content.boxed:hover:not(.disabled) span, .JumpTabItem__Content.boxed:hover:not(.active) span {
+:host .Content.boxed:hover:not(.disabled) span, :host .Content.boxed:hover:not(.active) span {
   font-weight: bold;
 }
-.JumpTabItem__Content.boxed.active {
+:host .Content.boxed.active {
   color: var(--jump-tabitem-active-color);
   background-color: var(--jump-tabitem-boxed-bg-color);
   border: 1px solid var(--jump-tabitem-boxed-bg-color);
 }
-.JumpTabItem__Content.boxed.active span {
+:host .Content.boxed.active span {
   font-weight: bold;
 }
-.JumpTabItem__Content.rounded {
+:host .Content.rounded {
   padding: 12px 32px;
   color: var(--jump-tabitem-color);
 }
-.JumpTabItem__Content.rounded:hover:not(.disabled) {
+:host .Content.rounded:hover:not(.disabled) {
   cursor: pointer;
 }
-.JumpTabItem__Content.rounded:hover:not(.disabled) span {
+:host .Content.rounded:hover:not(.disabled) span {
   font-weight: bold;
 }
-.JumpTabItem__Content.rounded.active {
+:host .Content.rounded.active {
   color: var(--jump-tabitem-active-color);
   background-color: var(--jump-tabitem-rounded-bg-color);
   border: 1px solid var(--jump-tabitem-active-color);
   border-radius: 50px;
 }
-.JumpTabItem__Content.sheet {
+:host .Content.sheet {
   padding: 12px 32px;
   color: var(--neutral-grey-secondary);
 }
-.JumpTabItem__Content.sheet:hover:not(.disabled) {
+:host .Content.sheet:hover:not(.disabled) {
   cursor: pointer;
 }
-.JumpTabItem__Content.sheet:hover:not(.disabled) span {
+:host .Content.sheet:hover:not(.disabled) span {
   font-weight: bold;
 }
-.JumpTabItem__Content.sheet.active {
+:host .Content.sheet.active {
   color: var(--jump-tabitem-active-color);
   background-color: var(--jump-tabitem-rounded-bg-color);
   border-radius: 8px 8px 0px 0px;
 }
-.JumpTabItem__Content.disabled {
+:host .Content.disabled {
   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

@@ -19,10 +19,11 @@ export class JumpTabItem {
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '82864ca72b0febf6a25431ad2788b11e80744d57', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '9275613b491731afc823f0c63be2ae797b372fa6', class: "JumpTabItem__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: 'fcd4ab436a0695fdf3ca07f2ca9d1a6343c79d56', class: "small", name: this.iconName }), h("span", { key: '1d518eb336443596c090beafe74b5186f0a1ff37', class: "label" }, this.label))));
+        return (h(Host, { key: '99a63732d7cc75ed92a2b7fb9469a2bf18d75235', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: 'ee7170cae00c17615e5e528bf103aebd9d97b45f', 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: 'd198fc5756bd145454d7298969905e8bcf306b20', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: 'bc008babf73fef929062f127a8eb976405046434', class: "label" }, this.label))));
     }
     static get is() { return "jump-tab-item"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["jump-tab-item.scss"]