@jumpgroup/jump-design-system 0.3.51 → 0.3.53

package/dist/cjs/jump-search-bar.cjs.entry.js

@@ -2,56 +2,174 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-97b3526b.js');
+const index = require('./index-e91b2b41.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.searchbarExpanded = index.createEvent(this, "jump-search-bar-expanded", 7);
         this.search = index.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 = index.createEvent(this, "jump-search-bar-show-all", 7);
+        this.resultClicked = index.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 (index.h(index.Host, { class: "JumpSearchBar ", ref: (el) => (this.componentRef = el) }, index.h("div", { class: "SearchBar iconOnly " + this.variant + (this.isExpanded ? " expanded" : "") }, index.h("div", { class: "InputWrapper", onClick: (this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, index.h("jump-icon", { name: "magnifying-glass", category: "light", onClick: () => this.expandSearchBar() }), this.isExpanded &&
+            // Mostra la barra di ricerca con l'animazione di slide
+            index.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 (index.h(index.Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, index.h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, index.h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && index.h("jump-icon", { name: "magnifying-glass", category: "light" }), index.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 && (index.h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, index.h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
+    }
+    renderDropdown() {
+        console.log('POSITION', this.dropdownPosition);
+        return index.h("div", { class: "Dropdown " + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative') }, (this.resType == 'recents') &&
+            index.h("div", { class: "Dropdown__Recents" }, index.h("span", { class: "title" }, this.recentsTitle), index.h("div", { class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (index.h("div", { onClick: () => this.handleResClicked(item) }, index.h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
+            index.h("div", { class: "Dropdown__Results" }, index.h("div", { class: "ResWrapper" }, this.innerResults === undefined ?
+                index.h("div", { class: "helperText" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", width: "252", height: "252" }, index.h("g", null, index.h("g", { transform: "rotate(0 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.9s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(36 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.8s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(72 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.7s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(108 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.6s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(144 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.5s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(180 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.4s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(216 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.3s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(252 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.2s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(288 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "-0.1s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", { transform: "rotate(324 50 50)" }, index.h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, index.h("animate", { repeatCount: "indefinite", begin: "0s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), index.h("g", null))), this.loadingText)
+                :
+                    (this.innerResults.length > 0 ?
+                        this.innerResults.map((item) => (index.h("div", { onClick: () => this.handleResClicked(item), key: item['id'] }, item['img'] && index.h("img", { src: item['img'], alt: "result" }), item['value'])))
+                        :
+                            index.h("div", { class: "helperText" }, this.noResultText)), (this.innerResults && this.innerResults.length > 0) &&
+                index.h("div", { class: "totalRes" }, index.h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && index.h("div", null, this.totalResults, " ", this.resultsText)))));
+    }
     render() {
-        return (index.h(index.Host, { key: 'a6ed47f15cdd659528d60d3c4d2b977d3afa5c49', class: "JumpSearchBar " + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + " " + this.variant)) }, index.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' &&
-            index.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() }, index.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"]
+    }; }
 };
 JumpSearchBar.style = JumpSearchBarStyle0;
 

package/dist/cjs/jump-search-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"jump-search-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,27LAA27L,CAAC;AACr9L,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;;;;;;;;QAyCxB,aAAQ,GAAG;YACT,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;gBAE7C,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;gBACrC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;aAC3C;SACF,CAAA;2BAvC6B,UAAU;0BACX,YAAY;4BAKV,GAAG;0BAML,MAAM,CAAY;uBAErB,SAAS,CAAY,CAAY;;;IA6B7D,QAAQ,CAAC,EAAE,EAAE,KAAK,GAAG,IAAI,CAAC,YAAY;QACpC,IAAI,SAAS,CAAC;QAEd,OAAO,CAAC,GAAG,IAAI;;YAEb,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;;YAED,SAAS,GAAG,UAAU,CAAC;gBACrB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;aACtB,EAAE,KAAK,CAAC,CAAC;SACX,CAAC;KACH;;;IAIC,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,gBAAgB,IAAI,IAAI,CAAC,UAAU,IAAI,QAAQ,GAAG,gBAAgB,IAAI,IAAI,CAAC,UAAU,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,IAEnHD,oEACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAsB,CAAA,EAAE,EACpH,OAAO,EAAE,IAAI,CAAC,UAAU,KAAK,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,SAAS,GAC5E,EACH,IAAI,CAAC,UAAU,KAAK,QAAQ;YAC3BA,0EAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,gBAAY,oBAAe,EAAC,EAAE,EAAC,QAAQ,EAAC,QAAQ,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,IACvJA,wEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,GAAa,CACjD,CAEX,EACP;KACH;;;;;;","names":["h","Host"],"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: flex;\n\n  jump-button {\n    --jump-button-border-radius: 0px 3px 3px 0px;\n  }\n\n  input {\n    width: 100%;\n  }\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}\n\n// /* Stile manuale */\n:host(.manual.outline) {\n  input {\n    border-radius: 3px 0px 0px 3px;\n    border: 1px solid var(--jump-search-bar-border-color);\n    padding: 12px;\n  }\n\n  input:focus-visible {\n    outline: 2px solid var(--jump-search-bar-focus-color);\n    outline-offset: -2px;\n  }\n}\n\n:host(.auto.outline) {\n  input {\n    border-radius: 3px;\n    border: 1px solid var(--jump-search-bar-border-color);\n    padding: 12px;\n    padding-left: 35px;\n    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;\n    background-size: 14px;\n    background-position: 10px center;\n  }\n\n  input:focus-visible {\n    outline: 2px solid var(--jump-search-bar-focus-color);\n    outline-offset: -2px;\n    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;\n    background-size: 14px !important;\n    background-position: 10px center !important;\n  } \n}\n\n/* Stile linear */\n:host(.auto.linear){\n  input.search-input {\n    border: none;\n    border-bottom: 1px solid var(--jump-search-bar-border-color);\n    padding: 8px 5px 8px 0;\n    padding-left: 35px;\n    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;\n    background-size: 14px;\n    background-position: 10px center;\n  }\n\n  input:focus-visible {\n    outline: 2px solid var(--jump-search-bar-focus-color);\n    outline-offset: -2px;\n    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;\n    background-size: 14px !important;\n    background-position: 10px center !important;\n  }\n}\n\n/* Stile filled */\n:host(.auto.filled) {\n  input.search-input {\n      border: none;\n      border-radius: 3px;\n      padding: 12px;\n      padding-left: 35px;\n      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;\n      background-size: 14px;\n      background-position: 10px center;\n      background-color: var(--jump-search-bar-bg-color);\n    }\n}\n","import { Component, 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  /* ---------------------- OWN PROPERTIES ---------------------- */\n\n  /* ---------------------- @ELEMENT ---------------------------- */\n  jumpSearchBar: HTMLInputElement;\n\n  /* ---------------------- @STATE ------------------------- */\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() placeholder: string = 'Cerca...';\n  @Prop() identifier: string = 'search-bar';\n\n  /**\n   * Variabile per personalizzare il tempo di attesa prima di eseguire la ricerca\n   */\n  @Prop() debounceTime: number = 500;\n\n  /**\n   * Se \"Auto\" la ricerca parte automaticamente al termine della digitazione\n   * Se \"Manual\" la ricerca parte solo dopo aver premuto invio -> può avere solo stile outline\n   */\n  @Prop() searchType: string = 'auto' || 'manual';\n\n  @Prop() variant: string = 'outline' || 'filled' || 'linear';\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-search-bar' }) search: EventEmitter;\n\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  /* -------------------- @LISTEN ------------------------------- */\n\n  /* -------------------- @METHOD ------------------------------- */\n\n  /* -------------------- LOCAL METHODS ------------------------- */\n\n  /**\n   * se searchType == 'manual' l'utente deve cliccare sul pulsante per eseguire la funzione\n   * se searchType == 'auto' la funzione viene eseguita automaticamente al termine della digitazione\n   */\n  doSearch = () => {\n    if (this.jumpSearchBar) {\n      const searchValue = this.jumpSearchBar.value;\n\n      console.log('doSearch', searchValue);\n      this.search.emit({ search: searchValue });\n    }\n  }\n\n\n  /** Used to filters/searchbar */\ndebounce(fn, delay = this.debounceTime) {\n  let timeoutId;\n\n  return (...args) => {\n    // cancel the previous timer\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    // setup a new timer\n    timeoutId = setTimeout(() => {\n      fn.apply(null, args);\n    }, delay);\n  };\n};\n\n  /* -------------------- RENDER ------------------------- */\n\n  render() {\n    return (\n      <Host \n        class={\"JumpSearchBar \" + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + \" \" + this.variant))} \n        >\n        <input \n          placeholder={this.placeholder} \n          type=\"search\" id={this.identifier} class=\"search-input\" ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }} \n          onInput={this.searchType === 'auto' ? this.debounce(this.doSearch) : undefined}\n          />\n        {this.searchType === 'manual' &&\n          <jump-button variant=\"secondary\" size=\"medium\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon onClick={() => this.doSearch()}>\n            <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n          </jump-button>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-search-bar.entry.cjs.js","mappings":"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","names":["h","Host"],"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}"],"version":3}

package/dist/cjs/jump-tab-item.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-97b3526b.js');
+const index = require('./index-e91b2b41.js');
 
-const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;--jump-tabitem-border-inline-color:var(--neutral-grey-disabled, #CBCBCB);font-family:var(--ff-primary);flex:0 0 auto}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px;border-bottom:1px solid var(--jump-tabitem-border-inline-color)}:host .Content.inline:not(.active){padding-bottom:14px}:host .Content.inline.active{color:var(--jump-tabitem-active-color);border-bottom:3px solid var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer;padding-bottom:12px}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}";
+const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;--jump-tabitem-border-inline-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-font-size:16px;--jump-tabitem-inline-padding:12px 24px;--jump-tabitem-boxed-padding:15px 39px;--jump-tabitem-rounded-padding:12px 32px;--jump-tabitem-sheet-padding:12px 32px;font-family:var(--ff-primary);flex:0 0 auto}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content .label{font-size:var(--jump-tabitem-font-size)}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:var(--jump-tabitem-inline-padding);border-bottom:1px solid var(--jump-tabitem-border-inline-color)}:host .Content.inline:not(.active){padding-bottom:14px}:host .Content.inline.active{color:var(--jump-tabitem-active-color);border-bottom:3px solid var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer;padding-bottom:12px}:host .Content.boxed{color:var(--jump-tabitem-color);padding:var(--jump-tabitem-boxed-padding);background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:var(--jump-tabitem-rounded-padding);color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:var(--jump-tabitem-sheet-padding);color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}";
 const JumpTabItemStyle0 = jumpTabItemCss;
 
 const JumpTabItem = class {
@@ -28,8 +28,8 @@ const JumpTabItem = class {
         this.variant = parentVariant;
     }
     render() {
-        return (index.h(index.Host, { key: '7007ce478b8de6630f88ec8ed6da7f3fb0d5dd97', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, index.h("div", { key: '04b6b822ddc49ede102e391c99976a6a41f97ee2', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            index.h("jump-icon", { key: '4337d05e761c69a29d431528992ea7c7efe36268', library: "fa", category: "regular", name: this.iconName, size: "small" }), index.h("span", { key: '17ca0b360fc1bf629d7ddd1598c903a437c833ae', class: "label" }, this.label))));
+        return (index.h(index.Host, { key: '0a4383e01bea0539424876f8b0d8d04d4482c957', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, index.h("div", { key: 'cee073351151f5468e4b72d4af2deacc7e080d22', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            index.h("jump-icon", { key: 'c65754b06a1b2404f146c71adc7498d4c8c6423c', library: "fa", category: "regular", name: this.iconName, size: "small" }), index.h("span", { key: 'd256f97d32910c594e12a6ca8b9de1fe483989b5', class: "label" }, this.label))));
     }
 };
 JumpTabItem.style = JumpTabItemStyle0;

package/dist/cjs/jump-tab-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"jump-tab-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,0gFAA0gF,CAAC;AACliF,0BAAe,cAAc;;MCMhB,WAAW;;;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;;QAEd,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC9B;IAID,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EAChC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IACtHD,kEAAK,KAAK,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,IAC1O,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC;YACtEA,wEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAa,EAE3FA,mEAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item&encapsulation=shadow","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n    --jump-tabitem-active-color: var(--secondary-standard);\n    --jump-tabitem-color: var(--neutral-grey-secondary);\n    --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);\n    --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);\n    --jump-tabitem-rounded-bg-color: white;\n    --jump-tabitem-border-inline-color: var(--neutral-grey-disabled, #CBCBCB);\n  \n    font-family: var(--ff-primary);\n\n    flex: 0 0 auto;\n  \n    .Content {\n  \n      display: flex;\n\n      &:hover:not(.disabled){\n        cursor: pointer;\n      }\n\n      label {\n        font-size: 16px;\n      }\n  \n      &.left {\n        flex-direction: row;\n        gap: 6px;\n        align-items: center;\n      }\n  \n      &.top {\n        flex-direction: column;\n        gap: 2px;\n        align-items: center;\n      }\n  \n      /*Tipologia inline */\n      &.inline {\n        color: var(--jump-tabitem-color);\n        padding: 12px 24px;\n        border-bottom: 1px solid var(--jump-tabitem-border-inline-color);\n      }\n\n      &.inline:not(.active) {\n        padding-bottom: 14px;\n      }\n\n      &.inline.active {\n        color: var(--jump-tabitem-active-color);\n        border-bottom: 3px solid var(--jump-tabitem-active-color);\n  \n        span {\n          font-weight: bold;\n        }\n      }\n\n      &.inline:hover:not(.disabled):not(.active) {\n        border-bottom: 3px solid var(--jump-tabitem-hover-color);\n        cursor: pointer;\n        padding-bottom: 12px;\n      }\n  \n      /* Tipologia boxed */\n      &.boxed {\n        color: var(--jump-tabitem-color);\n        padding: 15px 39px;\n        background-color: transparent;\n        border: 1px solid var(--jump-tabitem-boxed-bg-color);\n      }\n  \n      &.boxed:hover:not(.disabled),\n      &.boxed:hover:not(.active) {\n        background-color: transparent;\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      &.boxed.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-boxed-bg-color);\n        border: 1px solid var(--jump-tabitem-boxed-bg-color);\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      /* Tipologia rounded */\n      &.rounded {\n        padding: 12px 32px;\n        color: var(--jump-tabitem-color);\n  \n      }\n  \n      &.rounded:hover:not(.disabled) {\n        cursor: pointer;\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      &.rounded.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-rounded-bg-color);\n        border: 1px solid var(--jump-tabitem-active-color);\n        border-radius: 50px;\n  \n      }\n  \n      /** Tipologia sheet */\n      &.sheet {\n        padding: 12px 32px;\n        color: var(--neutral-grey-secondary);\n      }\n  \n      &.sheet:hover:not(.disabled) {\n        cursor: pointer;\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      &.sheet.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-rounded-bg-color);\n        border-radius: 8px 8px 0px 0px;\n      }\n    }\n}\n\n:host(.disabled) {\n    cursor: not-allowed;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n","import { Component, Host, Prop,State,  h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab-item',\n  styleUrl: 'jump-tab-item.scss',\n  shadow: true,\n})\nexport class JumpTabItem {\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  /**\n   * Identifier of the tab\n   */\n  @Prop() identifier: string = undefined;\n\n  /**\n   * Name of the icon. If not provided, the icon will not be displayed\n   */\n  @Prop() iconName: string = undefined;\n\n  /**\n   * Icon position, apply only if the icon is present\n   * Choosed from \"left\", \"top\"\n   */\n  @Prop() iconPosition: string = 'left';\n  @Prop() label: string = '';\n  @Prop() active: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The style of the tab item\n   * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n   */\n  @State() variant: string = 'inline';\n\n  @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n  changeTab(identifier){\n    this.changeActiveTab.emit({id: identifier});\n  }\n\n  componentDidLoad() {\n    // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n    let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n    this.variant = parentVariant;\n  }\n\n  tabEl: HTMLElement;\n\n  render() {\n    return (\n      <Host\n        ref={(el) => { this.tabEl = el }}\n        class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" + (this.variant) + \" \" + (this.disabled ? 'disabled' : '')}>\n        <div class={\"Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n          {(this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&\n            <jump-icon library=\"fa\" category=\"regular\" name={this.iconName} size=\"small\"></jump-icon>\n          }\n          <span class=\"label\">{this.label}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"jump-tab-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,o0FAAo0F,CAAC;AAC51F,0BAAe,cAAc;;MCMhB,WAAW;;;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;;QAEd,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC9B;IAID,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EAChC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IACtHD,kEAAK,KAAK,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,IAC1O,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC;YACtEA,wEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAa,EAE3FA,mEAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item&encapsulation=shadow","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n    --jump-tabitem-active-color: var(--secondary-standard);\n    --jump-tabitem-color: var(--neutral-grey-secondary);\n    --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);\n    --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);\n    --jump-tabitem-rounded-bg-color: white;\n    --jump-tabitem-border-inline-color: var(--neutral-grey-disabled, #CBCBCB);\n    --jump-tabitem-font-size: 16px;\n    --jump-tabitem-inline-padding: 12px 24px;\n    --jump-tabitem-boxed-padding: 15px 39px;\n    --jump-tabitem-rounded-padding: 12px 32px;\n    --jump-tabitem-sheet-padding: 12px 32px;\n  \n    font-family: var(--ff-primary);\n\n    flex: 0 0 auto;\n  \n    .Content {\n  \n      display: flex;\n\n      &:hover:not(.disabled){\n        cursor: pointer;\n      }\n\n      .label {\n        font-size: var(--jump-tabitem-font-size);\n      }\n  \n      &.left {\n        flex-direction: row;\n        gap: 6px;\n        align-items: center;\n      }\n  \n      &.top {\n        flex-direction: column;\n        gap: 2px;\n        align-items: center;\n      }\n  \n      /*Tipologia inline */\n      &.inline {\n        color: var(--jump-tabitem-color);\n        padding: var(--jump-tabitem-inline-padding);\n        border-bottom: 1px solid var(--jump-tabitem-border-inline-color);\n      }\n\n      &.inline:not(.active) {\n        padding-bottom: 14px;\n      }\n\n      &.inline.active {\n        color: var(--jump-tabitem-active-color);\n        border-bottom: 3px solid var(--jump-tabitem-active-color);\n  \n        span {\n          font-weight: bold;\n        }\n      }\n\n      &.inline:hover:not(.disabled):not(.active) {\n        border-bottom: 3px solid var(--jump-tabitem-hover-color);\n        cursor: pointer;\n        padding-bottom: 12px;\n      }\n  \n      /* Tipologia boxed */\n      &.boxed {\n        color: var(--jump-tabitem-color);\n        padding: var(--jump-tabitem-boxed-padding);\n        background-color: transparent;\n        border: 1px solid var(--jump-tabitem-boxed-bg-color);\n      }\n  \n      &.boxed:hover:not(.disabled),\n      &.boxed:hover:not(.active) {\n        background-color: transparent;\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      &.boxed.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-boxed-bg-color);\n        border: 1px solid var(--jump-tabitem-boxed-bg-color);\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      /* Tipologia rounded */\n      &.rounded {\n        padding: var(--jump-tabitem-rounded-padding);\n        color: var(--jump-tabitem-color);\n  \n      }\n  \n      &.rounded:hover:not(.disabled) {\n        cursor: pointer;\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      &.rounded.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-rounded-bg-color);\n        border: 1px solid var(--jump-tabitem-active-color);\n        border-radius: 50px;\n  \n      }\n  \n      /** Tipologia sheet */\n      &.sheet {\n        padding: var(--jump-tabitem-sheet-padding);\n        color: var(--neutral-grey-secondary);\n      }\n  \n      &.sheet:hover:not(.disabled) {\n        cursor: pointer;\n  \n        span {\n          font-weight: bold;\n        }\n      }\n  \n      &.sheet.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-rounded-bg-color);\n        border-radius: 8px 8px 0px 0px;\n      }\n    }\n}\n\n:host(.disabled) {\n    cursor: not-allowed;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n","import { Component, Host, Prop,State,  h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab-item',\n  styleUrl: 'jump-tab-item.scss',\n  shadow: true,\n})\nexport class JumpTabItem {\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  /**\n   * Identifier of the tab\n   */\n  @Prop() identifier: string = undefined;\n\n  /**\n   * Name of the icon. If not provided, the icon will not be displayed\n   */\n  @Prop() iconName: string = undefined;\n\n  /**\n   * Icon position, apply only if the icon is present\n   * Choosed from \"left\", \"top\"\n   */\n  @Prop() iconPosition: string = 'left';\n  @Prop() label: string = '';\n  @Prop() active: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The style of the tab item\n   * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n   */\n  @State() variant: string = 'inline';\n\n  @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n  changeTab(identifier){\n    this.changeActiveTab.emit({id: identifier});\n  }\n\n  componentDidLoad() {\n    // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n    let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n    this.variant = parentVariant;\n  }\n\n  tabEl: HTMLElement;\n\n  render() {\n    return (\n      <Host\n        ref={(el) => { this.tabEl = el }}\n        class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" + (this.variant) + \" \" + (this.disabled ? 'disabled' : '')}>\n        <div class={\"Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n          {(this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&\n            <jump-icon library=\"fa\" category=\"regular\" name={this.iconName} size=\"small\"></jump-icon>\n          }\n          <span class=\"label\">{this.label}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/cjs/jump-tab-panel.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-97b3526b.js');
+const index = require('./index-e91b2b41.js');
 
 const jumpTabPanelCss = ":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";
 const JumpTabPanelStyle0 = jumpTabPanelCss;
@@ -14,7 +14,7 @@ const JumpTabPanel = class {
         this.active = false;
     }
     render() {
-        return (index.h(index.Host, { key: '1057ea1667cef613a262c5eb4720445c0e406731', class: "JumpTabPanel", id: this.identifier }, index.h("div", { key: '1b05a31f18518cf65f037f5a605e67d1221bb9dd', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, index.h("slot", { key: 'cf471584939f94b0f26b80eab1c524edf5d55078' }))));
+        return (index.h(index.Host, { key: '75fb1adb1af140bba218b890891234b01be1534f', class: "JumpTabPanel", id: this.identifier }, index.h("div", { key: '08ddae107776c29aa2b869e7b2e541e43e33b6a8', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, index.h("slot", { key: 'bdf0d20e086f2b9def8df7f9abdae1df293a78c8' }))));
     }
 };
 JumpTabPanel.style = JumpTabPanelStyle0;

package/dist/cjs/jump-tab.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-97b3526b.js');
+const index = require('./index-e91b2b41.js');
 
 const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
 const JumpTabStyle0 = jumpTabCss;
@@ -76,7 +76,7 @@ const JumpTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2375f577b5d1691b0f82ef3c2b54cfc4afd949fa', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'f073494433715e96f782124311b0d8ac447bf157', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, index.h("div", { key: '8b33fcc870db99b2f63770ba7234c687dc3289b6', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("div", { key: 'fd87be2f9960845e6f13e583b325173fb5c75780', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("slot", { key: '2cd61f99305c97139575033fe2e8ddd22e551c16', name: "tab-item" }))), index.h("div", { key: '2aecf7da9e8d1bcbf6c1d3b54288b84bd71c999d', class: "ContentWrapper ContentWrapper--Panel" }, index.h("slot", { key: 'd9b8e534b11b039bafa0fcc5ecfcb966cf78663d', name: "tab-content" })))));
+        return (index.h(index.Host, { key: '497e52126ca025e5bd75ec2d611eb7e31288e165', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'f466e49311a54ec21317237335cbbdf5518766fb', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, index.h("div", { key: '9ea2361990221d411600a19858c61ea70bc4701f', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("div", { key: '9190d13fc70bec3709e3b7603836806349172e8d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("slot", { key: '52c0f5898b72fc938a0bf082ba43bd88d2ff30c6', name: "tab-item" }))), index.h("div", { key: '27ea1ebf944e2ccf856b1b7704e16493171ef6c9', class: "ContentWrapper ContentWrapper--Panel" }, index.h("slot", { key: '6f96926996d8efb7e11e6c78d60d18dd142ee38a', name: "tab-content" })))));
     }
     getAlignment(alignment) {
         switch (alignment) {

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-97b3526b.js');
+const index = require('./index-e91b2b41.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"hasSlotForFavorite":[4,"has-slot-for-favorite"],"hasSlotAddToCart":[4,"has-slot-add-to-cart"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"addToCartColor":[1,"add-to-cart-color"],"badgeColor":[1,"badge-color"],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"isMini":[4,"is-mini"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32],"priceFormatted":[32],"salePriceFormatted":[32],"setPrice":[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"showCount":[4,"show-count"],"offCanvasOverlay":[4,"off-canvas-overlay"],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"offCanvasClasses":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"label":[32],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]},null,{"showMore":["watchShowMore"]}]]],["jump-navbar.cjs",[[1,"jump-navbar",{"logo":[16],"navItems":[16],"secondaryNavItems":[16],"mobileThreshold":[2,"mobile-threshold"],"type":[1],"navPosition":[1,"nav-position"],"megaMenuAlignment":[1,"mega-menu-alignment"],"sticky":[4],"stickyThreshold":[2,"sticky-threshold"],"mobileLogo":[16],"user":[16],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"currentValue":[32],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"identifier":[1],"debounceTime":[2,"debounce-time"],"searchType":[1,"search-type"],"variant":[1]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
+  return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"hasSlotForFavorite":[4,"has-slot-for-favorite"],"hasSlotAddToCart":[4,"has-slot-add-to-cart"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"addToCartColor":[1,"add-to-cart-color"],"badgeColor":[1,"badge-color"],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"isMini":[4,"is-mini"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32],"priceFormatted":[32],"salePriceFormatted":[32],"setPrice":[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"showCount":[4,"show-count"],"offCanvasOverlay":[4,"off-canvas-overlay"],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"offCanvasClasses":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"label":[32],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]},null,{"showMore":["watchShowMore"]}]]],["jump-navbar.cjs",[[1,"jump-navbar",{"logo":[16],"navItems":[16],"secondaryNavItems":[16],"mobileThreshold":[2,"mobile-threshold"],"type":[1],"navPosition":[1,"nav-position"],"megaMenuAlignment":[1,"mega-menu-alignment"],"sticky":[4],"stickyThreshold":[2,"sticky-threshold"],"mobileLogo":[16],"user":[16],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"currentValue":[32],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-search-bar.cjs",[[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"],"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"]}]]],["jump-search-bar-mobile.cjs",[[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"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-search-bar-dropdown-item.cjs",[[1,"jump-search-bar-dropdown-item",{"value":[1],"img":[1],"href":[1],"details":[32]}]]],["jump-tab.cjs",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -16,6 +16,8 @@
     "components/jump-pagination-table/jump-pagination-table.js",
     "components/jump-quantity/jump-quantity.js",
     "components/jump-search-bar/jump-search-bar.js",
+    "components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js",
+    "components/jump-search-bar-mobile/jump-search-bar-mobile.js",
     "components/jump-tab/jump-tab.js",
     "components/jump-tab-item/jump-tab-item.js",
     "components/jump-tab-panel/jump-tab-panel.js"

package/dist/collection/components/jump-button/jump-button.css

@@ -40,7 +40,7 @@
   align-items: center;
   gap: var(--button-gap, 0.5rem);
   text-decoration: none;
-  padding: var(--button-padding);
+  padding: var(--jump-button-padding, var(--button-padding));
 }
 :host button:hover,
 :host a:hover {