@jumpgroup/jump-design-system 0.2.6 → 0.3.0

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

@@ -0,0 +1,2 @@
+import{r as c,h as s,H as o}from"./p-91794ae6.js";const r=":host{display:block}";const t=r;const e=class{constructor(s){c(this,s)}render(){return s(o,{key:"08c6f14d1b4c9fcd99c62679bbc16b02b985644f"},s("slot",{key:"d86efa130f7c545957223bfe25bd016d52031095"}))}};e.style=t;export{e as jump_accordion};
+//# sourceMappingURL=p-afe0cca0.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpAccordionCss","JumpAccordionStyle0","JumpAccordion","render","h","Host","key"],"sources":["src/components/jump-accordion/jump-accordion.scss?tag=jump-accordion&encapsulation=shadow","src/components/jump-accordion/jump-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-accordion',\n  styleUrl: 'jump-accordion.scss',\n  shadow: true,\n})\nexport class JumpAccordion {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,uBACzB,MAAAC,EAAeD,E,MCMFE,EAAa,M,yBAExB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as t,H as i}from"./p-91794ae6.js";const s=":host{display:block}.JumpPaginationTable{--jump-pagination-table-label:var(--neutral-grey-secondary);--jump-pagination-table-arrows:var(--neutral-grey-secondary);--jump-pagination-table-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPaginationTable__Wrapper{display:flex;justify-content:space-between}.JumpPaginationTable__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPaginationTable__Wrapper .elementsPerPage label{color:var(--jump-pagination-table-label);font-size:var(--fs-300);font-weight:normal}.JumpPaginationTable__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-table-label)}.JumpPaginationTable__Wrapper .indicators .arrow{color:var(--jump-pagination-table-arrows);display:flex;align-items:center;gap:10px}.JumpPaginationTable__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPaginationTable__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-table-arrows-disabled)}.JumpPaginationTable__Wrapper .indicators .elements{color:var(--jump-pagination-table-label);display:flex;align-items:center;gap:5px}";const n=s;const r=class{constructor(t){e(this,t);this.changePage=a(this,"jump-change-page",7);this.changeElPerPage=a(this,"jump-change-el-per-page",7);this.elementsRanges=[10,20,60,100];this.elPerPage=10;this.pagLabel="di";this.labelElementsPerPage="Elementi per pagina";this.total=100;this.first=1;this.last=10;this.showFirstAndLast=false}elPerPageChanged(e,a){if(e!==a){this.first=1;this.last=Math.min(this.total,e)}this.changeElPerPage.emit({elPerPage:e})}componentWillLoad(){this.elPerPage=this.elementsRanges[0]}setElPerPage(e){this.elPerPage=e.target.value}doChangePage(e){let a;let t;if(e==="first"){a=1;t=Math.min(this.total,this.elPerPage)}else if(e==="last"){t=this.total;a=Math.max(1,this.total-this.elPerPage+1)}else if(e==="previous"){a=Math.max(1,this.first-this.elPerPage);t=Math.min(this.total,a+this.elPerPage-1)}else if(e==="next"){t=Math.min(this.total,this.last+this.elPerPage);a=Math.max(1,t-this.elPerPage+1)}this.first=a;this.last=t;let i={first:a,last:t,direction:e};this.changePage.emit(i)}render(){var e;return t(i,{key:"7aaf182b98f9dbdbb1d6534a1d7b466bbc486fca",class:"JumpPaginationTable"},t("div",{key:"b8a5d5213ae3a20ee69aeb75b0d82c58ab4d5200",class:"JumpPaginationTable__Wrapper"},t("div",{key:"2de29a7b2bb549e3b6e4260429651c1cc3ba72b6",class:"elementsPerPage"},t("label",{key:"a9d541046112f0a44239b3d61dea7a80924e56a6",htmlFor:"elements"},(e=this.labelElementsPerPage)!==null&&e!==void 0?e:"Elements per page"),t("select",{key:"28db5dfa88e11493b41a1b846ae35da95ab97926",name:"elements",id:"elements",onChange:e=>this.setElPerPage(e)},this.elementsRanges.map((e=>t("option",{value:e,selected:this.elPerPage==e&&true},e))))),t("div",{key:"67f6433160f242f108682af2e97c6fdca2136836",class:"indicators"},t("div",{key:"a2babacab58ca903d543396f184ac0e82af517c0",class:"elements"},t("span",{key:"b50d80c5aff8d99a9146fb22a7624f3c47784f78"},t("span",{key:"33e54e9d66a4c80ed6c85ad3ac48e82bd1b329f0"},this.first)," - ",t("span",{key:"925393912439fb60530f18eb863de15b22e41f25"},this.last)," ",this.pagLabel," ",t("span",{key:"1d27a6418dbe2a43e18b99bb48164ffbc0c2c8ca"},this.total))),t("div",{key:"7d5f3508e4110320bf990c51e8f324d1e2c3cb8a",class:"arrow"},this.showFirstAndLast&&t("button",{key:"6807e1defb67535f7ca92443d6869ae203155226",onClick:()=>this.doChangePage("first"),disabled:this.first===1},t("jump-icon",{key:"221eda90c3a22540531674ff4bf6e980fded8e22",slot:"prefix",name:"chevrons-left"})),t("button",{key:"7cc613b04ac2aee3621fe8d8375afc5fbfffe41b",onClick:()=>this.doChangePage("previous"),disabled:this.first===1},t("jump-icon",{key:"e05d4ea32e2f48fb59c768a6f5a7589b16dbabe2",slot:"prefix",name:"chevron-left"})),t("button",{key:"dc347685f6183ed76c4b3e0ac1e9b762d974ef39",onClick:()=>this.doChangePage("next"),disabled:this.last===this.total},t("jump-icon",{key:"d2b9da97638a1d53936d7ff238ee93f0eff910c2",slot:"prefix",name:"chevron-right"})),this.showFirstAndLast&&t("button",{key:"9a4a7253847f4e60ae44866b3e12d8623562f7f6",onClick:()=>this.doChangePage("last"),disabled:this.last===this.total},t("jump-icon",{key:"bcec81a82757e92facd426c351986b19552c9506",slot:"prefix",name:"chevrons-right"}))))))}static get watchers(){return{elPerPage:["elPerPageChanged"]}}};r.style=n;export{r as jump_pagination_table};
+//# sourceMappingURL=p-b2ca2e96.entry.js.map

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as a}from"./p-91794ae6.js";const n=":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 r=n;const i=class{constructor(o){t(this,o);this.changeActiveTab=e(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 o(a,{key:"82864ca72b0febf6a25431ad2788b11e80744d57",ref:t=>{this.tabEl=t},class:"JumpTabItem "+(this.active?"active":"")+" "+this.variant},o("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")&&o("jump-icon",{key:"fcd4ab436a0695fdf3ca07f2ca9d1a6343c79d56",class:"small",name:this.iconName}),o("span",{key:"1d518eb336443596c090beafe74b5186f0a1ff37",class:"label"},this.label)))}};i.style=r;export{i as jump_tab_item};
+//# sourceMappingURL=p-d58e0952.entry.js.map

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

@@ -0,0 +1 @@
+{"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","name","label"],"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"],"mappings":"yDAAA,MAAMA,EAAiB,ghFACvB,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,yBAA2BlB,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,YAC5OC,KAAKoB,WAAapB,KAAKW,SAAW,UAAYX,KAAKW,SAAW,UAC9DE,EAAA,aAAAE,IAAA,2CAAWG,MAAM,QAAQM,KAAMxB,KAAKoB,WAEtCP,EAAA,QAAAE,IAAA,2CAAMG,MAAM,SAASlB,KAAKyB,Q"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as a}from"./p-91794ae6.js";const o=':host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, "Arial"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:1}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:1}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media img{height:100%;width:100%;object-fit:cover}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary)}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}';const s=o;const d=class{constructor(i){t(this,i);this.toggleFavorite=e(this,"jump-toggle-favorite",7);this.productAddToCart=e(this,"jump-add-to-cart",7);this.productWaitingList=e(this,"jump-add-to-waiting-list",7);this.changeQuantity=e(this,"jump-change-quantity",7);this.changeVariation=e(this,"jump-change-variation",7);this.onlyIconButton=false;this.hasBackground=false;this.badge=undefined;this.favorite=false;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.videoSrc=undefined;this.addedToCart=false;this.notificationUrl=undefined;this.notificationText="Aggiunto al carrello";this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency=undefined;this.outOfStock=false;this.outOfStockText=undefined;this.addtoCartText=undefined;this.waitingListText=undefined;this.addToWaitingList=false;this.quantity=false;this.changedQuantity=false;this.changedVariation=false}componentWillLoad(){}onToggleFavorite(){this.favorite=!this.favorite;this.toggleFavorite.emit({productId:this.productId,favorite:this.favorite})}addProductToCart(){this.addedToCart=true;const t={productId:this.productId,addedToCart:this.addedToCart,quantity:2};this.productAddToCart.emit(t);console.log("productAddToCart payload:",t)}waitingList(){this.addToWaitingList=true;this.productWaitingList.emit({productId:this.productId,addToWaitingList:this.addToWaitingList})}changeQuantityProduct(t){const e=t.target;console.log("Valore selezionato:",e);this.changedQuantity=true;const i={productId:this.productId,changedQuantity:this.changedQuantity,quantity:2};this.changeQuantity.emit(i);console.log("changeQuantity payload:",i)}changeVariationBody(t){const e=t.target;const i=e.value;this.changedVariation=true;const a={productId:this.productId,changedVariation:this.changedVariation,variation:i};this.changeVariation.emit(a);console.log("changeVariation payload:",a)}render(){const t=this.hasBackground?"hasBackground":"";const e=this.onlyIconButton?"iconOnly":"";const o=this.outOfStock?"justify-between":"";return i(a,{key:"cf789b80987e6382306da2ad5ace446580a61990",ref:t=>{this.JumpCardEcommerce=t}},this.badge?i("jump-badge",{class:`${t} ${e}`,variant:"secondary",label:this.badge}):"",i("jump-button",{key:"d8a4cf5efe00c8524760cc72cbf442746e6c2597",onClick:()=>this.onToggleFavorite(),class:`Favorite ${t} ${e}`,variant:this.favorite?"neutral":"primary",size:"small",text:true,onlyIcon:true},i("jump-icon",{key:"16b89f2a5626b9e7fb4691a0de7d629c5ce8dc1c",slot:"prefix",name:"heart",category:this.favorite?"light":"solid",size:"medium"})),i("div",{key:"dc3147d29ade372ee937f9cf2a65bd68069d7e30",class:`Media ${e} ${t}`},i("a",{key:"92d62f4458c29704bda0170e15f00b72c0a79bd0",href:this.link},this.img&&!this.videoSrc?i("img",{src:this.img,alt:this.imgAlt}):"",this.videoSrc&&!this.img?i("video",{autoplay:true},i("source",{src:this.videoSrc,type:"video/mp4"}),i("source",{src:this.videoSrc,type:"video/mov"}),i("source",{src:this.videoSrc,type:"video/webm"})):""),i("div",{key:"0d9ac0e6d99a33313602eafeeba8f2bde64e02d0",class:`NotificationCart ${this.addedToCart==true?"is-active":""}`},i("jump-button",{key:"4117a6d5811a18cab91efc6205a4b1674c417bd9",href:this.notificationUrl,variant:"white",text:true},i("jump-icon",{key:"871ca055dbae216cac54bc269360b16836903cc1",slot:"prefix",name:"check"}),i("span",{key:"039ffeced52e62d4ffb381dfe18d349eed42973a"}," ",this.notificationText," "))),this.onlyIconButton?i("div",{class:"OnlyIconButton"},i("jump-button",{variant:"secondary",size:"large",pill:true,onlyIcon:true,onClick:()=>this.addProductToCart()},i("jump-icon",{slot:"prefix",name:"cart-shopping",category:"regular"}))):""),i("div",{key:"ec82214460c67faba8af6098369d4235bec773e5",class:`Content ${t} ${e}`},i("div",{key:"953cf7cfd621a0209c2fd10af584cc3cac98760e",class:`Body ${t} ${e}`},i("div",{key:"09701cab14c47d008f9fd381679c75fff137e3fa"},i("div",{key:"fd0bbbff94d79d1a6e0c6ba396da2e74cd4c080c",class:"Info"},i("div",{key:"9c16dc172061744b418e263b8f2d361ec1761836",class:"Product"},this.productName),i("div",{key:"5e2c9a1441a2f0dea4e7b6983204ec7a7071f52c",class:"Subtitle"},this.subtitle)),i("div",{key:"4c0e6462f9600552c6bf2f958c0ece70804f3ab3",class:"Price"},i("div",{key:"f02d651ed87dda490d9dd5d45ba3f587b9ebe4e5",class:"Price__Discount"},"-5%"),i("div",{key:"cae9ab50ca4739f7e91a759e4d175c2341a98872",class:`Price__Regular ${this.salePrice?"sale":""}`},this.currency,this.price),i("div",{key:"e628599318e8d4a8c249476712f95e8e19951d83",class:"Price__Sale"},this.currency,this.salePrice))),i("div",{key:"c324067e3c63718e56a3315cc7e14b1255b97103"},i("select",{key:"43b91f6b4c88c865a3df41abd583b5aa1f538c84",name:"select",id:"selectID",onChange:t=>this.changeVariationBody(t)},i("option",{key:"a9ae9bec327dc262608cd2dfd7efb5d877dc8a5c",value:"m"},"medium"),i("option",{key:"88c68917a0c97b8a208d7906b4603e1ccefec1a4",value:"l"},"large"),i("option",{key:"9d84d95a72aa2f7ab5299ea8a478c5c9cff85402",value:"xl"},"extra large")),this.quantity?i("jump-quantity",{onClick:t=>this.changeQuantityProduct(t)}):"")),i("div",{key:"a647b17041f2bc51d91f758e858ae7302930159e",class:`Footer ${o} ${t} ${e}`},this.outOfStock?i("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):"",this.outOfStock?i("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.waitingList()},i("jump-icon",{slot:"prefix",name:!this.outOfStock?"cart-shopping":"bell",category:"regular",size:"small"}),this.waitingListText?this.waitingListText:"Notifica disponibilità"):"",!this.outOfStock&&!this.onlyIconButton?i("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.addProductToCart()},i("jump-icon",{slot:"prefix",name:!this.outOfStock?"cart-shopping":"bell",category:"regular",size:"small"}),this.addtoCartText?this.addtoCartText:"Aggiungi al carrello"):"")))}};d.style=s;export{d as jump_card_ecommerce};
+//# sourceMappingURL=p-e2318686.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpCardEcommerceCss","JumpCardEcommerceStyle0","JumpCardEcommerce","componentWillLoad","onToggleFavorite","this","favorite","toggleFavorite","emit","productId","addProductToCart","addedToCart","payload","quantity","productAddToCart","console","log","waitingList","addToWaitingList","productWaitingList","changeQuantityProduct","event","quantityElement","target","changedQuantity","changeQuantity","changeVariationBody","selectElement","selectedValue","value","changedVariation","variation","changeVariation","render","backgroundClass","hasBackground","iconOnlyClass","onlyIconButton","justifyClass","outOfStock","h","Host","key","ref","el","badge","class","variant","label","onClick","size","text","onlyIcon","slot","name","category","href","link","img","videoSrc","src","alt","imgAlt","autoplay","type","notificationUrl","notificationText","pill","productName","subtitle","salePrice","currency","price","id","onChange","outOfStockText","waitingListText","addtoCartText"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n  --card-max-width: 450px;\n  --jump-card-max-width-horizontal: 100%;\n  --jump-card-color: var(--neutral-grey-primary);\n  --jump-card-background: transparent;\n  --jump-card-border-color: var(--neutral-grey-background);\n  --jump-card-padding: 0.5rem;\n\n  max-width: var(--card-max-width);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  font-family: var(--ff-primary, 'Arial'), sans-serif;\n  line-height: var(--lh-400, 1.3);\n  background-color: var(--jump-card-background);\n  color: var(--jump-card-color);\n\n  .Footer,\n  .Body {\n    display: flex;\n    width: 100%;\n  }\n\n  jump-badge {\n    position: absolute;\n    top: 1rem;\n    left: 1rem;\n    z-index: 1;\n\n    &.hasBackground.iconOnly {\n      top: calc(1rem + 8px);\n      left: calc(1rem + 8px);\n    }\n  }\n\n  .Favorite {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    z-index: 1;\n\n    &.hasBackground.iconOnly {\n      top: calc(1rem + 8px);\n      right: calc(1rem + 8px);\n    }\n  }\n\n  .Media {\n    // aspect-ratio: 3/4;\n    overflow: hidden;\n    position: relative;\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n    aspect-ratio: 1/1;\n\n    img {\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n\n    &.hasBackground {\n      background-color: var(--neutral-white);\n\n      &.iconOnly {\n        border-top-left-radius: 6px;\n        border-top-right-radius: 6px;\n        padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n        img {\n          border-radius: 6px;\n        }\n      }\n    }\n  }\n\n  .NotificationCart {\n    display: none;\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    padding: 2rem 1rem;\n    background-color: hsl(0 0% 0% / 35%);\n    box-sizing: border-box;\n\n    &.is-active {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  .Content {\n    &.hasBackground {\n      background-color: var(--neutral-white);\n      padding: calc(var(--jump-card-padding) * 2);\n    }\n\n    &.iconOnly {\n      padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n    }\n  }\n\n  .Body {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    padding: var(--jump-card-padding) 0;\n\n    & > * {\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n\n      & > * {\n        flex: 0 1 auto;\n      }\n    }\n\n    &.hasBackground {\n      padding: 0 0 var(--jump-card-padding);\n    }\n\n    &.iconOnly {\n      padding: 0;\n    }\n  }\n\n  .Product {\n    font-size: var(--fs-400);\n  }\n\n  .Subtitle {\n    font-size: var(--fs-300);\n    color: var(--neutral-grey-secondary);\n  }\n\n  .Footer {\n    line-height: var(--lh-400);\n    justify-content: end;\n    padding: var(--jump-card-padding) 0;\n    align-items: flex-end;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    &.hasBackground {\n      padding-bottom: 0;\n    }\n\n    &.iconOnly {\n      padding: 0;\n    }\n  }\n\n  .OutOfStock {\n    justify-items: start;\n    font-size: var(--fs-300);\n    font-weight: var(--fw-900);\n    color: var(--status-danger-standard);\n  }\n\n  .OnlyIconButton {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    background: var(--neutral-white);\n    border-top-left-radius: 20px;\n    padding: 8px 8px 0px 8px;\n  }\n\n  .Price {\n    position: relative;\n    display: grid;\n    grid-template-columns: auto auto;\n    grid-template-rows: 1.5rem 1.5rem auto;\n    justify-items: end;\n    align-items: end;\n\n    font-size: var(--fs-500);\n    font-weight: var(--fw-900);\n    line-height: var(--lh-400);\n\n    & > * {\n      display: inline-flex;\n    }\n\n    &__Regular {\n      text-align: right;\n\n      &.sale {\n        text-decoration: line-through;\n        color: var(--neutral-grey-secondary);\n        font-weight: var(--fw-400);\n        font-size: var(--fs-400);\n        grid-column: 2;\n        grid-row: 1;\n      }\n    }\n\n    &__Sale {\n      grid-column: 2;\n      grid-row: 2;\n    }\n\n    &__Discount {\n      color: var(--status-danger-standard);\n      font-weight: var(--fw-400);\n      font-size: var(--fs-300);\n      grid-column: 1;\n      grid-row: 1;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card-ecommerce',\n  styleUrl: 'jump-card-ecommerce.scss',\n  shadow: true,\n})\nexport class JumpCardEcommerce {\n\n  JumpCardEcommerce: HTMLElement;\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  /** Indicate if card has only icon button*/\n  @Prop() onlyIconButton: boolean = false;\n\n  /** Indicate if card has background*/\n  @Prop() hasBackground: boolean = false;\n\n  /** Indicates the badge of the card*/\n  @Prop() badge: string;\n\n  /**  Indicates if the product is favorite */\n  @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n  /** Indicates the link of the card*/\n  @Prop() link: string;\n\n  /** Indicates the image's src of the card*/\n  @Prop() img: string ;\n\n  /** Indicates the img's alt of the card*/\n  @Prop() imgAlt: string;\n\n  /** Indicates the videoSrc of the card*/\n  @Prop() videoSrc: string; \n\n  /** Indicate if the product is added to cart*/\n  @Prop() addedToCart: boolean = false;\n\n  /** Indicates the notificationUrl of the card*/\n  @Prop() notificationUrl: string;\n\n  /** Indicates the notificationText of the card*/\n  @Prop() notificationText: string = 'Aggiunto al carrello';\n\n  /** Indicates the title of the card*/\n  @Prop() productName: string ;\n\n  /** Indicates the subtitle of the card*/\n  @Prop() subtitle: string;\n\n  /** Indicates the ID of the product, can be also a SKU*/\n  @Prop() productId: string ;\n\n  /**  Indicates the price of the card */\n  @Prop() price: number;\n\n  /** Indicates the sale price of the card */\n  @Prop() salePrice: number;\n\n  /** Indicates the currency of the card */\n  @Prop() currency: string;\n\n  /** Indicates if the product is outOfStock */\n  @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n  \n  /** Indicates the outOfStockText of the product*/\n  @Prop() outOfStockText: string;\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() addtoCartText: string ;\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string ;\n\n  /** Indicate if the user request to be notified when te product is avaible*/\n  @Prop() addToWaitingList: boolean = false;\n\n  /** Indicates if the user can choose how much quantity of the product add to cart */\n  @Prop({mutable:true, reflect: true}) quantity: boolean = false;\n\n  /** Indicate if the quantity is change*/\n  @Prop() changedQuantity: boolean = false;\n\n  /** Indicate if the variation is change*/\n  @Prop() changedVariation: boolean = false;\n\n  // /** Indicates the inizial value of input quantity*/\n  // @Prop() quantity: number ;\n\n\n   /* ---------------------- @EVENTS ------------------------- */\n  \n  @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n  @Event({eventName: 'jump-change-quantity'}) changeQuantity: EventEmitter;\n\n  @Event({eventName: 'jump-change-variation'}) changeVariation: EventEmitter;\n\n  \n  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n    // this._selectVariations = this.selectVariations?.split(',');\n  }\n\n  onToggleFavorite() {\n    this.favorite = !this.favorite;\n    this.toggleFavorite.emit(\n      {\n        productId: this.productId,\n        favorite: this.favorite\n      }\n    ); \n  }\n\n  addProductToCart() {\n    this.addedToCart = true;\n    const payload = {\n      productId: this.productId,\n      addedToCart: this.addedToCart,\n      quantity: 2 // da prendere dal quantity\n      // mancano le variazioni\n    };\n    this.productAddToCart.emit(payload);\n    console.log(\"productAddToCart payload:\", payload);\n  }\n\n  waitingList() {\n    this.addToWaitingList = true;\n    this.productWaitingList.emit(\n      {\n        productId: this.productId,\n        addToWaitingList: this.addToWaitingList\n      }\n    )\n  }\n\n  changeQuantityProduct(event: Event) {\n    // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');\n    // const quantityValue = quantityInput.value; // Access the `value` property\n    const quantityElement = event.target as HTMLInputElement;\n    console.log('Valore selezionato:', quantityElement);\n    // const quantityValue = quantityElement.value;\n\n    this.changedQuantity = true;\n    const payload = {\n      productId: this.productId,\n      changedQuantity: this.changedQuantity,\n      quantity: 2 // da sostituire con quaintity value\n    };\n    this.changeQuantity.emit(payload);\n    console.log(\"changeQuantity payload:\", payload)\n  }\n\n  changeVariationBody(event: Event) {\n    const selectElement = event.target as HTMLSelectElement;\n    const selectedValue = selectElement.value;\n\n    this.changedVariation = true;\n    const payload = {\n      productId: this.productId,\n      changedVariation: this.changedVariation,\n      variation: selectedValue // da sostituire\n    };\n    this.changeVariation.emit(payload);\n    console.log(\"changeVariation payload:\", payload)\n  }\n\n  render() {\n    const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n    const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n    const justifyClass = this.outOfStock ? 'justify-between' : '';\n\n    return (\n\n      <Host ref={(el) => {this.JumpCardEcommerce = el;}} >\n        {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" label={this.badge}></jump-badge> : ''}\n  \n        <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n            <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n        </jump-button> \n\n        <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n          <a href={this.link}>\n            {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\n            {this.videoSrc && !this.img ? \n              <video autoplay> \n                <source src={this.videoSrc} type=\"video/mp4\"/> \n                <source src={this.videoSrc} type=\"video/mov\"/> \n                <source src={this.videoSrc} type=\"video/webm\"/> \n              </video> : ''}\n          </a> \n          <div class={`NotificationCart ${this.addedToCart == true ? 'is-active' : ''}`}>\n            <jump-button href={this.notificationUrl} variant=\"white\" text> \n            <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n              <span> {this.notificationText} </span>\n            </jump-button>\n          </div>\n            {this.onlyIconButton ? \n              <div class=\"OnlyIconButton\">\n                <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}> \n                  <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon> \n                </jump-button> \n              </div>\n              : ''\n            }\n        </div>\n\n        <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n          <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n            <div>\n              <div class=\"Info\">\n                <div class=\"Product\">{this.productName}</div>\n                <div class=\"Subtitle\">{this.subtitle}</div>\n              </div>\n\n              <div class=\"Price\">\n                <div class=\"Price__Discount\">-5%</div>\n                <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n                  {this.currency}{this.price}\n                </div>\n                <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n              </div>\n            </div>\n            <div>\n              {/* manca la proprietà se ci sono variazioni o no */}\n              <select name=\"select\" id=\"selectID\" onChange={(event) => this.changeVariationBody(event)}>\n                <option value='m'>medium</option>\n                <option value='l'>large</option>\n                <option value='xl'>extra large</option>\n              </select>\n\n              {this.quantity ? <jump-quantity onClick={(event) => this.changeQuantityProduct(event)}></jump-quantity> : ''}\n            \n              {/* <slot name=\"select\"></slot>\n              <slot name=\"quantity\"></slot> */}\n            </div>\n            \n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n            \n            {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n            \n            { this.outOfStock ?  \n              <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}> \n                <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n                {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'} \n              </jump-button> : ''\n            }\n\n            { !this.outOfStock && !this.onlyIconButton ?  \n              <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}> \n                <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n                {this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello'} \n              </jump-button> : ''\n            }\n\n          </div>\n\n        </div>\n      </Host>\n    );\n  }\n\n}"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as a,h as e,H as s}from"./p-91794ae6.js";const t=":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";const n=t;const c=class{constructor(e){a(this,e);this.identifier=undefined;this.active=false}render(){return e(s,{key:"5a2a846c7470d079a668b9951d9463a312be4341",class:"JumpTabPanel",id:this.identifier},e("div",{key:"0b04369ba6c7ed54566383516b8e736cad30b2c3",class:"JumpTabPanel__Content "+(this.active?"active":"")},e("slot",{key:"1381d2e4e39f2ddbac4b9532458419c5c03dc704"})))}};c.style=n;export{c as jump_tab_panel};
+//# sourceMappingURL=p-ee61c223.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpTabPanelCss","JumpTabPanelStyle0","JumpTabPanel","undefined","render","h","Host","key","class","id","this","identifier","active"],"sources":["src/components/jump-tab-panel/jump-tab-panel.scss?tag=jump-tab-panel&encapsulation=shadow","src/components/jump-tab-panel/jump-tab-panel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.JumpTabPanel {\n  \n  &__Content {    \n    display: none;\n    padding: 1rem 0;\n\n    &.active {\n      display: block;\n    }\n  }\n}","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab-panel',\n  styleUrl: 'jump-tab-panel.scss',\n  shadow: true,\n})\nexport class JumpTabPanel {\n\n  @Prop() identifier: string = undefined;\n  @Prop() active: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"JumpTabPanel\" id={this.identifier}>\n        <div class={\"JumpTabPanel__Content \" + (this.active ? 'active' : '')}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,sHACxB,MAAAC,EAAeD,E,MCMFE,EAAY,M,yCAEMC,U,YACH,K,CAE1B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eAAeC,GAAIC,KAAKC,YAClCN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,0BAA4BE,KAAKE,OAAS,SAAW,KAC/DP,EAAA,QAAAE,IAAA,8C"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as a,H as o}from"./p-91794ae6.js";const r=':host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem;display:flex}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, "Arial"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:1.2;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-variant=primary],:host a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);--jump-button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);--jump-button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);--jump-button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}:host button[data-only-icon],:host a[data-only-icon]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--jump-button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}';const n=r;const u=class{constructor(a){t(this,a);this.disabled=false;this.variant="primary";this.outline=false;this.size="medium";this.full=false;this.pill=false;this.text=false;this.onlyIcon=false;this.href=undefined;this.target=undefined;this.type="button";this.name=undefined;this.value=undefined;this.ariaLabel=undefined;this.class=undefined;this.buttonId=undefined}componentWillLoad(){this.target=this.href?this.target:"_self"}render(){return a(o,{key:"b7db771baa0578e8397424b28d1c3aa3b99f5900"},this.href?a("a",{href:this.href,id:this.buttonId,class:this.class,"data-variant":this.variant,"data-outline":this.outline,"data-size":this.size,"data-full":this.full,"data-pill":this.pill,"data-text":this.text,"data-only-icon":this.onlyIcon,"aria-label":this.ariaLabel,target:this.target},a("slot",{name:"prefix"}),!this.onlyIcon&&a("slot",null),a("slot",{name:"suffix"})):a("button",{id:this.buttonId,class:this.class,"data-variant":this.variant,"data-outline":this.outline,"data-size":this.size,"data-full":this.full,"data-pill":this.pill,"data-text":this.text,"data-only-icon":this.onlyIcon,disabled:this.disabled,"aria-label":this.ariaLabel,type:this.type,name:this.name,value:this.value},a("slot",{name:"prefix"}),!this.onlyIcon&&a("slot",null),a("slot",{name:"suffix"})))}};u.style=n;export{u as jump_button};
+//# sourceMappingURL=p-f842ff46.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpButtonCss","JumpButtonStyle0","JumpButton","undefined","componentWillLoad","this","target","href","render","h","Host","key","id","buttonId","class","variant","outline","size","full","pill","text","onlyIcon","ariaLabel","name","disabled","type","value"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\n:host {\n  --jump-button-color: #ffffff;\n  --jump-button-color-disabled: #cbcbcb;\n  --jump-button-background: var(--primary-standard);\n  --jump-button-background-outline: transparent;\n  --jump-button-color-hover: #ffffff;\n  --jump-button-background-hover: var(--primary-hard);\n  --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n  --jump-button-padding: 1rem 1.25rem;\n\n  display: flex;\n\n  button {\n    display: flex;\n  }\n\n  a {\n    display: inline-flex;\n    box-sizing: border-box;\n  }\n\n  button,\n  a {\n    @extend %reset-button;\n    background-color: var(--jump-button-background);\n    border-radius: var(--jump-button-border-radius);\n    color: var(--jump-button-color);\n    position: relative;\n    font-family: var(--ff-primary, 'Arial'), sans-serif;\n    font-weight: var(--fw-700, 700);\n    font-size: var(--fs-400, 1rem);\n    // line-height: var(--lh-400, 1.3);\n    line-height: 1.2;\n    align-items: center;\n    gap: var(--jump-button-gap, 0.5rem);\n    text-decoration: none;\n\n    //TODO: internal padding of the button\n    padding: var(--jump-button-padding);\n\n    // TODO: gestire il focus con un outline\n    &:hover {\n      background-color: var(--jump-button-background-hover);\n      color: var(--jump-button-color-hover);\n    }\n\n    &[data-variant='primary'] {\n      --jump-button-color: var(--neutral-white);\n      --jump-button-background: var(--primary-standard);\n      --jump-button-color-hover: var(--neutral-white);\n      --jump-button-background-hover: var(--primary-hard);\n    }\n\n    &[data-variant='secondary'] {\n      --jump-button-color: var(--neutral-white);\n      --jump-button-background: var(--secondary-standard);\n      --jump-button-color-hover: var(--neutral-white);\n      --jump-button-background-hover: var(--secondary-hard);\n    }\n\n    &[data-variant='neutral'] {\n      --jump-button-color: var(--neutral-white);\n      --jump-button-background: var(--neutral-grey-secondary);\n      --jump-button-color-hover: var(--neutral-white);\n      --jump-button-background-hover: var(--neutral-grey-primary);\n    }\n\n    &[data-variant='white'] {\n      --jump-button-color: var(--neutral-grey-primary);\n      --jump-button-background: var(--neutral-white);\n      --jump-button-color-hover: var(--neutral-grey-primary);\n      --jump-button-background-hover: var(--neutral-grey-background);\n    }\n\n    &[disabled] {\n      --jump-button-background: var(--jump-button-color-disabled);\n      --jump-button-background-hover: var(--jump-button-color-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-pill] {\n      border-radius: 100rem;\n    }\n\n    &[data-size='small'] {\n      font-size: var(--fs-300, 0.875rem);\n      --jump-button-padding: 0.65rem 1rem;\n    }\n\n    &[data-size='medium'] {\n      font-size: var(--fs-400, 1rem);\n      --jump-button-padding: 0.75rem 1.25rem;\n    }\n\n    &[data-size='large'] {\n      font-size: var(--fs-500, 1.125rem);\n      --jump-button-padding: 1rem 1.5rem;\n    }\n\n    &[data-outline] {\n      background-color: var(--jump-button-background-outline);\n      border: 1px solid var(--jump-button-background);\n      color: var(--jump-button-background);\n      &:hover {\n        background-color: var(--jump-button-background-hover);\n        border: 1px solid var(--jump-button-background-hover);\n        color: var(--jump-button-color-hover);\n      }\n    }\n\n    &[data-text] {\n      background-color: transparent;\n      border: none;\n      color: var(--jump-button-background);\n      padding: 0;\n      &:hover {\n        background-color: transparent;\n        border: none;\n        color: var(--jump-button-background-hover);\n      }\n    }\n\n    &[data-only-icon] {\n      --jump-button-padding: 0.5rem;\n    }\n\n    &[data-only-icon][data-size='small'] {\n      --jump-button-padding: 0.5rem;\n    }\n    &[data-only-icon][data-size='medium'] {\n      --jump-button-padding: 0.875rem;\n    }\n    &[data-only-icon][data-size='large'] {\n      --jump-button-padding: 1rem;\n    }\n\n    &[data-full] {\n      width: 100%;\n      justify-content: center;\n    }\n\n    &.chat {\n      --jump-button-color: var(--neutral-white);\n      --jump-button-background: hsla(133, 54%, 58%, 1);\n      --jump-button-color-hover: var(--neutral-white);\n      --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-button',\n  styleUrl: 'jump-button.scss',\n  shadow: true,\n})\nexport class JumpButton {\n  /**\n   * Set the button as disabled; Vale solo per i bottoni\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates the variant of the button\n   */\n  @Prop() variant: 'primary'|'secondary'|'white'|'neutral' = 'primary';\n\n  /**\n   * Indicates the button as outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Indicates the size of the button\n   */\n  @Prop() size: string = 'medium';\n\n  /**\n   * Indicates if the button is full width\n   */\n  @Prop() full: boolean = false;\n\n  /**\n   * Indicates the button as pill\n   */\n  @Prop() pill: boolean = false;\n\n  /**\n    * Indicates the button as text\n   */\n  @Prop() text: boolean = false;\n\n  /**\n   * Indicates the button as only icon\n   **/\n  @Prop() onlyIcon: boolean = false;\n\n  /**\n   * Indicates if button becames a anchor\n   **/\n  @Prop() href: string;\n\n  /**\n   * Indicates the type of anchor's target \n   **/\n  @Prop() target: '_blank' | '_parent' | '_self' | '_top'\n\n  /**\n   * Indicates type button\n   **/\n  @Prop() type: 'button'|'submit'|'reset' = 'button';\n\n  /**\n   * Indicates the name that the sender button will send\n   **/\n  @Prop() name: string = undefined;\n\n  /**\n   * Indicates the value that the sender button will send\n   **/\n  @Prop() value: string = undefined;\n\n  /**\n   * Indicates the value of text alternative to an element that has no visible text on the screen\n   **/\n  @Prop() ariaLabel: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop() class: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop() buttonId: string = undefined;\n\n  componentWillLoad() {\n    this.target = this.href ? this.target : '_self';\n  }\n\n  render() {\n    \n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n            <slot name=\"prefix\"></slot>\n            {!this.onlyIcon && <slot></slot>}\n            <slot name=\"suffix\"></slot>\n          </a>\n        ) : ( \n          <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n            <slot name=\"prefix\"></slot>\n            {!this.onlyIcon && <slot></slot> }\n            <slot name=\"suffix\"></slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,0pIACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,uCAIO,M,aAK+B,U,aAKhC,M,UAKJ,S,UAKC,M,UAKA,M,UAKA,M,cAKI,M,oDAec,S,UAKnBC,U,WAKCA,U,eAKIA,U,WAKJA,U,cAKGA,S,CAE3B,iBAAAC,GACEC,KAAKC,OAASD,KAAKE,KAAOF,KAAKC,OAAS,O,CAG1C,MAAAE,GAEE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFN,KAAKE,KACJE,EAAA,KAAGF,KAAMF,KAAKE,KAAMK,GAAIP,KAAKQ,SAAUC,MAAOT,KAAKS,MAAK,eAAgBT,KAAKU,QAAO,eAAgBV,KAAKW,QAAO,YAAaX,KAAKY,KAAI,YAAaZ,KAAKa,KAAI,YAAab,KAAKc,KAAI,YAAad,KAAKe,KAAI,iBAAkBf,KAAKgB,SAAQ,aAAchB,KAAKiB,UAAWhB,OAAQD,KAAKC,QAChRG,EAAA,QAAMc,KAAK,YACTlB,KAAKgB,UAAYZ,EAAA,aACnBA,EAAA,QAAMc,KAAK,YAGbd,EAAA,UAAQG,GAAIP,KAAKQ,SAAUC,MAAOT,KAAKS,MAAK,eAAgBT,KAAKU,QAAO,eAAgBV,KAAKW,QAAO,YAAaX,KAAKY,KAAI,YAAaZ,KAAKa,KAAI,YAAab,KAAKc,KAAI,YAAad,KAAKe,KAAI,iBAAkBf,KAAKgB,SAAUG,SAAUnB,KAAKmB,SAAQ,aAAcnB,KAAKiB,UAAWG,KAAMpB,KAAKoB,KAAMF,KAAMlB,KAAKkB,KAAMG,MAAOrB,KAAKqB,OAC9TjB,EAAA,QAAMc,KAAK,YACTlB,KAAKgB,UAAYZ,EAAA,aACnBA,EAAA,QAAMc,KAAK,Y"}