@salla.sa/twilight-components 2.14.557 → 2.14.558

package/dist/components/salla-search.js

@@ -3,22 +3,165 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { S as Search } from './search.js';
+import { C as Cancel } from './cancel.js';
+import { K as KeyBoardArrowLeftIcon, a as KeyBoardArrowRightIcon } from './keyboard_arrow_left.js';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$4 } from './salla-button2.js';
-import { d as defineCustomElement$3 } from './salla-loading2.js';
-import { d as defineCustomElement$2 } from './salla-modal2.js';
+import { d as defineCustomElement$l } from './salla-add-product-button2.js';
+import { d as defineCustomElement$k } from './salla-attachment-view2.js';
+import { d as defineCustomElement$j } from './salla-booking-field2.js';
+import { d as defineCustomElement$i } from './salla-button2.js';
+import { d as defineCustomElement$h } from './salla-color-picker2.js';
+import { d as defineCustomElement$g } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$f } from './salla-count-down2.js';
+import { d as defineCustomElement$e } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$d } from './salla-file-upload2.js';
+import { d as defineCustomElement$c } from './salla-loading2.js';
+import { d as defineCustomElement$b } from './salla-map2.js';
+import { d as defineCustomElement$a } from './salla-modal2.js';
+import { d as defineCustomElement$9 } from './salla-order-options-modal2.js';
+import { d as defineCustomElement$8 } from './salla-product-availability2.js';
+import { d as defineCustomElement$7 } from './salla-product-card2.js';
+import { d as defineCustomElement$6 } from './salla-product-options2.js';
+import { d as defineCustomElement$5 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$4 } from './salla-quick-buy2.js';
+import { d as defineCustomElement$3 } from './salla-slider2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
 
-const sallaSearchCss = "/*!twlt*/.s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}.block{display:block}.inline{display:inline}.border{border-width:1px}.s-search-container{position:relative;z-index:99;max-height:14rem;border-radius:0.375rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-search-oval{border-radius:20px}.s-search-inline{min-width:220px}.s-search-container-open{max-height:24rem;border-radius:0px !important}.s-search-container-open .s-search-input{border-top-left-radius:0.375rem !important;border-top-right-radius:0.375rem !important;border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-no-results .s-search-input{border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-input{height:2.5rem;width:100%;border-radius:0.375rem;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0px;padding-bottom:0.125rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-input:focus{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-ring-color:transparent}.s-search-input:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:2.5rem}.s-search-input:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:2.5rem}.s-search-icon-wrap{position:absolute;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-icon-wrap:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:1rem}.s-search-icon-wrap:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:1rem}.s-search-icon svg{height:1rem;width:1rem;fill:#9ca3af}.s-search-spinner-loader{display:block;height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.s-search-spinner-loader{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));border-right-color:var(--color-primary)}.s-search-results{position:absolute;margin:auto;max-height:24rem;width:100%;max-width:100%;overflow-y:auto;border-bottom-right-radius:0.375rem;border-bottom-left-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-search-no-results{border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important}.s-search-no-results-placeholder{padding:1rem;text-align:center;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-product{display:flex;height:100%;justify-content:space-around;overflow:hidden;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));background-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-product:last-child{border-bottom-width:0px}.s-search-product:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 480px){.s-search-product{padding-left:1.25rem;padding-right:1.25rem}}.s-search-product-image-container{position:relative;height:3.5rem;width:5rem;overflow:hidden;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-search-product-image{position:relative;height:100%;width:100%;object-fit:cover;font-size:0px}.s-search-product-image::before{position:absolute;top:0px;left:0px;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-search-product-details{flex:1 1 0%;padding-top:0.25rem}.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1.25rem}}.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1.25rem}}.s-search-product-title{margin-bottom:0.375rem;display:flex;flex-direction:column;align-items:baseline;justify-content:flex-start;font-size:0.875rem;font-weight:700;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-product-price{display:flex;width:100%;align-items:center;font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary)}.s-search-product-regular-price{padding-left:0.75rem;padding-right:0.75rem;font-weight:500;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-search-product-not-available{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-search-action{position:absolute;height:100%}.s-search-action:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0px}.s-search-action:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px}.s-search-action-oval:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:9999px;border-bottom-right-radius:9999px}.s-search-action-oval:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:9999px;border-bottom-left-radius:9999px}.s-search-input-wrapper{position:relative;display:flex;flex-grow:1;align-items:center}.s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}.s-search-modal .s-modal-spacer{display:inline}.s-search-modal .s-modal-body{padding:0;width:700px;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible;position:relative !important}.s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
+const NEW_SEARCH_FEATURE_FLAG = 'new-search-ui-enabled';
+const SEARCH_HISTORY_KEY = 'salla::search-history';
+const SEARCH_HISTORY_LIMIT = 10;
+// Multi-market stores scope search history per market via the `scope` query param.
+function getSearchHistoryKey() {
+    if (typeof window === 'undefined') {
+        return SEARCH_HISTORY_KEY;
+    }
+    const scope = new URLSearchParams(window.location.search).get('scope');
+    return scope ? `${SEARCH_HISTORY_KEY}-${scope}` : SEARCH_HISTORY_KEY;
+}
+const DEFAULT_LABELS = {
+    searchPlaceholder: '',
+    noOptions: '',
+    outOfStock: '',
+    close: '',
+    back: '',
+    remove: '',
+    searchHistory: '',
+    trendingCategories: '',
+    mostSearched: '',
+    searchSuggestions: '',
+    categories: '',
+    searchResults: '',
+    searchViewAllTemplate: '',
+};
+// Labels not yet in the central translation files - seeded via addBulk only when missing.
+const TRANSLATION_DEFAULTS = {
+    'common.elements.search_history': { ar: 'آخر ما تم البحث عنه', en: 'Recently Searched' },
+    'common.elements.trending_categories': {
+        ar: 'التصنيفات الأكثر بحثاً',
+        en: 'Trending categories',
+    },
+    'common.elements.most_searched': { ar: 'الأكثر بحثاً', en: 'Most searched' },
+    'common.elements.search_suggestions': { ar: 'اقتراحات البحث', en: 'Search suggestions' },
+    'common.elements.categories': { ar: 'التصنيفات', en: 'Categories' },
+    'common.elements.search_results': { ar: 'نتائج البحث', en: 'Search results' },
+    'common.elements.search_view_all': {
+        ar: 'عرض كل النتائج لـ ":word"',
+        en: 'View all results for ":word"',
+    },
+};
+function isNewSearchFeatureEnabled() {
+    const flag = salla.storage.get(NEW_SEARCH_FEATURE_FLAG, false);
+    return flag === true || flag === 'true';
+}
+function getSearchResultsUrl(term) {
+    return salla.url.get('search?q=' + encodeURI(term));
+}
+function loadSearchHistory() {
+    const key = getSearchHistoryKey();
+    const stored = salla.storage.get(key, []);
+    return Array.isArray(stored) ? stored.filter(term => typeof term === 'string') : [];
+}
+function saveSearchHistory(history) {
+    const key = getSearchHistoryKey();
+    salla.storage.set(key, history);
+}
+function addToSearchHistory(history, term) {
+    const trimmed = term.trim();
+    if (!trimmed) {
+        return history;
+    }
+    const withoutDuplicate = history.filter(existing => existing.toLowerCase() !== trimmed.toLowerCase());
+    return [trimmed, ...withoutDuplicate].slice(0, SEARCH_HISTORY_LIMIT);
+}
+function registerTranslationDefaults() {
+    if (!salla?.lang?.addBulk) {
+        return;
+    }
+    const missing = Object.entries(TRANSLATION_DEFAULTS).reduce((acc, [key, value]) => {
+        if (salla.lang.get(key) === key) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+    if (Object.keys(missing).length) {
+        salla.lang.addBulk(missing);
+    }
+}
+function loadLabels() {
+    return {
+        searchPlaceholder: salla.lang.get('blocks.header.search_placeholder'),
+        noOptions: salla.lang.get('common.elements.no_options'),
+        outOfStock: salla.lang.get('pages.products.out_of_stock'),
+        close: salla.lang.get('common.elements.close'),
+        back: salla.lang.get('common.elements.back'),
+        remove: salla.lang.get('common.elements.remove'),
+        searchHistory: salla.lang.get('common.elements.search_history'),
+        trendingCategories: salla.lang.get('common.elements.trending_categories'),
+        mostSearched: salla.lang.get('common.elements.most_searched'),
+        searchSuggestions: salla.lang.get('common.elements.search_suggestions'),
+        categories: salla.lang.get('common.elements.categories'),
+        searchResults: salla.lang.get('common.elements.search_results'),
+        searchViewAllTemplate: salla.lang.get('common.elements.search_view_all'),
+    };
+}
+function getDefaultProductSlot() {
+    return ('<div class="s-search-product-image-container">' +
+        '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+        '</div>' +
+        '<div class="s-search-product-details">' +
+        '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+        '</div>');
+}
+
+const sallaSearchCss = "/*!twlt*/.s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}.visible{visibility:visible}.block{display:block}.inline{display:inline}.hidden{display:none}.border{border-width:1px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-search-container{position:relative;z-index:99;max-height:14rem;border-radius:0.375rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-search-oval{border-radius:20px}.s-search-inline{min-width:220px}.s-search-container-open{max-height:24rem;border-radius:0px !important}.s-search-container-open .s-search-input{border-top-left-radius:0.375rem !important;border-top-right-radius:0.375rem !important;border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-no-results .s-search-input{border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-input{height:2.5rem;width:100%;border-radius:0.375rem;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0px;padding-bottom:0.125rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-input:focus{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-ring-color:transparent}.s-search-input:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:2.5rem}.s-search-input:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:2.5rem}.s-search-modal-new .s-search-input{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-search-icon-wrap{position:absolute;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-icon-wrap:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:1rem}.s-search-icon-wrap:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:1rem}.s-search-icon svg{height:1rem;width:1rem;fill:#9ca3af}.s-search-spinner-loader{display:block;height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.s-search-spinner-loader{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));border-right-color:var(--color-primary)}.s-search-results{position:absolute;margin:auto;max-height:24rem;width:100%;max-width:100%;overflow-y:auto;border-bottom-right-radius:0.375rem;border-bottom-left-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-search-no-results{border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important}.s-search-no-results-placeholder{grid-column:1 / -1;padding:1rem;text-align:center;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-product{display:flex;height:100%;justify-content:space-around;overflow:hidden;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));background-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-product:last-child{border-bottom-width:0px}.s-search-product:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 480px){.s-search-product{padding-left:1.25rem;padding-right:1.25rem}}.s-search-product-image-container{position:relative;height:3.5rem;width:5rem;overflow:hidden;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-search-product-image{position:relative;height:100%;width:100%;object-fit:cover;font-size:0px}.s-search-product-image::before{position:absolute;top:0px;left:0px;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-search-product-details{flex:1 1 0%;padding-top:0.25rem}.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1.25rem}}.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1.25rem}}.s-search-product-title{margin-bottom:0.375rem;display:flex;flex-direction:column;align-items:baseline;justify-content:flex-start;font-size:0.875rem;font-weight:700;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-product-price{display:flex;width:100%;align-items:center;font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary)}.s-search-product-regular-price{padding-left:0.75rem;padding-right:0.75rem;font-weight:500;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-search-product-not-available{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-search-action{position:absolute;height:100%}.s-search-action:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0px}.s-search-action:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px}.s-search-action-oval:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:9999px;border-bottom-right-radius:9999px}.s-search-action-oval:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:9999px;border-bottom-left-radius:9999px}.s-search-input-row{display:flex;align-items:center;gap:0.25rem}.s-search-back-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0.25rem;line-height:1;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-search-back-btn:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.s-search-back-btn{display:none}}.s-search-back-btn svg{height:1.5rem;width:1.5rem;fill:#6b7280}.s-search-input-wrapper{position:relative;display:flex;flex-grow:1;align-items:center}.s-search-input-clearable:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-right:2.25rem}.s-search-input-clearable:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:2.25rem}.s-search-input-clearable::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.s-search-clear-icon{position:absolute;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));padding:0.25rem;line-height:1;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-clear-icon:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-clear-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0.75rem}.s-search-clear-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0.75rem}.s-search-clear-icon svg{height:1rem;width:1rem;fill:#9ca3af}.s-search-panel{display:flex;flex-direction:column;gap:0.75rem;padding:0px}@media (min-width: 640px){.s-search-panel{padding:1rem}}.s-search-results-body{display:flex;max-height:24rem;gap:0.75rem;overflow-y:auto}.s-search-results-grid-wrap{min-width:0px;flex:1 1 0%}.s-search-results-grid{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-content:flex-start;column-gap:0.75rem;row-gap:0.25rem}@media (min-width: 640px){.s-search-results-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}.s-search-grid-item{cursor:pointer;border-radius:0.375rem;padding:0.25rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-grid-item:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.s-search-grid-item .s-product-card-out-badge{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.s-search-view-all{display:flex;flex-shrink:0;align-items:center;justify-content:center;gap:0.25rem;border-top-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding-top:0.75rem;text-align:center;font-size:0.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-search-view-all:hover{text-decoration-line:underline}.s-search-view-all-icon{line-height:1}.s-search-view-all-icon svg{height:1rem;width:1rem;fill:#6b7280}.s-search-sidebar{width:7rem;flex-shrink:0}.s-search-sidebar>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.s-search-sidebar{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}@media (min-width: 480px){.s-search-sidebar{width:8rem}}.s-search-sidebar:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-right-width:1px;padding-right:0.75rem}.s-search-sidebar:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-left-width:1px;padding-left:0.75rem}.s-search-idle-panel{max-height:24rem;min-height:6rem}.s-search-idle-panel>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.s-search-idle-panel{overflow-y:auto}.s-search-idle-section-title{margin-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-history-list{display:flex;flex-wrap:wrap;gap:0.5rem}.s-search-history-chip{display:inline-flex;align-items:center;gap:0.375rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding-top:0.375rem;padding-bottom:0.375rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-history-chip:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:0.75rem;padding-right:0.5rem}.s-search-history-chip:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:0.75rem;padding-left:0.5rem}.s-search-history-chip-term{line-height:1}.s-search-history-chip-remove svg{height:0.625rem;width:0.625rem;fill:#9ca3af}.s-search-idle-categories-list{display:flex;flex-wrap:wrap;gap:0.5rem}.s-search-idle-category-chip{display:inline-flex;align-items:center;gap:0.25rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-idle-category-chip:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.s-search-idle-category-count{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-most-searched-list{display:flex;flex-direction:column}.s-search-most-searched-item{display:flex;width:100%;align-items:center;gap:0.5rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-most-searched-item:hover{color:var(--color-primary)}.s-search-most-searched-icon svg{height:0.875rem;width:0.875rem;fill:#9ca3af}@media (min-width: 640px){.s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}.s-search-modal .s-modal-spacer{display:inline}}@media (max-width: 639px){.s-search-modal .s-modal-body{height:100dvh;max-height:100dvh !important}}@media (min-width: 640px){.s-search-modal .s-modal-body{padding:0;width:700px;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible;position:relative !important}}.s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}@media (min-width: 640px){.s-search-modal.s-search-modal-new .s-modal-body{background:white;overflow:hidden;width:1100px;max-width:95%}}";
 
 const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.newSearchEnabled = isNewSearchFeatureEnabled();
         this.inputValue = '';
+        this.hasTrackedFocus = false;
         this.translationLoaded = false;
+        this.labels = DEFAULT_LABELS;
         this.loading = false;
         this.typing = false;
         this.debounce = setTimeout(() => '', 1000);
+        this.search_term = '';
+        this.hasInputValue = false;
+        this.searchHistory = loadSearchHistory();
+        /**
+         * Most-searched categories to surface before the customer types a query.
+         * Not wired to a live endpoint yet - stays empty (and hidden) until a future
+         * story populates it.
+         */
+        this.trendingCategories = [];
+        /**
+         * Most-searched terms, reused both as the pre-search "most searched" list and
+         * as the results-view "search suggestions" sidebar. Same not-wired-yet status
+         * as trendingCategories.
+         */
+        this.mostSearchedTerms = [];
         /**
          * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false`
          */
@@ -43,37 +186,72 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
          * Show submit action buttons at the end.
          */
         this.showAction = false;
+        this.tracking = {
+            searchFocus: () => {
+                if (this.hasTrackedFocus) {
+                    return;
+                }
+                this.hasTrackedFocus = true;
+                salla.event.emit('salla-search::input.focused');
+            },
+            productClick: (product, position) => {
+                salla.event.emit('salla-search::product.clicked', [{ product, position }]);
+            },
+            recommendationClick: (term, source) => {
+                salla.event.emit('salla-search::recommendation.clicked', { term, source });
+            },
+        };
         this.productSlot =
-            this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
+            this.host?.querySelector('[slot="product"]')?.innerHTML || getDefaultProductSlot();
         salla.event.on('search::open', () => this.open());
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-        });
         salla.event.on('modalClosed', () => this.onModalClose());
     }
     async open() {
-        if (!this.inline) {
-            await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+        if (this.newSearchEnabled || !this.inline) {
+            await this.modal?.open().then(() => setTimeout(() => this.searchInput?.focus(), 300));
         }
     }
     onModalClose() {
-        this.searchInput.value = '';
+        if (this.searchInput) {
+            this.searchInput.value = '';
+        }
         this.results = undefined;
+        this.hasInputValue = false;
         this.afterSearching();
-        this.container.classList.remove('s-search-no-results');
+        this.container?.classList.remove('s-search-no-results');
     }
     handleKeyDown(ev) {
         if (ev.key === 'Enter' && this.search_term?.length) {
-            window.location.href = salla.url.get('search?q=' + encodeURI(this.search_term));
+            window.location.href = getSearchResultsUrl(this.search_term);
         }
     }
-    getDefaultProductSlot() {
-        return ('<div class="s-search-product-image-container">' +
-            '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
-            '</div>' +
-            '<div class="s-search-product-details">' +
-            '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
-            '</div>');
+    clearSearch() {
+        if (this.searchInput) {
+            this.searchInput.value = '';
+        }
+        this.hasInputValue = false;
+        this.search_term = '';
+        this.searchInput?.focus();
+    }
+    removeFromSearchHistory(term) {
+        this.searchHistory = this.searchHistory.filter(existing => existing !== term);
+        saveSearchHistory(this.searchHistory);
+        this.afterSearching(!this.results);
+    }
+    applySuggestedTerm(term, source) {
+        this.tracking.recommendationClick(term, source);
+        if (this.searchInput) {
+            this.searchInput.value = term;
+        }
+        this.hasInputValue = true;
+        this.search_term = term;
+        this.searchInput?.focus();
+    }
+    async componentWillLoad() {
+        await salla.lang.onLoaded();
+        registerTranslationDefaults();
+        this.labels = loadLabels();
+        this.translationLoaded = true;
     }
     debounceSearch(event) {
         this.typing = true;
@@ -85,10 +263,13 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
     }
     limitWordsAndSearch(event) {
         let value = event.target.value;
+        this.hasInputValue = value.length > 0;
         const words = value.trim().split(/\s+/);
         if (words.length > this.maxWords) {
             const truncatedInput = words.slice(0, this.maxWords).join(' ');
-            this.searchInput.value = truncatedInput;
+            if (this.searchInput) {
+                this.searchInput.value = truncatedInput;
+            }
         }
         this.debounceSearch(event);
     }
@@ -112,7 +293,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
         }
     }
     search(val) {
-        this.noResults.style.display = 'none';
+        this.noResults && (this.noResults.style.display = 'none');
         //run loading spinner or stop it
         this.loading = true;
         salla.product
@@ -120,22 +301,29 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
             .then(response => {
             this.results = response;
             salla.event.emit('Products Searched', val);
+            if (this.newSearchEnabled) {
+                this.searchHistory = addToSearchHistory(this.searchHistory, val);
+                saveSearchHistory(this.searchHistory);
+            }
         })
             .catch(err => (err !== 'Query is same as previous one!' ? (this.results = undefined) : null))
             .finally(() => this.afterSearching(/*isEmpty*/ false));
     }
     afterSearching(isEmpty = true) {
-        this.noResults.style.display = isEmpty || this.results?.data.length > 0 ? 'none' : 'block';
-        Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        if (this.noResults) {
+            this.noResults.style.display = isEmpty || !!this.results?.data?.length ? 'none' : 'block';
+        }
+        // The new search experience is always a fully-visible modal panel (no collapsed/expanded
+        // input trick needed), so this open/no-results cosmetic toggle only applies to the legacy UI.
+        if (!this.newSearchEnabled) {
+            Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        }
         this.loading = false;
         salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
-        this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
+        this.inputValue.length < 3 ? this.container?.classList.remove('s-search-no-results') : '';
     }
-    render() {
-        const searchContent = (h("div", { key: 'ca8dec5eb90cd0893a1a3364df34ba0ee4d60891', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '212f8180ecca220a8b89231311dec6cdf3ef0b06', class: "s-search-input-wrapper" }, h("span", { key: '51fb0f9a2e342afd35eb82b57f55471aa9e1519f', class: "s-search-icon-wrap" }, h("span", { key: 'e75117068c51c6d200e8e20fa0f00ca02ed0c61d', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '442b1704b75a33e8c9e02da8200151a1d8e8db72', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
-                height: this.height + 'px',
-                borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: 'f3b40ce4ec24678f6d8421f3da8ac9e1bd631c3a', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
+    renderLegacyResults() {
+        return (h("div", { class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
                 's-search-product': true,
                 's-search-product-not-available': !product.is_available,
             }, innerHTML: this.productSlot
@@ -144,12 +332,83 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
                 .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price
                 ? salla.money(product.regular_price)
                 : '')
-                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: 'fdbb21061c599a59c6d828eec80e8d591a708cca', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
-        const modalContent = (h("salla-modal", { key: 'ca90aea3fb92d1ba7d8270c26e2ecd82d5018784', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
-        const placeholderContent = (h("div", { key: '73333ce51cabadc4963a9fe9d1372bb7d63925c8', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: '77a66e9bba504557160c8c50d91f1216cc68f253', class: "s-search-input-wrapper" }, h("span", { key: '18fb5ce6e3e72874e76dd1ef2c6db8718a68f778', class: "s-search-icon-wrap" }, h("span", { key: '63b9e9af1c51647df734cc4d5cf7a825b922ce38', class: "s-search-icon", innerHTML: Search })), h("button", { key: 'b70169ed2d80ec2ad6b09952ad104824610212df', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                .replace(/\{image\}/g, product.image.url) }))), h("p", { ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, this.labels.noOptions)));
+    }
+    renderCategoriesSection(title) {
+        if (!this.trendingCategories.length) {
+            return null;
+        }
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("div", { class: "s-search-idle-categories-list" }, this.trendingCategories.map(category => (h("a", { class: "s-search-idle-category-chip", href: category.url, onClick: () => this.tracking.recommendationClick(category.name, 'category') }, category.name, category.count ? (h("span", { class: "s-search-idle-category-count" }, category.count)) : null))))));
+    }
+    renderTermsSection(title, source) {
+        if (!this.mostSearchedTerms.length) {
+            return null;
+        }
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("ul", { class: "s-search-most-searched-list" }, this.mostSearchedTerms.map(term => (h("li", null, h("button", { type: "button", class: "s-search-most-searched-item", onClick: () => this.applySuggestedTerm(term, source) }, h("span", { class: "s-search-most-searched-icon", innerHTML: Search }), term)))))));
+    }
+    renderSearchHistorySection() {
+        // Only in the empty/zero state - hidden as soon as there's input text or results.
+        if (!this.searchHistory.length || this.hasInputValue) {
+            return null;
+        }
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, this.labels.searchHistory), h("div", { class: "s-search-history-list" }, this.searchHistory.map(term => (h("span", { class: "s-search-history-chip" }, h("button", { type: "button", class: "s-search-history-chip-term", onClick: () => this.applySuggestedTerm(term, 'history') }, term), h("button", { type: "button", class: "s-search-history-chip-remove", "aria-label": this.labels.remove, onClick: () => this.removeFromSearchHistory(term) }, h("span", { innerHTML: Cancel }))))))));
+    }
+    renderIdlePanel() {
+        // Always renders - even with nothing in history/trending yet - so the panel opens as a
+        // visible (if empty) container rather than disappearing until there's something to show.
+        return (h("div", { class: "s-search-idle-panel" }, this.renderSearchHistorySection(), this.renderCategoriesSection(this.labels.trendingCategories), this.renderTermsSection(this.labels.mostSearched, 'trending')));
+    }
+    renderResultsBody() {
+        // Search history never shows here (only in the empty/zero state), so the sidebar's
+        // visibility depends only on categories/terms - not the full idle-panel content check.
+        const hasSidebarContent = this.trendingCategories.length > 0 || this.mostSearchedTerms.length > 0;
+        return (h("div", { class: "s-search-results-body" }, hasSidebarContent ? (h("div", { class: "s-search-sidebar" }, this.renderTermsSection(this.labels.searchSuggestions, 'suggestion'), this.renderCategoriesSection(this.labels.categories))) : null, h("div", { class: "s-search-results-grid-wrap" }, h("p", { class: "s-search-idle-section-title" }, this.labels.searchResults), h("div", { class: "s-search-results-grid" }, this.results?.data.map((product, position) => (h("div", { class: "s-search-grid-item", onClick: () => this.tracking.productClick(product, position) }, h("salla-product-card", { product: { ...product, url: product.url + '?from=search-bar' }, horizontal: true, compact: true, "show-quantity": !product.is_available, "show-out-of-stock-beside-price": true, hideAddBtn: true })))), this.results?.data.length === 0 ? (h("p", { class: "s-search-no-results-placeholder" }, this.labels.noOptions)) : null))));
+    }
+    renderViewAllLink() {
+        if (!this.results?.data.length) {
+            return null;
+        }
+        return (h("a", { class: "s-search-view-all", href: getSearchResultsUrl(this.search_term) }, this.labels.searchViewAllTemplate.replace(':word', this.search_term), h("span", { class: "s-search-view-all-icon", innerHTML: salla.config.get('theme.is_rtl', true) ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon })));
+    }
+    renderDropdown() {
+        if (!this.newSearchEnabled) {
+            return this.renderLegacyResults();
+        }
+        return this.results ? this.renderResultsBody() : this.renderIdlePanel();
+    }
+    renderInputWrapper() {
+        const inputWrapper = (h("div", { class: "s-search-input-wrapper" }, h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { type: "search", enterkeyhint: "search", autocomplete: "off", class: { 's-search-input': true, 's-search-input-clearable': this.newSearchEnabled }, placeholder: this.labels.searchPlaceholder, onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.newSearchEnabled && this.tracking.searchFocus(), ref: input => (this.searchInput = input), style: {
+                height: this.height + 'px',
+                borderRadius: this.oval ? this.height / 2 + 'px' : '',
+            } }), this.newSearchEnabled && this.hasInputValue ? (h("button", { type: "button", class: "s-search-clear-icon", "aria-label": this.labels.close, onClick: () => this.clearSearch() }, h("span", { innerHTML: Cancel }))) : null, this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null));
+        if (!this.newSearchEnabled) {
+            return inputWrapper;
+        }
+        return (h("div", { class: "s-search-input-row" }, h("button", { type: "button", class: "s-search-back-btn", "aria-label": this.labels.back, onClick: () => this.modal?.close() }, h("span", { innerHTML: salla.config.get('theme.is_rtl', true)
+                ? KeyBoardArrowRightIcon
+                : KeyBoardArrowLeftIcon })), inputWrapper));
+    }
+    renderPlaceholderTrigger() {
+        return (h("div", { class: "s-search-input-wrapper" }, h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: Search })), h("button", { type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));
+            } }, this.labels.searchPlaceholder)));
+    }
+    /**
+     * The new search UI is always a modal opened from a placeholder trigger (never inline,
+     * never a bare/self-triggering modal), with its own padded panel layout - the input and
+     * dropdown content share one bordered card instead of the legacy floating-dropdown look.
+     */
+    renderNewSearchExperience() {
+        return (h("div", { class: "s-search-placeholder-wrapper s-search-inline" }, this.renderPlaceholderTrigger(), h("salla-modal", { position: "top", class: "s-search-modal s-search-modal-new", "hide-close-button": true, ref: modal => (this.modal = modal) }, h("div", { class: "s-search-panel", ref: container => (this.container = container) }, this.renderInputWrapper(), this.renderDropdown(), this.renderViewAllLink()))));
+    }
+    render() {
+        if (this.newSearchEnabled) {
+            return this.renderNewSearchExperience();
+        }
+        const searchContent = (h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, this.renderInputWrapper(), this.renderDropdown()));
+        const modalContent = (h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (h("div", { class: "s-search-placeholder-wrapper s-search-inline" }, this.renderPlaceholderTrigger(), modalContent));
         return this.placeholder ? (placeholderContent) : this.inline ? (h("div", { class: "s-search-modal" }, searchContent)) : (modalContent);
     }
     /**
@@ -157,7 +416,11 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
      */
     componentDidLoad() {
         this.afterSearching();
-        this.searchInput.value = this.getQueryParam('q');
+        const initialQuery = this.getQueryParam('q');
+        if (initialQuery && this.searchInput) {
+            this.searchInput.value = initialQuery;
+            this.hasInputValue = true;
+        }
     }
     get host() { return this; }
     static get watchers() { return {
@@ -172,11 +435,16 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
         "maxWords": [2, "max-words"],
         "showAction": [4, "show-action"],
         "translationLoaded": [32],
+        "labels": [32],
         "results": [32],
         "loading": [32],
         "typing": [32],
         "debounce": [32],
-        "search_term": [32]
+        "search_term": [32],
+        "hasInputValue": [32],
+        "searchHistory": [32],
+        "trendingCategories": [32],
+        "mostSearchedTerms": [32]
     }, [[0, "keydown", "handleKeyDown"]], {
         "search_term": ["handleSearch"]
     }]);
@@ -184,24 +452,109 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-search", "salla-button", "salla-loading", "salla-modal"];
+    const components = ["salla-search", "salla-add-product-button", "salla-attachment-view", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-progress-bar", "salla-quick-buy", "salla-slider", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-search":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaSearch$1);
             }
             break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "salla-attachment-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
             }
             break;
         case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-order-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-product-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tel-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/salla-searchable-dropdown2.js

@@ -197,18 +197,18 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
     render() {
         const hasSelection = this.selectedItem != null;
         const listboxId = `${this.inputId}-listbox`;
-        return (h(Host, { key: '813e07447e4b3c51180345a38e82ffe135b6aec0', class: "s-searchable-dropdown" }, h("div", { key: '34eb275b53d173015a68bd2eeb93f1621eae47d1', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '3659b3ca3a882ea94656c37d2862cf2ebd0a6690', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '9bbce65147d41fad44282ad04c0707b34ee12526', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: '177b983bf879eae9a4d191226c480cbb3abe21c1', class: {
+        return (h(Host, { key: '6661631ca1fbc9dee2c634fffa720e5f90ce3483', class: "s-searchable-dropdown" }, h("div", { key: '201df6fb1c7d201d93681acc3819d76be5da4c6a', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '2a5a78700cb7c4f498140f91525e7264bcfa7555', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'ae3395c452ced56a8754466a5962acfaaef0c3b5', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'ca363dd594a146e9dedd6940c736e832f465d495', class: {
                 's-searchable-dropdown-trigger': true,
                 's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
                 's-searchable-dropdown-trigger--open': this.isOpen,
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '7887cee514ce9220a5974816700e7519c201183b', class: {
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '84e041b879c392a82bbaf0ebd21b50a1e035218d', class: {
                 'sicon-keyboard_arrow_down': true,
                 's-searchable-dropdown-trigger-icon': true,
                 's-searchable-dropdown-trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'cbca93a72a5ec382903844c60f8fef8e77d46d92', class: {
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'eeeb7a2c5f3ff05966150fada86eb26d38f38699', class: {
                 's-searchable-dropdown-panel': true,
                 's-searchable-dropdown-panel--up': this.dropUp,
-            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '06f901a77c0ac9e2bfcfaa2823df51370163925c', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '5bc57c4e8022f53d1c7b64cde61fdc386c94bd65', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: 'b6a3db42d1785326c4be15c58f3d37c34d221f9e', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: 'aac10f08cd4ed51829f254990d11c103861f0984', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '28bd784d25d2bb9928c2316aac029257140d19e9', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '78add1451d050ce225fc3e14af352af4891735a3', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '94644b386f64d1312511349f1eebafb56566754a', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: '5e7f218ded5baac0ad6fd92a04eae8948f7c9430', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
     }
     renderListContent() {
         if (this.searching || this.loading) {