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

@jumpgroup/jump-design-system 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, h, H as Host } from './index-70f1949a.js';
 const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:var(--neutral-white);--jump-card-color-dark:var(--neutral-white);--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
 const JumpCardStyle0 = jumpCardCss;
@@ -19,8 +19,8 @@ const AppCard = class {
         this.videoSrc = '';
     }
     render() {
-        return (h(Host, { key: 'a6d672e0dc05d8d596bf3eb4472339f2b6ad0e33', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'cffc3af0b3c23d9738427113f03eb7f17eec99da', class: "Content" }, h("slot", { key: '69b0806f909ecea66e1b83d51ddd6d02003401ea', name: "body" }), h("slot", { key: '9830621fc1314e5f99f3e3f4b1626cb7feb29cb2', name: "footer" }))));
+        return (h(Host, { key: '7cb28f9f3ef1a64c859b7b4de719ca9dc58eea8d', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'dabe68c686a49f1af7386182ad4b14181d7c7bcc', class: "Content" }, h("slot", { key: '18be998730900c91de0e93e410ae34abccff4bfc', name: "body" }), h("slot", { key: 'd9dfbf2a4cf014ceb761432cd435179689d5baa6', name: "footer" }))));
     }
 };
 AppCard.style = JumpCardStyle0;

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-056a0a66.js';
-export { s as setNonce } from './index-056a0a66.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-70f1949a.js';
+export { s as setNonce } from './index-70f1949a.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 /*
@@ -16,7 +16,7 @@ const patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["jump-card-ecommerce",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"],"addedToCart":[4,"added-to-cart"],"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,"addto-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"quantity":[1540],"changedQuantity":[4,"changed-quantity"],"changedVariation":[4,"changed-variation"]}]]],["jump-filter",[[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"]]]]],["jump-filtergroup",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination",[[0,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table",[[0,"jump-pagination-table",{"elementsRanges":[16],"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"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-tab-item",[[0,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion",[[1,"jump-accordion"]]],["jump-card",[[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-tab",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-button",[[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"]}]]],["jump-badge_2",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[32]},null,{"value":["onValueChange"]}],[1,"jump-badge",{"label":[1],"variant":[1]}]]],["jump-icon",[[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]]], options);
+  return bootstrapLazy([["jump-button_2",[[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",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"],"addedToCart":[4,"added-to-cart"],"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,"addto-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"changedVariation":[4,"changed-variation"]}]]],["jump-filter",[[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"]]]]],["jump-filtergroup",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table",[[0,"jump-pagination-table",{"elementsRanges":[16],"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"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[8],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion",[[1,"jump-accordion"]]],["jump-card",[[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-tab",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge",[[1,"jump-badge",{"label":[1],"variant":[1],"dimension":[1],"soft":[4],"outline":[4]}]]]], options);
 });
 //# sourceMappingURL=jump-design-system.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, h, H as Host } from './index-70f1949a.js';
 const jumpFilterCss = ":host h3{margin:0}:host .filtersDrawer{display:flex;flex-direction:column;gap:1rem}";
 const JumpFilterStyle0 = jumpFilterCss;
@@ -44,8 +44,8 @@ const JumpFilter = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a25627f52d4e4eabd9714bca4605f7d506e8302a', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'e58ab446793fd152b0e724ea8067f1030d6ecaaa', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: '1ffb7d8f787733c037da73c4643d016a5d314c85', name: "prefix" }, this.filterButtonIcon && h("jump-icon", { key: 'ce09716fa23121cd5b4921eab94260d6a931a36a', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), h("slot", { key: 'fd339c7580f3e142fd80b4c4eb8503391b7ebfa2', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '078c8038b81200c09f7ddf8d6d054449e896554b', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
-            h("div", { key: '5476fe397f3599a50548b0ea4f47b4c66bbbd6cd', class: 'filtersDrawer__header' }, h("jump-icon", { key: '1e16b65feb8f923c2b9d1f421d939f6eeee136f7', class: "small", name: this.filterButtonIcon }), h("h3", { key: '02f99e915aa045d62d7afedaf0d216adbf8db7d0' }, this.filterHeading)), h("slot", { key: 'aa697d79b5ca21bdcf75e020780019effd19898c' }))));
+        return (h(Host, { key: '66c02e0b1d1e1b57c12a7124874b4d41f0281579', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'c6533178a0f3a4b389f289ca919925c160a24df8', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: 'd95b2240c4a7cfec153213ba73c5679b9e72d227', name: "prefix" }, this.filterButtonIcon && h("jump-icon", { key: '9b964e09eb0942e796b4bee737a97326e0363c4e', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), h("slot", { key: '39cc668bd11bcbff18521fed0216024676827487', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: 'f864e224be6ef13cd2530cca0e4e61366253ccf0', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            h("div", { key: 'e56713bbe8701eb7c5cabf9a768206c688bebfac', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'eb27d23ae68ed0e245d6ef2d9feb600a6e47ebd2', class: "small", name: this.filterButtonIcon }), h("h3", { key: '4396ffb6e8a10397fe12c322192ab085e06ffa32' }, this.filterHeading)), h("slot", { key: '54b6684aad46df572655a8f29e4c865182c0f1a3' }))));
     }
 };
 JumpFilter.style = JumpFilterStyle0;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-70f1949a.js';
 const jumpFiltergroupCss = ":host{display:block}:host slot{display:flex;flex-direction:column;gap:0.25rem;margin-bottom:1rem}h5{margin:0 0 0.25rem}[data-hide=true]{display:none}";
 const JumpFiltergroupStyle0 = jumpFiltergroupCss;
@@ -104,8 +104,8 @@ const JumpFiltergroup = class {
         });
     }
     render() {
-        return (h(Host, { key: '839a19d9b3c6e54a9852942d5ed2742f0c3bb148' }, this.heading && h("h5", { key: 'e6ee76715547568a0a523238bccf1270bbf5e51d' }, this.heading), h("div", { key: 'bf592042f4ac6d24f1fc781a1bfa243096e6533b', class: "filterGroup" }, h("slot", { key: '017cdc449f638dfbd280053c7883ae2cdaf460c7', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
-            h("jump-button", { key: '4ab0117c15d7de1b4a026444f0492810bffe13bc', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '720871af9f4c520b8e11a72615300243b8d14dcb', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
+        return (h(Host, { key: '6ea498729a7279ad7b686ef158e6d912c7ec86ce' }, this.heading && h("h5", { key: 'a4d4a1b71dec49d90bd92a30c2335c8a69034906' }, this.heading), h("div", { key: '215a8386f89ba7026b2e1b05aad67157e7f512d6', class: "filterGroup" }, h("slot", { key: '6e96d228078df165e364adccae8d6dceac8626f4', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            h("jump-button", { key: '6f1a595c19d8d7528b8f99d3665607e56b4c1d27', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '79e9c1540e53fee842bc5ba0658b0437eddbf47d', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
     }
 };
 JumpFiltergroup.style = JumpFiltergroupStyle0;

package/dist/esm/jump-pagination-table.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-70f1949a.js';
 const jumpPaginationTableCss = ":host{display:block}.JumpPaginationTable{--jump-pagination-table-label:var(--neutral-grey-secondary);--jump-pagination-table-arrows:var(--neutral-grey-secondary);--jump-pagination-table-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPaginationTable__Wrapper{display:flex;justify-content:space-between}.JumpPaginationTable__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPaginationTable__Wrapper .elementsPerPage label{color:var(--jump-pagination-table-label);font-size:var(--fs-300);font-weight:normal}.JumpPaginationTable__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-table-label)}.JumpPaginationTable__Wrapper .indicators .arrow{color:var(--jump-pagination-table-arrows);display:flex;align-items:center;gap:10px}.JumpPaginationTable__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPaginationTable__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-table-arrows-disabled)}.JumpPaginationTable__Wrapper .indicators .elements{color:var(--jump-pagination-table-label);display:flex;align-items:center;gap:5px}";
 const JumpPaginationTableStyle0 = jumpPaginationTableCss;
@@ -67,9 +67,21 @@ const JumpPaginationTable = class {
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        return (h(Host, { key: '7aaf182b98f9dbdbb1d6534a1d7b466bbc486fca', class: "JumpPaginationTable" }, h("div", { key: 'b8a5d5213ae3a20ee69aeb75b0d82c58ab4d5200', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2de29a7b2bb549e3b6e4260429651c1cc3ba72b6', class: "elementsPerPage" }, h("label", { key: 'a9d541046112f0a44239b3d61dea7a80924e56a6', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '28db5dfa88e11493b41a1b846ae35da95ab97926', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '67f6433160f242f108682af2e97c6fdca2136836', class: "indicators" }, h("div", { key: 'a2babacab58ca903d543396f184ac0e82af517c0', class: "elements" }, h("span", { key: 'b50d80c5aff8d99a9146fb22a7624f3c47784f78' }, h("span", { key: '33e54e9d66a4c80ed6c85ad3ac48e82bd1b329f0' }, this.first), " - ", h("span", { key: '925393912439fb60530f18eb863de15b22e41f25' }, this.last), " ", this.pagLabel, " ", h("span", { key: '1d27a6418dbe2a43e18b99bb48164ffbc0c2c8ca' }, this.total))), h("div", { key: '7d5f3508e4110320bf990c51e8f324d1e2c3cb8a', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: '6807e1defb67535f7ca92443d6869ae203155226', onClick: () => this.doChangePage('first'), disabled: this.first === 1 }, h("jump-icon", { key: '221eda90c3a22540531674ff4bf6e980fded8e22', slot: "prefix", name: "chevrons-left" })), h("button", { key: '7cc613b04ac2aee3621fe8d8375afc5fbfffe41b', onClick: () => this.doChangePage('previous'), disabled: this.first === 1 }, h("jump-icon", { key: 'e05d4ea32e2f48fb59c768a6f5a7589b16dbabe2', slot: "prefix", name: "chevron-left" })), h("button", { key: 'dc347685f6183ed76c4b3e0ac1e9b762d974ef39', onClick: () => this.doChangePage('next'), disabled: this.last === this.total }, h("jump-icon", { key: 'd2b9da97638a1d53936d7ff238ee93f0eff910c2', slot: "prefix", name: "chevron-right" })), this.showFirstAndLast &&
-            h("button", { key: '9a4a7253847f4e60ae44866b3e12d8623562f7f6', onClick: () => this.doChangePage('last'), disabled: this.last === this.total }, h("jump-icon", { key: 'bcec81a82757e92facd426c351986b19552c9506', slot: "prefix", name: "chevrons-right" })))))));
+        return (h(Host, { key: '824d23ed1c7c26ea21047e5ce764887d526b2df6', class: "JumpPaginationTable" }, h("div", { key: '742793df17e3f1826768d7839905baddd0223d2b', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'b11952c253e2472672418fc1c48ab59a1ba06e51', class: "elementsPerPage" }, h("label", { key: '9dd4f75b634d818787f050bf2fcf01ef4faad36e', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'f33c5d47808e09b0d6cef474b29373564243c3a2', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '392ede73df269175c997b713f9a4a5ecd92a0e25', class: "indicators" }, h("div", { key: '2438ecab0062bb1fec07d62e32597e2b2aba3fe4', class: "elements" }, h("span", { key: '49e7ad9c4e6298c41b6dba1d984bc5649b15bbbe' }, h("span", { key: '471b63b04e31295192e992f9c61e31878e1cb04d' }, this.first), " - ", h("span", { key: 'b1d61554e28c1e254efc1cf6768da9480a363aea' }, this.last), " ", this.pagLabel, " ", h("span", { key: 'b0727788ea7159d9bc07708814429c95866faa62' }, this.total))), h("div", { key: '0aa5a04cb2837c519790d43805f83cca903eca7e', class: "arrow" }, this.showFirstAndLast &&
+            // <button
+            //   onClick={() => this.doChangePage('first')}
+            //   disabled={this.first === 1}
+            // >
+            //   <jump-icon slot="prefix" name="chevrons-left"></jump-icon>
+            // </button>
+            h("jump-button", { key: 'd767d7705db97eecb2d9111eca909f633c4ae6fa', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'f6799dbdd47a0e845bf7860585c21f5b06d39811', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'd417512e45c62fbed1a1780da00fb01dea27a7e1', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '22199b55ffcfc402f01b9880a728a86b00dc47d3', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'ea388be01e0be9adb03033e94665078cb30f64a2', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '1cdb6a7d147ad4757e3b7c717e0bd1fab8e356fb', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button
+            //   onClick={() => this.doChangePage('last')}
+            //   disabled={this.last === this.total}
+            // >
+            //   <jump-icon slot="prefix" name="chevrons-right"></jump-icon>
+            // </button>
+            h("jump-button", { key: '2309eeed0c9a78ffaf9c886979ff35f566841592', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'f8a929bcdbd2b488cb1bf481a2247fa8d0aa1daf', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "elPerPage": ["elPerPageChanged"]

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

	@@ -1 +1 @@
1	- {"file":"jump-pagination-table.entry.js","mappings":"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","names":[],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- /\n\n / ---------------------- @ELEMENT ---------------------------- /\n\n / ---------------------- @STATE ------------------------------ /\n\n / ---------------------- @PROPERTIES ------------------------- /\n\n /\n Values for the elements per page select\n /\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /\n Number of elements per page selected\n /\n @Prop() elPerPage: number = 10;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /\n Label for the elements per page select\n /\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /\n Total of elements\n /\n @Prop({ reflect: true }) total: number = 100; \n\n /\n First element of the page\n /\n @Prop({ reflect: true }) first: number = 1;\n\n /\n Last element of the page\n /\n @Prop({ reflect: true }) last: number = 10;\n\n /\n Show button to navigate so first e last page\n /\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n / -------------------- LYFECYCLE EVENTS ---------------------- /\n componentWillLoad() {\n this.elPerPage = this.elementsRanges[0];\n }\n\n / -------------------- @LISTEN ------------------------------- /\n\n / -------------------- @METHOD ------------------------------- /\n\n / -------------------- LOCAL METHODS ------------------------- /\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n / --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => this.doChangePage('first')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n </button>\n }\n <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button>\n <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button>\n {this.showFirstAndLast &&\n <button\n onClick={() => this.doChangePage('last')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n </button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-pagination-table.entry.js","mappings":"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","names":[],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- /\n\n / ---------------------- @ELEMENT ---------------------------- /\n\n / ---------------------- @STATE ------------------------------ /\n\n / ---------------------- @PROPERTIES ------------------------- /\n\n /\n Values for the elements per page select\n /\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /\n Number of elements per page selected\n /\n @Prop() elPerPage: number = 10;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /\n Label for the elements per page select\n /\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /\n Total of elements\n /\n @Prop({ reflect: true }) total: number = 100; \n\n /\n First element of the page\n /\n @Prop({ reflect: true }) first: number = 1;\n\n /\n Last element of the page\n /\n @Prop({ reflect: true }) last: number = 10;\n\n /\n Show button to navigate so first e last page\n /\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n / -------------------- LYFECYCLE EVENTS ---------------------- /\n componentWillLoad() {\n this.elPerPage = this.elementsRanges[0];\n }\n\n / -------------------- @LISTEN ------------------------------- /\n\n / -------------------- @METHOD ------------------------------- /\n\n / -------------------- LOCAL METHODS ------------------------- /\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n / --------------------- RENDER ------------------------------- /\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n // <button \n // onClick={() => this.doChangePage('first')}\n // disabled={this.first === 1}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n {/ <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button> /}\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {/ <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button> */}\n {this.showFirstAndLast &&\n // <button\n // onClick={() => this.doChangePage('last')}\n // disabled={this.last === this.total}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-70f1949a.js';
-const jumpPaginationCss = ":host{display:block}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
+const jumpPaginationCss = ":host{display:block;--jump-button-color:yellow}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
 const JumpPaginationStyle0 = jumpPaginationCss;
 const JumpPagination = class {
@@ -28,9 +28,22 @@ const JumpPagination = class {
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        return (h(Host, { key: '91a535355690cc66cac5f6c7ba7b770cc1898d39', class: "JumpPagination" }, h("div", { key: 'b14a24e6c1f4d1cf7348eaacd2a77cd828eccb78', class: "JumpPagination__Wrapper" }, h("div", { key: '4492c23fc92b7aba537cb3f9025524a6bb07ce6c', class: "indicators" }, h("div", { key: 'f48411d785dd35e6404772c1d39d9d78f3da462b', class: "elements" }, h("span", { key: '1d2d195a9ec45c2bd5795b4474de9dc052af22d5' }, h("span", { key: 'c7f9f4473cc2e82e754c3748eb04704f62676e52' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'c1a2a36aef2b86aef07aa040d4d5c9043aeaf75e' }, this.last))), h("div", { key: 'a2645af8e6ce12cc897796fa132dba44f448acd2', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: 'ee246362f466d4691d31f8efc7182ca7c5e9963f', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'e132a8f0c4aad2fb5924e54ad1015315983f2be5', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: '0c7144d281a536b73fda1ac94a36e54a17af846b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '15d1c8b75d229cc33349145bad0ac1dfb5eac83e', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '0721ba5bfb54732174707e61833ceb19d5c8c2fa', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2f0545ccb0da5032604fe535af035be5059508e0', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
-            h("button", { key: '1a62859d3dd69ac106335f9fb3d605ec90d685a7', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'de0dd15cf47d11a59118ca3b8f0999ef60c66997', slot: "prefix", name: "chevrons-right" }), "   "))))));
+        return (h(Host, { key: 'fff2409f80165635fb36aff91e928053a758e56d', class: "JumpPagination" }, h("div", { key: '02def4c71603b81f531c66c612fa492fa665631b', class: "JumpPagination__Wrapper" }, h("div", { key: '4bacda248ee1ee095e9272f0948df3f8d8e539e3', class: "indicators" }, h("div", { key: 'b344407f8e6f07cda556fd7f1f272763272786c8', class: "elements" }, h("span", { key: 'f2e31e33e8608244820bfc4596c47f6234cc25f2' }, h("span", { key: 'a64da6ab40dbea7f7fbeaafeb1a06ea2242993cc' }, this.current), " ", this.pagLabel, " ", h("span", { key: '5a6b9a269ea390192cab4ec6319bc4cca0883921' }, this.last))), h("div", { key: '01878b6a1ba85feb505ec230085f6cbff2edddca', class: "arrow" }, this.showFirstAndLast &&
+            // <button
+            //   onClick={() => {this.current = 1} }
+            //   disabled={(this.current === 1) ? true : false}>
+            //     <jump-icon library="fa" category="regular" name="chevrons-left" size="small" slot="prefix"
+            //     disabled={(this.current === 1) ? true : false}
+            //     ></jump-icon>
+            // </button>
+            h("jump-button", { key: 'b59a7068f61b1e1f7908e5bacd9dd029eb06f4bd', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '559950d3f0e77790efc1c301d1ce8e0ad2d9ab44', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '5e48895c5b5c39a468cac1b39d646a105288e0f4', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '6035d9060e9ea7ad1d0156dd1295cfb689578263', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '06589d58a7202868b97ead74d5e7f7d1e3f66400', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2e484cd77ece285b0e6e72941b06eab8e571c968', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button
+            //   onClick={() => {this.current = this.last}}
+            //   disabled={(this.current === this.last) ? true : false}
+            //   >
+            //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
+            // </button>
+            h("jump-button", { key: '73d1096f381a0cfc35bfc4f0585ac7a35af8060a', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'ca455641fadf5bec18d26d071678c7af07d14837', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "current": ["watchcurrent"]

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

	@@ -1 +1 @@
1	- {"file":"jump-pagination.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,~~6+BAA6+B~~,CAAC;~~AACxgC~~,6BAAe,iBAAiB;;MCMnB,cAAc;;;;uBAGE,CAAC;wBAmBD,IAAI;oBAKR,EAAE;gCAKW,KAAK;;IA1BzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/B;;IAsBD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;KAClB;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IACnB,+DACE,+DAAO,IAAI,CAAC,OAAO,CAAQ,OAAE,IAAI,CAAC,QAAQ,OAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH,EACN,4DAAK,KAAK,EAAC,OAAO,~~IACf~~,IAAI,CAAC,gBAAgB~~;YACpB,+DACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,EAAC,~~EACjC~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,~~SAC7C~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,~~GAAa~~,~~QAAY~~,~~EAE1E,+DACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,~~EAC/B~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,~~SAC7C~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,~~GAAa~~,~~QAAY~~,~~EACvE,+DACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,~~EAC/B~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,~~SACnD~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,~~GAAa~~,~~QAAY~~,~~EACzE~~,IAAI,CAAC,gBAAgB~~;YACpB,+DACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,EAAC,~~EACzC~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,~~SACnD~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,~~GAAa~~,~~QAAY~~,~~CAEzE~~,CACF,CACF,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --jump-pagination-label: var(--neutral-grey-secondary);\n --jump-pagination-arrows-color: var(--neutral-grey-secondary);\n --jump-pagination-arrows-disabled: var(--neutral-grey-disabled);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-label);\n\n .arrow {\n color: var(--jump-pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n\n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n\n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-arrows-disabled); \n }\n }\n\n .elements {\n color: var(--jump-pagination-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n }\n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: ~~false~~,\n})\nexport class JumpPagination {\n \n /* ---------------------- @STATE ------------------------- /\n @State() current: number = 1;\n\n @Watch('current')\n watchcurrent(newValue: number, oldValue: number) {\n let details = {\n current: newValue,\n previousPage: oldValue,\n first: 1,\n last: this.last,\n direction: newValue > oldValue ? 'next' : 'prev'\n };\n\n this.changePage.emit(details);\n }\n\n / ---------------------- @PROPERTIES ------------------------- /\n /\n Label of the pagination\n /\n @Prop() pagLabel: string = 'di'; \n\n /\n Last element of the page\n /\n @Prop() last: number = 10; \n\n /\n Show button to navigate so first e last page\n /\n @Prop() showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n / ---------------------- @LIFECYCLE ------------------------- /\n componentWillLoad() {\n this.current = 1;\n }\n \n / --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n <div class=\"indicators\"> \n <div class=\"elements\">\n <span>\n <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.current = 1} }\n disabled={(this.current === 1) ? true : false}\n > <jump-icon slot=\"~~prefix~~\" name=\"chevrons-left\"></jump-icon> </button>\n }\n <button \n onClick={() => {this.current--}} \n disabled={(this.current === 1) ? true : false}\n > <jump-icon slot=\"~~prefix~~\" name=\"chevron-left\"></jump-icon> </button>\n <button \n onClick={() => {this.current++}}\n disabled={(this.current === this.last) ? true : false}\n > <jump-icon ~~slot~~=\"~~prefix~~\" name=\"chevron-right\"></jump-icon> </button>\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.current = this.last}}\n disabled={(this.current === this.last) ? true : false}\n > <jump-icon ~~slot~~=\"~~prefix~~\" name=\"chevrons-right\"></jump-icon> </button> \n }\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination&encapsulation=shadow","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n --jump-button-color: yellow;\n}\n\n.JumpPagination {\n --jump-pagination-label: var(--neutral-grey-secondary);\n --jump-pagination-arrows-color: var(--neutral-grey-secondary);\n --jump-pagination-arrows-disabled: var(--neutral-grey-disabled);\n\n\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-label);\n\n .arrow {\n color: var(--jump-pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n\n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n\n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-arrows-disabled); \n }\n }\n\n .elements {\n color: var(--jump-pagination-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n }\n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: true,\n})\nexport class JumpPagination {\n \n /* ---------------------- @STATE ------------------------- /\n @State() current: number = 1;\n\n @Watch('current')\n watchcurrent(newValue: number, oldValue: number) {\n let details = {\n current: newValue,\n previousPage: oldValue,\n first: 1,\n last: this.last,\n direction: newValue > oldValue ? 'next' : 'prev'\n };\n\n this.changePage.emit(details);\n }\n\n / ---------------------- @PROPERTIES ------------------------- /\n /\n Label of the pagination\n /\n @Prop() pagLabel: string = 'di'; \n\n /\n Last element of the page\n /\n @Prop() last: number = 10; \n\n /\n Show button to navigate so first e last page\n /\n @Prop() showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n / ---------------------- @LIFECYCLE ------------------------- /\n componentWillLoad() {\n this.current = 1;\n }\n \n / --------------------- RENDER ------------------------------- /\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n <div class=\"indicators\"> \n <div class=\"elements\">\n <span>\n <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n </span>\n </div>\n <div class=\"arrow\">\n \n {this.showFirstAndLast &&\n // <button \n // onClick={() => {this.current = 1} }\n // disabled={(this.current === 1) ? true : false}> \n // <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-left\" size=\"small\" slot=\"prefix\"\n // disabled={(this.current === 1) ? true : false}\n // ></jump-icon> \n // </button>\n <jump-button onClick={() => { this.current = 1 }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n {/ <button \n onClick={() => {this.current--}} \n disabled={(this.current === 1) ? true : false}>\n <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-left\" size=\"small\" slot=\"prefix\"></jump-icon> \n </button> /}\n <jump-button onClick={() => { this.current-- }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => { this.current++ }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {/ <button \n onClick={() => {this.current++}}\n disabled={(this.current === this.last) ? true : false}\n > \n <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-right\" size=\"small\" slot=\"prefix\"></jump-icon> \n </button> */}\n {this.showFirstAndLast &&\n // <button \n // onClick={() => {this.current = this.last}}\n // disabled={(this.current === this.last) ? true : false}\n // >\n // <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-right\" size=\"small\" slot=\"prefix\"></jump-icon> \n // </button> \n <jump-button onClick={() => { this.current = this.last }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/esm/{jump-badge_2.entry.js → jump-quantity.entry.js} RENAMED Viewed

@@ -1,21 +1,6 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-056a0a66.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-70f1949a.js';
-const jumpBadgeCss = ":host{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-badge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-badge-border-radius);border:solid 1px var(--jump-badge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}";
-const JumpBadgeStyle0 = jumpBadgeCss;
-const AppBadge = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.label = '';
-        this.variant = 'primary';
-    }
-    render() {
-        return (h(Host, { key: '00c947abf3e46b224b6f20421f3e8ee35fdd9401', "data-variant": this.variant }, this.label));
-    }
-};
-AppBadge.style = JumpBadgeStyle0;
-const jumpQuantityCss = ":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer;width:16px}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";
+const jumpQuantityCss = ":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer}:host ::slotted(jump-button){--jump-button-padding:0}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";
 const JumpQuantityStyle0 = jumpQuantityCss;
 const JumpQuantity = class {
@@ -32,7 +17,7 @@ const JumpQuantity = class {
         this.min = 1;
         this.max = undefined;
         this.step = 1;
-        this.label = 'Quantità';
+        this.label = '';
         this.type = 'buttons';
         this.variant = 'vertical';
         this.showButtons = true;
@@ -45,6 +30,15 @@ const JumpQuantity = class {
         });
         this.internals.setFormValue(newValue);
     }
+    /**
+     * Get the current value
+     */
+    async getValue() {
+        return this.value;
+    }
+    async reset() {
+        this.value = this.min;
+    }
     componentWillLoad() {
         this.value = this.min;
         this.internals.setFormValue(this.value);
@@ -54,7 +48,6 @@ const JumpQuantity = class {
         this.internals.setFormValue('');
     }
     handleChange(event) {
-        // console.log(event.target.value);
         this.value = event.target.value;
     }
     //avoid user can change the value below the min
@@ -64,11 +57,11 @@ const JumpQuantity = class {
         }
     }
     render() {
-        return (h(Host, { key: '3c14e68a630e8f8ce14b61b119a141b26d1250d1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'd3012ea3d7d21ec7433ec223f9b55d9547337f57' }, this.label), h("div", { key: '6d637b7fe69f1712f48587003ac491a7d63b54dc', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            h("jump-button", { key: 'a9a3d9368fb78dc4c060190d0069466611963995', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, "-"), h("input", { key: '9e728cdf29440f52d706e9e62961d0e2918cd3d8', ref: (el) => {
+        return (h(Host, { key: '2101c7f3d3f54d29b42659466f9b77f8ad9287c9', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '3e4e1c3e0675283ce6db21877d9e4260c7a2df38' }, this.label), h("div", { key: 'cdcbb08e5d778611d8d50aa38f8900ae7117a166', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            h("jump-button", { key: '70a2656261fbaea52d673ccbca513e0e76b2985b', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '5bb00edd0aa996f27cf4b34d130e5217ef2a7041', library: "lucide", name: "minus", size: "small" })), h("input", { key: '879bfdbc9ddcba94dc9bb478b5c5fb6c17d10389', ref: (el) => {
                 this.inputEl = el;
             }, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
-            h("jump-button", { key: 'cad00efcd74d365d4e9ffb17c6d366b830f2522b', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": this.value >= this.max }, !this.max || this.value < this.max ? '+' : ''))));
+            h("jump-button", { key: '4fc5ea8736ccf4a17397b55c06db4d5a024792ab', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, h("jump-icon", { key: 'a2b77881cac77552fedcc14a5507a1b5c722addc', library: "lucide", name: "plus", size: "small" })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -78,6 +71,6 @@ const JumpQuantity = class {
 };
 JumpQuantity.style = JumpQuantityStyle0;
-export { AppBadge as jump_badge, JumpQuantity as jump_quantity };
+export { JumpQuantity as jump_quantity };
-//# sourceMappingURL=jump-badge_2.entry.js.map
+//# sourceMappingURL=jump-quantity.entry.js.map

package/dist/esm/jump-quantity.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"jump-quantity.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACb,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzC,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAa,CACtD,EAChB,8DAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACf,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzC,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAa,CACrD,CACZ,CACD,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value);\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-70f1949a.js';
-const jumpTabItemCss = ":host{display:block}.JumpTabItem{--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}.JumpTabItem.inline{border-bottom:1px solid var(--jump-tabitem-hover-color)}.JumpTabItem.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}.JumpTabItem.inline.active{border-bottom:3px solid var(--jump-tabitem-active-color)}.JumpTabItem__Content{display:flex;}.JumpTabItem__Content label{font-size:16px}.JumpTabItem__Content.left{flex-direction:row;gap:6px;align-items:center}.JumpTabItem__Content.top{flex-direction:column;gap:2px;align-items:center}.JumpTabItem__Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}.JumpTabItem__Content.inline.active{color:var(--jump-tabitem-active-color)}.JumpTabItem__Content.inline.active span{font-weight:bold}.JumpTabItem__Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}.JumpTabItem__Content.boxed:hover:not(.disabled),.JumpTabItem__Content.boxed:hover:not(.active){background-color:transparent}.JumpTabItem__Content.boxed:hover:not(.disabled) span,.JumpTabItem__Content.boxed:hover:not(.active) span{font-weight:bold}.JumpTabItem__Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}.JumpTabItem__Content.boxed.active span{font-weight:bold}.JumpTabItem__Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}.JumpTabItem__Content.rounded:hover:not(.disabled){cursor:pointer}.JumpTabItem__Content.rounded:hover:not(.disabled) span{font-weight:bold}.JumpTabItem__Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}.JumpTabItem__Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}.JumpTabItem__Content.sheet:hover:not(.disabled){cursor:pointer}.JumpTabItem__Content.sheet:hover:not(.disabled) span{font-weight:bold}.JumpTabItem__Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}.JumpTabItem__Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}";
+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 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 .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host(.inline){border-bottom:1px solid var(--jump-tabitem-hover-color)}:host(.inline):hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}:host(.inline.active){border-bottom:3px solid var(--jump-tabitem-active-color)}";
 const JumpTabItemStyle0 = jumpTabItemCss;
 const JumpTabItem = class {
@@ -25,8 +25,8 @@ const JumpTabItem = class {
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '82864ca72b0febf6a25431ad2788b11e80744d57', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '9275613b491731afc823f0c63be2ae797b372fa6', class: "JumpTabItem__Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            h("jump-icon", { key: 'fcd4ab436a0695fdf3ca07f2ca9d1a6343c79d56', class: "small", name: this.iconName }), h("span", { key: '1d518eb336443596c090beafe74b5186f0a1ff37', class: "label" }, this.label))));
+        return (h(Host, { key: '99a63732d7cc75ed92a2b7fb9469a2bf18d75235', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: 'ee7170cae00c17615e5e528bf103aebd9d97b45f', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            h("jump-icon", { key: 'd198fc5756bd145454d7298969905e8bcf306b20', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: 'bc008babf73fef929062f127a8eb976405046434', class: "label" }, this.label))));
     }
 };
 JumpTabItem.style = JumpTabItemStyle0;

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

	@@ -1 +1 @@
1	- {"file":"jump-tab-item.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG~~,+gFAA+gF~~,CAAC;~~AACviF~~,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;QACd,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;;QAE3C,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC7B;IAkED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EACjC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAG,IAAI,CAAC,OAAO,CAAC,IAC1E,4DAAK,KAAK,EAAE,~~uBAAuB~~,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,~~IACvP~~,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC;YACtE,kEAAW,~~KAAK~~,EAAC,~~OAAO~~,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,~~GAAc~~,~~EAE5D~~,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n~~\n.JumpTabItem {\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 ~~&.inline {~~\n ~~border-bottom: 1px solid var(--jump-tabitem-hover-color);\n~~\n ~~&:hover:not(~~.~~disabled):not(.active)~~ {\n ~~border-bottom: 3px solid var(--jump-tabitem-hover-color);\n cursor: pointer;\n~~ }\n~~\n &.active {\n border-bottom: 3px solid var(--jump-tabitem-active-color);\n }\n\n }\n\n\n &__Content {\n\n~~ display: flex;\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 }\n\n &.inline.active {\n color: var(--jump-tabitem-active-color);\n \n \n span {\n font-weight: bold;\n }\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), &.boxed:hover:not(.active) {\n background-color: transparent;\n\n span {\n font-weight: bold;\n }\n }\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 // border: 1px solid transparent;\n \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: 1px solid var(--jump-tabitem-rounded-bg-color);\n border-radius: 8px 8px 0px 0px;\n }\n\n / Disabilitato /\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\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: ~~false~~,\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 console.log('Component has been rendered');\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 // componentDidLoad() {\n // console.log('Component has been rendered');\n \n // // console.log('THIS', this);\n // if(this.active){\n // let tab = this.tabEl.previousElementSibling as any;\n // if(tab){\n // tab.style.borderRight = 'none';\n // }\n // }\n // }\n\n // @Watch('active')\n // watchActive(newValue) {\n // console.log('watch active');\n // // Devo ripristinare i bordi di tutti i fratelli di this.tabEl\n // let siblings = this.tabEl.parentElement.children as any;\n // for (let i = 0; i < siblings.length; i++) {\n // siblings[i].style.borderRight = '1px solid red';\n // }\n\n // console.log('thisel', this.tabEl);\n // console.log('newvalue', newValue);\n // console.log('xxxxxx', this.tabEl.classList);\n\n // // Se this.tabEl ha la classe 'active' allora rimuovo il bordo destro\n // if (newValue && this.tabEl.classList.contains('active')) {\n // console.log('contiene ');\n // this.tabEl.style.borderRight = 'none';\n\n // // Rimuovere il bordo destro dal fratello precedente, se esiste\n // let prevEl = this.tabEl.previousElementSibling as any;\n // console.log('revEl', prevEl);\n // if (prevEl) {\n // prevEl.style.borderRight = 'none';\n // }\n // }\n // }\n\n // @Watch('active')\n // watchActive(newValue) {\n // // Ripristina i bordi di tutti gli elementi\n // const items = document.querySelectorAll('.JumpTabItem') as any;\n // console.log('ITEMS', items);\n // items.forEach(item => {\n // item.style.borderRight = '1px solid red';\n // });\n\n // // Verifica se this.tabEl ha la classe 'active'\n // if (newValue && this.tabEl.classList.contains('active')) {\n // // Rimuovere il bordo destro dal nuovo elemento attivo\n // this.tabEl.style.borderRight = 'none';\n\n // // Rimuovere il bordo destro dal fratello precedente, se esiste\n // let prevEl = this.tabEl.previousElementSibling as any;\n // if (prevEl) {\n // prevEl.style.borderRight = 'none';\n // }\n // }\n // }\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)}>\n <div class={\"~~JumpTabItem__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 ~~class~~=\"~~small~~\" name={this.iconName}></jump-icon>\n }\n <span class=\"label\">{this.label}</span>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"jump-tab-item.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k1EAAk1E,CAAC;AAC12E,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;QACd,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;;QAE3C,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC7B;IAkED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EACjC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAG,IAAI,CAAC,OAAO,CAAC,IAC1E,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":[],"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 \n .Content {\n \n display: flex;\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 }\n \n &.inline.active {\n color: var(--jump-tabitem-active-color);\n \n \n span {\n font-weight: bold;\n }\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 \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 // border: 1px solid transparent;\n \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: 1px solid var(--jump-tabitem-rounded-bg-color);\n border-radius: 8px 8px 0px 0px;\n }\n \n / Disabilitato /\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n \n }\n}\n\n:host(.inline){\n border-bottom: 1px solid var(--jump-tabitem-hover-color);\n}\n\n:host(.inline):hover:not(.disabled):not(.active) {\n border-bottom: 3px solid var(--jump-tabitem-hover-color);\n cursor: pointer;\n}\n\n:host(.inline.active) {\n border-bottom: 3px solid var(--jump-tabitem-active-color);\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 console.log('Component has been rendered');\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 // componentDidLoad() {\n // console.log('Component has been rendered');\n \n // // console.log('THIS', this);\n // if(this.active){\n // let tab = this.tabEl.previousElementSibling as any;\n // if(tab){\n // tab.style.borderRight = 'none';\n // }\n // }\n // }\n\n // @Watch('active')\n // watchActive(newValue) {\n // console.log('watch active');\n // // Devo ripristinare i bordi di tutti i fratelli di this.tabEl\n // let siblings = this.tabEl.parentElement.children as any;\n // for (let i = 0; i < siblings.length; i++) {\n // siblings[i].style.borderRight = '1px solid red';\n // }\n\n // console.log('thisel', this.tabEl);\n // console.log('newvalue', newValue);\n // console.log('xxxxxx', this.tabEl.classList);\n\n // // Se this.tabEl ha la classe 'active' allora rimuovo il bordo destro\n // if (newValue && this.tabEl.classList.contains('active')) {\n // console.log('contiene ');\n // this.tabEl.style.borderRight = 'none';\n\n // // Rimuovere il bordo destro dal fratello precedente, se esiste\n // let prevEl = this.tabEl.previousElementSibling as any;\n // console.log('revEl', prevEl);\n // if (prevEl) {\n // prevEl.style.borderRight = 'none';\n // }\n // }\n // }\n\n // @Watch('active')\n // watchActive(newValue) {\n // // Ripristina i bordi di tutti gli elementi\n // const items = document.querySelectorAll('.JumpTabItem') as any;\n // console.log('ITEMS', items);\n // items.forEach(item => {\n // item.style.borderRight = '1px solid red';\n // });\n\n // // Verifica se this.tabEl ha la classe 'active'\n // if (newValue && this.tabEl.classList.contains('active')) {\n // // Rimuovere il bordo destro dal nuovo elemento attivo\n // this.tabEl.style.borderRight = 'none';\n\n // // Rimuovere il bordo destro dal fratello precedente, se esiste\n // let prevEl = this.tabEl.previousElementSibling as any;\n // if (prevEl) {\n // prevEl.style.borderRight = 'none';\n // }\n // }\n // }\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)}>\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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, h, H as Host } from './index-70f1949a.js';
 const jumpTabPanelCss = ":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";
 const JumpTabPanelStyle0 = jumpTabPanelCss;
@@ -10,7 +10,7 @@ const JumpTabPanel = class {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '5a2a846c7470d079a668b9951d9463a312be4341', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '0b04369ba6c7ed54566383516b8e736cad30b2c3', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '1381d2e4e39f2ddbac4b9532458419c5c03dc704' }))));
+        return (h(Host, { key: '90108df0339c76ec7ffef78722400cbd5e5b125d', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '4e127ffdeb05efdd63dc538cb38976252ff5a060', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '5e54c0eaed6558e97226ffdc347e0ca8c0d9aa1b' }))));
     }
 };
 JumpTabPanel.style = JumpTabPanelStyle0;

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-056a0a66.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-70f1949a.js';
-const jumpTabCss = ":host{display:block}.JumpTab{--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8)}.JumpTab__Wrapper{display:flex;width:fit-content}.JumpTab__Wrapper.rounded{border-radius:50px;background-color:#f8f8f8}";
+const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8)}:host .Wrapper{display:flex;width:fit-content}:host .Wrapper.rounded{border-radius:50px;background-color:#f8f8f8}";
 const JumpTabStyle0 = jumpTabCss;
 const JumpTab = class {
@@ -78,7 +78,7 @@ const JumpTab = class {
         }
     }
     render() {
-        return (h(Host, { key: '5adce348b75c58349a4ff443cf2f6b39b646722f', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'dcfe4b594261f40f91bff6fba243fcc2c9d19368', class: "JumpTab__Wrapper " + this.variant }, h("slot", { key: 'ce9cf25e3d5566a2e52469aafeeac6392862c348', name: "tab-item" })), h("div", { key: 'a396fbb89c2299c2cee8b9bd1828ad70faf3caee' }, h("slot", { key: '34f95fe28043b74be2cdba5e0253e50c9326bf01', name: "tab-content" }))));
+        return (h(Host, { key: '325ebf63677d7b1307ebb5be3d521d06efa22a5a', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'afa4eb17c8582aa59f8f3b55237de34fa04871d5', class: "Wrapper " + this.variant }, h("slot", { key: '69023d9ae6ae85ef8270d7c8ea4c881c60889f63', name: "tab-item" })), h("div", { key: '28257b0f8de4c3ef1b7dd7adb58dc2d0ce342164' }, h("slot", { key: '3097cf4876730499e2067aed722ff822582e173f', name: "tab-content" }))));
     }
 };
 JumpTab.style = JumpTabStyle0;

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

	@@ -1 +1 @@
1	- {"file":"jump-tab.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~0MAA0M~~,CAAC;~~AAC9N~~,sBAAe,UAAU;;MCMZ,OAAO;;;;4BAIa,SAAS;uBAMd,QAAQ;;IAKlC,sBAAsB,CAAC,KAAkB;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;QAGrC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;QAEpF,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;gBACjB,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;oBACvD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBAEhC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;;wBAE5B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;4BAC3B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gCAClD,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC;6BACzD;iCAAM;gCACL,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;6BACrD;yBACF,CAAC,CAAC;;wBAGH,IAAI,eAAe,GAAG,IAAI,CAAC,sBAA6B,CAAC;wBACzD,IAAI,eAAe,EAAE;4BACnB,eAAe,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;yBAC7D;qBACF;iBAEF;qBAAM;oBACL,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;iBAChC;aACF,CAAC,CAAC;SACJ;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QAC9D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK;gBAClB,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;oBACxD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;iBAClC;qBAAM;oBACL,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;iBACjC;aACF,CAAC,CAAC;SACJ;KACF;IAGD,gBAAgB;QACd,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAC3C,IAAG,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;;YAE3B,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;;YAGpF,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;;;;oBAIxB,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;wBACnE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;qBAClD;yBAAM;wBACL,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC;qBACtD;iBACF,CAAC,CAAC;aACJ;SACF;KAEF;~~IAKD~~,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAC,IAC9E,4DAAK,KAAK,EAAE,~~mBAAmB~~,GAAG,IAAI,CAAC,OAAO,~~IAC5C~~,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,8DACE,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n}\n~~\n.JumpTab {\n~~ --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n\n ~~&__Wrapper~~ {\n display: flex;\n width: fit-content;\n\n &.rounded {\n border-radius: 50px;\n background-color: #f8f8f8; // dovrà andarci var(--jump-tab-bg-color)\n } \n }\n}","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- /\n @Prop() tabGroupName: string = undefined;\n\n /\n The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n console.log('Component has been rendered');\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n~~\n\n\n~~ render() {\n return (\n <Host class=\"JumpTab\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div class={\"~~JumpTab__Wrapper~~ \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </Host>\n );\n }\n}"],"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 \n .Wrapper {\n display: flex;\n width: fit-content;\n \n &.rounded {\n border-radius: 50px;\n background-color: #f8f8f8; // dovrà andarci var(--jump-tab-bg-color)\n }\n }\n}","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- /\n @Prop() tabGroupName: string = undefined;\n\n /\n The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n console.log('Component has been rendered');\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class=\"JumpTab\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div class={\"Wrapper \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </Host>\n );\n }\n}"],"version":3}