@jumpgroup/jump-design-system 0.3.70 → 0.3.71

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 (13) hide show
  1. package/dist/cjs/jump-tab.cjs.entry.js +1 -1
  2. package/dist/cjs/jump-tab.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/jump-tab/jump-tab.css +1 -0
  4. package/dist/components/jump-tab.js +1 -1
  5. package/dist/components/jump-tab.js.map +1 -1
  6. package/dist/esm/jump-tab.entry.js +1 -1
  7. package/dist/esm/jump-tab.entry.js.map +1 -1
  8. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  9. package/dist/jump-design-system/p-19c6ab3f.entry.js +2 -0
  10. package/dist/jump-design-system/p-19c6ab3f.entry.js.map +1 -0
  11. package/package.json +1 -1
  12. package/dist/jump-design-system/p-629ef0c7.entry.js +0 -2
  13. package/dist/jump-design-system/p-629ef0c7.entry.js.map +0 -1
package/dist/cjs/jump-tab.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-230bcbae.js');
6
6
 
7
- const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
7
+ const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;flex-direction:column;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
8
8
  const JumpTabStyle0 = jumpTabCss;
9
9
 
10
10
  const JumpTab = class {
package/dist/cjs/jump-tab.cjs.entry.js.map CHANGED
@@ -1 +1 @@
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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"version":3}
package/dist/collection/components/jump-tab/jump-tab.css CHANGED
@@ -29,6 +29,7 @@
29
29
 
30
30
  .ContentWrapper {
31
31
  display: flex;
32
+ flex-direction: column;
32
33
  width: 100%;
33
34
  justify-content: var(--alignment, flex-start);
34
35
  }
package/dist/components/jump-tab.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
3
+ const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;flex-direction:column;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
4
4
  const JumpTabStyle0 = jumpTabCss;
5
5
 
6
6
  const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLElement {
package/dist/components/jump-tab.js.map CHANGED
@@ -1 +1 @@
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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"version":3}
package/dist/esm/jump-tab.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host } from './index-4363ffe4.js';
2
2
 
3
- const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
3
+ const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;flex-direction:column;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
4
4
  const JumpTabStyle0 = jumpTabCss;
5
5
 
6
6
  const JumpTab = class {
package/dist/esm/jump-tab.entry.js.map CHANGED
@@ -1 +1 @@
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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"version":3}
package/dist/jump-design-system/jump-design-system.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as t}from"./p-40ca24a6.js";export{s as setNonce}from"./p-40ca24a6.js";import{g as a}from"./p-e1255160.js";var o=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};o().then((async e=>{await a();return t([["p-8f02eb5e",[[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"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],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-83b3a560",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-2e274d20",[[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-0cdca5df",[[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-089b9c5c",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-35f2032b",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-7a2bc23d",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-800fd60b",[[1,"jump-search-bar",{placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],searchValue:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-4706eba4",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-66c79fb9",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-e7d1e3d8",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-0432b242",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-9279b124",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-0cc799f3",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-a7d5e687",[[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-a0237406",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-e7b3ebb1",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-fa2a10bf",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],hasSlottedOptions:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-617c7cd7",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-b8b28d8b",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-629ef0c7",[[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-cb9ab473",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-9035201c",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-79e5dac6",[[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]}]]]],e)}));
1
+ import{p as e,b as t}from"./p-40ca24a6.js";export{s as setNonce}from"./p-40ca24a6.js";import{g as a}from"./p-e1255160.js";var o=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};o().then((async e=>{await a();return t([["p-8f02eb5e",[[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"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],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-83b3a560",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-2e274d20",[[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-0cdca5df",[[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-089b9c5c",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-35f2032b",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-7a2bc23d",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-800fd60b",[[1,"jump-search-bar",{placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],searchValue:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-4706eba4",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-66c79fb9",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-e7d1e3d8",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-0432b242",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-9279b124",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-0cc799f3",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-a7d5e687",[[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-a0237406",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-e7b3ebb1",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-fa2a10bf",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],hasSlottedOptions:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-617c7cd7",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-b8b28d8b",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-19c6ab3f",[[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-cb9ab473",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-9035201c",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-79e5dac6",[[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]}]]]],e)}));
2
2
  //# sourceMappingURL=jump-design-system.esm.js.map
package/dist/jump-design-system/p-19c6ab3f.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,c as e,h as a,H as n}from"./p-40ca24a6.js";const i=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;flex-direction:column;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";const r=i;const o=class{constructor(a){t(this,a);this.setActiveTab=e(this,"jump-change-activetab",7);this.disabled=false;this.alignment="left";this.fullBorder=false;this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(t){this.setActiveTab.emit(t.detail);const e=getComputedStyle(document.documentElement);const a=e.getPropertyValue("--neutral-grey-secondary").trim();let n=this.JumpTabEl.querySelectorAll("jump-tab-item");if(n.length>0){n.forEach((e=>{if(e.getAttribute("identifier")===t.detail.id){e.setAttribute("active","");if(this.variant==="sheet"){n.forEach(((t,i)=>{if(t!==e&&i!==n.length-1){t.style.borderRight=`1px solid ${a}`}else{t.style.borderRight="1px solid transparent"}}));let t=e.previousElementSibling;if(t){t.style.borderRight="1px solid transparent"}}}else{e.removeAttribute("active")}}))}let i=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(i.length>0){i.forEach((e=>{if(e.getAttribute("identifier")===t.detail.id){e.setAttribute("active","")}else{e.removeAttribute("active")}}))}}componentDidLoad(){if(this.variant==="sheet"){const t=getComputedStyle(document.documentElement);const e=t.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((t,n)=>{if(n===a.length-1||t.classList.contains("active")){t.style.borderRight="1px solid transparent"}else{t.style.borderRight=`1px solid ${e}`}}))}}}render(){return a(n,{key:"eb67c13009a3d5bb2ea7275c02a0cf4936496244",class:"JumpTab "+this.variant,id:this.tabGroupName,ref:t=>{this.JumpTabEl=t}},a("div",{key:"2be879c8dc231a42c69457353855d52ef438339d",class:"Wrapper "+(this.fullBorder?"fullBorder":"")},a("div",{key:"7dcbffc75c62e3dd64ecf47f50f0b308c4882a04",class:"ContentWrapper ContentWrapper--Items",style:{"--alignment":this.getAlignment(this.alignment)}},a("div",{key:"17c437c456684b5fcac81e5df964ac316c8b7371",class:"Content "+this.variant+" "+(this.disabled?"disabled":"")+" "+(this.fullBorder?"fullBorder":""),style:{"--alignment":this.getAlignment(this.alignment)}},a("slot",{key:"14b413cc2687aa73e848bb0bdccb2b9121d46fc3",name:"tab-item"}))),a("div",{key:"fd9ed0cddc9fec9779b5a76e5a378bdd7f153c08",class:"ContentWrapper ContentWrapper--Panel"},a("slot",{key:"0bd78d8369b8402f5e8d1182b82d0110209c57c2",name:"tab-content"}))))}getAlignment(t){switch(t){case"center":return"center";case"right":return"flex-end";default:return"flex-start"}}};o.style=r;export{o as jump_tab};
2
+ //# sourceMappingURL=p-19c6ab3f.entry.js.map
package/dist/jump-design-system/p-19c6ab3f.entry.js.map ADDED
@@ -0,0 +1 @@
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","fullBorder","getAlignment","alignment","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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,+qCACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,2FAGU,M,eACA,O,gBACE,M,kBACCC,U,aACL,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAE7B,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,CAC5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAIhC,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,MAM9B,gBAAAE,GACE,GAAI7B,KAAKoB,UAAY,QAAS,CAC5B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KACnB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKc,UAAUC,SAAS,UAAW,CACnEf,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAOhD,MAAAwB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,WAAapC,KAAKoB,QAASF,GAAIlB,KAAKqC,aAAcC,IAAMC,IAASvC,KAAKY,UAAY2B,CAAE,GAC/FN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,YAAcpC,KAAKwC,WAAa,aAAe,KACzDP,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uCAAwCb,MAAO,CAAE,cAAevB,KAAKyC,aAAazC,KAAK0C,aACjGT,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKoB,QAAU,KAAOpB,KAAK2C,SAAW,WAAa,IAAM,KAAO3C,KAAKwC,WAAa,aAAe,IAAKjB,MAAO,CAAE,cAAevB,KAAKyC,aAAazC,KAAK0C,aAC5KT,EAAA,QAAAE,IAAA,2CAAMS,KAAK,eAGfX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wCACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,kB,CAOb,YAAAH,CAAaC,GACnB,OAAQA,GACN,IAAK,SACH,MAAO,SACT,IAAK,QACH,MAAO,WACT,QACE,MAAO,a"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jumpgroup/jump-design-system",
3
- "version": "0.3.70",
3
+ "version": "0.3.71",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/jump-design-system/p-629ef0c7.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as a,H as n}from"./p-40ca24a6.js";const i=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";const r=i;const s=class{constructor(a){t(this,a);this.setActiveTab=e(this,"jump-change-activetab",7);this.disabled=false;this.alignment="left";this.fullBorder=false;this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(t){this.setActiveTab.emit(t.detail);const e=getComputedStyle(document.documentElement);const a=e.getPropertyValue("--neutral-grey-secondary").trim();let n=this.JumpTabEl.querySelectorAll("jump-tab-item");if(n.length>0){n.forEach((e=>{if(e.getAttribute("identifier")===t.detail.id){e.setAttribute("active","");if(this.variant==="sheet"){n.forEach(((t,i)=>{if(t!==e&&i!==n.length-1){t.style.borderRight=`1px solid ${a}`}else{t.style.borderRight="1px solid transparent"}}));let t=e.previousElementSibling;if(t){t.style.borderRight="1px solid transparent"}}}else{e.removeAttribute("active")}}))}let i=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(i.length>0){i.forEach((e=>{if(e.getAttribute("identifier")===t.detail.id){e.setAttribute("active","")}else{e.removeAttribute("active")}}))}}componentDidLoad(){if(this.variant==="sheet"){const t=getComputedStyle(document.documentElement);const e=t.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((t,n)=>{if(n===a.length-1||t.classList.contains("active")){t.style.borderRight="1px solid transparent"}else{t.style.borderRight=`1px solid ${e}`}}))}}}render(){return a(n,{key:"eb67c13009a3d5bb2ea7275c02a0cf4936496244",class:"JumpTab "+this.variant,id:this.tabGroupName,ref:t=>{this.JumpTabEl=t}},a("div",{key:"2be879c8dc231a42c69457353855d52ef438339d",class:"Wrapper "+(this.fullBorder?"fullBorder":"")},a("div",{key:"7dcbffc75c62e3dd64ecf47f50f0b308c4882a04",class:"ContentWrapper ContentWrapper--Items",style:{"--alignment":this.getAlignment(this.alignment)}},a("div",{key:"17c437c456684b5fcac81e5df964ac316c8b7371",class:"Content "+this.variant+" "+(this.disabled?"disabled":"")+" "+(this.fullBorder?"fullBorder":""),style:{"--alignment":this.getAlignment(this.alignment)}},a("slot",{key:"14b413cc2687aa73e848bb0bdccb2b9121d46fc3",name:"tab-item"}))),a("div",{key:"fd9ed0cddc9fec9779b5a76e5a378bdd7f153c08",class:"ContentWrapper ContentWrapper--Panel"},a("slot",{key:"0bd78d8369b8402f5e8d1182b82d0110209c57c2",name:"tab-content"}))))}getAlignment(t){switch(t){case"center":return"center";case"right":return"flex-end";default:return"flex-start"}}};s.style=r;export{s as jump_tab};
2
- //# sourceMappingURL=p-629ef0c7.entry.js.map
package/dist/jump-design-system/p-629ef0c7.entry.js.map DELETED
@@ -1 +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","fullBorder","getAlignment","alignment","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 /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n:host::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n /* Permette lo scroll orizzontale */\n overflow-x: auto;\n scrollbar-width: none;\n /* Nasconde la scrollbar in Firefox */\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n /* Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\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 JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\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 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 items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\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 componentDidLoad() {\n if (this.variant === 'sheet') {\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, index) => {\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 render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,ypCACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,2FAGU,M,eACA,O,gBACE,M,kBACCC,U,aACL,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAE7B,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,CAC5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAIhC,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,MAM9B,gBAAAE,GACE,GAAI7B,KAAKoB,UAAY,QAAS,CAC5B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KACnB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKc,UAAUC,SAAS,UAAW,CACnEf,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAOhD,MAAAwB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,WAAapC,KAAKoB,QAASF,GAAIlB,KAAKqC,aAAcC,IAAMC,IAASvC,KAAKY,UAAY2B,CAAE,GAC/FN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,YAAcpC,KAAKwC,WAAa,aAAe,KACzDP,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uCAAwCb,MAAO,CAAE,cAAevB,KAAKyC,aAAazC,KAAK0C,aACjGT,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKoB,QAAU,KAAOpB,KAAK2C,SAAW,WAAa,IAAM,KAAO3C,KAAKwC,WAAa,aAAe,IAAKjB,MAAO,CAAE,cAAevB,KAAKyC,aAAazC,KAAK0C,aAC5KT,EAAA,QAAAE,IAAA,2CAAMS,KAAK,eAGfX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wCACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,kB,CAOb,YAAAH,CAAaC,GACnB,OAAQA,GACN,IAAK,SACH,MAAO,SACT,IAAK,QACH,MAAO,WACT,QACE,MAAO,a"}