@jumpgroup/jump-design-system 0.3.31 → 0.3.33

package/dist/types/components.d.ts

@@ -341,6 +341,49 @@ export namespace Components {
          */
         "src": string;
     }
+    interface JumpNavbar {
+        "logo": {
+    image_url: string,
+    alt: string,
+    link: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  };
+        "megaMenuAlignment": 'left' | 'right';
+        "mobileLogo": {
+    image_url: string,
+    alt: string,
+    link: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  } | null;
+        "mobileThreshold": number;
+        "navItems": Array<{
+    id: string,
+    text: string,
+    link: string,
+    class: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  }>;
+        "navPosition": 'inline' | 'bottom' | 'megamenu';
+        "secondaryNavItems": Array<{
+    parent: string | null,
+    title: string | null,
+    items: Array<{
+      text: string,
+      link: string,
+      class: string,
+      target: '_blank' | '_parent' | '_self' | '_top'
+    }>
+  }>;
+        "sticky": boolean;
+        "stickyThreshold": number;
+        "type": 'basic' | 'hamburger_left' | 'hamburger_right';
+        "user": {
+    image_url: string,
+    alt: string,
+    link: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  } | null;
+    }
     interface JumpPagination {
         /**
           * Last element of the page
@@ -398,6 +441,11 @@ export namespace Components {
         "variant": 'vertical' | 'horizontal';
     }
     interface JumpTab {
+        "alignment": string;
+        /**
+          * If true, the jump-tab component have a full bottom border
+         */
+        "fullBorder": boolean;
         "tabGroupName": string;
         /**
           * The style of the tab. The same value must be passed to all the items. Choosed from "inline", "boxed", "sheet", "rounded"
@@ -591,6 +639,12 @@ declare global {
         prototype: HTMLJumpIconElement;
         new (): HTMLJumpIconElement;
     };
+    interface HTMLJumpNavbarElement extends Components.JumpNavbar, HTMLStencilElement {
+    }
+    var HTMLJumpNavbarElement: {
+        prototype: HTMLJumpNavbarElement;
+        new (): HTMLJumpNavbarElement;
+    };
     interface HTMLJumpPaginationElementEventMap {
         "jump-change-page": any;
     }
@@ -695,6 +749,7 @@ declare global {
         "jump-filter-checkbox": HTMLJumpFilterCheckboxElement;
         "jump-filtergroup": HTMLJumpFiltergroupElement;
         "jump-icon": HTMLJumpIconElement;
+        "jump-navbar": HTMLJumpNavbarElement;
         "jump-pagination": HTMLJumpPaginationElement;
         "jump-pagination-table": HTMLJumpPaginationTableElement;
         "jump-quantity": HTMLJumpQuantityElement;
@@ -1032,6 +1087,49 @@ declare namespace LocalJSX {
          */
         "src"?: string;
     }
+    interface JumpNavbar {
+        "logo"?: {
+    image_url: string,
+    alt: string,
+    link: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  };
+        "megaMenuAlignment"?: 'left' | 'right';
+        "mobileLogo"?: {
+    image_url: string,
+    alt: string,
+    link: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  } | null;
+        "mobileThreshold"?: number;
+        "navItems"?: Array<{
+    id: string,
+    text: string,
+    link: string,
+    class: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  }>;
+        "navPosition"?: 'inline' | 'bottom' | 'megamenu';
+        "secondaryNavItems"?: Array<{
+    parent: string | null,
+    title: string | null,
+    items: Array<{
+      text: string,
+      link: string,
+      class: string,
+      target: '_blank' | '_parent' | '_self' | '_top'
+    }>
+  }>;
+        "sticky"?: boolean;
+        "stickyThreshold"?: number;
+        "type"?: 'basic' | 'hamburger_left' | 'hamburger_right';
+        "user"?: {
+    image_url: string,
+    alt: string,
+    link: string,
+    target: '_blank' | '_parent' | '_self' | '_top'
+  } | null;
+    }
     interface JumpPagination {
         /**
           * Last element of the page
@@ -1088,6 +1186,11 @@ declare namespace LocalJSX {
         "variant"?: 'vertical' | 'horizontal';
     }
     interface JumpTab {
+        "alignment"?: string;
+        /**
+          * If true, the jump-tab component have a full bottom border
+         */
+        "fullBorder"?: boolean;
         "onJump-change-activetab"?: (event: JumpTabCustomEvent<any>) => void;
         "tabGroupName"?: string;
         /**
@@ -1129,6 +1232,7 @@ declare namespace LocalJSX {
         "jump-filter-checkbox": JumpFilterCheckbox;
         "jump-filtergroup": JumpFiltergroup;
         "jump-icon": JumpIcon;
+        "jump-navbar": JumpNavbar;
         "jump-pagination": JumpPagination;
         "jump-pagination-table": JumpPaginationTable;
         "jump-quantity": JumpQuantity;
@@ -1152,6 +1256,7 @@ declare module "@stencil/core" {
             "jump-filter-checkbox": LocalJSX.JumpFilterCheckbox & JSXBase.HTMLAttributes<HTMLJumpFilterCheckboxElement>;
             "jump-filtergroup": LocalJSX.JumpFiltergroup & JSXBase.HTMLAttributes<HTMLJumpFiltergroupElement>;
             "jump-icon": LocalJSX.JumpIcon & JSXBase.HTMLAttributes<HTMLJumpIconElement>;
+            "jump-navbar": LocalJSX.JumpNavbar & JSXBase.HTMLAttributes<HTMLJumpNavbarElement>;
             "jump-pagination": LocalJSX.JumpPagination & JSXBase.HTMLAttributes<HTMLJumpPaginationElement>;
             "jump-pagination-table": LocalJSX.JumpPaginationTable & JSXBase.HTMLAttributes<HTMLJumpPaginationTableElement>;
             "jump-quantity": LocalJSX.JumpQuantity & JSXBase.HTMLAttributes<HTMLJumpQuantityElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jumpgroup/jump-design-system",
-  "version": "0.3.31",
+  "version": "0.3.33",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/jump-design-system/p-188c7c2e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as a,H as i}from"./p-d4c681a4.js";const s=":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 c=s;const d=class{constructor(a){e(this,a);this.setActiveTab=t(this,"jump-change-activetab",7);this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const a=t.getPropertyValue("--neutral-grey-secondary").trim();let i=this.JumpTabEl.querySelectorAll("jump-tab-item");if(i.length>0){i.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){i.forEach(((e,s)=>{if(e!==t&&s!==i.length-1){e.style.borderRight=`1px solid ${a}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let s=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){console.log("Component has been rendered");if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((e,i)=>{if(i===a.length-1||e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return a(i,{key:"1f7ce37a86cdc6c5eb7c98c19e3c1dd02a731e86",class:"JumpTab",id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},a("div",{key:"2e3c707b84ae5cf642b276f586cf2385ddddc819",class:"Wrapper "+this.variant},a("slot",{key:"270de7bd4e4c5a3a8679d79951557dee91f62788",name:"tab-item"})),a("div",{key:"9ab0264b6e0844324696dec5c35bbeed5441d413"},a("slot",{key:"e329ee02fb732e819e5826208a779357d5bd5e4f",name:"tab-content"})))}};d.style=c;export{d as jump_tab};
-//# sourceMappingURL=p-188c7c2e.entry.js.map

package/dist/jump-design-system/p-188c7c2e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpTabCss","JumpTabStyle0","JumpTab","undefined","changeActiveTabHandler","event","this","setActiveTab","emit","detail","rootStyles","getComputedStyle","document","documentElement","primaryColor","getPropertyValue","trim","items","JumpTabEl","querySelectorAll","length","forEach","item","getAttribute","id","setAttribute","variant","sibling","index","style","borderRight","previousSibling","previousElementSibling","removeAttribute","panel","componentDidLoad","console","log","classList","contains","render","h","Host","key","class","tabGroupName","ref","el","name"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n\n    --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n    \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}"],"mappings":"yDAAA,MAAMA,EAAa,4LACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,+FAIaC,U,aAML,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAG7B,MAAMC,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAASC,IACb,GAAIA,EAAKC,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACvDF,EAAKG,aAAa,SAAU,IAE5B,GAAInB,KAAKoB,UAAY,QAAS,CAE5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAKhC,IAAIC,EAAkBT,EAAKU,uBAC3B,GAAID,EAAiB,CACnBA,EAAgBF,MAAMC,YAAc,uB,OAInC,CACLR,EAAKW,gBAAgB,S,KAK3B,IAAIC,EAAQ5B,KAAKY,UAAUC,iBAAiB,kBAC5C,GAAIe,EAAMd,OAAS,EAAG,CACpBc,EAAMb,SAASa,IACb,GAAIA,EAAMX,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACxDU,EAAMT,aAAa,SAAU,G,KACxB,CACLS,EAAMD,gBAAgB,S,MAO9B,gBAAAE,GACEC,QAAQC,IAAI,+BACZ,GAAG/B,KAAKoB,UAAY,QAAS,CAE3B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAG7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KAInB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKgB,UAAUC,SAAS,UAAW,CACnEjB,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAQhD,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,UAAUpB,GAAIlB,KAAKuC,aAAcC,IAAMC,IAAQzC,KAAKY,UAAY6B,CAAE,GAC5EN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAatC,KAAKoB,SAC5Be,EAAA,QAAAE,IAAA,2CAAMK,KAAK,cAEbP,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iB"}

package/dist/jump-design-system/p-62b52857.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as s}from"./p-d4c681a4.js";const t=":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";const n=t;const d=class{constructor(a){e(this,a);this.identifier=undefined;this.active=false}render(){return a(s,{key:"be2d841d0dd1b5cf9785e427d23cec2f64736722",class:"JumpTabPanel",id:this.identifier},a("div",{key:"843453d48997bac1a6d9407ef4d8338fe50c2bf8",class:"JumpTabPanel__Content "+(this.active?"active":"")},a("slot",{key:"6359a6f56a92683f44964e41ee46e49a8de8e10a"})))}};d.style=n;export{d as jump_tab_panel};
-//# sourceMappingURL=p-62b52857.entry.js.map

package/dist/jump-design-system/p-d93e4ed5.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as s,g as a}from"./p-d4c681a4.js";const n=":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.5rem}:host jump-button,:host button{--jump-button-padding:0.5rem}: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:14px;width:36px;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 r=n;const o=class{constructor(i){t(this,i);this.change=e(this,"jump-change",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.min=1;this.max=undefined;this.step=1;this.label="";this.type="buttons";this.variant="vertical";this.showButtons=true;this.value=undefined}onValueChange(t,e){this.change.emit({value:t,oldValue:e});this.internals.setFormValue(t)}async getValue(){return this.value}async reset(){this.value=this.min}componentWillLoad(){this.value=this.min;this.internals.setFormValue(this.value.toString())}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}handleChange(t){this.value=t.target.value}handleBlur(t){if(t.target.value<this.min){this.value=this.min}}render(){return i(s,{key:"98247725c15e0768eaa1abcb970488367343f296",value:this.value,"data-variant":this.variant,"data-hasbuttons":this.showButtons},this.label&&i("label",{key:"44810a868b55dae39d2f52fff655b1add47f09d7"},this.label),i("div",{key:"9ac8f2057d2c7042038c4f045a769796a0f2baf1",class:`jump-quantity__InnerWrapper`},this.showButtons&&i("jump-button",{key:"1f38a16961192da4de7260516f1ccf6bf4053400",onClick:()=>this.value=this.value-this.step,disabled:this.value<=this.min,variant:"neutral",size:"custom"},i("jump-icon",{key:"d6db4d6b632a18a9d87b2c981c50486616b3e553",library:"lucide",name:"minus",size:"small"})),i("input",{key:"dc7ef8b1dd29423c315e8f94a4f6434b1d0b4093",ref:t=>{this.inputEl=t},type:"number",value:this.value,onInput:t=>this.handleChange(t),min:this.min,max:this.max,step:this.step,"aria-hasbuttons":this.showButtons}),this.showButtons&&i("jump-button",{key:"8f63f27a11f7e0bcdec7313170be3724a18166b8",onClick:()=>this.value=this.value+this.step,disabled:this.value>=this.max,variant:"neutral",size:"custom"},i("jump-icon",{key:"d12d5a6e63c1c3faf00a42d716d19724c3f1de63",library:"lucide",name:"plus",size:"small"}))))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{value:["onValueChange"]}}};o.style=r;export{o as jump_quantity};
-//# sourceMappingURL=p-d93e4ed5.entry.js.map

package/dist/jump-design-system/p-d93e4ed5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpQuantityCss","JumpQuantityStyle0","JumpQuantity","onValueChange","newValue","oldValue","this","change","emit","value","internals","setFormValue","getValue","reset","min","componentWillLoad","toString","formResetCallback","setValidity","handleChange","event","target","handleBlur","render","h","Host","key","variant","showButtons","label","class","onClick","step","disabled","size","library","name","ref","el","inputEl","type","onInput","max"],"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.5rem;\n\n  jump-button, button{\n    --jump-button-padding: 0.5rem;\n  }\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: 14px;\n    width: 36px;\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: number;\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.toString());\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='custom'>\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='custom'>\n              <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n            </jump-button>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,i9BACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,sOAKD,E,6BAEC,E,WACC,G,UACyB,U,aACJ,W,iBACd,K,qBAQ/B,aAAAC,CAAcC,EAAUC,GACtBC,KAAKC,OAAOC,KAAK,CACfC,MAAOL,EACPC,SAAUA,IAEZC,KAAKI,UAAUC,aAAaP,E,CAO9B,cAAMQ,GACJ,OAAON,KAAKG,K,CAId,WAAMI,GACJP,KAAKG,MAAQH,KAAKQ,G,CAGpB,iBAAAC,GACET,KAAKG,MAAQH,KAAKQ,IAClBR,KAAKI,UAAUC,aAAaL,KAAKG,MAAMO,W,CAGzC,iBAAAC,GACEX,KAAKI,UAAUQ,YAAY,IAC3BZ,KAAKI,UAAUC,aAAa,G,CAG9B,YAAAQ,CAAaC,GACXd,KAAKG,MAAQW,EAAMC,OAAOZ,K,CAI5B,UAAAa,CAAWF,GACT,GAAIA,EAAMC,OAAOZ,MAAQH,KAAKQ,IAAK,CACjCR,KAAKG,MAAQH,KAAKQ,G,EAItB,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACjB,MAAOH,KAAKG,MAAK,eAAgBH,KAAKqB,QAAO,kBAAmBrB,KAAKsB,aACxEtB,KAAKuB,OAASL,EAAA,SAAAE,IAAA,4CAAQpB,KAAKuB,OAC5BL,EAAA,OAAAE,IAAA,2CAAKI,MAAO,+BACXxB,KAAKsB,aACFJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMzB,KAAKG,MAAQH,KAAKG,MAAQH,KAAK0B,KAAMC,SAAU3B,KAAKG,OAASH,KAAKQ,IACjFa,QAAQ,UAAUO,KAAK,UAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,QAAQF,KAAK,WAElDV,EAAA,SAAAE,IAAA,2CAAOW,IAAMC,IACXhC,KAAKiC,QAAUD,CAAE,EAEZE,KAAK,SACL/B,MAAOH,KAAKG,MACZgC,QAAUrB,GAAUd,KAAKa,aAAaC,GACtCN,IAAKR,KAAKQ,IACV4B,IAAKpC,KAAKoC,IACVV,KAAM1B,KAAK0B,KAAI,kBACE1B,KAAKsB,cAE5BtB,KAAKsB,aACJJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMzB,KAAKG,MAAQH,KAAKG,MAAQH,KAAK0B,KAAMC,SAAU3B,KAAKG,OAASH,KAAKoC,IACjFf,QAAQ,UAAUO,KAAK,UAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,OAAOF,KAAK,Y"}

package/dist/jump-design-system/p-eebee8f5.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as e,H as n}from"./p-d4c681a4.js";const r=":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 a=r;const i=class{constructor(e){t(this,e);this.changeActiveTab=o(this,"jump-change-active-tab",7);this.identifier=undefined;this.iconName=undefined;this.iconPosition="left";this.label="";this.active=false;this.disabled=false;this.variant="inline"}changeTab(t){this.changeActiveTab.emit({id:t})}componentDidLoad(){console.log("Component has been rendered");let t=this.tabEl.parentElement.getAttribute("variant");this.variant=t}render(){return e(n,{key:"9d817c4dc39e4091ddf11bbe3586dd299db2c9a1",ref:t=>{this.tabEl=t},class:"JumpTabItem "+(this.active?"active":"")+" "+this.variant},e("div",{key:"59bdb3b691141796dd912611742bc79c0d10a4ca",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")&&e("jump-icon",{key:"3cd011409f305046cf76d79256be72662f7d6c9a",library:"fa",category:"regular",name:this.iconName,size:"small"}),e("span",{key:"522ca0332d2302021ded4941ca67d790b308f3ac",class:"label"},this.label)))}};i.style=a;export{i as jump_tab_item};
-//# sourceMappingURL=p-eebee8f5.entry.js.map

package/dist/jump-design-system/p-eebee8f5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpTabItemCss","JumpTabItemStyle0","JumpTabItem","undefined","changeTab","identifier","this","changeActiveTab","emit","id","componentDidLoad","console","log","parentVariant","tabEl","parentElement","getAttribute","variant","render","h","Host","key","ref","el","class","active","iconName","iconPosition","disabled","onClick","library","category","name","size","label"],"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"],"mappings":"yDAAA,MAAMA,EAAiB,m1EACvB,MAAAC,EAAeD,E,MCMFE,EAAW,M,iGAOOC,U,cAKFA,U,kBAMI,O,WACP,G,YACE,M,cAEE,M,aAMD,Q,CAI3B,SAAAC,CAAUC,GACRC,KAAKC,gBAAgBC,KAAK,CAACC,GAAIJ,G,CAGjC,gBAAAK,GACEC,QAAQC,IAAI,+BAEZ,IAAIC,EAAgBP,KAAKQ,MAAMC,cAAcC,aAAa,WAC3DV,KAAKW,QAAUJ,C,CAmEhB,MAAAK,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,IAAMC,IAASjB,KAAKQ,MAAQS,CAAE,EAC/BC,MAAO,gBAAkBlB,KAAKmB,OAAS,SAAW,IAAM,IAAMnB,KAAY,SACzEa,EAAA,OAAAE,IAAA,2CAAKG,MAAO,YAAclB,KAAKoB,SAAWpB,KAAKqB,aAAe,IAAM,IAAOrB,KAAY,QAAI,KAAOA,KAAKmB,OAAS,SAAW,IAAM,KAAOnB,KAAKsB,SAAW,WAAa,IAAKC,QAAS,IAAMvB,KAAKF,UAAUE,KAAKD,YAAaI,GAAIH,KAAKD,YAC/NC,KAAKoB,WAAapB,KAAKW,SAAW,UAAYX,KAAKW,SAAW,UAC9DE,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,KAAKC,SAAS,UAAUC,KAAM1B,KAAKoB,SAAUO,KAAK,UAEvEd,EAAA,QAAAE,IAAA,2CAAMG,MAAM,SAASlB,KAAK4B,Q"}