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

@jumpgroup/jump-design-system 0.3.36 → 0.3.38

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

package/dist/cjs/jump-tab.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-86f59981.js');
-const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB)}:host .Wrapper{}:host .Wrapper.center{display:flex;justify-content:center;align-items:center}:host .Wrapper.left{display:flex;justify-content:flex-start;align-items:center}:host .Wrapper.right{display:flex;justify-content:flex-end;align-items:center}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}: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}";
+const jumpTabCss = "@charset \"UTF-8\";:host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);}:host .Wrapper{display:flex;flex-direction:column;}:host .Wrapper.center{align-items:center;}:host .Wrapper.left{align-items:flex-start;}:host .Wrapper.right{align-items:flex-end;}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}:host .Wrapper.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}:host .Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}:host .Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color);}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}:host jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
 const JumpTabStyle0 = jumpTabCss;
 const JumpTab = class {
@@ -84,7 +84,7 @@ const JumpTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd266e47e15f07bb230f05248565ade7e0709583a', class: "JumpTab " + (this.variant), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'ce1dcc0a97d3f84e597e1f8d062d5a3c94928607', class: "Wrapper " + this.alignment + " " + (this.fullBorder && 'fullBorder') + " " + (this.variant) }, index.h("div", { key: '67ba27b40f38e2f9192b766c908f3a84df43070d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') }, index.h("slot", { key: '4e62fd0e4f7c145e2aab6d0b370fb11bffe3a7ea', name: "tab-item" })), index.h("div", { key: 'f45e4eb142af620e16d25140e63928a553d11ec5' }, index.h("slot", { key: 'c667c0a89fa1d4a0694b270e298b2a2fc1be0186', name: "tab-content" })))));
+        return (index.h(index.Host, { key: 'e5df1335198a648c93e35cf9f24408468fe76606', class: "JumpTab " + (this.variant), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'ce1dcc0a97d3f84e597e1f8d062d5a3c94928607', class: "Wrapper " + this.alignment + " " + (this.fullBorder && 'fullBorder') + " " + (this.variant) }, index.h("div", { key: '67ba27b40f38e2f9192b766c908f3a84df43070d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') }, index.h("slot", { key: '3c9b77ad255789b14bd3f431051469d2ab244b39', name: "tab-item" })), index.h("div", { key: 'a6c9b804abd0117a527dce762e5be3c6bb47a8f4', class: "ContentWrapper" }, index.h("slot", { key: 'a6f26e14e9b500a348bb885820869574dfe0279d', name: "tab-content" })))));
     }
 };
 JumpTab.style = JumpTabStyle0;

package/dist/cjs/jump-tab.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,~~muBAAmuB~~,CAAC;~~AACvvB~~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~~EAAG~~,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,~~OAAM~~,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,~~EAAC~~,~~IACnGD~~,kEAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,IACtGA,kEAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,~~IAC/EA~~,mEAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACNA,~~oEACEA~~,mEAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,~~CACA~~,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n ~~&.center {\n~~ display: flex;\n ~~justify~~-~~content~~: ~~center~~;\n align-items: center;\n }\n \n &.left {\n ~~display: flex;\n justify~~-~~content~~: flex-start;\n ~~align-items:~~ ~~center;\~~n }\n \n &.right {\n ~~display: flex;\n justify~~-~~content~~: flex-end;\n ~~align-items:~~ ~~center;\~~n }\n\n\n /* Stile fullBorder /\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n\n .Content {\n display: flex;\n width: fit-content;\n \n &.rounded {\n border-radius: 50px;\n background-color: ~~#f8f8f8; // dovrà andarci~~ var(--jump-tab-bg-color)\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n}\n\n\n","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}"],"version":3}
1	+ {"file":"jump-tab.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n display: flex;\n flex-direction: column;\n /* Mantieni l'orientamento verticale per il layout generale /\n\n &.center {\n align-items: center;\n / Allinea orizzontalmente al centro /\n }\n\n &.left {\n align-items: flex-start;\n / Allinea orizzontalmente a sinistra /\n }\n\n &.right {\n align-items: flex-end;\n / Allinea orizzontalmente a destra /\n }\n\n / Stile fullBorder /\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n .Content {\n display: flex;\n flex-direction: row;\n / Mantieni l'orientamento orizzontale /\n align-items: flex-end;\n / Allinea gli item verso il basso /\n width: fit-content;\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n / Usa la variabile CSS /\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n\n / Stili specifici per i titoli delle tab /\n jump-tab-item {\n display: flex;\n align-items: flex-end;\n / Allinea il testo verso il basso /\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\n / Permette la rottura del testo su più righe /\n text-align: center;\n }\n }\n}","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 class=\"ContentWrapper\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}"],"version":3}

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

@@ -1,25 +1,27 @@
+@charset "UTF-8";
 :host {
   display: block;
   --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);
   --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);
+  /* Stili specifici per i titoli delle tab */
 }
 :host .Wrapper {
+  display: flex;
+  flex-direction: column;
+  /* Mantieni l'orientamento verticale per il layout generale */
   /* Stile fullBorder */
 }
 :host .Wrapper.center {
-  display: flex;
-  justify-content: center;
   align-items: center;
+  /* Allinea orizzontalmente al centro */
 }
 :host .Wrapper.left {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
+  /* Allinea orizzontalmente a sinistra */
 }
 :host .Wrapper.right {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+  align-items: flex-end;
+  /* Allinea orizzontalmente a destra */
 }
 :host .Wrapper.fullBorder.inline {
   border-bottom: 1px solid var(--jump-tab-border-color);
@@ -29,14 +31,31 @@
 }
 :host .Content {
   display: flex;
+  flex-direction: row;
+  /* Mantieni l'orientamento orizzontale */
+  align-items: flex-end;
+  /* Allinea gli item verso il basso */
   width: fit-content;
 }
 :host .Content.rounded {
   border-radius: 50px;
-  background-color: #f8f8f8;
+  background-color: var(--jump-tab-bg-color);
+  /* Usa la variabile CSS */
 }
 :host .Content.disabled {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
+}
+:host jump-tab-item {
+  display: flex;
+  align-items: flex-end;
+  /* Allinea il testo verso il basso */
+  overflow: hidden;
+}
+:host jump-tab-item .tab-title {
+  display: block;
+  white-space: normal;
+  /* Permette la rottura del testo su più righe */
+  text-align: center;
 }

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

@@ -74,7 +74,7 @@ export class JumpTab {
         }
     }
     render() {
-        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" })))));
+        return (h(Host, { key: 'e5df1335198a648c93e35cf9f24408468fe76606', 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: '3c9b77ad255789b14bd3f431051469d2ab244b39', name: "tab-item" })), h("div", { key: 'a6c9b804abd0117a527dce762e5be3c6bb47a8f4', class: "ContentWrapper" }, h("slot", { key: 'a6f26e14e9b500a348bb885820869574dfe0279d', 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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~~EAAG~~,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,~~GAAE~~,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,~~CAAA~~,CAAC;~~YACnG~~,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtG,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;~~oBAC/E~~,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() 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}"]}
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 class=\"ContentWrapper\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}"]}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB)}:host .Wrapper{}:host .Wrapper.center{display:flex;justify-content:center;align-items:center}:host .Wrapper.left{display:flex;justify-content:flex-start;align-items:center}:host .Wrapper.right{display:flex;justify-content:flex-end;align-items:center}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}: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}";
+const jumpTabCss = "@charset \"UTF-8\";:host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);}:host .Wrapper{display:flex;flex-direction:column;}:host .Wrapper.center{align-items:center;}:host .Wrapper.left{align-items:flex-start;}:host .Wrapper.right{align-items:flex-end;}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}:host .Wrapper.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}:host .Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}:host .Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color);}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}:host jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
 const JumpTabStyle0 = jumpTabCss;
 const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLElement {
@@ -82,7 +82,7 @@ const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLEle
         }
     }
     render() {
-        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" })))));
+        return (h(Host, { key: 'e5df1335198a648c93e35cf9f24408468fe76606', 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: '3c9b77ad255789b14bd3f431051469d2ab244b39', name: "tab-item" })), h("div", { key: 'a6c9b804abd0117a527dce762e5be3c6bb47a8f4', class: "ContentWrapper" }, h("slot", { key: 'a6f26e14e9b500a348bb885820869574dfe0279d', name: "tab-content" })))));
     }
     static get style() { return JumpTabStyle0; }
 }, [1, "jump-tab", {

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

	@@ -1 +1 @@
1	- {"file":"jump-tab.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~muBAAmuB~~,CAAC;~~AACvvB~~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~~EAAG~~,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,~~OAAM~~,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,~~EAAC~~,~~IACnG~~,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,IACtG,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,~~IAC/E~~,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,~~8DACE~~,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,~~CACA~~,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpTab"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n ~~&.center {\n~~ display: flex;\n ~~justify~~-~~content~~: ~~center~~;\n align-items: center;\n }\n \n &.left {\n ~~display: flex;\n justify~~-~~content~~: flex-start;\n ~~align-items:~~ ~~center;\~~n }\n \n &.right {\n ~~display: flex;\n justify~~-~~content~~: flex-end;\n ~~align-items:~~ ~~center;\~~n }\n\n\n /* Stile fullBorder /\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n\n .Content {\n display: flex;\n width: fit-content;\n \n &.rounded {\n border-radius: 50px;\n background-color: ~~#f8f8f8; // dovrà andarci~~ var(--jump-tab-bg-color)\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n}\n\n\n","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}"],"version":3}
1	+ {"file":"jump-tab.js","mappings":"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","names":["JumpTab"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n display: flex;\n flex-direction: column;\n /* Mantieni l'orientamento verticale per il layout generale /\n\n &.center {\n align-items: center;\n / Allinea orizzontalmente al centro /\n }\n\n &.left {\n align-items: flex-start;\n / Allinea orizzontalmente a sinistra /\n }\n\n &.right {\n align-items: flex-end;\n / Allinea orizzontalmente a destra /\n }\n\n / Stile fullBorder /\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n .Content {\n display: flex;\n flex-direction: row;\n / Mantieni l'orientamento orizzontale /\n align-items: flex-end;\n / Allinea gli item verso il basso /\n width: fit-content;\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n / Usa la variabile CSS /\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n\n / Stili specifici per i titoli delle tab /\n jump-tab-item {\n display: flex;\n align-items: flex-end;\n / Allinea il testo verso il basso /\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\n / Permette la rottura del testo su più righe /\n text-align: center;\n }\n }\n}","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 class=\"ContentWrapper\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}"],"version":3}

package/dist/esm/jump-tab.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94d133e.js';
-const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB)}:host .Wrapper{}:host .Wrapper.center{display:flex;justify-content:center;align-items:center}:host .Wrapper.left{display:flex;justify-content:flex-start;align-items:center}:host .Wrapper.right{display:flex;justify-content:flex-end;align-items:center}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}: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}";
+const jumpTabCss = "@charset \"UTF-8\";:host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);}:host .Wrapper{display:flex;flex-direction:column;}:host .Wrapper.center{align-items:center;}:host .Wrapper.left{align-items:flex-start;}:host .Wrapper.right{align-items:flex-end;}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}:host .Wrapper.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}:host .Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}:host .Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color);}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}:host jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
 const JumpTabStyle0 = jumpTabCss;
 const JumpTab = class {
@@ -80,7 +80,7 @@ const JumpTab = class {
         }
     }
     render() {
-        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" })))));
+        return (h(Host, { key: 'e5df1335198a648c93e35cf9f24408468fe76606', 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: '3c9b77ad255789b14bd3f431051469d2ab244b39', name: "tab-item" })), h("div", { key: 'a6c9b804abd0117a527dce762e5be3c6bb47a8f4', class: "ContentWrapper" }, h("slot", { key: 'a6f26e14e9b500a348bb885820869574dfe0279d', name: "tab-content" })))));
     }
 };
 JumpTab.style = JumpTabStyle0;

package/dist/esm/jump-tab.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-tab.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~muBAAmuB~~,CAAC;~~AACvvB~~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~~EAAG~~,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,~~OAAM~~,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,~~EAAC~~,~~IACnG~~,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,IACtG,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,~~IAC/E~~,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,~~8DACE~~,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,~~CACA~~,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n ~~&.center {\n~~ display: flex;\n ~~justify~~-~~content~~: ~~center~~;\n align-items: center;\n }\n \n &.left {\n ~~display: flex;\n justify~~-~~content~~: flex-start;\n ~~align-items:~~ ~~center;\~~n }\n \n &.right {\n ~~display: flex;\n justify~~-~~content~~: flex-end;\n ~~align-items:~~ ~~center;\~~n }\n\n\n /* Stile fullBorder /\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n\n .Content {\n display: flex;\n width: fit-content;\n \n &.rounded {\n border-radius: 50px;\n background-color: ~~#f8f8f8; // dovrà andarci~~ var(--jump-tab-bg-color)\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n}\n\n\n","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}"],"version":3}
1	+ {"file":"jump-tab.entry.js","mappings":"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","names":[],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n display: flex;\n flex-direction: column;\n /* Mantieni l'orientamento verticale per il layout generale /\n\n &.center {\n align-items: center;\n / Allinea orizzontalmente al centro /\n }\n\n &.left {\n align-items: flex-start;\n / Allinea orizzontalmente a sinistra /\n }\n\n &.right {\n align-items: flex-end;\n / Allinea orizzontalmente a destra /\n }\n\n / Stile fullBorder /\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n .Content {\n display: flex;\n flex-direction: row;\n / Mantieni l'orientamento orizzontale /\n align-items: flex-end;\n / Allinea gli item verso il basso /\n width: fit-content;\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n / Usa la variabile CSS /\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n\n / Stili specifici per i titoli delle tab /\n jump-tab-item {\n display: flex;\n align-items: flex-end;\n / Allinea il testo verso il basso /\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\n / Permette la rottura del testo su più righe /\n text-align: center;\n }\n }\n}","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 class=\"ContentWrapper\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}"],"version":3}

package/dist/jump-design-system/jump-design-system.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-d4c681a4.js";export{s as setNonce}from"./p-d4c681a4.js";import{g as a}from"./p-e1255160.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-b72b9130",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}],[1,"jump-icon",{class:[1],library:[1],name:[1],category:[1],size:[1],label:[1],src:[1]}]]],["p-1a7387af",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],favoriteHref:[1,"favorite-href"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],setPrice:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-5e08bb4a",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],activeFilters:[32],showMobileFilters:[32],isMobile:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-7ca6b546",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-81fdf870",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-dbff34ba",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-80d94f0f",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32],elPerPage:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-883548ea",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],currentValue:[32],getValue:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-96e7d098",[[1,"jump-search-bar",{placeholder:[1],identifier:[1],debounceTime:[2,"debounce-time"],searchType:[1,"search-type"],variant:[1]}]]],["p-8e0e49fb",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-ad0de120",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-34cd550e",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6872b29d",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-aedff4de",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-cf8832ed",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-5b680303",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-9defb660",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-7e81b433",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]]],e)}));
+import{p as e,b as t}from"./p-d4c681a4.js";export{s as setNonce}from"./p-d4c681a4.js";import{g as a}from"./p-e1255160.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-b72b9130",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}],[1,"jump-icon",{class:[1],library:[1],name:[1],category:[1],size:[1],label:[1],src:[1]}]]],["p-1a7387af",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],favoriteHref:[1,"favorite-href"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],setPrice:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-5e08bb4a",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],activeFilters:[32],showMobileFilters:[32],isMobile:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-7ca6b546",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-81fdf870",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-dbff34ba",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-80d94f0f",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32],elPerPage:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-883548ea",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],currentValue:[32],getValue:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-96e7d098",[[1,"jump-search-bar",{placeholder:[1],identifier:[1],debounceTime:[2,"debounce-time"],searchType:[1,"search-type"],variant:[1]}]]],["p-8e0e49fb",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-ad0de120",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-34cd550e",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6872b29d",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-aedff4de",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-cf8832ed",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-59f4162f",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-9defb660",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-7e81b433",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]]],e)}));
 //# sourceMappingURL=jump-design-system.esm.js.map

package/dist/jump-design-system/p-59f4162f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as i,H as a}from"./p-d4c681a4.js";const s='@charset "UTF-8";:host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);}:host .Wrapper{display:flex;flex-direction:column;}:host .Wrapper.center{align-items:center;}:host .Wrapper.left{align-items:flex-start;}:host .Wrapper.right{align-items:flex-end;}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}:host .Wrapper.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}:host .Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}:host .Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color);}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}:host jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}';const o=s;const r=class{constructor(i){e(this,i);this.setActiveTab=t(this,"jump-change-activetab",7);this.disabled=false;this.alignment="left";this.fullBorder=false;this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const i=t.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){a.forEach(((e,s)=>{if(e!==t&&s!==a.length-1){e.style.borderRight=`1px solid ${i}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let s=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let i=this.JumpTabEl.querySelectorAll("jump-tab-item");if(i.length>0){i.forEach(((e,a)=>{if(a===i.length-1\|\|e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return i(a,{key:"e5df1335198a648c93e35cf9f24408468fe76606",class:"JumpTab "+this.variant,id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},i("div",{key:"ce1dcc0a97d3f84e597e1f8d062d5a3c94928607",class:"Wrapper "+this.alignment+" "+(this.fullBorder&&"fullBorder")+" "+this.variant},i("div",{key:"67ba27b40f38e2f9192b766c908f3a84df43070d",class:"Content "+this.variant+" "+(this.disabled?"disabled":"")},i("slot",{key:"3c9b77ad255789b14bd3f431051469d2ab244b39",name:"tab-item"})),i("div",{key:"a6c9b804abd0117a527dce762e5be3c6bb47a8f4",class:"ContentWrapper"},i("slot",{key:"a6f26e14e9b500a348bb885820869574dfe0279d",name:"tab-content"}))))}};r.style=o;export{r as jump_tab};
2	+ //# sourceMappingURL=p-59f4162f.entry.js.map

package/dist/jump-design-system/p-59f4162f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["jumpTabCss","JumpTabStyle0","JumpTab","undefined","changeActiveTabHandler","event","this","setActiveTab","emit","detail","rootStyles","getComputedStyle","document","documentElement","primaryColor","getPropertyValue","trim","items","JumpTabEl","querySelectorAll","length","forEach","item","getAttribute","id","setAttribute","variant","sibling","index","style","borderRight","previousSibling","previousElementSibling","removeAttribute","panel","componentDidLoad","classList","contains","render","h","Host","key","class","tabGroupName","ref","el","alignment","fullBorder","disabled","name"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n display: flex;\n flex-direction: column;\n /* Mantieni l'orientamento verticale per il layout generale */\n\n &.center {\n align-items: center;\n /* Allinea orizzontalmente al centro */\n }\n\n &.left {\n align-items: flex-start;\n /* Allinea orizzontalmente a sinistra */\n }\n\n &.right {\n align-items: flex-end;\n /* Allinea orizzontalmente a destra */\n }\n\n /* Stile fullBorder */\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n .Content {\n display: flex;\n flex-direction: row;\n /* Mantieni l'orientamento orizzontale */\n align-items: flex-end;\n /* Allinea gli item verso il basso */\n width: fit-content;\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n /* Usa la variabile CSS */\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n\n /* Stili specifici per i titoli delle tab */\n jump-tab-item {\n display: flex;\n align-items: flex-end;\n /* Allinea il testo verso il basso */\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\n /* Permette la rottura del testo su più righe */\n text-align: center;\n }\n }\n}","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 class=\"ContentWrapper\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}"],"mappings":"yDAAA,MAAMA,EAAa,k4BACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,2FAIU,M,eAEA,O,gBAKE,M,kBAECC,U,aAML,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAG7B,MAAMC,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAASC,IACb,GAAIA,EAAKC,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACvDF,EAAKG,aAAa,SAAU,IAE5B,GAAInB,KAAKoB,UAAY,QAAS,CAE5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAKhC,IAAIC,EAAkBT,EAAKU,uBAC3B,GAAID,EAAiB,CACnBA,EAAgBF,MAAMC,YAAc,uB,OAInC,CACLR,EAAKW,gBAAgB,S,KAK3B,IAAIC,EAAQ5B,KAAKY,UAAUC,iBAAiB,kBAC5C,GAAIe,EAAMd,OAAS,EAAG,CACpBc,EAAMb,SAASa,IACb,GAAIA,EAAMX,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACxDU,EAAMT,aAAa,SAAU,G,KACxB,CACLS,EAAMD,gBAAgB,S,MAO9B,gBAAAE,GACE,GAAG7B,KAAKoB,UAAY,QAAS,CAE3B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAG7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KAInB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKc,UAAUC,SAAS,UAAW,CACnEf,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAQhD,MAAAwB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,WAAcpC,KAAY,QAAGkB,GAAIlB,KAAKqC,aAAcC,IAAMC,IAASvC,KAAKY,UAAY2B,CAAE,GACjGN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKwC,UAAY,KAAOxC,KAAKyC,YAAc,cAAgB,IAAOzC,KAAY,SACrGiC,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKoB,QAAU,KAAOpB,KAAK0C,SAAW,WAAa,KAC1ET,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,cAEbV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,kB"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jumpgroup/jump-design-system",
-  "version": "0.3.36",
+  "version": "0.3.38",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/jump-design-system/p-5b680303.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as s,H as a}from"./p-d4c681a4.js";const i=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB)}:host .Wrapper{}:host .Wrapper.center{display:flex;justify-content:center;align-items:center}:host .Wrapper.left{display:flex;justify-content:flex-start;align-items:center}:host .Wrapper.right{display:flex;justify-content:flex-end;align-items:center}:host .Wrapper.fullBorder.inline{border-bottom:1px solid var(--jump-tab-border-color)}: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}";const r=i;const o=class{constructor(s){e(this,s);this.setActiveTab=t(this,"jump-change-activetab",7);this.disabled=false;this.alignment="left";this.fullBorder=false;this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const s=t.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){a.forEach(((e,i)=>{if(e!==t&&i!==a.length-1){e.style.borderRight=`1px solid ${s}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let i=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(i.length>0){i.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let s=this.JumpTabEl.querySelectorAll("jump-tab-item");if(s.length>0){s.forEach(((e,a)=>{if(a===s.length-1\|\|e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return s(a,{key:"d266e47e15f07bb230f05248565ade7e0709583a",class:"JumpTab "+this.variant,id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},s("div",{key:"ce1dcc0a97d3f84e597e1f8d062d5a3c94928607",class:"Wrapper "+this.alignment+" "+(this.fullBorder&&"fullBorder")+" "+this.variant},s("div",{key:"67ba27b40f38e2f9192b766c908f3a84df43070d",class:"Content "+this.variant+" "+(this.disabled?"disabled":"")},s("slot",{key:"4e62fd0e4f7c145e2aab6d0b370fb11bffe3a7ea",name:"tab-item"})),s("div",{key:"f45e4eb142af620e16d25140e63928a553d11ec5"},s("slot",{key:"c667c0a89fa1d4a0694b270e298b2a2fc1be0186",name:"tab-content"}))))}};o.style=r;export{o as jump_tab};
2	- //# sourceMappingURL=p-5b680303.entry.js.map

package/dist/jump-design-system/p-5b680303.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["jumpTabCss","JumpTabStyle0","JumpTab","undefined","changeActiveTabHandler","event","this","setActiveTab","emit","detail","rootStyles","getComputedStyle","document","documentElement","primaryColor","getPropertyValue","trim","items","JumpTabEl","querySelectorAll","length","forEach","item","getAttribute","id","setAttribute","variant","sibling","index","style","borderRight","previousSibling","previousElementSibling","removeAttribute","panel","componentDidLoad","classList","contains","render","h","Host","key","class","tabGroupName","ref","el","alignment","fullBorder","disabled","name"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n .Wrapper {\n &.center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n &.left {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n \n &.right {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n\n\n /* Stile fullBorder */\n &.fullBorder.inline {\n border-bottom: 1px solid var(--jump-tab-border-color);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n }\n\n\n .Content {\n display: flex;\n width: fit-content;\n \n &.rounded {\n border-radius: 50px;\n background-color: #f8f8f8; // dovrà andarci var(--jump-tab-bg-color)\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n}\n\n\n","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}"],"mappings":"yDAAA,MAAMA,EAAa,ouBACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,2FAIU,M,eAEA,O,gBAKE,M,kBAECC,U,aAML,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAG7B,MAAMC,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAASC,IACb,GAAIA,EAAKC,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACvDF,EAAKG,aAAa,SAAU,IAE5B,GAAInB,KAAKoB,UAAY,QAAS,CAE5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAKhC,IAAIC,EAAkBT,EAAKU,uBAC3B,GAAID,EAAiB,CACnBA,EAAgBF,MAAMC,YAAc,uB,OAInC,CACLR,EAAKW,gBAAgB,S,KAK3B,IAAIC,EAAQ5B,KAAKY,UAAUC,iBAAiB,kBAC5C,GAAIe,EAAMd,OAAS,EAAG,CACpBc,EAAMb,SAASa,IACb,GAAIA,EAAMX,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACxDU,EAAMT,aAAa,SAAU,G,KACxB,CACLS,EAAMD,gBAAgB,S,MAO9B,gBAAAE,GACE,GAAG7B,KAAKoB,UAAY,QAAS,CAE3B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAG7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KAInB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKc,UAAUC,SAAS,UAAW,CACnEf,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAQhD,MAAAwB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,WAAcpC,KAAY,QAAIkB,GAAIlB,KAAKqC,aAAcC,IAAMC,IAAQvC,KAAKY,UAAY2B,CAAE,GACjGN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKwC,UAAY,KAAOxC,KAAKyC,YAAc,cAAgB,IAAOzC,KAAY,SACrGiC,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKoB,QAAU,KAAOpB,KAAK0C,SAAW,WAAa,KAC5ET,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,cAEbV,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,kB"}