@jumpgroup/jump-design-system 0.3.72 → 0.3.74

package/dist/jump-design-system/p-37b7b679.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as a,g as s}from"./p-40ca24a6.js";const r=":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";const n=r;const h=0;const o=class{constructor(i){e(this,i);this.filterChange=t(this,"jump-filterchange",7);this.handleMinInput=e=>{const t=e.target;let i=parseInt(t.value,10);if(i>this.maxVal-h){i=this.maxVal-h;t.value=i.toString()}this.minVal=i};this.handleMaxInput=e=>{const t=e.target;let i=parseInt(t.value,10);if(i<this.minVal+h){i=this.minVal+h;t.value=i.toString()}this.maxVal=i};this.handleCommit=()=>{console.log("Committing values:",this.minVal,this.maxVal);const e=[this.minVal,this.maxVal];this.value=e;this.filterChange.emit({name:this.name,values:e})};this.name="range-filter";this.labelMinBefore="Min:";this.labelMinAfter="";this.labelMaxBefore="Max:";this.labelMaxAfter="";this.min=0;this.max=100;this.step=1;this.value=[];this.disabled=false;this.minVal=undefined;this.maxVal=undefined}valueWatcher(e){if(e&&e.length===2&&e[0]===this.minVal&&e[1]===this.maxVal){return}this.setComponentValues(e)}componentWillLoad(){this.setComponentValues(this.value)}setComponentValues(e){if(e&&e.length===2){this.minVal=e[0];this.maxVal=e[1]}else{this.minVal=this.min;this.maxVal=this.max}this.value=[this.minVal,this.maxVal]}getFillStyle(){const e=this.max-this.min;if(e===0)return{left:"0%",width:"0%"};const t=(this.minVal-this.min)/e*100;const i=(this.maxVal-this.min)/e*100;return{left:`${t}%`,width:`${i-t}%`}}async setValue(e,t=true){if(this.disabled||!e||e.length!==2){return this.getValues()}this.setComponentValues(e);if(t){this.handleCommit()}return this.getValues()}async getValues(){return[this.minVal,this.maxVal]}async getName(){return this.name}render(){return i(a,{key:"2d9000905208f8c66c1758050b95c8ed2bb9f0e7",class:{"is-disabled":this.disabled}},i("div",{key:"40d5c90036ed81f8a20c2abf3d0484f70310f614",class:"label-container"},i("label",{key:"befc2f02f7d708d072f530e6866a8a30dccb4bc2",class:"label-min"},this.labelMinBefore," ",this.minVal,this.labelMinAfter),i("label",{key:"5c18199234f89c0f278111e66655625d3873f14b",class:"label-max"},this.labelMaxBefore," ",this.maxVal,this.labelMaxAfter)),i("div",{key:"715136ff9ff433bf6d71b93bc15925b1534e3a0b",class:"slider-container"},i("div",{key:"002dec100b9ca6df2ea734d567c2641dc3537652",class:"slider-track"}),i("div",{key:"915ff539d52779644e19b78e76e47f82b88f2ba3",class:"slider-fill",style:this.getFillStyle()}),i("input",{key:"764a350ec536c0e2c6fb355f366da4b12e58bac7",type:"range",min:this.min,max:this.max,step:this.step,value:this.minVal,onInput:this.handleMinInput,onChange:this.handleCommit,disabled:this.disabled,class:"range-input","aria-label":this.labelMinBefore}),i("input",{key:"b9b59b141bb97c18304d90a0df8a6a865d7904a7",type:"range",min:this.min,max:this.max,step:this.step,value:this.maxVal,onInput:this.handleMaxInput,onChange:this.handleCommit,disabled:this.disabled,class:"range-input","aria-label":this.labelMaxBefore})))}get host(){return s(this)}static get watchers(){return{value:["valueWatcher"]}}};o.style=n;export{o as jump_filter_range};
+//# sourceMappingURL=p-37b7b679.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpFilterRangeCss","JumpFilterRangeStyle0","MIN_GAP","JumpFilterRange","this","handleMinInput","event","input","target","newMinVal","parseInt","value","maxVal","toString","minVal","handleMaxInput","newMaxVal","handleCommit","console","log","currentValues","filterChange","emit","name","values","valueWatcher","newValue","length","setComponentValues","componentWillLoad","min","max","getFillStyle","range","left","width","leftPercent","rightPercent","setValue","emitEvent","disabled","getValues","getName","render","h","Host","key","class","labelMinBefore","labelMinAfter","labelMaxBefore","labelMaxAfter","style","type","step","onInput","onChange"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n  --jump-range-track-height: 4px;\n  --jump-range-thumb-color: var(--neutral-white, #ffffff);\n  --jump-range-thumb-size: 18px;\n  --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n  --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n  display: block;\n  width: 100%;\n}\n\n:host(.is-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n  --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n  font-size: 0.9em;\n  color: #333;\n}\n\n.slider-container {\n  position: relative;\n  height: var(--jump-range-thumb-size);\n  display: flex;\n  align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n  position: absolute;\n  left: 0;\n  height: var(--jump-range-track-height);\n  border-radius: var(--jump-range-track-height);\n  width: 100%;\n}\n\n.slider-track {\n  background-color: var(--jump-range-track-color);\n  z-index: 1;\n}\n\n.slider-fill {\n  background-color: var(--jump-range-fill-color);\n  z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: absolute;\n  width: 100%;\n  height: var(--jump-range-thumb-size);\n  background: transparent;\n  pointer-events: none; // Permette di cliccare attraverso l'input\n  margin: 0;\n  z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: var(--jump-range-thumb-size);\n  width: var(--jump-range-thumb-size);\n  border-radius: 50%;\n  background: var(--jump-range-thumb-color);\n  border: 1px solid #ccc;\n  cursor: pointer;\n  pointer-events: auto;\n  margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n  -moz-appearance: none;\n  height: var(--jump-range-thumb-size);\n  width: var(--jump-range-thumb-size);\n  border-radius: 50%;\n  background: var(--jump-range-thumb-color);\n  border: 1px solid #ccc;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n  height: var(--jump-range-track-height);\n  background: transparent;\n  border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n  -moz-appearance: none;\n  height: var(--jump-range-track-height);\n  background: transparent;\n  border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\n// La distanza minima tra i due slider, per evitare che si sovrappongano.\nconst MIN_GAP = 0;\n\n@Component({\n  tag: 'jump-filter-range',\n  styleUrl: 'jump-filter-range.scss',\n  shadow: true,\n})\nexport class JumpFilterRange {\n  @Element() host: HTMLElement;\n\n  /** Nome identificativo del filtro, utilizzato nell'evento finale. */\n  @Prop() name: string = 'range-filter';\n\n  /** Testo da mostrare prima del valore minimo. */\n  @Prop() labelMinBefore: string = 'Min:';\n  /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n  @Prop() labelMinAfter: string = '';\n\n  /** Testo da mostrare prima del valore massimo. */\n  @Prop() labelMaxBefore: string = 'Max:';\n  /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n  @Prop() labelMaxAfter: string = '';\n\n  /** Il valore minimo possibile per lo slider. */\n  @Prop() min: number = 0;\n  /** Il valore massimo possibile per lo slider. */\n  @Prop() max: number = 100;\n  /** L'incremento tra i valori dello slider. */\n  @Prop() step: number = 1;\n  /** I valori iniziali dello slider, come array [min, max]. */\n  @Prop({ mutable: true }) value: number[] = [];\n  /** Stato disabilitato dello slider. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @State() minVal: number;\n  @State() maxVal: number;\n\n  /**\n   * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n   * Ideale per lanciare chiamate API o ricalcoli onerosi.\n   */\n  @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n  @Watch('value')\n  valueWatcher(newValue: number[]) {\n    if (newValue && newValue.length === 2 && newValue[0] === this.minVal && newValue[1] === this.maxVal) {\n      return;\n    }\n  \n    this.setComponentValues(newValue);\n  }\n\n\n  componentWillLoad() {\n    this.setComponentValues(this.value);\n  }\n\n  /**\n   * Imposta i valori interni del componente partendo da un array.\n   */\n  private setComponentValues(values: number[]) {\n    if (values && values.length === 2) {\n      this.minVal = values[0];\n      this.maxVal = values[1];\n    } else {\n      // Fallback ai valori di default se l'input non è valido\n      this.minVal = this.min;\n      this.maxVal = this.max;\n    }\n    // Sincronizza la prop `value` con lo stato interno\n    this.value = [this.minVal, this.maxVal];\n  }\n\n  /**\n   * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.\n   * Aggiorna solo lo stato interno per un feedback visivo immediato.\n   */\n  private handleMinInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    let newMinVal = parseInt(input.value, 10);\n\n    if (newMinVal > this.maxVal - MIN_GAP) {\n      newMinVal = this.maxVal - MIN_GAP;\n      input.value = newMinVal.toString();\n    }\n    this.minVal = newMinVal;\n  };\n\n  /**\n   * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.\n   * Aggiorna solo lo stato interno per un feedback visivo immediato.\n   */\n  private handleMaxInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    let newMaxVal = parseInt(input.value, 10);\n\n    if (newMaxVal < this.minVal + MIN_GAP) {\n      newMaxVal = this.minVal + MIN_GAP;\n      input.value = newMaxVal.toString();\n    }\n    this.maxVal = newMaxVal;\n  };\n\n  /**\n   * Eseguito quando l'utente rilascia lo slider (evento onChange).\n   * Consolida il valore e emette l'evento finale.\n   */\n  private handleCommit = () => {\n    console.log('Committing values:', this.minVal, this.maxVal);\n    const currentValues = [this.minVal, this.maxVal];\n    this.value = currentValues; // Sincronizza la prop\n    this.filterChange.emit({\n      name: this.name,\n      values: currentValues,\n    });\n  };\n\n  /**\n   * Calcola lo stile per la barra di riempimento tra i due slider.\n   */\n  private getFillStyle() {\n    const range = this.max - this.min;\n    if (range === 0) return { left: '0%', width: '0%' };\n\n    const leftPercent = ((this.minVal - this.min) / range) * 100;\n    const rightPercent = ((this.maxVal - this.min) / range) * 100;\n    return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n  }\n\n  /**\n   * Metodo pubblico per impostare il valore del filtro programmaticamente.\n   */\n  @Method()\n  async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n    if (this.disabled || !values || values.length !== 2) {\n      return this.getValues();\n    }\n    this.setComponentValues(values);\n    if (emitEvent) {\n      this.handleCommit();\n    }\n    return this.getValues();\n  }\n\n  /**\n   * Metodo pubblico per ottenere il valore corrente.\n   */\n  @Method()\n  async getValues(): Promise<number[]> {\n    return [this.minVal, this.maxVal];\n  }\n\n  /**\n   * Metodo pubblico per ottenere il nome del filtro.\n   */\n  @Method()\n  async getName(): Promise<string> {\n    return this.name;\n  }\n\n  render() {\n    return (\n      <Host class={{ 'is-disabled': this.disabled }}>\n        <div class=\"label-container\">\n          <label class=\"label-min\">\n            {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n          </label>\n          <label class=\"label-max\">\n            {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n          </label>\n        </div>\n        <div class=\"slider-container\">\n          <div class=\"slider-track\"></div>\n          <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n          <input\n            type=\"range\"\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.minVal}\n            onInput={this.handleMinInput}\n            onChange={this.handleCommit}\n            disabled={this.disabled}\n            class=\"range-input\"\n            aria-label={this.labelMinBefore}\n          />\n          <input\n            type=\"range\"\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.maxVal}\n            onInput={this.handleMaxInput}\n            onChange={this.handleCommit}\n            disabled={this.disabled}\n            class=\"range-input\"\n            aria-label={this.labelMaxBefore}\n          />\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"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"}

package/dist/jump-design-system/p-5f0b2e2b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as e,H as i}from"./p-40ca24a6.js";const s=":host{display:block;--jump-search-bar-focus-color:var(--secondary-standard, #5E79BA);--jump-search-bar-border-color:var(--neutral-grey-secondary, #707070);--jump-search-bar-bg-color:var(--gray-ultralight, #F8F8F8);--jump-search-bar-dropdown-border-color:var(--neutral-grey-disabled, #CBCBCB);font-family:var(--ff-primary);}:host jump-button{--jump-button-border-radius:0px 3px 3px 0px}:host .SearchBar{position:relative}:host .SearchBar.focused .InputWrapper{border-color:var(--jump-search-bar-focus-color) !important}:host .SearchBar.focused .InputWrapper jump-icon{color:var(--jump-search-bar-focus-color) !important}:host .SearchBar.focused .InputWrapper input{outline:none !important}:host .SearchBar:not(.iconOnly){display:flex;width:100%;}:host .SearchBar:not(.iconOnly) .InputWrapper{width:100%;display:flex}:host .SearchBar:not(.iconOnly) input{width:100%;border:none}:host .SearchBar:not(.iconOnly).outline .InputWrapper{border:1px solid var(--jump-search-bar-border-color);border-radius:3px;padding:12px;gap:8px}:host .SearchBar:not(.iconOnly).outline .InputWrapper jump-icon{color:var(--jump-search-bar-border-color)}:host .SearchBar:not(.iconOnly).outline.withBtn .InputWrapper{border-radius:3px 0px 0px 3px}:host .SearchBar:not(.iconOnly).filled .InputWrapper{border:1px solid var(--jump-search-bar-bg-color);background-color:var(--jump-search-bar-bg-color);border-radius:3px;padding:12px;gap:8px}:host .SearchBar:not(.iconOnly).filled .InputWrapper input{background-color:var(--jump-search-bar-bg-color)}:host .SearchBar:not(.iconOnly).filled .InputWrapper jump-icon{color:var(--jump-search-bar-border-color)}:host .SearchBar:not(.iconOnly).filled.focused.withBtn .InputWrapper{border-radius:3px 0px 0px 3px !important}:host .SearchBar:not(.iconOnly).linear .InputWrapper{border-bottom:1px solid var(--jump-search-bar-border-color);padding-bottom:4px}:host .SearchBar:not(.iconOnly).linear .InputWrapper jump-icon{padding-right:6px}:host .Dropdown{margin-top:10px;border-radius:3px;border:1px solid var(--jump-search-bar-dropdown-border-color);padding:4px 16px;background-color:white}:host .Dropdown.dropAbsolute{position:absolute;box-sizing:border-box;position:absolute;left:0;width:100%}:host .Dropdown.dropRelative{position:relative}:host .Dropdown__Recents .title{color:#707070;font-size:14px;line-height:20px;padding:8px 0;font-weight:700;display:flex}:host .Dropdown__Results .totalRes{display:flex;justify-content:space-between}:host .Dropdown .ResWrapper{display:flex;flex-direction:column}:host .Dropdown .ResWrapper div{padding:8px 0;color:#707070;font-size:14px;display:flex;gap:12px;align-items:center}:host .Dropdown .ResWrapper div img{width:40px;height:48px;object-fit:cover;border-radius:3px}:host .Dropdown .ResWrapper div:hover{cursor:pointer}:host .Dropdown .ResWrapper .helperText{color:#CBCBCB}:host .Dropdown .ResWrapper .helperText svg{width:25px;height:25px}:host .SearchBar.iconOnly.linear{display:flex;width:100%}:host .SearchBar.iconOnly.linear .InputWrapper{width:100%;display:flex;align-items:center;transition:border-bottom 0.3s ease;border-bottom:1px solid transparent;padding-bottom:4px;overflow:hidden;}:host .SearchBar.iconOnly.linear .InputWrapper jump-icon{padding-right:6px;}:host .SearchBar.iconOnly.linear .InputWrapper input{width:0;border:none;transform:translateX(-100%);transition:width 0.3s ease, transform 0.3s ease;animation:none;}:host .SearchBar.iconOnly.linear.expanded .InputWrapper{border-bottom:1px solid var(--jump-search-bar-border-color);transition:border-bottom 0.3s ease;}:host .SearchBar.iconOnly.linear.expanded .InputWrapper input{width:100%;transform:translateX(0);animation:slide-right 0.3s ease forwards;}@keyframes slide-right{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes border-slide-right{from{border-bottom-width:0}to{border-bottom-width:1px}}";const a=s;const o=class{constructor(e){t(this,e);this.searchbarExpanded=r(this,"jump-search-bar-expanded",7);this.search=r(this,"jump-search-bar",7);this.searchFilters=r(this,"jump-filterchange",7);this.showFullSearch=r(this,"jump-search-bar-show-all",7);this.resultClicked=r(this,"jump-search-bar-res-clicked",7);this.handleFocus=()=>{const t=this.jumpSearchBar.closest(".SearchBar");if(t){t.classList.add("focused")}};this.handleBlur=()=>{const t=this.jumpSearchBar.closest(".SearchBar");if(t){t.classList.remove("focused")}};this.doSearch=()=>{if(this.jumpSearchBar){this.searchValue=this.jumpSearchBar.value;if(this.searchValue.length>=3){this.resType="results";this.innerResults=undefined;this.search.emit({search:this.searchValue});this.searchFilters.emit({search:this.searchValue});if(!this.dropdownVisible){this.dropdownVisible=true}}else if(this.searchValue.length==0){this.dropdownVisible=false}}};this.dropdownVisible=false;this.searchValue=undefined;this.resType="recents";this.innerResults=[];this.totalResults=0;this.isExpanded=false;this.placeholder="Cerca...";this.noResultText="Nessun risultato corrispondente";this.loadingText="Sto caricando...";this.resultsText="risultati";this.showAllResText="Mostra tutti i risultati";this.identifier="search-bar";this.debounceTime=500;this.variant="outline";this.withBtn=false;this.recentsTitle="Recenti";this.recents=[];this.results=[];this.dropdown=false;this.linearIconOnly=false;this.dropdownPosition="relative"}searchValueChanged(t){if(t===""){this.innerResults=[...this.recents];this.results=[]}}componentDidLoad(){document.addEventListener("click",this.handleOutsideClick.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.handleOutsideClick.bind(this))}addOption(t){let r=t.detail;this.recents=[...this.recents,Object.assign({},r)];this.innerResults=[...this.recents]}async setResults(t,r){this.results=t;this.innerResults=t;this.totalResults=r}handleOutsideClick(t){if(this.componentRef&&!this.componentRef.contains(t.target)){this.dropdownVisible=false}}debounce(t,r=this.debounceTime){let e;return(...i)=>{if(e){clearTimeout(e)}e=setTimeout((()=>{t.apply(null,i)}),r)}}openDropdown(){this.resType="recents";this.dropdownVisible=true}handleResClicked(t){this.resultClicked.emit({clicked:t})}btnOrShowOtherClicked(){this.showFullSearch.emit({search:this.searchValue})}expandSearchBar(){this.isExpanded=true;this.searchbarExpanded.emit()}renderLinearIconOnly(){return e(i,{class:"JumpSearchBar ",ref:t=>this.componentRef=t},e("div",{class:"SearchBar iconOnly "+this.variant+(this.isExpanded?" expanded":"")},e("div",{class:"InputWrapper",onClick:this.isExpanded&&this.dropdown&&this.recents.length>0?()=>this.openDropdown():null},e("jump-icon",{name:"magnifying-glass",category:"light",onClick:()=>this.expandSearchBar()}),this.isExpanded&&e("input",{placeholder:this.placeholder,type:"search",id:this.identifier,class:"search-input",ref:t=>{this.jumpSearchBar=t},onInput:this.debounce(this.doSearch),onFocus:this.handleFocus,onBlur:this.handleBlur}))),this.dropdown&&this.dropdownVisible&&this.renderDropdown())}renderDefault(){return e(i,{class:"JumpSearchBar",ref:t=>this.componentRef=t},e("div",{class:"SearchBar "+this.variant+" "+(this.withBtn?"withBtn":"")+(this.isExpanded?" expanded":"")},e("div",{class:"InputWrapper",onClick:this.dropdown&&this.recents.length>0?()=>this.openDropdown():null},!this.withBtn&&e("jump-icon",{name:"magnifying-glass",category:"light"}),e("input",{placeholder:this.placeholder,type:"search",id:this.identifier,class:"search-input",ref:t=>{this.jumpSearchBar=t},onInput:this.debounce(this.doSearch),onFocus:this.handleFocus,onBlur:this.handleBlur})),this.withBtn&&!this.linearIconOnly&&e("jump-button",{variant:"secondary",size:"medium",name:"scopri",value:"value","aria-label":"Scopri di più",id:"button",onlyIcon:true,onClick:()=>this.btnOrShowOtherClicked()},e("jump-icon",{slot:"suffix",name:"magnifying-glass"}))),this.dropdown&&this.dropdownVisible&&this.renderDropdown())}renderDropdown(){console.log("POSITION",this.dropdownPosition);return e("div",{class:"Dropdown "+(this.dropdownPosition=="absolute"?"dropAbsolute":"dropRelative")},this.resType=="recents"&&e("div",{class:"Dropdown__Recents"},e("span",{class:"title"},this.recentsTitle),e("div",{class:"ResWrapper"},this.innerResults.length>0&&this.innerResults.map((t=>e("div",{onClick:()=>this.handleResClicked(t)},e("jump-icon",{name:"magnifying-glass",category:"light"}),t["value"]))))),this.resType=="results"&&e("div",{class:"Dropdown__Results"},e("div",{class:"ResWrapper"},this.innerResults===undefined?e("div",{class:"helperText"},e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",width:"252",height:"252"},e("g",null,e("g",{transform:"rotate(0 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.9s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(36 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.8s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(72 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.7s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(108 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.6s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(144 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.5s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(180 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.4s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(216 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.3s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(252 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.2s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(288 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.1s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(324 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"0s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",null))),this.loadingText):this.innerResults.length>0?this.innerResults.map((t=>e("div",{onClick:()=>this.handleResClicked(t),key:t["id"]},t["img"]&&e("img",{src:t["img"],alt:"result"}),t["value"]))):e("div",{class:"helperText"},this.noResultText),this.innerResults&&this.innerResults.length>0&&e("div",{class:"totalRes"},e("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.btnOrShowOtherClicked(),target:"_blank"}," ",this.showAllResText," "),this.totalResults&&e("div",null,this.totalResults," ",this.resultsText)))))}render(){if(this.variant==="linear"&&this.linearIconOnly){return this.renderLinearIconOnly()}else{return this.renderDefault()}}static get watchers(){return{searchValue:["searchValueChanged"]}}};o.style=a;export{o as jump_search_bar};
+//# sourceMappingURL=p-5f0b2e2b.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpSearchBarCss","JumpSearchBarStyle0","JumpSearchBar","this","handleFocus","searchBarContainer","jumpSearchBar","closest","classList","add","handleBlur","remove","doSearch","searchValue","value","length","resType","innerResults","undefined","search","emit","searchFilters","dropdownVisible","searchValueChanged","newValue","recents","results","componentDidLoad","document","addEventListener","handleOutsideClick","bind","disconnectedCallback","removeEventListener","addOption","e","props","detail","Object","assign","setResults","tot","totalResults","event","componentRef","contains","target","debounce","fn","delay","debounceTime","timeoutId","args","clearTimeout","setTimeout","apply","openDropdown","handleResClicked","item","resultClicked","clicked","btnOrShowOtherClicked","showFullSearch","expandSearchBar","isExpanded","searchbarExpanded","renderLinearIconOnly","h","Host","class","ref","el","variant","onClick","dropdown","name","category","placeholder","type","id","identifier","onInput","onFocus","onBlur","renderDropdown","renderDefault","withBtn","linearIconOnly","size","onlyIcon","slot","console","log","dropdownPosition","recentsTitle","map","xmlns","viewBox","preserveAspectRatio","width","height","transform","fill","ry","rx","y","x","repeatCount","begin","dur","keyTimes","values","attributeName","loadingText","key","src","alt","noResultText","text","showAllResText","resultsText","render"],"sources":["src/components/jump-search-bar/jump-search-bar.scss?tag=jump-search-bar&encapsulation=shadow","src/components/jump-search-bar/jump-search-bar.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);\n  --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);\n  --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);\n  --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n  font-family: var(--ff-primary);\n\n  jump-button {\n    --jump-button-border-radius: 0px 3px 3px 0px;\n  }\n\n  .SearchBar {\n    position: relative;\n\n    &.focused .InputWrapper {\n        border-color: var(--jump-search-bar-focus-color) !important;\n    \n        jump-icon {\n          color: var(--jump-search-bar-focus-color) !important;\n        }\n    \n        input {\n          outline: none !important;\n        }\n      }\n  }\n\n  .SearchBar:not(.iconOnly) {\n      display: flex;\n      width: 100%;\n  \n      .InputWrapper {\n        width: 100%;\n        display: flex;\n      }\n  \n      input {\n        width: 100%;\n        border: none;\n      }\n  \n      /* Stile outline*/\n      &.outline .InputWrapper {\n        border: 1px solid var(--jump-search-bar-border-color);\n        border-radius: 3px;\n        padding: 12px;\n        gap: 8px;\n  \n        jump-icon {\n          color: var(--jump-search-bar-border-color);\n        }\n      }\n  \n      &.outline.withBtn .InputWrapper {\n        border-radius: 3px 0px 0px 3px;\n      }\n  \n  \n      /* Stile filled */\n      &.filled .InputWrapper {\n        border: 1px solid var(--jump-search-bar-bg-color);\n        background-color: var(--jump-search-bar-bg-color);\n        border-radius: 3px;\n        padding: 12px;\n        gap: 8px;\n  \n        input {\n          background-color: var(--jump-search-bar-bg-color);\n        }\n  \n        jump-icon {\n          color: var(--jump-search-bar-border-color);\n        }\n      }\n  \n      &.filled.focused.withBtn .InputWrapper {\n        border-radius: 3px 0px 0px 3px !important;\n      }\n  \n      /* Stile linear */\n      &.linear .InputWrapper {\n        border-bottom: 1px solid var(--jump-search-bar-border-color);\n        padding-bottom: 4px;\n  \n        jump-icon {\n          padding-right: 6px;\n        }\n      }\n  }\n    \n \n  .Dropdown {\n\n    &.dropAbsolute {\n      position: absolute;\n      box-sizing: border-box;\n      position: absolute;\n      left: 0;\n      width: 100%;\n    }\n\n    &.dropRelative {\n      position: relative;\n    }\n\n   // position: absolute; la tolgo per il test\n    margin-top: 10px;\n    border-radius: 3px;\n    border: 1px solid var(--jump-search-bar-dropdown-border-color);\n    padding: 4px 16px;\n    background-color: white;\n\n    &__Recents {\n      .title {\n          color: #707070;\n          font-size: 14px;\n          line-height: 20px;\n          padding: 8px 0;\n          font-weight: 700;\n          display: flex;\n        }\n    }\n\n    &__Results {\n      .totalRes {\n        display: flex; \n        justify-content: space-between;\n      }\n    }\n    \n\n    .ResWrapper {\n      display: flex;\n      flex-direction: column;\n\n      div {\n        padding: 8px 0;\n        color: #707070;\n        font-size: 14px;\n        display: flex;\n        gap: 12px;\n        align-items: center;\n\n        img {\n          width: 40px;\n          height: 48px;\n          object-fit: cover;\n          border-radius: 3px;\n        }\n      }\n\n      div:hover {\n        cursor: pointer;\n       }\n\n       .helperText {\n        color: #CBCBCB;\n\n        svg {\n          width: 25px;\n          height: 25px;\n        }\n       }\n    }\n  }\n\n/* Applicazione dell'animazione alla SearchBar.iconOnly.linear */\n.SearchBar.iconOnly.linear {\n  display: flex;\n  width: 100%;\n\n  .InputWrapper {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    transition: border-bottom 0.3s ease;\n    /* Transizione solo per il bordo inferiore */\n    border-bottom: 1px solid transparent;\n    /* Nessun bordo inizialmente */\n    padding-bottom: 4px;\n    overflow: hidden;\n    /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */\n\n    jump-icon {\n      padding-right: 6px;\n      /* Padding dell'icona */\n    }\n\n    input {\n      width: 0;\n      /* Imposta la larghezza iniziale a 0 */\n      border: none;\n      transform: translateX(-100%);\n      /* Sposta l'input fuori dalla vista */\n      transition: width 0.3s ease, transform 0.3s ease;\n      /* Transizioni separate per width e transform */\n      animation: none;\n      /* Disabilita l'animazione predefinita */\n    }\n  }\n\n  &.expanded {\n    .InputWrapper {\n      border-bottom: 1px solid var(--jump-search-bar-border-color);\n      /* Mostra il bordo inferiore quando espanso */\n      transition: border-bottom 0.3s ease;\n      /* Transizione per il bordo inferiore */\n\n      input {\n        width: 100%;\n        /* Espande l'input a tutta la larghezza disponibile */\n        transform: translateX(0);\n        /* Riposiziona l'input nella vista */\n        animation: slide-right 0.3s ease forwards;\n        /* Applicazione dell'animazione slide-right */\n      }\n    }\n  }\n}\n            \n}\n\n@keyframes slide-right {\n  from {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes border-slide-right {\n  from {\n    border-bottom-width: 0;\n  }\n\n  to {\n    border-bottom-width: 1px;\n  }\n}","import { Component, Method, Watch, Listen, State, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-search-bar',\n  styleUrl: 'jump-search-bar.scss',\n  shadow: true,\n})\nexport class JumpSearchBar {\n\n  /* ---------------------- @OWN PROPERTIES ------------------------- */\n  jumpSearchBar: HTMLInputElement;\n  private componentRef: HTMLElement;\n\n  /* ---------------------- @STATE ------------------------- */\n  @State() dropdownVisible: boolean = false;\n  @State() searchValue: string = undefined;\n\n  @Watch('searchValue')\n  searchValueChanged(newValue: string) {\n    if (newValue === '') {\n      // Create a new array reference to trigger re-render\n      this.innerResults = [...this.recents];\n      this.results = [];\n    }\n  }\n\n  @State() resType: string = 'recents';\n  @State() innerResults: Array<object> = [];\n  @State() totalResults: number = 0;\n  @State() isExpanded: boolean = false; \n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n  @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n  @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\n  @Prop() resultsText: string = 'risultati'; // Il testo mostrato accanto al numero di risultati totali.\n  @Prop() showAllResText: string = 'Mostra tutti i risultati'; // La label da mostrare per il pulsante che mostra tutti i risultati.\n  @Prop() identifier: string = 'search-bar'; // Identificatore della searchbar\n  @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n  @Prop() variant: string = 'outline'; // Scelta dello stile della barra di ricerca tra filled, linear e outline.\n  @Prop() withBtn: boolean = false; // Se true, aggiunge un pulsante alla barra di ricerca\n  @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n  @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n  @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n  @Prop() dropdown: boolean = false; // Se true, mostra il dropdown con i risultati della ricerca.\n  @Prop() linearIconOnly: boolean = false; // Se true, mostra solo l'icona nella barra di ricerca lineare\n  @Prop() dropdownPosition: string = 'relative'; // Posizione del dropdown rispetto alla searchbar. \"relative\" o \"absolute\"\n\n\n  /* ---------------------- @EVENTS ------------------------- */\n\n  /**\n   * Evento emesso quando l'utente clicca sull'icona in variant linear e linearIconOnly\n   */\n  @Event({ eventName: 'jump-search-bar-expanded' }) searchbarExpanded: EventEmitter;\n\n  /**\n   * Evento emesso quando l'utente effettua una ricerca \n   * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n   * */\n  @Event({ eventName: 'jump-search-bar' }) search: EventEmitter;\n  @Event({ eventName: 'jump-filterchange' }) searchFilters: EventEmitter; // E' analoga a quella sopra ma serve per i filtri\n\n  /** \n   * Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati \n   * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n  */\n  @Event({ eventName: 'jump-search-bar-show-all' }) showFullSearch: EventEmitter;\n\n  /* \n  * Evento da ascoltare per recuperare il dato cliccato\n  * Emette un oggetto contenente tutti i dati relativi al risultato cliccato.\n  */\n  @Event({ eventName: 'jump-search-bar-res-clicked'}) resultClicked: EventEmitter; \n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentDidLoad() {\n    // Aggiungi l'event listener per il clic al di fuori del componente\n    document.addEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  disconnectedCallback() {\n    // Rimuovi l'event listener per evitare perdite di memoria\n    document.removeEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  /* -------------------- @LISTEN ------------------------------- */\n  @Listen(\"jump-search-bar-dropdown-item-connected\")\n  addOption(e) {\n    let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n\n    // Aggiungi l'elemento solo a `recents`\n    this.recents = [...this.recents, { ...props }];\n\n    // Aggiorna `innerResults` basandoti solo su `recents`\n    this.innerResults = [...this.recents];\n  }\n\n\n  /* -------------------- @METHOD ------------------------------- */\n\n  /** Imposta i risultati della ricerca all'interno della dropdown */\n  @Method()\n  async setResults(results, tot?: number) {\n    this.results = results;\n    this.innerResults = results;\n    this.totalResults = tot;\n  }\n\n  /* -------------------- LOCAL METHODS ------------------------- */\n  handleOutsideClick(event: MouseEvent) {\n    // Controlla se il clic è fuori dal componente\n    if (this.componentRef && !this.componentRef.contains(event.target as Node)) {\n      this.dropdownVisible = false;\n    }\n  }\n\n  // Gestisce l'evento focus sull'input\n  handleFocus = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n    if (searchBarContainer) {\n      searchBarContainer.classList.add('focused');\n    }\n  };\n\n  // Gestisce l'evento blur sull'input\n  handleBlur = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n    if (searchBarContainer) {\n      searchBarContainer.classList.remove('focused');\n    }\n  };\n\n  doSearch = () => {\n    if (this.jumpSearchBar) {\n      this.searchValue = this.jumpSearchBar.value;\n      \n      // Iniziare la ricerca solamente se ci sono almeno tre caratteri \n      if (this.searchValue.length >= 3) {\n        this.resType = 'results';\n\n        this.innerResults = undefined;\n        \n        this.search.emit({ search: this.searchValue });\n        this.searchFilters.emit({ search: this.searchValue });\n  \n        // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti\n        if (!this.dropdownVisible) {\n          this.dropdownVisible = true;\n        }\n      } else if(this.searchValue.length == 0) {\n        this.dropdownVisible = false;\n      }\n    }\n  };\n\n  debounce(fn, delay = this.debounceTime) {\n    let timeoutId;\n\n    return (...args) => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n      timeoutId = setTimeout(() => {\n        fn.apply(null, args);\n      }, delay);\n    };\n  };\n\n  openDropdown() {\n    this.resType = 'recents';\n    this.dropdownVisible = true;\n  }\n\n  /** Emette l'evento di click su un risultato, mandandone tutti i dati */\n  handleResClicked(item) {\n    this.resultClicked.emit({ clicked: item });\n  } \n\n  /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */\n  btnOrShowOtherClicked(){\n    this.showFullSearch.emit({ search: this.searchValue });\n  }\n\n  /**\n   * Se clicco l'icona espando la searchbar ed emetto un evento dedicato\n   */\n  expandSearchBar() {\n    this.isExpanded = true;\n    this.searchbarExpanded.emit();\n  }\n\n\n  /* --------------------- RENDER ------------------------------- */\n  renderLinearIconOnly() {\n    return (\n      <Host class={\"JumpSearchBar \"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n        <div class={\"SearchBar iconOnly \" + this.variant + (this.isExpanded ? \" expanded\" : \"\")}>\n          <div class=\"InputWrapper\" onClick={(this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n              <jump-icon\n                name=\"magnifying-glass\"\n                category=\"light\"\n                onClick={() => this.expandSearchBar()}\n              ></jump-icon>\n            {this.isExpanded &&\n              // Mostra la barra di ricerca con l'animazione di slide\n              <input\n                placeholder={this.placeholder}\n                type=\"search\"\n                id={this.identifier}\n                class=\"search-input\"\n                ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n                onInput={this.debounce(this.doSearch)}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n              />\n            }\n          </div>\n        </div>\n        {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n      </Host>\n    );\n  }\n\n  renderDefault() {\n    return (\n      <Host class={\"JumpSearchBar\"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n        <div class={\"SearchBar \" + this.variant + \" \" + (this.withBtn ? \"withBtn\" : \"\") + (this.isExpanded ? \" expanded\" : \"\")}>\n          <div class=\"InputWrapper\" onClick={(this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n            {!this.withBtn && <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>}\n            <input\n              placeholder={this.placeholder}\n              type=\"search\"\n              id={this.identifier}\n              class=\"search-input\"\n              ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n              onInput={this.debounce(this.doSearch)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n          {this.withBtn && !this.linearIconOnly && (\n            <jump-button\n              variant=\"secondary\"\n              size=\"medium\"\n              name=\"scopri\"\n              value=\"value\"\n              aria-label=\"Scopri di più\"\n              id=\"button\"\n              onlyIcon\n              onClick={() => this.btnOrShowOtherClicked()}\n            >\n              <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n            </jump-button>\n          )}\n        </div>\n        {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n      </Host>\n    );\n  }\n\n  renderDropdown(){\n    console.log('POSITION', this.dropdownPosition);\n    return <div class={\"Dropdown \" + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative' ) }>\n        {(this.resType == 'recents') &&\n          <div class=\"Dropdown__Recents\">\n            <span class=\"title\">{this.recentsTitle}</span>\n            <div class=\"ResWrapper\">\n              {this.innerResults.length > 0 && this.innerResults.map((item) => (\n                <div onClick={() => this.handleResClicked(item)}>\n                  <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n                  {item['value']}\n                </div>\n              ))}\n            </div>\n          </div>\n        }\n        {this.resType == 'results' &&\n          <div class=\"Dropdown__Results\">\n            <div class=\"ResWrapper\">\n              {this.innerResults === undefined ?\n                <div class=\"helperText\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" width=\"252\" height=\"252\" ><g><g transform=\"rotate(0 50 50)\">\n                  <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                    <animate repeatCount=\"indefinite\" begin=\"-0.9s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                  </rect>\n                </g><g transform=\"rotate(36 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.8s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(72 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.7s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(108 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.6s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(144 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.5s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(180 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.4s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(216 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.3s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(252 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.2s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(288 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.1s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(324 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"0s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g></g></g></svg>{this.loadingText}</div>\n                :\n                (this.innerResults.length > 0 ?\n                  this.innerResults.map((item) => (\n                    <div onClick={() => this.handleResClicked(item)} key={item['id']}>\n                      {item['img'] && <img src={item['img']} alt=\"result\" />}\n                      {item['value']}\n                    </div>\n                  ))\n                  :\n                  <div class=\"helperText\">{this.noResultText}</div>\n                )\n              }\n              {(this.innerResults && this.innerResults.length > 0) &&\n                <div class=\"totalRes\">\n                  <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.btnOrShowOtherClicked()} target=\"_blank\"> {this.showAllResText} </jump-button>\n                  {this.totalResults && <div>{this.totalResults} {this.resultsText}</div>}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n  }\n\n  render() {\n    if (this.variant === 'linear' && this.linearIconOnly) {\n      return this.renderLinearIconOnly();\n    } else {\n      return this.renderDefault();\n    }\n  }\n}"],"mappings":"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"}

package/dist/jump-design-system-elements.json

@@ -594,7 +594,7 @@
       "attributes": [
         {
           "name": "disabled",
-          "description": "Stato disabilitato dello slider"
+          "description": "Stato disabilitato dello slider."
         },
         {
           "name": "label-max-after",
@@ -614,19 +614,19 @@
         },
         {
           "name": "max",
-          "description": "Il valore massimo possibile per lo slider"
+          "description": "Il valore massimo possibile per lo slider."
         },
         {
           "name": "min",
-          "description": "Il valore minimo possibile per lo slider"
+          "description": "Il valore minimo possibile per lo slider."
         },
         {
           "name": "name",
-          "description": "Nome identificativo del filtro, utilizzato negli eventi"
+          "description": "Nome identificativo del filtro, utilizzato nell'evento finale."
         },
         {
           "name": "step",
-          "description": "L'incremento tra i valori dello slider"
+          "description": "L'incremento tra i valori dello slider."
         }
       ]
     },

package/dist/types/components/jump-filter-range/jump-filter-range.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class JumpFilterRange {
     host: HTMLElement;
-    /** Nome identificativo del filtro, utilizzato negli eventi */
+    /** Nome identificativo del filtro, utilizzato nell'evento finale. */
     name: string;
     /** Testo da mostrare prima del valore minimo. */
     labelMinBefore: string;
@@ -11,29 +11,62 @@ export declare class JumpFilterRange {
     labelMaxBefore: string;
     /** Testo da mostrare dopo il valore massimo (es. unità di misura). */
     labelMaxAfter: string;
-    /** Il valore minimo possibile per lo slider */
+    /** Il valore minimo possibile per lo slider. */
     min: number;
-    /** Il valore massimo possibile per lo slider */
+    /** Il valore massimo possibile per lo slider. */
     max: number;
-    /** L'incremento tra i valori dello slider */
+    /** L'incremento tra i valori dello slider. */
     step: number;
-    /** I valori iniziali dello slider, come array [min, max] */
+    /** I valori iniziali dello slider, come array [min, max]. */
     value: number[];
-    /** Stato disabilitato dello slider */
+    /** Stato disabilitato dello slider. */
     disabled: boolean;
     minVal: number;
     maxVal: number;
+    /**
+     * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).
+     * Ideale per lanciare chiamate API o ricalcoli onerosi.
+     */
+    filterChange: EventEmitter<{
+        name: string;
+        values: number[];
+    }>;
     valueWatcher(newValue: number[]): void;
-    rangeChange: EventEmitter;
-    filterChange: EventEmitter;
     componentWillLoad(): void;
+    /**
+     * Imposta i valori interni del componente partendo da un array.
+     */
     private setComponentValues;
+    /**
+     * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
+     * Aggiorna solo lo stato interno per un feedback visivo immediato.
+     */
     private handleMinInput;
+    /**
+     * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
+     * Aggiorna solo lo stato interno per un feedback visivo immediato.
+     */
     private handleMaxInput;
-    private emitChangeEvents;
+    /**
+     * Eseguito quando l'utente rilascia lo slider (evento onChange).
+     * Consolida il valore e emette l'evento finale.
+     */
+    private handleCommit;
+    /**
+     * Calcola lo stile per la barra di riempimento tra i due slider.
+     */
     private getFillStyle;
+    /**
+     * Metodo pubblico per impostare il valore del filtro programmaticamente.
+     */
     setValue(values: number[], emitEvent?: boolean): Promise<number[]>;
+    /**
+     * Metodo pubblico per ottenere il valore corrente.
+     */
     getValues(): Promise<number[]>;
+    /**
+     * Metodo pubblico per ottenere il nome del filtro.
+     */
     getName(): Promise<string>;
     render(): any;
 }

package/dist/types/components/jump-search-bar/jump-search-bar.d.ts

@@ -33,6 +33,7 @@ export declare class JumpSearchBar {
      * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'
      * */
     search: EventEmitter;
+    searchFilters: EventEmitter;
     /**
      * Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati
      * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'

package/dist/types/components.d.ts

@@ -313,10 +313,16 @@ export namespace Components {
     }
     interface JumpFilterRange {
         /**
-          * Stato disabilitato dello slider
+          * Stato disabilitato dello slider.
          */
         "disabled": boolean;
+        /**
+          * Metodo pubblico per ottenere il nome del filtro.
+         */
         "getName": () => Promise<string>;
+        /**
+          * Metodo pubblico per ottenere il valore corrente.
+         */
         "getValues": () => Promise<number[]>;
         /**
           * Testo da mostrare dopo il valore massimo (es. unità di misura).
@@ -335,24 +341,27 @@ export namespace Components {
          */
         "labelMinBefore": string;
         /**
-          * Il valore massimo possibile per lo slider
+          * Il valore massimo possibile per lo slider.
          */
         "max": number;
         /**
-          * Il valore minimo possibile per lo slider
+          * Il valore minimo possibile per lo slider.
          */
         "min": number;
         /**
-          * Nome identificativo del filtro, utilizzato negli eventi
+          * Nome identificativo del filtro, utilizzato nell'evento finale.
          */
         "name": string;
+        /**
+          * Metodo pubblico per impostare il valore del filtro programmaticamente.
+         */
         "setValue": (values: number[], emitEvent?: boolean) => Promise<number[]>;
         /**
-          * L'incremento tra i valori dello slider
+          * L'incremento tra i valori dello slider.
          */
         "step": number;
         /**
-          * I valori iniziali dello slider, come array [min, max]
+          * I valori iniziali dello slider, come array [min, max].
          */
         "value": number[];
     }
@@ -875,8 +884,7 @@ declare global {
         new (): HTMLJumpFilterCheckboxElement;
     };
     interface HTMLJumpFilterRangeElementEventMap {
-        "jump-range-change": any;
-        "jump-filterchange": any;
+        "jump-filterchange": { name: string; values: number[] };
     }
     interface HTMLJumpFilterRangeElement extends Components.JumpFilterRange, HTMLStencilElement {
         addEventListener<K extends keyof HTMLJumpFilterRangeElementEventMap>(type: K, listener: (this: HTMLJumpFilterRangeElement, ev: JumpFilterRangeCustomEvent<HTMLJumpFilterRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1020,6 +1028,7 @@ declare global {
     interface HTMLJumpSearchBarElementEventMap {
         "jump-search-bar-expanded": any;
         "jump-search-bar": any;
+        "jump-filterchange": any;
         "jump-search-bar-show-all": any;
         "jump-search-bar-res-clicked": any;
     }
@@ -1471,7 +1480,7 @@ declare namespace LocalJSX {
     }
     interface JumpFilterRange {
         /**
-          * Stato disabilitato dello slider
+          * Stato disabilitato dello slider.
          */
         "disabled"?: boolean;
         /**
@@ -1491,25 +1500,27 @@ declare namespace LocalJSX {
          */
         "labelMinBefore"?: string;
         /**
-          * Il valore massimo possibile per lo slider
+          * Il valore massimo possibile per lo slider.
          */
         "max"?: number;
         /**
-          * Il valore minimo possibile per lo slider
+          * Il valore minimo possibile per lo slider.
          */
         "min"?: number;
         /**
-          * Nome identificativo del filtro, utilizzato negli eventi
+          * Nome identificativo del filtro, utilizzato nell'evento finale.
          */
         "name"?: string;
-        "onJump-filterchange"?: (event: JumpFilterRangeCustomEvent<any>) => void;
-        "onJump-range-change"?: (event: JumpFilterRangeCustomEvent<any>) => void;
         /**
-          * L'incremento tra i valori dello slider
+          * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse). Ideale per lanciare chiamate API o ricalcoli onerosi.
+         */
+        "onJump-filterchange"?: (event: JumpFilterRangeCustomEvent<{ name: string; values: number[] }>) => void;
+        /**
+          * L'incremento tra i valori dello slider.
          */
         "step"?: number;
         /**
-          * I valori iniziali dello slider, come array [min, max]
+          * I valori iniziali dello slider, come array [min, max].
          */
         "value"?: number[];
     }
@@ -1746,6 +1757,7 @@ declare namespace LocalJSX {
         "linearIconOnly"?: boolean;
         "loadingText"?: string;
         "noResultText"?: string;
+        "onJump-filterchange"?: (event: JumpSearchBarCustomEvent<any>) => void;
         /**
           * Evento emesso quando l'utente effettua una ricerca  Emette un oggetto contenenente il valore della ricerca alla chiave 'search'
          */

package/package.json

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

package/dist/jump-design-system/p-800fd60b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as r,h as e,H as i}from"./p-40ca24a6.js";const s=":host{display:block;--jump-search-bar-focus-color:var(--secondary-standard, #5E79BA);--jump-search-bar-border-color:var(--neutral-grey-secondary, #707070);--jump-search-bar-bg-color:var(--gray-ultralight, #F8F8F8);--jump-search-bar-dropdown-border-color:var(--neutral-grey-disabled, #CBCBCB);font-family:var(--ff-primary);}:host jump-button{--jump-button-border-radius:0px 3px 3px 0px}:host .SearchBar{position:relative}:host .SearchBar.focused .InputWrapper{border-color:var(--jump-search-bar-focus-color) !important}:host .SearchBar.focused .InputWrapper jump-icon{color:var(--jump-search-bar-focus-color) !important}:host .SearchBar.focused .InputWrapper input{outline:none !important}:host .SearchBar:not(.iconOnly){display:flex;width:100%;}:host .SearchBar:not(.iconOnly) .InputWrapper{width:100%;display:flex}:host .SearchBar:not(.iconOnly) input{width:100%;border:none}:host .SearchBar:not(.iconOnly).outline .InputWrapper{border:1px solid var(--jump-search-bar-border-color);border-radius:3px;padding:12px;gap:8px}:host .SearchBar:not(.iconOnly).outline .InputWrapper jump-icon{color:var(--jump-search-bar-border-color)}:host .SearchBar:not(.iconOnly).outline.withBtn .InputWrapper{border-radius:3px 0px 0px 3px}:host .SearchBar:not(.iconOnly).filled .InputWrapper{border:1px solid var(--jump-search-bar-bg-color);background-color:var(--jump-search-bar-bg-color);border-radius:3px;padding:12px;gap:8px}:host .SearchBar:not(.iconOnly).filled .InputWrapper input{background-color:var(--jump-search-bar-bg-color)}:host .SearchBar:not(.iconOnly).filled .InputWrapper jump-icon{color:var(--jump-search-bar-border-color)}:host .SearchBar:not(.iconOnly).filled.focused.withBtn .InputWrapper{border-radius:3px 0px 0px 3px !important}:host .SearchBar:not(.iconOnly).linear .InputWrapper{border-bottom:1px solid var(--jump-search-bar-border-color);padding-bottom:4px}:host .SearchBar:not(.iconOnly).linear .InputWrapper jump-icon{padding-right:6px}:host .Dropdown{margin-top:10px;border-radius:3px;border:1px solid var(--jump-search-bar-dropdown-border-color);padding:4px 16px;background-color:white}:host .Dropdown.dropAbsolute{position:absolute;box-sizing:border-box;position:absolute;left:0;width:100%}:host .Dropdown.dropRelative{position:relative}:host .Dropdown__Recents .title{color:#707070;font-size:14px;line-height:20px;padding:8px 0;font-weight:700;display:flex}:host .Dropdown__Results .totalRes{display:flex;justify-content:space-between}:host .Dropdown .ResWrapper{display:flex;flex-direction:column}:host .Dropdown .ResWrapper div{padding:8px 0;color:#707070;font-size:14px;display:flex;gap:12px;align-items:center}:host .Dropdown .ResWrapper div img{width:40px;height:48px;object-fit:cover;border-radius:3px}:host .Dropdown .ResWrapper div:hover{cursor:pointer}:host .Dropdown .ResWrapper .helperText{color:#CBCBCB}:host .Dropdown .ResWrapper .helperText svg{width:25px;height:25px}:host .SearchBar.iconOnly.linear{display:flex;width:100%}:host .SearchBar.iconOnly.linear .InputWrapper{width:100%;display:flex;align-items:center;transition:border-bottom 0.3s ease;border-bottom:1px solid transparent;padding-bottom:4px;overflow:hidden;}:host .SearchBar.iconOnly.linear .InputWrapper jump-icon{padding-right:6px;}:host .SearchBar.iconOnly.linear .InputWrapper input{width:0;border:none;transform:translateX(-100%);transition:width 0.3s ease, transform 0.3s ease;animation:none;}:host .SearchBar.iconOnly.linear.expanded .InputWrapper{border-bottom:1px solid var(--jump-search-bar-border-color);transition:border-bottom 0.3s ease;}:host .SearchBar.iconOnly.linear.expanded .InputWrapper input{width:100%;transform:translateX(0);animation:slide-right 0.3s ease forwards;}@keyframes slide-right{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes border-slide-right{from{border-bottom-width:0}to{border-bottom-width:1px}}";const a=s;const o=class{constructor(e){t(this,e);this.searchbarExpanded=r(this,"jump-search-bar-expanded",7);this.search=r(this,"jump-search-bar",7);this.showFullSearch=r(this,"jump-search-bar-show-all",7);this.resultClicked=r(this,"jump-search-bar-res-clicked",7);this.handleFocus=()=>{const t=this.jumpSearchBar.closest(".SearchBar");if(t){t.classList.add("focused")}};this.handleBlur=()=>{const t=this.jumpSearchBar.closest(".SearchBar");if(t){t.classList.remove("focused")}};this.doSearch=()=>{if(this.jumpSearchBar){this.searchValue=this.jumpSearchBar.value;if(this.searchValue.length>=3){this.resType="results";this.innerResults=undefined;this.search.emit({search:this.searchValue});if(!this.dropdownVisible){this.dropdownVisible=true}}else if(this.searchValue.length==0){this.dropdownVisible=false}}};this.dropdownVisible=false;this.searchValue=undefined;this.resType="recents";this.innerResults=[];this.totalResults=0;this.isExpanded=false;this.placeholder="Cerca...";this.noResultText="Nessun risultato corrispondente";this.loadingText="Sto caricando...";this.resultsText="risultati";this.showAllResText="Mostra tutti i risultati";this.identifier="search-bar";this.debounceTime=500;this.variant="outline";this.withBtn=false;this.recentsTitle="Recenti";this.recents=[];this.results=[];this.dropdown=false;this.linearIconOnly=false;this.dropdownPosition="relative"}searchValueChanged(t){if(t===""){this.innerResults=[...this.recents];this.results=[]}}componentDidLoad(){document.addEventListener("click",this.handleOutsideClick.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.handleOutsideClick.bind(this))}addOption(t){let r=t.detail;this.recents=[...this.recents,Object.assign({},r)];this.innerResults=[...this.recents]}async setResults(t,r){this.results=t;this.innerResults=t;this.totalResults=r}handleOutsideClick(t){if(this.componentRef&&!this.componentRef.contains(t.target)){this.dropdownVisible=false}}debounce(t,r=this.debounceTime){let e;return(...i)=>{if(e){clearTimeout(e)}e=setTimeout((()=>{t.apply(null,i)}),r)}}openDropdown(){this.resType="recents";this.dropdownVisible=true}handleResClicked(t){this.resultClicked.emit({clicked:t})}btnOrShowOtherClicked(){this.showFullSearch.emit({search:this.searchValue})}expandSearchBar(){this.isExpanded=true;this.searchbarExpanded.emit()}renderLinearIconOnly(){return e(i,{class:"JumpSearchBar ",ref:t=>this.componentRef=t},e("div",{class:"SearchBar iconOnly "+this.variant+(this.isExpanded?" expanded":"")},e("div",{class:"InputWrapper",onClick:this.isExpanded&&this.dropdown&&this.recents.length>0?()=>this.openDropdown():null},e("jump-icon",{name:"magnifying-glass",category:"light",onClick:()=>this.expandSearchBar()}),this.isExpanded&&e("input",{placeholder:this.placeholder,type:"search",id:this.identifier,class:"search-input",ref:t=>{this.jumpSearchBar=t},onInput:this.debounce(this.doSearch),onFocus:this.handleFocus,onBlur:this.handleBlur}))),this.dropdown&&this.dropdownVisible&&this.renderDropdown())}renderDefault(){return e(i,{class:"JumpSearchBar",ref:t=>this.componentRef=t},e("div",{class:"SearchBar "+this.variant+" "+(this.withBtn?"withBtn":"")+(this.isExpanded?" expanded":"")},e("div",{class:"InputWrapper",onClick:this.dropdown&&this.recents.length>0?()=>this.openDropdown():null},!this.withBtn&&e("jump-icon",{name:"magnifying-glass",category:"light"}),e("input",{placeholder:this.placeholder,type:"search",id:this.identifier,class:"search-input",ref:t=>{this.jumpSearchBar=t},onInput:this.debounce(this.doSearch),onFocus:this.handleFocus,onBlur:this.handleBlur})),this.withBtn&&!this.linearIconOnly&&e("jump-button",{variant:"secondary",size:"medium",name:"scopri",value:"value","aria-label":"Scopri di più",id:"button",onlyIcon:true,onClick:()=>this.btnOrShowOtherClicked()},e("jump-icon",{slot:"suffix",name:"magnifying-glass"}))),this.dropdown&&this.dropdownVisible&&this.renderDropdown())}renderDropdown(){console.log("POSITION",this.dropdownPosition);return e("div",{class:"Dropdown "+(this.dropdownPosition=="absolute"?"dropAbsolute":"dropRelative")},this.resType=="recents"&&e("div",{class:"Dropdown__Recents"},e("span",{class:"title"},this.recentsTitle),e("div",{class:"ResWrapper"},this.innerResults.length>0&&this.innerResults.map((t=>e("div",{onClick:()=>this.handleResClicked(t)},e("jump-icon",{name:"magnifying-glass",category:"light"}),t["value"]))))),this.resType=="results"&&e("div",{class:"Dropdown__Results"},e("div",{class:"ResWrapper"},this.innerResults===undefined?e("div",{class:"helperText"},e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",width:"252",height:"252"},e("g",null,e("g",{transform:"rotate(0 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.9s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(36 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.8s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(72 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.7s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(108 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.6s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(144 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.5s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(180 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.4s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(216 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.3s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(252 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.2s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(288 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"-0.1s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",{transform:"rotate(324 50 50)"},e("rect",{fill:"#707070",height:"11",width:"4",ry:"1.87",rx:"1.87",y:"27.5",x:"48"},e("animate",{repeatCount:"indefinite",begin:"0s",dur:"1s",keyTimes:"0;1",values:"1;0",attributeName:"opacity"}))),e("g",null))),this.loadingText):this.innerResults.length>0?this.innerResults.map((t=>e("div",{onClick:()=>this.handleResClicked(t),key:t["id"]},t["img"]&&e("img",{src:t["img"],alt:"result"}),t["value"]))):e("div",{class:"helperText"},this.noResultText),this.innerResults&&this.innerResults.length>0&&e("div",{class:"totalRes"},e("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.btnOrShowOtherClicked(),target:"_blank"}," ",this.showAllResText," "),this.totalResults&&e("div",null,this.totalResults," ",this.resultsText)))))}render(){if(this.variant==="linear"&&this.linearIconOnly){return this.renderLinearIconOnly()}else{return this.renderDefault()}}static get watchers(){return{searchValue:["searchValueChanged"]}}};o.style=a;export{o as jump_search_bar};
-//# sourceMappingURL=p-800fd60b.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["jumpSearchBarCss","JumpSearchBarStyle0","JumpSearchBar","this","handleFocus","searchBarContainer","jumpSearchBar","closest","classList","add","handleBlur","remove","doSearch","searchValue","value","length","resType","innerResults","undefined","search","emit","dropdownVisible","searchValueChanged","newValue","recents","results","componentDidLoad","document","addEventListener","handleOutsideClick","bind","disconnectedCallback","removeEventListener","addOption","e","props","detail","Object","assign","setResults","tot","totalResults","event","componentRef","contains","target","debounce","fn","delay","debounceTime","timeoutId","args","clearTimeout","setTimeout","apply","openDropdown","handleResClicked","item","resultClicked","clicked","btnOrShowOtherClicked","showFullSearch","expandSearchBar","isExpanded","searchbarExpanded","renderLinearIconOnly","h","Host","class","ref","el","variant","onClick","dropdown","name","category","placeholder","type","id","identifier","onInput","onFocus","onBlur","renderDropdown","renderDefault","withBtn","linearIconOnly","size","onlyIcon","slot","console","log","dropdownPosition","recentsTitle","map","xmlns","viewBox","preserveAspectRatio","width","height","transform","fill","ry","rx","y","x","repeatCount","begin","dur","keyTimes","values","attributeName","loadingText","key","src","alt","noResultText","text","showAllResText","resultsText","render"],"sources":["src/components/jump-search-bar/jump-search-bar.scss?tag=jump-search-bar&encapsulation=shadow","src/components/jump-search-bar/jump-search-bar.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);\n  --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);\n  --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);\n  --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n  font-family: var(--ff-primary);\n\n  jump-button {\n    --jump-button-border-radius: 0px 3px 3px 0px;\n  }\n\n  .SearchBar {\n    position: relative;\n\n    &.focused .InputWrapper {\n        border-color: var(--jump-search-bar-focus-color) !important;\n    \n        jump-icon {\n          color: var(--jump-search-bar-focus-color) !important;\n        }\n    \n        input {\n          outline: none !important;\n        }\n      }\n  }\n\n  .SearchBar:not(.iconOnly) {\n      display: flex;\n      width: 100%;\n  \n      .InputWrapper {\n        width: 100%;\n        display: flex;\n      }\n  \n      input {\n        width: 100%;\n        border: none;\n      }\n  \n      /* Stile outline*/\n      &.outline .InputWrapper {\n        border: 1px solid var(--jump-search-bar-border-color);\n        border-radius: 3px;\n        padding: 12px;\n        gap: 8px;\n  \n        jump-icon {\n          color: var(--jump-search-bar-border-color);\n        }\n      }\n  \n      &.outline.withBtn .InputWrapper {\n        border-radius: 3px 0px 0px 3px;\n      }\n  \n  \n      /* Stile filled */\n      &.filled .InputWrapper {\n        border: 1px solid var(--jump-search-bar-bg-color);\n        background-color: var(--jump-search-bar-bg-color);\n        border-radius: 3px;\n        padding: 12px;\n        gap: 8px;\n  \n        input {\n          background-color: var(--jump-search-bar-bg-color);\n        }\n  \n        jump-icon {\n          color: var(--jump-search-bar-border-color);\n        }\n      }\n  \n      &.filled.focused.withBtn .InputWrapper {\n        border-radius: 3px 0px 0px 3px !important;\n      }\n  \n      /* Stile linear */\n      &.linear .InputWrapper {\n        border-bottom: 1px solid var(--jump-search-bar-border-color);\n        padding-bottom: 4px;\n  \n        jump-icon {\n          padding-right: 6px;\n        }\n      }\n  }\n    \n \n  .Dropdown {\n\n    &.dropAbsolute {\n      position: absolute;\n      box-sizing: border-box;\n      position: absolute;\n      left: 0;\n      width: 100%;\n    }\n\n    &.dropRelative {\n      position: relative;\n    }\n\n   // position: absolute; la tolgo per il test\n    margin-top: 10px;\n    border-radius: 3px;\n    border: 1px solid var(--jump-search-bar-dropdown-border-color);\n    padding: 4px 16px;\n    background-color: white;\n\n    &__Recents {\n      .title {\n          color: #707070;\n          font-size: 14px;\n          line-height: 20px;\n          padding: 8px 0;\n          font-weight: 700;\n          display: flex;\n        }\n    }\n\n    &__Results {\n      .totalRes {\n        display: flex; \n        justify-content: space-between;\n      }\n    }\n    \n\n    .ResWrapper {\n      display: flex;\n      flex-direction: column;\n\n      div {\n        padding: 8px 0;\n        color: #707070;\n        font-size: 14px;\n        display: flex;\n        gap: 12px;\n        align-items: center;\n\n        img {\n          width: 40px;\n          height: 48px;\n          object-fit: cover;\n          border-radius: 3px;\n        }\n      }\n\n      div:hover {\n        cursor: pointer;\n       }\n\n       .helperText {\n        color: #CBCBCB;\n\n        svg {\n          width: 25px;\n          height: 25px;\n        }\n       }\n    }\n  }\n\n/* Applicazione dell'animazione alla SearchBar.iconOnly.linear */\n.SearchBar.iconOnly.linear {\n  display: flex;\n  width: 100%;\n\n  .InputWrapper {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    transition: border-bottom 0.3s ease;\n    /* Transizione solo per il bordo inferiore */\n    border-bottom: 1px solid transparent;\n    /* Nessun bordo inizialmente */\n    padding-bottom: 4px;\n    overflow: hidden;\n    /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */\n\n    jump-icon {\n      padding-right: 6px;\n      /* Padding dell'icona */\n    }\n\n    input {\n      width: 0;\n      /* Imposta la larghezza iniziale a 0 */\n      border: none;\n      transform: translateX(-100%);\n      /* Sposta l'input fuori dalla vista */\n      transition: width 0.3s ease, transform 0.3s ease;\n      /* Transizioni separate per width e transform */\n      animation: none;\n      /* Disabilita l'animazione predefinita */\n    }\n  }\n\n  &.expanded {\n    .InputWrapper {\n      border-bottom: 1px solid var(--jump-search-bar-border-color);\n      /* Mostra il bordo inferiore quando espanso */\n      transition: border-bottom 0.3s ease;\n      /* Transizione per il bordo inferiore */\n\n      input {\n        width: 100%;\n        /* Espande l'input a tutta la larghezza disponibile */\n        transform: translateX(0);\n        /* Riposiziona l'input nella vista */\n        animation: slide-right 0.3s ease forwards;\n        /* Applicazione dell'animazione slide-right */\n      }\n    }\n  }\n}\n            \n}\n\n@keyframes slide-right {\n  from {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes border-slide-right {\n  from {\n    border-bottom-width: 0;\n  }\n\n  to {\n    border-bottom-width: 1px;\n  }\n}","import { Component, Method, Watch, Listen, State, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-search-bar',\n  styleUrl: 'jump-search-bar.scss',\n  shadow: true,\n})\nexport class JumpSearchBar {\n\n  /* ---------------------- @OWN PROPERTIES ------------------------- */\n  jumpSearchBar: HTMLInputElement;\n  private componentRef: HTMLElement;\n\n  /* ---------------------- @STATE ------------------------- */\n  @State() dropdownVisible: boolean = false;\n  @State() searchValue: string = undefined;\n\n  @Watch('searchValue')\n  searchValueChanged(newValue: string) {\n    if (newValue === '') {\n      // Create a new array reference to trigger re-render\n      this.innerResults = [...this.recents];\n      this.results = [];\n    }\n  }\n\n  @State() resType: string = 'recents';\n  @State() innerResults: Array<object> = [];\n  @State() totalResults: number = 0;\n  @State() isExpanded: boolean = false; \n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n  @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n  @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\n  @Prop() resultsText: string = 'risultati'; // Il testo mostrato accanto al numero di risultati totali.\n  @Prop() showAllResText: string = 'Mostra tutti i risultati'; // La label da mostrare per il pulsante che mostra tutti i risultati.\n  @Prop() identifier: string = 'search-bar'; // Identificatore della searchbar\n  @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n  @Prop() variant: string = 'outline'; // Scelta dello stile della barra di ricerca tra filled, linear e outline.\n  @Prop() withBtn: boolean = false; // Se true, aggiunge un pulsante alla barra di ricerca\n  @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n  @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n  @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n  @Prop() dropdown: boolean = false; // Se true, mostra il dropdown con i risultati della ricerca.\n  @Prop() linearIconOnly: boolean = false; // Se true, mostra solo l'icona nella barra di ricerca lineare\n  @Prop() dropdownPosition: string = 'relative'; // Posizione del dropdown rispetto alla searchbar. \"relative\" o \"absolute\"\n\n\n  /* ---------------------- @EVENTS ------------------------- */\n\n  /**\n   * Evento emesso quando l'utente clicca sull'icona in variant linear e linearIconOnly\n   */\n  @Event({ eventName: 'jump-search-bar-expanded' }) searchbarExpanded: EventEmitter;\n\n  /**\n   * Evento emesso quando l'utente effettua una ricerca \n   * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n   * */\n  @Event({ eventName: 'jump-search-bar' }) search: EventEmitter;\n\n  /** \n   * Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati \n   * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n  */\n  @Event({ eventName: 'jump-search-bar-show-all' }) showFullSearch: EventEmitter;\n\n  /* \n  * Evento da ascoltare per recuperare il dato cliccato\n  * Emette un oggetto contenente tutti i dati relativi al risultato cliccato.\n  */\n  @Event({ eventName: 'jump-search-bar-res-clicked'}) resultClicked: EventEmitter; \n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentDidLoad() {\n    // Aggiungi l'event listener per il clic al di fuori del componente\n    document.addEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  disconnectedCallback() {\n    // Rimuovi l'event listener per evitare perdite di memoria\n    document.removeEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  /* -------------------- @LISTEN ------------------------------- */\n  @Listen(\"jump-search-bar-dropdown-item-connected\")\n  addOption(e) {\n    let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n\n    // Aggiungi l'elemento solo a `recents`\n    this.recents = [...this.recents, { ...props }];\n\n    // Aggiorna `innerResults` basandoti solo su `recents`\n    this.innerResults = [...this.recents];\n  }\n\n\n  /* -------------------- @METHOD ------------------------------- */\n\n  /** Imposta i risultati della ricerca all'interno della dropdown */\n  @Method()\n  async setResults(results, tot?: number) {\n    this.results = results;\n    this.innerResults = results;\n    this.totalResults = tot;\n  }\n\n  /* -------------------- LOCAL METHODS ------------------------- */\n  handleOutsideClick(event: MouseEvent) {\n    // Controlla se il clic è fuori dal componente\n    if (this.componentRef && !this.componentRef.contains(event.target as Node)) {\n      this.dropdownVisible = false;\n    }\n  }\n\n  // Gestisce l'evento focus sull'input\n  handleFocus = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n    if (searchBarContainer) {\n      searchBarContainer.classList.add('focused');\n    }\n  };\n\n  // Gestisce l'evento blur sull'input\n  handleBlur = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n    if (searchBarContainer) {\n      searchBarContainer.classList.remove('focused');\n    }\n  };\n\n  doSearch = () => {\n    if (this.jumpSearchBar) {\n      this.searchValue = this.jumpSearchBar.value;\n      \n      // Iniziare la ricerca solamente se ci sono almeno tre caratteri \n      if (this.searchValue.length >= 3) {\n        this.resType = 'results';\n\n        this.innerResults = undefined;\n        \n        this.search.emit({ search: this.searchValue });\n  \n        // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti\n        if (!this.dropdownVisible) {\n          this.dropdownVisible = true;\n        }\n      } else if(this.searchValue.length == 0) {\n        this.dropdownVisible = false;\n      }\n    }\n  };\n\n  debounce(fn, delay = this.debounceTime) {\n    let timeoutId;\n\n    return (...args) => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n      timeoutId = setTimeout(() => {\n        fn.apply(null, args);\n      }, delay);\n    };\n  };\n\n  openDropdown() {\n    this.resType = 'recents';\n    this.dropdownVisible = true;\n  }\n\n  /** Emette l'evento di click su un risultato, mandandone tutti i dati */\n  handleResClicked(item) {\n    this.resultClicked.emit({ clicked: item });\n  } \n\n  /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */\n  btnOrShowOtherClicked(){\n    this.showFullSearch.emit({ search: this.searchValue });\n  }\n\n  /**\n   * Se clicco l'icona espando la searchbar ed emetto un evento dedicato\n   */\n  expandSearchBar() {\n    this.isExpanded = true;\n    this.searchbarExpanded.emit();\n  }\n\n\n  /* --------------------- RENDER ------------------------------- */\n  renderLinearIconOnly() {\n    return (\n      <Host class={\"JumpSearchBar \"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n        <div class={\"SearchBar iconOnly \" + this.variant + (this.isExpanded ? \" expanded\" : \"\")}>\n          <div class=\"InputWrapper\" onClick={(this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n              <jump-icon\n                name=\"magnifying-glass\"\n                category=\"light\"\n                onClick={() => this.expandSearchBar()}\n              ></jump-icon>\n            {this.isExpanded &&\n              // Mostra la barra di ricerca con l'animazione di slide\n              <input\n                placeholder={this.placeholder}\n                type=\"search\"\n                id={this.identifier}\n                class=\"search-input\"\n                ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n                onInput={this.debounce(this.doSearch)}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n              />\n            }\n          </div>\n        </div>\n        {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n      </Host>\n    );\n  }\n\n  renderDefault() {\n    return (\n      <Host class={\"JumpSearchBar\"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n        <div class={\"SearchBar \" + this.variant + \" \" + (this.withBtn ? \"withBtn\" : \"\") + (this.isExpanded ? \" expanded\" : \"\")}>\n          <div class=\"InputWrapper\" onClick={(this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n            {!this.withBtn && <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>}\n            <input\n              placeholder={this.placeholder}\n              type=\"search\"\n              id={this.identifier}\n              class=\"search-input\"\n              ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n              onInput={this.debounce(this.doSearch)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n          {this.withBtn && !this.linearIconOnly && (\n            <jump-button\n              variant=\"secondary\"\n              size=\"medium\"\n              name=\"scopri\"\n              value=\"value\"\n              aria-label=\"Scopri di più\"\n              id=\"button\"\n              onlyIcon\n              onClick={() => this.btnOrShowOtherClicked()}\n            >\n              <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n            </jump-button>\n          )}\n        </div>\n        {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n      </Host>\n    );\n  }\n\n  renderDropdown(){\n    console.log('POSITION', this.dropdownPosition);\n    return <div class={\"Dropdown \" + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative' ) }>\n        {(this.resType == 'recents') &&\n          <div class=\"Dropdown__Recents\">\n            <span class=\"title\">{this.recentsTitle}</span>\n            <div class=\"ResWrapper\">\n              {this.innerResults.length > 0 && this.innerResults.map((item) => (\n                <div onClick={() => this.handleResClicked(item)}>\n                  <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n                  {item['value']}\n                </div>\n              ))}\n            </div>\n          </div>\n        }\n        {this.resType == 'results' &&\n          <div class=\"Dropdown__Results\">\n            <div class=\"ResWrapper\">\n              {this.innerResults === undefined ?\n                <div class=\"helperText\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" width=\"252\" height=\"252\" ><g><g transform=\"rotate(0 50 50)\">\n                  <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                    <animate repeatCount=\"indefinite\" begin=\"-0.9s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                  </rect>\n                </g><g transform=\"rotate(36 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.8s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(72 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.7s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(108 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.6s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(144 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.5s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(180 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.4s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(216 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.3s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(252 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.2s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(288 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"-0.1s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g transform=\"rotate(324 50 50)\">\n                    <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                      <animate repeatCount=\"indefinite\" begin=\"0s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                    </rect>\n                  </g><g></g></g></svg>{this.loadingText}</div>\n                :\n                (this.innerResults.length > 0 ?\n                  this.innerResults.map((item) => (\n                    <div onClick={() => this.handleResClicked(item)} key={item['id']}>\n                      {item['img'] && <img src={item['img']} alt=\"result\" />}\n                      {item['value']}\n                    </div>\n                  ))\n                  :\n                  <div class=\"helperText\">{this.noResultText}</div>\n                )\n              }\n              {(this.innerResults && this.innerResults.length > 0) &&\n                <div class=\"totalRes\">\n                  <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.btnOrShowOtherClicked()} target=\"_blank\"> {this.showAllResText} </jump-button>\n                  {this.totalResults && <div>{this.totalResults} {this.resultsText}</div>}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n  }\n\n  render() {\n    if (this.variant === 'linear' && this.linearIconOnly) {\n      return this.renderLinearIconOnly();\n    } else {\n      return this.renderDefault();\n    }\n  }\n}"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as a,H as i,g as s}from"./p-40ca24a6.js";const r=":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";const n=r;const h=0;const c=class{constructor(a){e(this,a);this.rangeChange=t(this,"jump-range-change",7);this.filterChange=t(this,"jump-filterchange",7);this.handleMinInput=e=>{const t=e.target;let a=parseInt(t.value,10);if(a>this.maxVal-h){a=this.maxVal-h;t.value=a.toString()}this.minVal=a;this.emitChangeEvents()};this.handleMaxInput=e=>{const t=e.target;let a=parseInt(t.value,10);if(a<this.minVal+h){a=this.minVal+h;t.value=a.toString()}this.maxVal=a;this.emitChangeEvents()};this.name="range-filter";this.labelMinBefore="Min:";this.labelMinAfter="";this.labelMaxBefore="Max:";this.labelMaxAfter="";this.min=0;this.max=100;this.step=1;this.value=[];this.disabled=false;this.minVal=undefined;this.maxVal=undefined}valueWatcher(e){this.setComponentValues(e)}componentWillLoad(){this.setComponentValues(this.value)}setComponentValues(e){if(e&&e.length===2){this.minVal=e[0];this.maxVal=e[1]}else{this.minVal=this.min;this.maxVal=this.max}this.value=[this.minVal,this.maxVal]}emitChangeEvents(){const e=[this.minVal,this.maxVal];this.value=e;const t={name:this.name,values:e};this.rangeChange.emit(t);this.filterChange.emit(t)}getFillStyle(){const e=this.max-this.min;if(e===0)return{left:"0%",width:"0%"};const t=(this.minVal-this.min)/e*100;const a=(this.maxVal-this.min)/e*100;return{left:`${t}%`,width:`${a-t}%`}}async setValue(e,t=true){if(this.disabled||!e||e.length!==2){return this.getValues()}this.setComponentValues(e);if(t){this.emitChangeEvents()}return this.getValues()}async getValues(){return[this.minVal,this.maxVal]}async getName(){return this.name}render(){return a(i,{key:"7db1339ac56ae016c5a050a7266bbc353b33bdb0",class:{"is-disabled":this.disabled}},a("div",{key:"81be4dbe27ecb9a0ae7e2ec8aa83630d8caf21b0",class:"label-container"},a("label",{key:"fc8ad6c1e5e2cef6aca4c3abe3358d51c23a05e8",class:"label-min"},this.labelMinBefore," ",this.minVal,this.labelMinAfter),a("label",{key:"5c21deff42c6e9e6b6bfd560b3f5af158ccdedbb",class:"label-max"},this.labelMaxBefore," ",this.maxVal,this.labelMaxAfter)),a("div",{key:"799c8f97eaecfffe4940e0b36879024cba0c0610",class:"slider-container"},a("div",{key:"f9f344075857009d4bbb9c6ed882363099d5fba9",class:"slider-track"}),a("div",{key:"0f7a60252ca1d39a43a8c5e98b4fd93daa80a4c9",class:"slider-fill",style:this.getFillStyle()}),a("input",{key:"0318aec31145df2a4193eefcb43011ab7df3464d",type:"range",min:this.min,max:this.max,step:this.step,value:this.minVal,onInput:this.handleMinInput,disabled:this.disabled,class:"range-input","aria-label":this.labelMinBefore}),a("input",{key:"5340fe9c8ac6658d58cafcd95182cc7562571aee",type:"range",min:this.min,max:this.max,step:this.step,value:this.maxVal,onInput:this.handleMaxInput,disabled:this.disabled,class:"range-input","aria-label":this.labelMaxBefore})))}get host(){return s(this)}static get watchers(){return{value:["valueWatcher"]}}};c.style=n;export{c as jump_filter_range};
-//# sourceMappingURL=p-c19c86c7.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["jumpFilterRangeCss","JumpFilterRangeStyle0","MIN_GAP","JumpFilterRange","this","handleMinInput","event","input","target","newMinVal","parseInt","value","maxVal","toString","minVal","emitChangeEvents","handleMaxInput","newMaxVal","valueWatcher","newValue","setComponentValues","componentWillLoad","values","length","min","max","currentValues","eventDetail","name","rangeChange","emit","filterChange","getFillStyle","range","left","width","leftPercent","rightPercent","setValue","emitEvent","disabled","getValues","getName","render","h","Host","key","class","labelMinBefore","labelMinAfter","labelMaxBefore","labelMaxAfter","style","type","step","onInput"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n  --jump-range-track-height: 4px;\n  --jump-range-thumb-color: var(--neutral-white, #ffffff);\n  --jump-range-thumb-size: 18px;\n  --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n  --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n  display: block;\n  width: 100%;\n}\n\n:host(.is-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n  --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n  font-size: 0.9em;\n  color: #333;\n}\n\n.slider-container {\n  position: relative;\n  height: var(--jump-range-thumb-size);\n  display: flex;\n  align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n  position: absolute;\n  left: 0;\n  height: var(--jump-range-track-height);\n  border-radius: var(--jump-range-track-height);\n  width: 100%;\n}\n\n.slider-track {\n  background-color: var(--jump-range-track-color);\n  z-index: 1;\n}\n\n.slider-fill {\n  background-color: var(--jump-range-fill-color);\n  z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: absolute;\n  width: 100%;\n  height: var(--jump-range-thumb-size);\n  background: transparent;\n  pointer-events: none; // Permette di cliccare attraverso l'input\n  margin: 0;\n  z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: var(--jump-range-thumb-size);\n  width: var(--jump-range-thumb-size);\n  border-radius: 50%;\n  background: var(--jump-range-thumb-color);\n  border: 1px solid #ccc;\n  cursor: pointer;\n  pointer-events: auto;\n  margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n  -moz-appearance: none;\n  height: var(--jump-range-thumb-size);\n  width: var(--jump-range-thumb-size);\n  border-radius: 50%;\n  background: var(--jump-range-thumb-color);\n  border: 1px solid #ccc;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n  height: var(--jump-range-track-height);\n  background: transparent;\n  border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n  -moz-appearance: none;\n  height: var(--jump-range-track-height);\n  background: transparent;\n  border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\nconst MIN_GAP = 0;\n\n@Component({\n  tag: 'jump-filter-range',\n  styleUrl: 'jump-filter-range.scss',\n  shadow: true,\n})\nexport class JumpFilterRange {\n  @Element() host: HTMLElement;\n\n  /** Nome identificativo del filtro, utilizzato negli eventi */\n  @Prop() name: string = 'range-filter';\n\n  // --- Props delle etichette modificate ---\n  /** Testo da mostrare prima del valore minimo. */\n  @Prop() labelMinBefore: string = 'Min:';\n  /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n  @Prop() labelMinAfter: string = '';\n\n  /** Testo da mostrare prima del valore massimo. */\n  @Prop() labelMaxBefore: string = 'Max:';\n  /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n  @Prop() labelMaxAfter: string = '';\n  // --- Fine props modificate ---\n\n  /** Il valore minimo possibile per lo slider */\n  @Prop() min: number = 0;\n  /** Il valore massimo possibile per lo slider */\n  @Prop() max: number = 100;\n  /** L'incremento tra i valori dello slider */\n  @Prop() step: number = 1;\n  /** I valori iniziali dello slider, come array [min, max] */\n  @Prop({ mutable: true }) value: number[] = [];\n  /** Stato disabilitato dello slider */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @State() minVal: number;\n  @State() maxVal: number;\n\n  @Watch('value')\n  valueWatcher(newValue: number[]) {\n    this.setComponentValues(newValue);\n  }\n\n  @Event({ eventName: 'jump-range-change' }) rangeChange: EventEmitter;\n  @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter;\n\n  componentWillLoad() {\n    this.setComponentValues(this.value);\n  }\n\n  private setComponentValues(values: number[]) {\n    if (values && values.length === 2) {\n      this.minVal = values[0];\n      this.maxVal = values[1];\n    } else {\n      this.minVal = this.min;\n      this.maxVal = this.max;\n    }\n    this.value = [this.minVal, this.maxVal];\n  }\n\n  private handleMinInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    let newMinVal = parseInt(input.value, 10);\n    if (newMinVal > this.maxVal - MIN_GAP) {\n      newMinVal = this.maxVal - MIN_GAP;\n      input.value = newMinVal.toString();\n    }\n    this.minVal = newMinVal;\n    this.emitChangeEvents();\n  };\n\n  private handleMaxInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    let newMaxVal = parseInt(input.value, 10);\n    if (newMaxVal < this.minVal + MIN_GAP) {\n      newMaxVal = this.minVal + MIN_GAP;\n      input.value = newMaxVal.toString();\n    }\n    this.maxVal = newMaxVal;\n    this.emitChangeEvents();\n  };\n\n  private emitChangeEvents() {\n    const currentValues = [this.minVal, this.maxVal];\n    this.value = currentValues;\n    const eventDetail = { name: this.name, values: currentValues };\n    this.rangeChange.emit(eventDetail);\n    this.filterChange.emit(eventDetail);\n  }\n\n  private getFillStyle() {\n    const range = this.max - this.min;\n    if (range === 0) return { left: '0%', width: '0%' };\n    const leftPercent = ((this.minVal - this.min) / range) * 100;\n    const rightPercent = ((this.maxVal - this.min) / range) * 100;\n    return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n  }\n\n  @Method()\n  async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n    if (this.disabled || !values || values.length !== 2) {\n      return this.getValues();\n    }\n    this.setComponentValues(values);\n    if (emitEvent) {\n      this.emitChangeEvents();\n    }\n    return this.getValues();\n  }\n  \n  @Method()\n  async getValues(): Promise<number[]> {\n    return [this.minVal, this.maxVal];\n  }\n\n  @Method()\n  async getName(): Promise<string> {\n    return this.name;\n  }\n\n  render() {\n    return (\n      <Host class={{ 'is-disabled': this.disabled }}>\n        <div class=\"label-container\">\n          {/* Etichetta MIN aggiornata */}\n          <label class=\"label-min\">\n            {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n          </label>\n          \n          {/* Etichetta MAX aggiornata */}\n          <label class=\"label-max\">\n            {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n          </label>\n        </div>\n        <div class=\"slider-container\">\n          <div class=\"slider-track\"></div>\n          <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n          <input\n            type=\"range\"\n            min={this.min} max={this.max} step={this.step}\n            value={this.minVal}\n            onInput={this.handleMinInput}\n            disabled={this.disabled}\n            class=\"range-input\"\n            // aria-label aggiornato\n            aria-label={this.labelMinBefore}\n          />\n          <input\n            type=\"range\"\n            min={this.min} max={this.max} step={this.step}\n            value={this.maxVal}\n            onInput={this.handleMaxInput}\n            disabled={this.disabled}\n            class=\"range-input\"\n            // aria-label aggiornato\n            aria-label={this.labelMaxBefore}\n          />\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"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"}