@jumpgroup/jump-design-system 0.3.52 → 0.3.53

package/dist/components/jump-search-bar-mobile.js

@@ -0,0 +1,175 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './jump-button2.js';
+import { d as defineCustomElement$2 } from './jump-icon2.js';
+
+const jumpSearchBarMobileCss = ":host{display:block;position:relative;--jump-search-bar-mobile-focus-color:var(--secondary-standard, #5E79BA);--jump-search-bar-mobile-background-color:var(--gray-ultralight, #FFFFFF);--jump-search-bar-mobile-border-color:var(--neutral-grey-secondary, #707070);font-family:var(--ff-primary)}:host .DropdownWrapper{background-color:var(--jump-search-bar-mobile-background-color);padding:16px;position:fixed;top:0;left:0;height:100vh;z-index:1000;}:host .DropdownWrapper .closeButton{cursor:pointer}:host .DropdownWrapper.open{display:block}:host .DropdownWrapper:not(.open){display:none}:host .DropdownWrapper .InputWrapper{background-color:white;width:100%;display:flex;gap:12px;border-bottom:1px solid var(--jump-search-bar-mobile-border-color);padding-bottom:4px}:host .DropdownWrapper .InputWrapper.focused{border-color:var(--jump-search-bar-mobile-focus-color) !important}:host .DropdownWrapper .InputWrapper.focused jump-icon{color:var(--jump-search-bar-mobile-focus-color) !important}:host .DropdownWrapper .InputWrapper.focused input{outline:none !important}:host .DropdownWrapper input{width:100%;border:none}:host .DropdownWrapper .Results{margin-top:12px}:host .DropdownWrapper .Results__Recents .title{color:#707070;font-size:14px;line-height:20px;padding:8px 0;font-weight:700;display:flex}:host .DropdownWrapper .Results__Results .totalRes{display:flex;justify-content:space-between}:host .DropdownWrapper .Results .ResWrapper{display:flex;flex-direction:column}:host .DropdownWrapper .Results .ResWrapper div{padding:8px 0;color:#707070;font-size:14px;display:flex;gap:12px;align-items:center}:host .DropdownWrapper .Results .ResWrapper div img{width:40px;height:48px;object-fit:cover;border-radius:3px}:host .DropdownWrapper .Results .ResWrapper div:hover{cursor:pointer}:host .DropdownWrapper .Results .ResWrapper .helperText{color:#CBCBCB}:host .DropdownWrapper .Results .ResWrapper .helperText svg{width:25px;height:25px}";
+const JumpSearchBarMobileStyle0 = jumpSearchBarMobileCss;
+
+const JumpSearchBarMobile$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBarMobile extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.resultClicked = createEvent(this, "jump-search-bar-mobile-res-clicked", 7);
+        this.search = createEvent(this, "jump-search-bar-mobile", 7);
+        this.showFullSearch = createEvent(this, "jump-search-bar-mobile-show-all", 7);
+        // Gestisce l'evento focus sull'input
+        this.handleFocus = () => {
+            const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');
+            if (searchBarContainer) {
+                searchBarContainer.classList.add('focused');
+            }
+        };
+        // Gestisce l'evento blur sull'input
+        this.handleBlur = () => {
+            const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');
+            if (searchBarContainer) {
+                searchBarContainer.classList.remove('focused');
+            }
+        };
+        this.doSearch = () => {
+            if (this.jumpSearchBar) {
+                this.searchValue = this.jumpSearchBar.value;
+                // Iniziare la ricerca solamente se ci sono almeno tre caratteri 
+                if (this.searchValue.length >= 3) {
+                    this.resType = 'results';
+                    this.innerResults = undefined;
+                    this.search.emit({ search: this.searchValue });
+                }
+            }
+        };
+        this.isOpen = false;
+        this.innerResults = [];
+        this.totalResults = 0;
+        this.resType = 'recents';
+        this.searchValue = undefined;
+        this.identifier = 'search-bar-mobile';
+        this.placeholder = 'Cerca...';
+        this.recents = [];
+        this.recentsTitle = 'Recenti';
+        this.debounceTime = 500;
+        this.loadingText = 'Sto caricando...';
+        this.noResultText = 'Nessun risultato corrispondente';
+        this.results = [];
+        this.resultsText = 'risultati';
+        this.showAllResText = 'Mostra tutti i risultati';
+    }
+    searchValueChanged(newValue) {
+        if (newValue === '') {
+            // Create a new array reference to trigger re-render
+            this.innerResults = [...this.recents];
+            this.results = [];
+        }
+    }
+    /* ---------------------- @EVENTS ------------------------- */
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    /* -------------------- @LISTEN ------------------------------- */
+    addOption(e) {
+        let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
+        // Aggiungi l'elemento solo a `recents`
+        this.recents = [...this.recents, Object.assign({}, props)];
+        // Aggiorna `innerResults` basandoti solo su `recents`
+        this.innerResults = [...this.recents];
+    }
+    /* -------------------- @METHOD ------------------------------- */
+    /** Imposta i risultati della ricerca all'interno della dropdown */
+    async setResults(results, tot) {
+        this.results = results;
+        this.innerResults = results;
+        this.totalResults = tot;
+    }
+    /* -------------------- LOCAL METHODS ------------------------- */
+    openDropdown() {
+        console.log('openDropdown');
+        this.isOpen = true;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */
+    btnOrShowOtherClicked() {
+        this.showFullSearch.emit({ search: this.searchValue });
+    }
+    /** Emette l'evento di click su un risultato, mandandone tutti i dati */
+    handleResClicked(item) {
+        this.resultClicked.emit({ clicked: item });
+    }
+    debounce(fn, delay = this.debounceTime) {
+        let timeoutId;
+        return (...args) => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                fn.apply(null, args);
+            }, delay);
+        };
+    }
+    ;
+    /* --------------------- RENDER ------------------------------- */
+    render() {
+        return (h(Host, { key: 'f0535a70395bacabc372999896fc410c948bbed4', class: "JumpSearchBarMobile", ref: (el) => (this.componentRef = el) }, h("jump-icon", { key: '34431a69c6c68f48b5f92b03f5a876f485d66e34', name: "magnifying-glass", category: "light", onClick: () => this.openDropdown() }), h("div", { key: '89575c7a7a1c0a601a589ac451242e591d907a43', class: "DropdownWrapper " + (this.isOpen ? 'open' : '') }, h("div", { key: '633c8543dc2eaf36b7fc61857d7d63aadf852cd8', class: "InputWrapper" }, h("jump-icon", { key: '3c85be9683007c77faf9fe705c382b753dc8d6fb', class: "closeButton", category: "light", name: "arrow-left", onClick: () => this.closeDropdown() }), h("input", { key: '29f98929f8ed596072f1fe31d5820e9bde0a5604', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }), h("jump-icon", { key: '0e577fbdc3cfcc3d1628360487a828437459e01a', name: "magnifying-glass", category: "light" })), h("div", { key: 'da670ec6f527cc0015b42eea74acc355d081e260', class: "Results" }, (this.resType == 'recents') &&
+            h("div", { key: 'bb8eed320957070598e1fb57b3db5a7aa0cea4bd', class: "Results__Recents" }, this.recents.length != 0 && h("span", { key: '748a65cfbb955af507acc30a86afa2366b31d99a', class: "title" }, this.recentsTitle), h("div", { key: 'e3fd0b306f42a56a85d1efc4898a4ead272ce15d', class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item) }, h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
+            h("div", { key: '29f82834ad14a34547f9f856f045c7cccc9431e0', class: "Results__Results" }, h("div", { key: '1c005fe5f1d9a88c151886eda65f372c52f4710f', class: "ResWrapper" }, this.innerResults === undefined ?
+                h("div", { class: "helperText" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", width: "252", height: "252" }, h("g", null, h("g", { transform: "rotate(0 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.9s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(36 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.8s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(72 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.7s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(108 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.6s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(144 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.5s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(180 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.4s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(216 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.3s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(252 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.2s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(288 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.1s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(324 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "0s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", null))), this.loadingText)
+                :
+                    (this.innerResults.length > 0 ?
+                        this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item), key: item['id'] }, item['img'] && h("img", { src: item['img'], alt: "result" }), item['value'])))
+                        :
+                            h("div", { class: "helperText" }, this.noResultText)), (this.innerResults && this.innerResults.length > 0) &&
+                h("div", { key: '084038e82063eb93fea6ea10d0a405fb7f1e04a8', class: "totalRes" }, h("jump-button", { key: 'f09ae73865768a64e75fcc2b887c4631e3271697', variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && h("div", { key: '66c370a16342ebfe68e3032299bf3da32ed53acd' }, this.totalResults, " ", this.resultsText))))))));
+    }
+    static get watchers() { return {
+        "searchValue": ["searchValueChanged"]
+    }; }
+    static get style() { return JumpSearchBarMobileStyle0; }
+}, [1, "jump-search-bar-mobile", {
+        "identifier": [1],
+        "placeholder": [1],
+        "recents": [16],
+        "recentsTitle": [1, "recents-title"],
+        "debounceTime": [2, "debounce-time"],
+        "loadingText": [1, "loading-text"],
+        "noResultText": [1, "no-result-text"],
+        "results": [16],
+        "resultsText": [1, "results-text"],
+        "showAllResText": [1, "show-all-res-text"],
+        "isOpen": [32],
+        "innerResults": [32],
+        "totalResults": [32],
+        "resType": [32],
+        "searchValue": [32],
+        "setResults": [64]
+    }, [[0, "jump-search-bar-dropdown-item-connected", "addOption"]], {
+        "searchValue": ["searchValueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-search-bar-mobile", "jump-button", "jump-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-search-bar-mobile":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpSearchBarMobile$1);
+            }
+            break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const JumpSearchBarMobile = JumpSearchBarMobile$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpSearchBarMobile, defineCustomElement };
+
+//# sourceMappingURL=jump-search-bar-mobile.js.map

package/dist/components/jump-search-bar-mobile.js.map

@@ -0,0 +1 @@
+{"file":"jump-search-bar-mobile.js","mappings":"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","names":["JumpSearchBarMobile"],"sources":["src/components/jump-search-bar-mobile/jump-search-bar-mobile.scss?tag=jump-search-bar-mobile&encapsulation=shadow","src/components/jump-search-bar-mobile/jump-search-bar-mobile.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n\n  --jump-search-bar-mobile-focus-color: var(--secondary-standard, #5E79BA);\n  --jump-search-bar-mobile-background-color: var(--gray-ultralight, #FFFFFF);\n  --jump-search-bar-mobile-border-color: var(--neutral-grey-secondary, #707070);\n\n  font-family: var(--ff-primary);\n\n  .DropdownWrapper {\n    background-color: var(--jump-search-bar-mobile-background-color);\n    padding: 16px;\n    position: fixed;\n    top: 0;\n    left: 0;\n    //width: 100vw; tengo commentato solo per i test\n    height: 100vh;\n    z-index: 1000;\n\n    .closeButton {\n      cursor: pointer;\n    }\n\n    &.open {\n      display: block;\n    }\n\n    &:not(.open){\n      display: none;\n    }\n\n\n    /* Stile parte interna del dropdown*/\n    .InputWrapper {\n      background-color: white;\n      width: 100%;\n      display: flex;\n      gap: 12px;\n      border-bottom: 1px solid var(--jump-search-bar-mobile-border-color);\n      padding-bottom: 4px;\n\n      &.focused {\n        border-color: var(--jump-search-bar-mobile-focus-color) !important;\n\n        jump-icon{\n          color: var(--jump-search-bar-mobile-focus-color) !important;\n        }\n\n        input {\n          outline: none !important;\n        }\n      }\n    }\n\n    input {\n      width: 100%;\n      border: none;\n    }\n\n    .Results {\n      margin-top: 12px;\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      .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    \n  }\n}\n","import { Component, Watch, Method, Event, EventEmitter, State, Listen, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-search-bar-mobile',\n  styleUrl: 'jump-search-bar-mobile.scss',\n  shadow: true,\n})\nexport class JumpSearchBarMobile {\n\n  /* ---------------------- @OWN PROPERTIES ------------------------- */\n  jumpSearchBar: HTMLInputElement;\n  componentRef: HTMLElement;\n\n  /* ---------------------- @STATE ------------------------- */\n  @State() isOpen: boolean = false;\n  @State() innerResults: Array<object> = [];\n  @State() totalResults: number = 0;\n  @State() resType: string = 'recents';\n  \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  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() identifier: string = 'search-bar-mobile'; // Identificatore della searchbar\n  @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n  @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n  @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n  @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n  @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\n  @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n  @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\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\n  /* ---------------------- @EVENTS ------------------------- */\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\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  /* \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-mobile-res-clicked' }) resultClicked: 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-mobile' }) 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-mobile-show-all' }) showFullSearch: EventEmitter;\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  openDropdown(){\n    console.log('openDropdown');\n    this.isOpen = true;\n  } \n\n  closeDropdown(){\n    this.isOpen = false;\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  // Gestisce l'evento focus sull'input\n  handleFocus = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');\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('.InputWrapper');\n    if (searchBarContainer) {\n      searchBarContainer.classList.remove('focused');\n    }\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  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       \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  /* --------------------- RENDER ------------------------------- */\n\n  render() {\n    return (\n      <Host class=\"JumpSearchBarMobile\" ref={(el) => (this.componentRef = el as HTMLElement)}>\n        <jump-icon\n          name=\"magnifying-glass\"\n          category=\"light\"\n          onClick={() => this.openDropdown()}\n        ></jump-icon>\n        <div class={\"DropdownWrapper \" + (this.isOpen ? 'open' : '')}>\n          <div class=\"InputWrapper\">\n            <jump-icon class=\"closeButton\" category=\"light\" name=\"arrow-left\" onClick={() => this.closeDropdown()}></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            <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n          </div>\n          <div class=\"Results\">\n            {(this.resType == 'recents') &&\n              <div class=\"Results__Recents\">\n                {this.recents.length != 0 && <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=\"Results__Results\">\n                <div class=\"ResWrapper\">\n                  {this.innerResults === undefined ?\n                    <div class=\"helperText\">\n                      <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\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-search-bar.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './jump-button2.js';
 import { d as defineCustomElement$2 } from './jump-icon2.js';
 
-const jumpSearchBarCss = ":host{display:flex;--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)}:host jump-button{--jump-button-border-radius:0px 3px 3px 0px}:host input{width:100%}:host(.manual.outline) input{border-radius:3px 0px 0px 3px;border:1px solid var(--jump-search-bar-border-color);padding:12px}:host(.manual.outline) input:focus-visible{outline:2px solid var(--jump-search-bar-focus-color);outline-offset:-2px}:host(.auto.outline) input{border-radius:3px;border:1px solid var(--jump-search-bar-border-color);padding:12px;padding-left:35px;background:url(\"data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E\") no-repeat left;background-size:14px;background-position:10px center}:host(.auto.outline) input:focus-visible{outline:2px solid var(--jump-search-bar-focus-color);outline-offset:-2px;background:url('data:image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z\" fill=\"%235E79BA\"/></svg>') no-repeat left !important;background-size:14px !important;background-position:10px center !important}:host(.auto.linear) input.search-input{border:none;border-bottom:1px solid var(--jump-search-bar-border-color);padding:8px 5px 8px 0;padding-left:35px;background:url(\"data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E\") no-repeat left;background-size:14px;background-position:10px center}:host(.auto.linear) input:focus-visible{outline:2px solid var(--jump-search-bar-focus-color);outline-offset:-2px;background:url('data:image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z\" fill=\"%235E79BA\"/></svg>') no-repeat left !important;background-size:14px !important;background-position:10px center !important}:host(.auto.filled) input.search-input{border:none;border-radius:3px;padding:12px;padding-left:35px;background:url(\"data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E\") no-repeat left;background-size:14px;background-position:10px center;background-color:var(--jump-search-bar-bg-color)}";
+const jumpSearchBarCss = ":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 JumpSearchBarStyle0 = jumpSearchBarCss;
 
 const JumpSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBar extends HTMLElement {
@@ -10,55 +10,192 @@ const JumpSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBar ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.searchbarExpanded = createEvent(this, "jump-search-bar-expanded", 7);
         this.search = createEvent(this, "jump-search-bar", 7);
-        /* ---------------------- @LIFECYCLE ------------------------- */
-        /* -------------------- @LISTEN ------------------------------- */
-        /* -------------------- @METHOD ------------------------------- */
-        /* -------------------- LOCAL METHODS ------------------------- */
-        /**
-         * se searchType == 'manual' l'utente deve cliccare sul pulsante per eseguire la funzione
-         * se searchType == 'auto' la funzione viene eseguita automaticamente al termine della digitazione
-         */
+        this.showFullSearch = createEvent(this, "jump-search-bar-show-all", 7);
+        this.resultClicked = createEvent(this, "jump-search-bar-res-clicked", 7);
+        // Gestisce l'evento focus sull'input
+        this.handleFocus = () => {
+            const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');
+            if (searchBarContainer) {
+                searchBarContainer.classList.add('focused');
+            }
+        };
+        // Gestisce l'evento blur sull'input
+        this.handleBlur = () => {
+            const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');
+            if (searchBarContainer) {
+                searchBarContainer.classList.remove('focused');
+            }
+        };
         this.doSearch = () => {
             if (this.jumpSearchBar) {
-                const searchValue = this.jumpSearchBar.value;
-                console.log('doSearch', searchValue);
-                this.search.emit({ search: searchValue });
+                this.searchValue = this.jumpSearchBar.value;
+                // Iniziare la ricerca solamente se ci sono almeno tre caratteri 
+                if (this.searchValue.length >= 3) {
+                    this.resType = 'results';
+                    this.innerResults = undefined;
+                    this.search.emit({ search: this.searchValue });
+                    // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti
+                    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.searchType = 'auto' ;
-        this.variant = 'outline'  ;
+        this.variant = 'outline';
+        this.withBtn = false;
+        this.recentsTitle = 'Recenti';
+        this.recents = [];
+        this.results = [];
+        this.dropdown = false;
+        this.linearIconOnly = false;
+        this.dropdownPosition = 'relative';
+    }
+    searchValueChanged(newValue) {
+        if (newValue === '') {
+            // Create a new array reference to trigger re-render
+            this.innerResults = [...this.recents];
+            this.results = [];
+        }
+    }
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    componentDidLoad() {
+        // Aggiungi l'event listener per il clic al di fuori del componente
+        document.addEventListener('click', this.handleOutsideClick.bind(this));
+    }
+    disconnectedCallback() {
+        // Rimuovi l'event listener per evitare perdite di memoria
+        document.removeEventListener('click', this.handleOutsideClick.bind(this));
+    }
+    /* -------------------- @LISTEN ------------------------------- */
+    addOption(e) {
+        let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
+        // Aggiungi l'elemento solo a `recents`
+        this.recents = [...this.recents, Object.assign({}, props)];
+        // Aggiorna `innerResults` basandoti solo su `recents`
+        this.innerResults = [...this.recents];
+    }
+    /* -------------------- @METHOD ------------------------------- */
+    /** Imposta i risultati della ricerca all'interno della dropdown */
+    async setResults(results, tot) {
+        this.results = results;
+        this.innerResults = results;
+        this.totalResults = tot;
+    }
+    /* -------------------- LOCAL METHODS ------------------------- */
+    handleOutsideClick(event) {
+        // Controlla se il clic è fuori dal componente
+        if (this.componentRef && !this.componentRef.contains(event.target)) {
+            this.dropdownVisible = false;
+        }
     }
-    /** Used to filters/searchbar */
     debounce(fn, delay = this.debounceTime) {
         let timeoutId;
         return (...args) => {
-            // cancel the previous timer
             if (timeoutId) {
                 clearTimeout(timeoutId);
             }
-            // setup a new timer
             timeoutId = setTimeout(() => {
                 fn.apply(null, args);
             }, delay);
         };
     }
     ;
-    /* -------------------- RENDER ------------------------- */
+    openDropdown() {
+        this.resType = 'recents';
+        this.dropdownVisible = true;
+    }
+    /** Emette l'evento di click su un risultato, mandandone tutti i dati */
+    handleResClicked(item) {
+        this.resultClicked.emit({ clicked: item });
+    }
+    /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */
+    btnOrShowOtherClicked() {
+        this.showFullSearch.emit({ search: this.searchValue });
+    }
+    /**
+     * Se clicco l'icona espando la searchbar ed emetto un evento dedicato
+     */
+    expandSearchBar() {
+        this.isExpanded = true;
+        this.searchbarExpanded.emit();
+    }
+    /* --------------------- RENDER ------------------------------- */
+    renderLinearIconOnly() {
+        return (h(Host, { class: "JumpSearchBar ", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar iconOnly " + this.variant + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, h("jump-icon", { name: "magnifying-glass", category: "light", onClick: () => this.expandSearchBar() }), this.isExpanded &&
+            // Mostra la barra di ricerca con l'animazione di slide
+            h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
+    }
+    renderDefault() {
+        return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
+    }
+    renderDropdown() {
+        console.log('POSITION', this.dropdownPosition);
+        return h("div", { class: "Dropdown " + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative') }, (this.resType == 'recents') &&
+            h("div", { class: "Dropdown__Recents" }, h("span", { class: "title" }, this.recentsTitle), h("div", { class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item) }, h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
+            h("div", { class: "Dropdown__Results" }, h("div", { class: "ResWrapper" }, this.innerResults === undefined ?
+                h("div", { class: "helperText" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", width: "252", height: "252" }, h("g", null, h("g", { transform: "rotate(0 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.9s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(36 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.8s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(72 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.7s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(108 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.6s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(144 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.5s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(180 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.4s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(216 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.3s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(252 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.2s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(288 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.1s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(324 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "0s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", null))), this.loadingText)
+                :
+                    (this.innerResults.length > 0 ?
+                        this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item), key: item['id'] }, item['img'] && h("img", { src: item['img'], alt: "result" }), item['value'])))
+                        :
+                            h("div", { class: "helperText" }, this.noResultText)), (this.innerResults && this.innerResults.length > 0) &&
+                h("div", { class: "totalRes" }, h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && h("div", null, this.totalResults, " ", this.resultsText)))));
+    }
     render() {
-        return (h(Host, { key: 'a6ed47f15cdd659528d60d3c4d2b977d3afa5c49', class: "JumpSearchBar " + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + " " + this.variant)) }, h("input", { key: '0667503e17f20d6f897c209a4f5c689adf55d00a', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.searchType === 'auto' ? this.debounce(this.doSearch) : undefined }), this.searchType === 'manual' &&
-            h("jump-button", { key: 'a5ba6b253e4d427fa91612412cf98308fc164c05', variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.doSearch() }, h("jump-icon", { key: '28d875402acb92e9e76baf97207db9d8880dd258', slot: "suffix", name: "magnifying-glass" }))));
+        if (this.variant === 'linear' && this.linearIconOnly) {
+            return this.renderLinearIconOnly();
+        }
+        else {
+            return this.renderDefault();
+        }
     }
+    static get watchers() { return {
+        "searchValue": ["searchValueChanged"]
+    }; }
     static get style() { return JumpSearchBarStyle0; }
 }, [1, "jump-search-bar", {
         "placeholder": [1],
+        "noResultText": [1, "no-result-text"],
+        "loadingText": [1, "loading-text"],
+        "resultsText": [1, "results-text"],
+        "showAllResText": [1, "show-all-res-text"],
         "identifier": [1],
         "debounceTime": [2, "debounce-time"],
-        "searchType": [1, "search-type"],
-        "variant": [1]
+        "variant": [1],
+        "withBtn": [4, "with-btn"],
+        "recentsTitle": [1, "recents-title"],
+        "recents": [16],
+        "results": [16],
+        "dropdown": [4],
+        "linearIconOnly": [4, "linear-icon-only"],
+        "dropdownPosition": [1, "dropdown-position"],
+        "dropdownVisible": [32],
+        "searchValue": [32],
+        "resType": [32],
+        "innerResults": [32],
+        "totalResults": [32],
+        "isExpanded": [32],
+        "setResults": [64]
+    }, [[0, "jump-search-bar-dropdown-item-connected", "addOption"]], {
+        "searchValue": ["searchValueChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {