@shoper/phoenix_design_system 1.6.8 → 1.6.10

package/build/cjs/packages/phoenix/src/components/form/input/input_control.js

@@ -7,17 +7,17 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var ref_js = require('lit-html/directives/ref.js');
 var input_constants = require('./input_constants.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
-var ref = require('lit/directives/ref');
 var input_mask_controller = require('../../../controllers/input_mask_controller/input_mask_controller.js');
 
 exports.HInputControl = class HInputControl extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this.type = input_constants.INPUT_CONTROL_TYPES.text;
-        this._inputRef = ref.createRef();
+        this._inputRef = ref_js.createRef();
         this._inputMaskController = null;
         this._handleChangeEvent = (event) => {
             this.dispatchEvent(new CustomEvent(input_constants.INPUT_CONTROL_EVENTS.change, {
@@ -114,7 +114,7 @@ exports.HInputControl = class HInputControl extends phoenix_light_lit_element.Ph
         super.render();
         return lit.html `
             <input
-                ${ref.ref(this._inputRef)}
+                ${ref_js.ref(this._inputRef)}
                 id="${ifDefined_js.ifDefined(this.controlId)}"
                 name="${ifDefined_js.ifDefined(this.controlName)}"
                 type="${ifDefined_js.ifDefined(this.type)}"

package/build/cjs/packages/phoenix/src/components/form/search/search.js

@@ -28,7 +28,46 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._historyContext = new behavior_subject.BehaviorSubject({
             showLoadMore: false
         });
+        this._activeItemId = -1;
         this._translations = {};
+        this._bindKeys = (ev) => {
+            const searchItemsCount = this._getSearchItemsCount();
+            switch (ev.key) {
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    this._activeItemId = this._activeItemId === searchItemsCount - 1 ? 0 : this._activeItemId + 1;
+                    this._scroll(search_constants.SCROLL_DIRECTIONS.down);
+                    break;
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    this._activeItemId = this._activeItemId === 0 || this._activeItemId === -1 ? searchItemsCount - 1 : this._activeItemId - 1;
+                    this._scroll(search_constants.SCROLL_DIRECTIONS.up);
+                    break;
+                case 'Enter':
+                    ev.preventDefault();
+                    if (this._activeItemId === -1)
+                        return;
+                    this._handleChooseSearchItem();
+                    break;
+                case 'Escape':
+                    ev.preventDefault();
+                    this._searchInput.blur();
+                    this._resetSearchView();
+                    break;
+            }
+        };
+        this._getSearchItemsCount = () => {
+            if (this._shouldShowHistory)
+                return this._historyLimitedContent.length;
+            let searchItemsCount = this._searchResults.products.length +
+                this._searchResults.categories.length +
+                this._searchResults.suggestions.length +
+                this._searchResults.producers.length;
+            if (this._searchResults.products.length && this._searchResults.suggestions.length) {
+                searchItemsCount += 1;
+            }
+            return searchItemsCount;
+        };
         this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
             if (!outsideClick)
@@ -62,6 +101,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         catch (_a) {
             console.error('Search context is not provided');
         }
+        this._setupInitialSearchPhrase();
         this._setupListeners();
     }
     disconnectedCallback() {
@@ -73,31 +113,54 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
         this._historyContextProvider.provide(search_constants.SEARCH_CONTEXT_NAMES.historyContext, this._historyContext);
     }
+    _setupInitialSearchPhrase() {
+        var _a;
+        const searchInput = this.querySelector('input[type="search"]');
+        if (searchInput)
+            this._searchInput = searchInput;
+        if (!((_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.value))
+            return;
+        this._searchPhrase = this._searchInput.value;
+        this._updateSearchPhrase(this._searchInput.value);
+    }
+    _updateSearchPhrase(searchPhrase) {
+        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
+    }
+    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: {
+                searchPhrase
+            },
+            bubbles: true
+        }));
+    }
     _setupListeners() {
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusinInput, (ev) => {
             const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
             searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(search_constants.SEARCH_CLASS_NAMES.outline);
             const shouldShowMessage = ev.detail.searchPhrase !== '';
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
+            document.addEventListener('keydown', this._bindKeys);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchInput, (ev) => this._updateSearchView(ev.detail.searchPhrase, false));
-        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => this._updateSearchView('', false));
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => {
+            this._searchInput.focus();
+            this._updateSearchView('', false);
+        });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
-            const updatedInput = this.querySelector('input[type="search"]');
-            if (!updatedInput) {
-                throw new Error('Search input not found');
-            }
-            if (updatedInput.value === '') {
-                this._updateSearchView(updatedInput.value, true);
+            if (this._activeItemId !== -1)
+                return;
+            if (this._searchInput.value === '') {
+                this._updateSearchView(this._searchInput.value, true);
             }
             else {
                 this._resetSearchView();
             }
-            this._submitSearchPhrase(updatedInput.value);
+            this._submitSearchPhrase(this._searchInput.value);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.close, () => {
             this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
@@ -116,6 +179,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
         this._shouldShowMessage = shouldShowMessage;
+        this._activeItemId = -1;
         this._displaySuggester(searchPhrase);
         if (!shouldUpdateSearchPhrase)
             return;
@@ -144,22 +208,40 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._shouldShowHistory = false;
         this._shouldShowResults = true;
     }
-    _updateSearchPhrase(searchPhrase) {
-        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
+    _scroll(direction) {
+        const searchContainer = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.container}`);
+        const maxScrollTop = searchContainer.scrollHeight - searchContainer.clientHeight;
+        const activeItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
+        const activeItemHeight = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect().height) || 0;
+        let top;
+        if (direction === search_constants.SCROLL_DIRECTIONS.up) {
+            top = searchContainer.scrollTop == 0 ? 0 : searchContainer.scrollTop + 30 - activeItemHeight;
+        }
+        else {
+            top = searchContainer.scrollTop == maxScrollTop ? maxScrollTop : activeItemHeight + searchContainer.scrollTop - 30;
+        }
+        if (this._activeItemId === this._getSearchItemsCount() - 1) {
+            top = maxScrollTop;
+        }
+        if (this._activeItemId === 0) {
+            top = 0;
+        }
+        searchContainer === null || searchContainer === void 0 ? void 0 : searchContainer.scrollTo({ top, behavior: 'smooth' });
     }
-    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
-        this.dispatchEvent(new CustomEvent(eventName, {
-            detail: {
-                searchPhrase
-            },
-            bubbles: true
-        }));
+    _handleChooseSearchItem() {
+        const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
+        const elementToClick = activeSearchItem.dataset.suggestedValue
+            ? activeSearchItem
+            : activeSearchItem.querySelector('a');
+        elementToClick.click();
     }
     _resetSearchView() {
         this._shouldShowMessage = false;
+        this._activeItemId = -1;
         const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
         searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
         this._hideHistorySuggestionsAndResults();
+        document.removeEventListener('keydown', this._bindKeys);
     }
     _submitSearchPhrase(searchPhrase) {
         this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
@@ -189,12 +271,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                     ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
                                 .history="${this._historyLimitedContent}"
                                 .translations="${this._translations}"
+                                active-item-id="${this._activeItemId}"
                             ></h-search-history>`)}
                     ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
                                 .results="${this._searchResults}"
                                 search-phrase="${this._searchPhrase}"
                                 .settings="${this.settings}"
                                 .translations="${this._translations}"
+                                active-item-id="${this._activeItemId}"
                             ></h-search-results>`)}
                 </div>`)}
         `;
@@ -232,6 +316,10 @@ tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", behavior_subject.BehaviorSubject)
 ], exports.HSearch.prototype, "_historyContext", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HSearch.prototype, "_activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/search.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js

@@ -45,6 +45,7 @@ const SEARCH_CLASS_NAMES = {
     section: `${baseSearchCssClass}__section`,
     item: `${baseSearchCssClass}__item`,
     itemHoverable: `${baseSearchCssClass}__item_hoverable`,
+    itemActive: `${baseSearchCssClass}__item_active`,
     link: `${baseSearchCssClass}__link`,
     linkWithImage: `${baseSearchCssClass}__link_with-image`,
     categoryTitle: `${baseSearchCssClass}__category-title`,
@@ -54,7 +55,10 @@ const SEARCH_CLASS_NAMES = {
     productText: `${baseSearchCssClass}__product-text`,
     productPriceInfo: `${baseSearchCssClass}__product-price-info`,
     productPriceBasic: `${baseSearchCssClass}__product-price_basic`,
+    productPriceRegular: `${baseSearchCssClass}__product-price_regular`,
     productPricePromotion: `${baseSearchCssClass}__product-price_promotion`,
+    productPricePromotionIcon: `${baseSearchCssClass}__product-price_promotion-icon`,
+    productAvailability: `${baseSearchCssClass}__product-availability`,
     starScore: 'star-score',
     historyItemValue: `${baseSearchCssClass}__history-item-value`,
     historyRemoveIcon: `${baseSearchCssClass}__history-remove-icon`,
@@ -63,7 +67,10 @@ const SEARCH_CLASS_NAMES = {
     message: `${baseSearchCssClass}__message`,
     messageWithHistory: `${baseSearchCssClass}__message_with-history`,
     messageNoResults: `${baseSearchCssClass}__message_no-results`,
-    messageText: `${baseSearchCssClass}__message-text`
+    messageText: `${baseSearchCssClass}__message-text`,
+    loader: 'loader',
+    loaderSpinner: 'loader__spinner',
+    loaderSpinnerXs: 'loader__spinner_xs'
 };
 const SEARCH_CONTEXT_NAMES = {
     historyContext: 'historyContext',
@@ -85,10 +92,16 @@ const EMPTY_SEARCH_RESULTS = {
     products: [],
     producers: [],
     categories: [],
-    productsPagesCount: 0
+    productsPagesCount: 0,
+    isRequestPending: false
+};
+const SCROLL_DIRECTIONS = {
+    up: 'up',
+    down: 'down'
 };
 
 exports.EMPTY_SEARCH_RESULTS = EMPTY_SEARCH_RESULTS;
+exports.SCROLL_DIRECTIONS = SCROLL_DIRECTIONS;
 exports.SEARCH_CLASS_NAMES = SEARCH_CLASS_NAMES;
 exports.SEARCH_COMPONENT_NAMES = SEARCH_COMPONENT_NAMES;
 exports.SEARCH_CONFIGURATION = SEARCH_CONFIGURATION;

package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js

@@ -10,13 +10,14 @@ var phoenix_custom_element = require('../../../../../core/decorators/phoenix_cus
 var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
 var observer = require('../../../../../core/classes/observer/observer.js');
 var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
+var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
 var search_constants = require('../../search_constants.js');
-var when = require('lit/directives/when');
 
 exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this._shouldShow = false;
+        this._isRequestPending = false;
         this._btnController = new btn_controller.BtnController(this, this._dispatchClearEvent);
     }
     connectedCallback() {
@@ -36,6 +37,7 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
             this._searchContextObserver = new observer.Observer((searchData) => {
                 var _a;
                 this._shouldShow = ((_a = searchData.searchPhrase) === null || _a === void 0 ? void 0 : _a.length) !== 0;
+                this._isRequestPending = searchData.results.isRequestPending;
             });
             this._searchContext$.subscribe(this._searchContextObserver);
         }
@@ -44,13 +46,21 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
         }
     }
     render() {
-        return lit.html ` ${when.when(this._shouldShow, () => this.getSlot(search_constants.SEARCH_SLOT_NAMES.clearButton))}`;
+        return lit.html ` ${when.when(this._shouldShow, () => lit.html `
+                ${when.when(this._isRequestPending, () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.loader}">
+                            <div class="${search_constants.SEARCH_CLASS_NAMES.loaderSpinner} ${search_constants.SEARCH_CLASS_NAMES.loaderSpinnerXs}"></div>
+                        </div>`, () => this.getSlot(search_constants.SEARCH_SLOT_NAMES.clearButton))}
+            `)}`;
     }
 };
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HSearchClear.prototype, "_shouldShow", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSearchClear.prototype, "_isRequestPending", void 0);
 exports.HSearchClear = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.clearButton),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js

@@ -7,11 +7,12 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
+var icon_constants = require('../../../../icon/icon_constants.js');
 var observer = require('../../../../../core/classes/observer/observer.js');
 var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
 var ref_js = require('lit-html/directives/ref.js');
+var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
 var search_constants = require('../../search_constants.js');
-var when = require('lit/directives/when');
 var repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
 
 exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -44,8 +45,15 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
         return when.when((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => lit.html `<h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.searchHistory}</h3>
 
                 <ul>
-                    ${repeat.repeat(this.history, (historyElement) => lit.html ` <li class="${search_constants.SEARCH_CLASS_NAMES.item}">
-                            <h-search-history-select item-label="${historyElement.label}" class="${search_constants.SEARCH_CLASS_NAMES.historySelect}">
+                    ${repeat.repeat(this.history, (historyElement, index) => lit.html ` <li
+                            class="${search_constants.SEARCH_CLASS_NAMES.item} ${index === this.activeItemId ? search_constants.SEARCH_CLASS_NAMES.itemActive : ''}"
+                        >
+                            <h-search-history-select
+                                item-label="${historyElement.label}"
+                                class="${search_constants.SEARCH_CLASS_NAMES.historySelect}"
+                                data-suggested-value="${historyElement.label}"
+                                data-search-item-id="${index}"
+                            >
                                 <h-icon icon-name="icon-clock"></h-icon>
 
                                 <span class="${search_constants.SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
@@ -55,7 +63,7 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
                                 <h-icon
                                     icon-name="icon-x"
                                     clickable=${true}
-                                    size="l"
+                                    size=${icon_constants.ICONS_SIZES.l}
                                     css-classes="${search_constants.SEARCH_CLASS_NAMES.historyRemoveIcon}"
                                 ></h-icon>
                             </h-search-history-remove>
@@ -71,6 +79,10 @@ tslib_es6.__decorate([
     decorators.property({ type: Array }),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchHistory.prototype, "history", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HSearchHistory.prototype, "activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
 var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
-var observer = require('../../../../../core/classes/observer/observer.js');
-var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
 var search_constants = require('../../search_constants.js');
 
 exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -16,29 +14,39 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         if (!this._input) {
             throw new Error('Search input not found');
         }
-        this._setupSearchContext();
+        this._setupInitialValue();
         this._setupListeners();
     }
-    async _setupSearchContext() {
-        try {
-            this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
-            this._searchContext$ = await this._searchContextConsumer.consumeAsync(search_constants.SEARCH_CONTEXT_NAMES.searchContext);
-            this._searchContextObserver = new observer.Observer((searchData) => {
-                if (searchData.searchPhrase === '') {
-                    this._input.value = '';
-                }
-            });
-            this._searchContext$.subscribe(this._searchContextObserver);
+    _setupInitialValue() {
+        const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
+        const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
+        if (!searchPhraseRegArray)
+            return;
+        const searchQuery = searchPhraseRegArray[1].replace(/\+/g, ' ');
+        this._input.value = decodeURIComponent(this._deserializeInputPhrase(searchQuery));
+    }
+    _deserializeInputPhrase(value) {
+        if (value.indexOf('%2f') !== -1) {
+            value = value.replace(/%2f/g, '/');
+        }
+        if (value.indexOf('%2523') !== -1) {
+            value = value.replace(/%2523/g, '#');
+        }
+        if (value.indexOf('%252f') !== -1) {
+            value = value.replace(/%252f/g, '/');
         }
-        catch (_a) {
-            console.error('Search context is not provided');
+        if (value.indexOf('%23') !== -1) {
+            value = value.replace(/%23/g, '#');
         }
+        return value;
     }
     _setupListeners() {
         this._input.addEventListener('focusin', (ev) => {
             this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusinInput, ev.target.value);
         });
         this._input.addEventListener('keyup', (ev) => {
+            if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
+                return;
             if (ev.key !== 'Enter') {
                 this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, ev.target.value);
                 return;
@@ -51,6 +59,9 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
             }
             this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchInput, ev.target.value);
         });
+        document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => {
+            this._input.value = '';
+        });
     }
     _dispatchCustomEvent(eventName, searchPhrase) {
         this.dispatchEvent(new CustomEvent(eventName, {

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
+var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
 var search_constants = require('../../search_constants.js');
-var when = require('lit/directives/when');
 var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
 
 exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -24,7 +24,8 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
             products: [],
             producers: [],
             categories: [],
-            productsPagesCount: 0
+            productsPagesCount: 0,
+            isRequestPending: false
         };
     }
     _isNoResultsForSearchPhrase() {

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js

@@ -14,6 +14,7 @@ var repeat = require('../../../../../../../../external/lit/external/lit-html/dir
 exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.initialItemIds = {};
         this.translations = {};
     }
     render() {
@@ -21,9 +22,15 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
             <h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.producers}</h3>
 
             <ul>
-                ${repeat.repeat(this.producers, (producer) => {
+                ${repeat.repeat(this.producers, (producer, index) => {
             var _a, _b;
-            return lit.html `<li class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable}">
+            return lit.html `<li
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.producers + index ===
+                this.activeItemId
+                ? search_constants.SEARCH_CLASS_NAMES.itemActive
+                : ''}"
+                        data-search-item-id="${this.initialItemIds.producers + index}"
+                    >
                         <a
                             href="${producer.url}"
                             class="${((_a = producer.image) === null || _a === void 0 ? void 0 : _a.imagePath) ? search_constants.SEARCH_CLASS_NAMES.linkWithImage : search_constants.SEARCH_CLASS_NAMES.link}"
@@ -42,6 +49,14 @@ tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchProducerContent.prototype, "producers", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HSearchProducerContent.prototype, "activeItemId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchProducerContent.prototype, "initialItemIds", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}