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/components/jump-pagination.js CHANGED Viewed

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './jump-button2.js';
 import { d as defineCustomElement$2 } from './jump-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.changePage = createEvent(this, "jump-change-page", 7);
         this.current = 1;
         this.pagLabel = 'di';
@@ -30,15 +32,28 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
     }
     /* --------------------- 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"]
     }; }
     static get style() { return JumpPaginationStyle0; }
-}, [0, "jump-pagination", {
+}, [1, "jump-pagination", {
         "pagLabel": [1, "pag-label"],
         "last": [2],
         "showFirstAndLast": [4, "show-first-and-last"],
@@ -50,13 +65,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["jump-pagination", "jump-icon"];
+    const components = ["jump-pagination", "jump-button", "jump-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "jump-pagination":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, JumpPagination$1);
             }
             break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "jump-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

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

	@@ -1 +1 @@
1	- {"file":"jump-pagination.js","mappings":"~~;;;~~AAAA,MAAM,iBAAiB,GAAG,~~6+BAA6+B~~,CAAC;~~AACxgC~~,6BAAe,iBAAiB;;MCMnBA,gBAAc~~;;;;;~~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":["JumpPagination"],"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.js","mappings":"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","names":["JumpPagination"],"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/components/jump-quantity.js CHANGED Viewed

@@ -1,4 +1,109 @@
-import { J as JumpQuantity$1, d as defineCustomElement$1 } from './jump-quantity2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './jump-button2.js';
+import { d as defineCustomElement$2 } from './jump-icon2.js';
+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$1 = /*@__PURE__*/ proxyCustomElement(class JumpQuantity extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "jump-change", 7);
+        this.internals = this.attachInternals();
+        this.min = 1;
+        this.max = undefined;
+        this.step = 1;
+        this.label = '';
+        this.type = 'buttons';
+        this.variant = 'vertical';
+        this.showButtons = true;
+        this.value = undefined;
+    }
+    onValueChange(newValue, oldValue) {
+        this.change.emit({
+            value: newValue,
+            oldValue: oldValue,
+        });
+        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);
+    }
+    formResetCallback() {
+        this.internals.setValidity({});
+        this.internals.setFormValue('');
+    }
+    handleChange(event) {
+        this.value = event.target.value;
+    }
+    //avoid user can change the value below the min
+    handleBlur(event) {
+        if (event.target.value < this.min) {
+            this.value = this.min;
+        }
+    }
+    render() {
+        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: '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 this; }
+    static get watchers() { return {
+        "value": ["onValueChange"]
+    }; }
+    static get style() { return JumpQuantityStyle0; }
+}, [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]
+    }, undefined, {
+        "value": ["onValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-quantity", "jump-button", "jump-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-quantity":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpQuantity$1);
+            }
+            break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 const JumpQuantity = JumpQuantity$1;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"jump-quantity.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
1	+ {"file":"jump-quantity.js","mappings":"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","names":["JumpQuantity"],"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/components/jump-tab-item.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './jump-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabItem extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.changeActiveTab = createEvent(this, "jump-change-active-tab", 7);
         this.identifier = undefined;
         this.iconName = undefined;
@@ -27,11 +28,11 @@ const JumpTabItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabItem extends
         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))));
     }
     static get style() { return JumpTabItemStyle0; }
-}, [0, "jump-tab-item", {
+}, [1, "jump-tab-item", {
         "identifier": [1],
         "iconName": [1, "icon-name"],
         "iconPosition": [1, "icon-position"],

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

	@@ -1 +1 @@
1	- {"file":"jump-tab-item.js","mappings":";;;AAAA,MAAM,cAAc,GAAG~~,+gFAA+gF~~,CAAC;~~AACviF~~,0BAAe,cAAc;;MCMhBA,aAAW~~;;;;;~~0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;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":["JumpTabItem"],"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.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,k1EAAk1E,CAAC;AAC12E,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;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":["JumpTabItem"],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item&encapsulation=shadow","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tabitem-active-color: var(--secondary-standard);\n --jump-tabitem-color: var(--neutral-grey-secondary);\n --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);\n --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);\n --jump-tabitem-rounded-bg-color: white;\n \n font-family: var(--ff-primary);\n \n \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/components/jump-tab-panel.js CHANGED Viewed

@@ -12,7 +12,7 @@ const JumpTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabPanel exten
         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' }))));
     }
     static get style() { return JumpTabPanelStyle0; }
 }, [1, "jump-tab-panel", {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const jumpTabCss = ":host{display:block}.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$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLElement {
@@ -80,7 +80,7 @@ const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLEle
         }
     }
     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" }))));
     }
     static get style() { return JumpTabStyle0; }
 }, [1, "jump-tab", {

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

	@@ -1 +1 @@
1	- {"file":"jump-tab.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~0MAA0M~~,CAAC;~~AAC9N~~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~~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":["JumpTab"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n}\n~~\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.js","mappings":"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","names":["JumpTab"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n \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}

package/dist/esm/{index-056a0a66.js → index-70f1949a.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 const NAMESPACE = 'jump-design-system';
-const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -2059,6 +2059,9 @@ const setContentReference = (elm) => {
     elm.insertBefore(contentRefElm, elm.firstChild);
 };
 const disconnectInstance = (instance) => {
+    {
+        safeCall(instance, 'disconnectedCallback');
+    }
 };
 const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
@@ -2069,9 +2072,11 @@ const disconnectedCallback = async (elm) => {
                 hostRef.$rmListeners$ = undefined;
             }
         }
-        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+            disconnectInstance(hostRef.$lazyInstance$);
+        }
         else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
-            hostRef.$onReadyPromise$.then(() => disconnectInstance());
+            hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
         }
     }
 };
@@ -2414,4 +2419,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-056a0a66.js.map
+//# sourceMappingURL=index-70f1949a.js.map