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

@jumpgroup/jump-design-system 0.3.37 → 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 (14) 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{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;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}";
+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 {

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~~,+qBAA+qB~~,CAAC;~~AACnsB~~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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 /* ~~Imposta~~ ~~di default~~ l'orientamento verticale /\n\n &.center {\n align-items: center;\n / ~~Aligna~~ orizzontalmente al centro /\n }\n\n &.left {\n align-items: flex-start;\n / ~~Aligna~~ orizzontalmente a sinistra /\n }\n\n &.right {\n align-items: flex-end;\n / ~~Aligna~~ 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 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}","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}"],"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;
-  /* Imposta di default l'orientamento verticale */
+  /* Mantieni l'orientamento verticale per il layout generale */
   /* Stile fullBorder */
 }
 :host .Wrapper.center {
   align-items: center;
-  /* Aligna orizzontalmente al centro */
+  /* Allinea orizzontalmente al centro */
 }
 :host .Wrapper.left {
   align-items: flex-start;
-  /* Aligna orizzontalmente a sinistra */
+  /* Allinea orizzontalmente a sinistra */
 }
 :host .Wrapper.right {
   align-items: flex-end;
-  /* Aligna orizzontalmente a destra */
+  /* Allinea orizzontalmente a destra */
 }
 :host .Wrapper.fullBorder.inline {
   border-bottom: 1px solid var(--jump-tab-border-color);
@@ -29,6 +31,10 @@
 }
 :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 {
@@ -40,4 +46,16 @@
   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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,OAAO;;wBAIU,KAAK;yBAEL,MAAM;0BAKJ,KAAK;4BAEJ,SAAS;uBAMd,QAAQ;;IAKlC,sBAAsB,CAAC,KAAkB;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAErC,yCAAyC;QACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;QAEpF,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;oBACxD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBAEhC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;wBAC7B,qEAAqE;wBACrE,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;4BAC/B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gCACnD,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC,CAAC,kBAAkB;4BAC7E,CAAC;iCAAM,CAAC;gCACN,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;4BACtD,CAAC;wBACH,CAAC,CAAC,CAAC;wBAEH,2CAA2C;wBAC3C,IAAI,eAAe,GAAG,IAAI,CAAC,sBAA6B,CAAC;wBACzD,IAAI,eAAe,EAAE,CAAC;4BACpB,eAAe,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;wBAC9D,CAAC;oBACH,CAAC;gBAEH,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QAC9D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACtB,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;oBACzD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBACnC,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAG,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC5B,yCAAyC;YACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;YAEpF,6CAA6C;YAC7C,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC5B,wCAAwC;oBACxC,sBAAsB;oBACtB,+CAA+C;oBAC/C,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACpE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;oBACnD,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC;oBACvD,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IAEH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC;YACpG,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;oBAC7E,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,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 class=\"ContentWrapper\">\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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,OAAO;;wBAIU,KAAK;yBAEL,MAAM;0BAKJ,KAAK;4BAEJ,SAAS;uBAMd,QAAQ;;IAKlC,sBAAsB,CAAC,KAAkB;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAErC,yCAAyC;QACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;QAEpF,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;oBACxD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBAEhC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;wBAC7B,qEAAqE;wBACrE,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;4BAC/B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gCACnD,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC,CAAC,kBAAkB;4BAC7E,CAAC;iCAAM,CAAC;gCACN,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;4BACtD,CAAC;wBACH,CAAC,CAAC,CAAC;wBAEH,2CAA2C;wBAC3C,IAAI,eAAe,GAAG,IAAI,CAAC,sBAA6B,CAAC;wBACzD,IAAI,eAAe,EAAE,CAAC;4BACpB,eAAe,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;wBAC9D,CAAC;oBACH,CAAC;gBAEH,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QAC9D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACtB,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;oBACzD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBACnC,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAG,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC5B,yCAAyC;YACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;YAEpF,6CAA6C;YAC7C,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC5B,wCAAwC;oBACxC,sBAAsB;oBACtB,+CAA+C;oBAC/C,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACpE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;oBACnD,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC;oBACvD,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IAEH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC;YACpG,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;oBAC7E,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","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{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;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}";
+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 {

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

	@@ -1 +1 @@
1	- {"file":"jump-tab.js","mappings":";;AAAA,MAAM,UAAU,GAAG~~,+qBAA+qB~~,CAAC;~~AACnsB~~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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 /* ~~Imposta~~ ~~di default~~ l'orientamento verticale /\n\n &.center {\n align-items: center;\n / ~~Aligna~~ orizzontalmente al centro /\n }\n\n &.left {\n align-items: flex-start;\n / ~~Aligna~~ orizzontalmente a sinistra /\n }\n\n &.right {\n align-items: flex-end;\n / ~~Aligna~~ 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 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}","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}"],"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{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;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}";
+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 {

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

	@@ -1 +1 @@
1	- {"file":"jump-tab.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG~~,+qBAA+qB~~,CAAC;~~AACnsB~~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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 /* ~~Imposta~~ ~~di default~~ l'orientamento verticale /\n\n &.center {\n align-items: center;\n / ~~Aligna~~ orizzontalmente al centro /\n }\n\n &.left {\n align-items: flex-start;\n / ~~Aligna~~ orizzontalmente a sinistra /\n }\n\n &.right {\n align-items: flex-end;\n / ~~Aligna~~ 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 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}","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}"],"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-d1a8e815",[[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.37",
+  "version": "0.3.38",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as a,H as s}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{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;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}";const r=i;const o=class{constructor(a){e(this,a);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 a=t.getPropertyValue("--neutral-grey-secondary").trim();let s=this.JumpTabEl.querySelectorAll("jump-tab-item");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){s.forEach(((e,i)=>{if(e!==t&&i!==s.length-1){e.style.borderRight=`1px solid ${a}`}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 a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((e,s)=>{if(s===a.length-1\|\|e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return a(s,{key:"e5df1335198a648c93e35cf9f24408468fe76606",class:"JumpTab "+this.variant,id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},a("div",{key:"ce1dcc0a97d3f84e597e1f8d062d5a3c94928607",class:"Wrapper "+this.alignment+" "+(this.fullBorder&&"fullBorder")+" "+this.variant},a("div",{key:"67ba27b40f38e2f9192b766c908f3a84df43070d",class:"Content "+this.variant+" "+(this.disabled?"disabled":"")},a("slot",{key:"3c9b77ad255789b14bd3f431051469d2ab244b39",name:"tab-item"})),a("div",{key:"a6c9b804abd0117a527dce762e5be3c6bb47a8f4",class:"ContentWrapper"},a("slot",{key:"a6f26e14e9b500a348bb885820869574dfe0279d",name:"tab-content"}))))}};o.style=r;export{o as jump_tab};
2	- //# sourceMappingURL=p-d1a8e815.entry.js.map

package/dist/jump-design-system/p-d1a8e815.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 display: flex;\n flex-direction: column;\n /* Imposta di default l'orientamento verticale */\n\n &.center {\n align-items: center;\n /* Aligna orizzontalmente al centro */\n }\n\n &.left {\n align-items: flex-start;\n /* Aligna orizzontalmente a sinistra */\n }\n\n &.right {\n align-items: flex-end;\n /* Aligna 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 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}","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}"],"mappings":"yDAAA,MAAMA,EAAa,grBACnB,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"}