@jumpgroup/jump-design-system 0.3.35 → 0.3.37
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.
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +3 -2
- package/dist/cjs/jump-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-tab/jump-tab.css +27 -24
- package/dist/collection/components/jump-tab/jump-tab.js +20 -1
- package/dist/collection/components/jump-tab/jump-tab.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab.stories.js +26 -2
- package/dist/collection/components/jump-tab/jump-tab.stories.js.map +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.css +10 -13
- package/dist/components/jump-tab-item.js +1 -1
- package/dist/components/jump-tab-item.js.map +1 -1
- package/dist/components/jump-tab.js +4 -2
- package/dist/components/jump-tab.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-tab-item.entry.js +1 -1
- package/dist/esm/jump-tab-item.entry.js.map +1 -1
- package/dist/esm/jump-tab.entry.js +3 -2
- package/dist/esm/jump-tab.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-ad0de120.entry.js +2 -0
- package/dist/jump-design-system/p-ad0de120.entry.js.map +1 -0
- package/dist/jump-design-system/p-d1a8e815.entry.js +2 -0
- package/dist/jump-design-system/p-d1a8e815.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-tab/jump-tab.d.ts +1 -0
- package/dist/types/components/jump-tab/jump-tab.stories.d.ts +42 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-25df0e8f.entry.js +0 -2
- package/dist/jump-design-system/p-25df0e8f.entry.js.map +0 -1
- package/dist/jump-design-system/p-281c500c.entry.js +0 -2
- package/dist/jump-design-system/p-281c500c.entry.js.map +0 -1
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["jump-button_2.cjs",[[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]}]]],["jump-card-ecommerce.cjs",[[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"]]]]],["jump-filter.cjs",[[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"]}]]],["jump-filtergroup.cjs",[[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"]}]]],["jump-navbar.cjs",[[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"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[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"]}]]],["jump-quantity.cjs",[[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"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"identifier":[1],"debounceTime":[2,"debounce-time"],"searchType":[1,"search-type"],"variant":[1]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["jump-button_2.cjs",[[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]}]]],["jump-card-ecommerce.cjs",[[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"]]]]],["jump-filter.cjs",[[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"]}]]],["jump-filtergroup.cjs",[[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"]}]]],["jump-navbar.cjs",[[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"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[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"]}]]],["jump-quantity.cjs",[[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"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"identifier":[1],"debounceTime":[2,"debounce-time"],"searchType":[1,"search-type"],"variant":[1]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-86f59981.js');
|
|
6
6
|
|
|
7
|
-
const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}:host .Content.inline.active{color:var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}
|
|
7
|
+
const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px;border-bottom:1px solid var(--jump-tabitem-hover-color)}:host .Content.inline:not(.active){padding-bottom:14px}:host .Content.inline.active{color:var(--jump-tabitem-active-color);border-bottom:3px solid var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer;padding-bottom:12px}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}";
|
|
8
8
|
const JumpTabItemStyle0 = jumpTabItemCss;
|
|
9
9
|
|
|
10
10
|
const JumpTabItem = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-tab-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"jump-tab-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,26EAA26E,CAAC;AACn8E,0BAAe,cAAc;;MCMhB,WAAW;;;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;;QAEd,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC9B;IAID,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EAChC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IACtHD,kEAAK,KAAK,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,IAC1O,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC;YACtEA,wEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAa,EAE3FA,mEAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item&encapsulation=shadow","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tabitem-active-color: var(--secondary-standard);\n --jump-tabitem-color: var(--neutral-grey-secondary);\n --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);\n --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);\n --jump-tabitem-rounded-bg-color: white;\n \n font-family: var(--ff-primary);\n \n .Content {\n \n display: flex;\n\n &:hover:not(.disabled){\n cursor: pointer;\n }\n\n label {\n font-size: 16px;\n }\n \n &.left {\n flex-direction: row;\n gap: 6px;\n align-items: center;\n }\n \n &.top {\n flex-direction: column;\n gap: 2px;\n align-items: center;\n }\n \n /*Tipologia inline */\n &.inline {\n color: var(--jump-tabitem-color);\n padding: 12px 24px;\n border-bottom: 1px solid var(--jump-tabitem-hover-color);\n }\n\n &.inline:not(.active) {\n padding-bottom: 14px;\n }\n\n &.inline.active {\n color: var(--jump-tabitem-active-color);\n border-bottom: 3px solid var(--jump-tabitem-active-color);\n \n span {\n font-weight: bold;\n }\n }\n\n &.inline:hover:not(.disabled):not(.active) {\n border-bottom: 3px solid var(--jump-tabitem-hover-color);\n cursor: pointer;\n padding-bottom: 12px;\n }\n \n /* Tipologia boxed */\n &.boxed {\n color: var(--jump-tabitem-color);\n padding: 15px 39px;\n background-color: transparent;\n border: 1px solid var(--jump-tabitem-boxed-bg-color);\n }\n \n &.boxed:hover:not(.disabled),\n &.boxed:hover:not(.active) {\n background-color: transparent;\n \n span {\n font-weight: bold;\n }\n }\n \n &.boxed.active {\n color: var(--jump-tabitem-active-color);\n background-color: var(--jump-tabitem-boxed-bg-color);\n border: 1px solid var(--jump-tabitem-boxed-bg-color);\n \n span {\n font-weight: bold;\n }\n }\n \n /* Tipologia rounded */\n &.rounded {\n padding: 12px 32px;\n color: var(--jump-tabitem-color);\n \n }\n \n &.rounded:hover:not(.disabled) {\n cursor: pointer;\n \n span {\n font-weight: bold;\n }\n }\n \n &.rounded.active {\n color: var(--jump-tabitem-active-color);\n background-color: var(--jump-tabitem-rounded-bg-color);\n border: 1px solid var(--jump-tabitem-active-color);\n border-radius: 50px;\n \n }\n \n /** Tipologia sheet */\n &.sheet {\n padding: 12px 32px;\n color: var(--neutral-grey-secondary);\n }\n \n &.sheet:hover:not(.disabled) {\n cursor: pointer;\n \n span {\n font-weight: bold;\n }\n }\n \n &.sheet.active {\n color: var(--jump-tabitem-active-color);\n background-color: var(--jump-tabitem-rounded-bg-color);\n border-radius: 8px 8px 0px 0px;\n }\n }\n}\n\n:host(.disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n","import { Component, Host, Prop,State, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab-item',\n styleUrl: 'jump-tab-item.scss',\n shadow: true,\n})\nexport class JumpTabItem {\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Identifier of the tab\n */\n @Prop() identifier: string = undefined;\n\n /**\n * Name of the icon. If not provided, the icon will not be displayed\n */\n @Prop() iconName: string = undefined;\n\n /**\n * Icon position, apply only if the icon is present\n * Choosed from \"left\", \"top\"\n */\n @Prop() iconPosition: string = 'left';\n @Prop() label: string = '';\n @Prop() active: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * The style of the tab item\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @State() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n changeTab(identifier){\n this.changeActiveTab.emit({id: identifier});\n }\n\n componentDidLoad() {\n // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n this.variant = parentVariant;\n }\n\n tabEl: HTMLElement;\n\n render() {\n return (\n <Host\n ref={(el) => { this.tabEl = el }}\n class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" + (this.variant) + \" \" + (this.disabled ? 'disabled' : '')}>\n <div class={\"Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n {(this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.iconName} size=\"small\"></jump-icon>\n }\n <span class=\"label\">{this.label}</span>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-86f59981.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)}:host .Wrapper{display:flex;
|
|
7
|
+
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}";
|
|
8
8
|
const JumpTabStyle0 = jumpTabCss;
|
|
9
9
|
|
|
10
10
|
const JumpTab = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.setActiveTab = index.createEvent(this, "jump-change-activetab", 7);
|
|
14
|
+
this.disabled = false;
|
|
14
15
|
this.alignment = 'left';
|
|
15
16
|
this.fullBorder = false;
|
|
16
17
|
this.tabGroupName = undefined;
|
|
@@ -83,7 +84,7 @@ const JumpTab = class {
|
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
render() {
|
|
86
|
-
return (index.h(index.Host, { key: '
|
|
87
|
+
return (index.h(index.Host, { key: 'e5df1335198a648c93e35cf9f24408468fe76606', class: "JumpTab " + (this.variant), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'ce1dcc0a97d3f84e597e1f8d062d5a3c94928607', class: "Wrapper " + this.alignment + " " + (this.fullBorder && 'fullBorder') + " " + (this.variant) }, index.h("div", { key: '67ba27b40f38e2f9192b766c908f3a84df43070d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') }, index.h("slot", { key: '3c9b77ad255789b14bd3f431051469d2ab244b39', name: "tab-item" })), index.h("div", { key: 'a6c9b804abd0117a527dce762e5be3c6bb47a8f4', class: "ContentWrapper" }, index.h("slot", { key: 'a6f26e14e9b500a348bb885820869574dfe0279d', name: "tab-content" })))));
|
|
87
88
|
}
|
|
88
89
|
};
|
|
89
90
|
JumpTab.style = JumpTabStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,
|
|
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 /* 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}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["jump-button_2.cjs",[[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]}]]],["jump-card-ecommerce.cjs",[[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"]]]]],["jump-filter.cjs",[[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"]}]]],["jump-filtergroup.cjs",[[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"]}]]],["jump-navbar.cjs",[[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"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[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"]}]]],["jump-quantity.cjs",[[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"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"identifier":[1],"debounceTime":[2,"debounce-time"],"searchType":[1,"search-type"],"variant":[1]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["jump-button_2.cjs",[[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]}]]],["jump-card-ecommerce.cjs",[[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"]]]]],["jump-filter.cjs",[[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"]}]]],["jump-filtergroup.cjs",[[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"]}]]],["jump-navbar.cjs",[[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"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[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"]}]]],["jump-quantity.cjs",[[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"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"identifier":[1],"debounceTime":[2,"debounce-time"],"searchType":[1,"search-type"],"variant":[1]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -5,36 +5,39 @@
|
|
|
5
5
|
}
|
|
6
6
|
:host .Wrapper {
|
|
7
7
|
display: flex;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
border-radius: 50px;
|
|
12
|
-
background-color: #f8f8f8;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
/* Imposta di default l'orientamento verticale */
|
|
10
|
+
/* Stile fullBorder */
|
|
13
11
|
}
|
|
14
|
-
|
|
15
|
-
:host(.center) {
|
|
16
|
-
display: flex;
|
|
17
|
-
justify-content: center;
|
|
12
|
+
:host .Wrapper.center {
|
|
18
13
|
align-items: center;
|
|
14
|
+
/* Aligna orizzontalmente al centro */
|
|
19
15
|
}
|
|
20
|
-
|
|
21
|
-
:
|
|
22
|
-
|
|
23
|
-
justify-content: flex-start;
|
|
24
|
-
align-items: center;
|
|
16
|
+
:host .Wrapper.left {
|
|
17
|
+
align-items: flex-start;
|
|
18
|
+
/* Aligna orizzontalmente a sinistra */
|
|
25
19
|
}
|
|
26
|
-
|
|
27
|
-
:
|
|
28
|
-
|
|
29
|
-
justify-content: flex-end;
|
|
30
|
-
align-items: center;
|
|
20
|
+
:host .Wrapper.right {
|
|
21
|
+
align-items: flex-end;
|
|
22
|
+
/* Aligna orizzontalmente a destra */
|
|
31
23
|
}
|
|
32
|
-
|
|
33
|
-
/* Stile fullBorder */
|
|
34
|
-
:host(.fullBorder.inline) {
|
|
24
|
+
:host .Wrapper.fullBorder.inline {
|
|
35
25
|
border-bottom: 1px solid var(--jump-tab-border-color);
|
|
36
26
|
}
|
|
37
|
-
|
|
38
|
-
:host(.fullBorder.inline) ::slotted([slot=tab-item]) {
|
|
27
|
+
:host .Wrapper.fullBorder.inline ::slotted([slot=tab-item]) {
|
|
39
28
|
margin-bottom: -1px;
|
|
29
|
+
}
|
|
30
|
+
:host .Content {
|
|
31
|
+
display: flex;
|
|
32
|
+
width: fit-content;
|
|
33
|
+
}
|
|
34
|
+
:host .Content.rounded {
|
|
35
|
+
border-radius: 50px;
|
|
36
|
+
background-color: var(--jump-tab-bg-color);
|
|
37
|
+
/* Usa la variabile CSS */
|
|
38
|
+
}
|
|
39
|
+
:host .Content.disabled {
|
|
40
|
+
cursor: not-allowed;
|
|
41
|
+
opacity: 0.5;
|
|
42
|
+
pointer-events: none;
|
|
40
43
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class JumpTab {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.disabled = false;
|
|
4
5
|
this.alignment = 'left';
|
|
5
6
|
this.fullBorder = false;
|
|
6
7
|
this.tabGroupName = undefined;
|
|
@@ -73,7 +74,7 @@ export class JumpTab {
|
|
|
73
74
|
}
|
|
74
75
|
}
|
|
75
76
|
render() {
|
|
76
|
-
return (h(Host, { key: '
|
|
77
|
+
return (h(Host, { key: 'e5df1335198a648c93e35cf9f24408468fe76606', class: "JumpTab " + (this.variant), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'ce1dcc0a97d3f84e597e1f8d062d5a3c94928607', class: "Wrapper " + this.alignment + " " + (this.fullBorder && 'fullBorder') + " " + (this.variant) }, h("div", { key: '67ba27b40f38e2f9192b766c908f3a84df43070d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') }, h("slot", { key: '3c9b77ad255789b14bd3f431051469d2ab244b39', name: "tab-item" })), h("div", { key: 'a6c9b804abd0117a527dce762e5be3c6bb47a8f4', class: "ContentWrapper" }, h("slot", { key: 'a6f26e14e9b500a348bb885820869574dfe0279d', name: "tab-content" })))));
|
|
77
78
|
}
|
|
78
79
|
static get is() { return "jump-tab"; }
|
|
79
80
|
static get encapsulation() { return "shadow"; }
|
|
@@ -89,6 +90,24 @@ export class JumpTab {
|
|
|
89
90
|
}
|
|
90
91
|
static get properties() {
|
|
91
92
|
return {
|
|
93
|
+
"disabled": {
|
|
94
|
+
"type": "boolean",
|
|
95
|
+
"mutable": false,
|
|
96
|
+
"complexType": {
|
|
97
|
+
"original": "boolean",
|
|
98
|
+
"resolved": "boolean",
|
|
99
|
+
"references": {}
|
|
100
|
+
},
|
|
101
|
+
"required": false,
|
|
102
|
+
"optional": false,
|
|
103
|
+
"docs": {
|
|
104
|
+
"tags": [],
|
|
105
|
+
"text": ""
|
|
106
|
+
},
|
|
107
|
+
"attribute": "disabled",
|
|
108
|
+
"reflect": false,
|
|
109
|
+
"defaultValue": "false"
|
|
110
|
+
},
|
|
92
111
|
"alignment": {
|
|
93
112
|
"type": "string",
|
|
94
113
|
"mutable": false,
|
|
@@ -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;;
|
|
1
|
+
{"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() disabled: boolean = false;\n\n @Prop() alignment: string = 'left';\n\n /**\n * If true, the jump-tab component have a full bottom border\n */\n @Prop() fullBorder: boolean = false;\n\n @Prop() tabGroupName: string = undefined;\n\n /**\n * The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 || item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class={\"JumpTab \" + (this.variant)} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + this.alignment + \" \" + (this.fullBorder && 'fullBorder') + \" \" + (this.variant)}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '')}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div class=\"ContentWrapper\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}"]}
|
|
@@ -7,18 +7,38 @@ export default {
|
|
|
7
7
|
name: 'tab-group-name',
|
|
8
8
|
control: 'text',
|
|
9
9
|
description: 'Indica la tab attiva',
|
|
10
|
+
table: {
|
|
11
|
+
type: { summary: 'string' },
|
|
12
|
+
},
|
|
10
13
|
},
|
|
11
14
|
variant: {
|
|
12
15
|
name: 'variant',
|
|
13
16
|
control: 'select',
|
|
14
17
|
options: ['inline', 'boxed', 'sheet', 'rounded'],
|
|
15
18
|
description: 'Stile del tab e di tutti i suoi item',
|
|
19
|
+
table: {
|
|
20
|
+
type: { summary: 'string' },
|
|
21
|
+
defaultValue: { summary: 'inline' },
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
disabled: {
|
|
25
|
+
name: 'disabled',
|
|
26
|
+
control: 'boolean',
|
|
27
|
+
description: 'Se true, tutte le tab item sono disabilitate',
|
|
28
|
+
table: {
|
|
29
|
+
type: { summary: 'boolean' },
|
|
30
|
+
defaultValue: { summary: false },
|
|
31
|
+
},
|
|
16
32
|
},
|
|
17
33
|
alignment: {
|
|
18
34
|
name: 'alignment',
|
|
19
35
|
control: 'select',
|
|
20
36
|
options: ['left', 'center', 'right'],
|
|
21
37
|
description: 'Allineamento delle tab item',
|
|
38
|
+
table: {
|
|
39
|
+
type: { summary: 'string' },
|
|
40
|
+
defaultValue: { summary: 'left' },
|
|
41
|
+
}
|
|
22
42
|
},
|
|
23
43
|
fullBorder: {
|
|
24
44
|
name: 'full-border',
|
|
@@ -27,8 +47,12 @@ export default {
|
|
|
27
47
|
if: {
|
|
28
48
|
arg: 'variant',
|
|
29
49
|
eq: 'inline'
|
|
50
|
+
},
|
|
51
|
+
table: {
|
|
52
|
+
type: { summary: 'boolean' },
|
|
53
|
+
defaultValue: { summary: false },
|
|
30
54
|
}
|
|
31
|
-
}
|
|
55
|
+
}
|
|
32
56
|
}
|
|
33
57
|
};
|
|
34
58
|
const Template = (args) => {
|
|
@@ -43,7 +67,7 @@ export const TabInline = Template.bind({});
|
|
|
43
67
|
TabInline.args = {
|
|
44
68
|
tabGroupName: 'Tab 1',
|
|
45
69
|
variant: 'inline',
|
|
46
|
-
alignment: 'center'
|
|
70
|
+
alignment: 'center',
|
|
47
71
|
};
|
|
48
72
|
export const TabBoxed = Template.bind({});
|
|
49
73
|
TabBoxed.args = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n },\n alignment: {\n name: 'alignment',\n control: 'select',\n options: ['left', 'center', 'right'],\n description: 'Allineamento delle tab item',\n },\n fullBorder: {\n name: 'full-border',\n control: 'boolean',\n description: 'Se true, il tab ha un bordo inferiore pieno',\n if: {\n arg: 'variant',\n eq: 'inline'\n }\n },\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center' \n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded',\n alignment: 'right'\n};\n\nexport const TabInlineFullBorder = Template.bind({});\nTabInlineFullBorder.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n fullBorder: true \n};\n\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline',\n alignment: 'center'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}
|
|
1
|
+
{"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n table: {\n type: { summary: 'string' },\n },\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'inline' },\n },\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'Se true, tutte le tab item sono disabilitate',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n },\n alignment: {\n name: 'alignment',\n control: 'select',\n options: ['left', 'center', 'right'],\n description: 'Allineamento delle tab item',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'left' },\n }\n },\n fullBorder: {\n name: 'full-border',\n control: 'boolean',\n description: 'Se true, il tab ha un bordo inferiore pieno',\n if: {\n arg: 'variant',\n eq: 'inline'\n },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n }\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded',\n alignment: 'right'\n};\n\nexport const TabInlineFullBorder = Template.bind({});\nTabInlineFullBorder.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n fullBorder: true \n};\n\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline',\n alignment: 'center'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}
|
|
@@ -33,13 +33,23 @@
|
|
|
33
33
|
:host .Content.inline {
|
|
34
34
|
color: var(--jump-tabitem-color);
|
|
35
35
|
padding: 12px 24px;
|
|
36
|
+
border-bottom: 1px solid var(--jump-tabitem-hover-color);
|
|
37
|
+
}
|
|
38
|
+
:host .Content.inline:not(.active) {
|
|
39
|
+
padding-bottom: 14px;
|
|
36
40
|
}
|
|
37
41
|
:host .Content.inline.active {
|
|
38
42
|
color: var(--jump-tabitem-active-color);
|
|
43
|
+
border-bottom: 3px solid var(--jump-tabitem-active-color);
|
|
39
44
|
}
|
|
40
45
|
:host .Content.inline.active span {
|
|
41
46
|
font-weight: bold;
|
|
42
47
|
}
|
|
48
|
+
:host .Content.inline:hover:not(.disabled):not(.active) {
|
|
49
|
+
border-bottom: 3px solid var(--jump-tabitem-hover-color);
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
padding-bottom: 12px;
|
|
52
|
+
}
|
|
43
53
|
:host .Content.boxed {
|
|
44
54
|
color: var(--jump-tabitem-color);
|
|
45
55
|
padding: 15px 39px;
|
|
@@ -96,17 +106,4 @@
|
|
|
96
106
|
cursor: not-allowed;
|
|
97
107
|
opacity: 0.5;
|
|
98
108
|
pointer-events: none;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
:host(.inline) {
|
|
102
|
-
border-bottom: 1px solid var(--jump-tabitem-hover-color);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
:host(.inline):hover:not(.disabled):not(.active) {
|
|
106
|
-
border-bottom: 3px solid var(--jump-tabitem-hover-color);
|
|
107
|
-
cursor: pointer;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
:host(.inline.active) {
|
|
111
|
-
border-bottom: 3px solid var(--jump-tabitem-active-color);
|
|
112
109
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$2 } from './jump-icon2.js';
|
|
3
3
|
|
|
4
|
-
const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}:host .Content.inline.active{color:var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}
|
|
4
|
+
const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px;border-bottom:1px solid var(--jump-tabitem-hover-color)}:host .Content.inline:not(.active){padding-bottom:14px}:host .Content.inline.active{color:var(--jump-tabitem-active-color);border-bottom:3px solid var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer;padding-bottom:12px}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}";
|
|
5
5
|
const JumpTabItemStyle0 = jumpTabItemCss;
|
|
6
6
|
|
|
7
7
|
const JumpTabItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabItem extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-tab-item.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"jump-tab-item.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,26EAA26E,CAAC;AACn8E,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;;QAEd,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC9B;IAID,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EAChC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IACtH,4DAAK,KAAK,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,IAC1O,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC;YACtE,kEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAa,EAE3F,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpTabItem"],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item&encapsulation=shadow","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tabitem-active-color: var(--secondary-standard);\n --jump-tabitem-color: var(--neutral-grey-secondary);\n --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);\n --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);\n --jump-tabitem-rounded-bg-color: white;\n \n font-family: var(--ff-primary);\n \n .Content {\n \n display: flex;\n\n &:hover:not(.disabled){\n cursor: pointer;\n }\n\n label {\n font-size: 16px;\n }\n \n &.left {\n flex-direction: row;\n gap: 6px;\n align-items: center;\n }\n \n &.top {\n flex-direction: column;\n gap: 2px;\n align-items: center;\n }\n \n /*Tipologia inline */\n &.inline {\n color: var(--jump-tabitem-color);\n padding: 12px 24px;\n border-bottom: 1px solid var(--jump-tabitem-hover-color);\n }\n\n &.inline:not(.active) {\n padding-bottom: 14px;\n }\n\n &.inline.active {\n color: var(--jump-tabitem-active-color);\n border-bottom: 3px solid var(--jump-tabitem-active-color);\n \n span {\n font-weight: bold;\n }\n }\n\n &.inline:hover:not(.disabled):not(.active) {\n border-bottom: 3px solid var(--jump-tabitem-hover-color);\n cursor: pointer;\n padding-bottom: 12px;\n }\n \n /* Tipologia boxed */\n &.boxed {\n color: var(--jump-tabitem-color);\n padding: 15px 39px;\n background-color: transparent;\n border: 1px solid var(--jump-tabitem-boxed-bg-color);\n }\n \n &.boxed:hover:not(.disabled),\n &.boxed:hover:not(.active) {\n background-color: transparent;\n \n span {\n font-weight: bold;\n }\n }\n \n &.boxed.active {\n color: var(--jump-tabitem-active-color);\n background-color: var(--jump-tabitem-boxed-bg-color);\n border: 1px solid var(--jump-tabitem-boxed-bg-color);\n \n span {\n font-weight: bold;\n }\n }\n \n /* Tipologia rounded */\n &.rounded {\n padding: 12px 32px;\n color: var(--jump-tabitem-color);\n \n }\n \n &.rounded:hover:not(.disabled) {\n cursor: pointer;\n \n span {\n font-weight: bold;\n }\n }\n \n &.rounded.active {\n color: var(--jump-tabitem-active-color);\n background-color: var(--jump-tabitem-rounded-bg-color);\n border: 1px solid var(--jump-tabitem-active-color);\n border-radius: 50px;\n \n }\n \n /** Tipologia sheet */\n &.sheet {\n padding: 12px 32px;\n color: var(--neutral-grey-secondary);\n }\n \n &.sheet:hover:not(.disabled) {\n cursor: pointer;\n \n span {\n font-weight: bold;\n }\n }\n \n &.sheet.active {\n color: var(--jump-tabitem-active-color);\n background-color: var(--jump-tabitem-rounded-bg-color);\n border-radius: 8px 8px 0px 0px;\n }\n }\n}\n\n:host(.disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n","import { Component, Host, Prop,State, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab-item',\n styleUrl: 'jump-tab-item.scss',\n shadow: true,\n})\nexport class JumpTabItem {\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Identifier of the tab\n */\n @Prop() identifier: string = undefined;\n\n /**\n * Name of the icon. If not provided, the icon will not be displayed\n */\n @Prop() iconName: string = undefined;\n\n /**\n * Icon position, apply only if the icon is present\n * Choosed from \"left\", \"top\"\n */\n @Prop() iconPosition: string = 'left';\n @Prop() label: string = '';\n @Prop() active: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * The style of the tab item\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @State() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n changeTab(identifier){\n this.changeActiveTab.emit({id: identifier});\n }\n\n componentDidLoad() {\n // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n this.variant = parentVariant;\n }\n\n tabEl: HTMLElement;\n\n render() {\n return (\n <Host\n ref={(el) => { this.tabEl = el }}\n class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" + (this.variant) + \" \" + (this.disabled ? 'disabled' : '')}>\n <div class={\"Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n {(this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.iconName} size=\"small\"></jump-icon>\n }\n <span class=\"label\">{this.label}</span>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|