@shoper/phoenix_design_system 1.5.3 → 1.5.4

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const SEARCH_COMPONENT_NAMES = {
     search: 'h-search',
     searchInput: 'h-search-input',
-    clearButton: 'h-search-clear-btn',
-    submitButton: 'h-search-submit-btn',
+    clearButton: 'h-search-clear',
+    submitButton: 'h-search-submit',
     searchResults: 'h-search-results',
     searchHistory: 'h-search-history',
+    searchMessage: 'h-search-message',
     historyRemoveButton: 'h-search-history-remove',
     historySelectButton: 'h-search-history-select',
     historyLoadMoreButton: 'h-search-history-load-more',
@@ -17,13 +18,15 @@ const SEARCH_COMPONENT_NAMES = {
     searchProducerContent: 'h-search-producer-content'
 };
 const SEARCH_CUSTOM_EVENT_NAMES = {
-    searchPhraseUpdated: 'search.external.searchPhraseUpdated',
-    searchPhraseSubmitted: 'search.external.searchPhraseSubmitted',
-    removeHistoryItem: 'search.external.removeHistoryItem',
-    onHistory: 'search.removeHistoryItem',
+    searchPhraseUpdated: 'search.searchPhraseUpdated',
+    searchPhraseSubmitted: 'search.searchPhraseSubmitted',
+    removeHistoryItem: 'search.removeHistoryItem',
     loadMoreHistoryItems: 'search.loadMoreHistoryItems',
     clear: 'search.clearSearchPhrase',
-    submit: 'search.submitSearchPhrase'
+    submit: 'search.submitSearchPhrase',
+    focusinInput: 'search.input.focusin',
+    keyupInput: 'search.input.keyup',
+    searchInput: 'search.input.search'
 };
 const SEARCH_NATIVE_EVENT_NAMES = {
     click: 'click'
@@ -40,7 +43,8 @@ const SEARCH_CLASS_NAMES = {
     resultsPortalContainer: 'search__results-portal-container'
 };
 const SEARCH_CONTEXT_NAMES = {
-    historyContext: 'historyContext'
+    historyContext: 'historyContext',
+    searchContext: 'searchContext'
 };
 const SEARCH_PORTAL_DESTINATIONS = {
     historyContent: 'search.historyContent',
@@ -49,13 +53,17 @@ const SEARCH_PORTAL_DESTINATIONS = {
 const SEARCH_SLOT_NAMES = {
     clearButton: 'search.clear.button'
 };
-/**
- * TODO: Should be moved the config object injected to component
- */
 const SEARCH_CONFIGURATION = {
     historyContentLimit: 3
+};
+const EMPTY_SEARCH_RESULTS = {
+    suggestions: [],
+    products: [],
+    producers: [],
+    categories: []
 };
 
+exports.EMPTY_SEARCH_RESULTS = EMPTY_SEARCH_RESULTS;
 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;"}
+{"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;"}

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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 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 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._btnController = new btn_controller.BtnController(this, this._dispatchClearEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._searchContextSetup();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchClearEvent);
+    }
+    _dispatchClearEvent() {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, {
+            bubbles: true
+        }));
+    }
+    async _searchContextSetup() {
+        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) => {
+                var _a;
+                this._shouldShow = ((_a = searchData.searchPhrase) === null || _a === void 0 ? void 0 : _a.length) !== 0;
+            });
+            this._searchContext$.subscribe(this._searchContextObserver);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+    }
+    render() {
+        return lit.html ` ${when.when(this._shouldShow, () => 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);
+exports.HSearchClear = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.clearButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchClear);
+//# sourceMappingURL=search_clear.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+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 btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
+var search_constants = require('../../search_constants.js');
+
+exports.HSearchSubmit = class HSearchSubmit extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._btnController = new btn_controller.BtnController(this, this._dispatchSubmitEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchSubmitEvent);
+    }
+    _dispatchSubmitEvent() {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
+            bubbles: true
+        }));
+    }
+};
+exports.HSearchSubmit = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.submitButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchSubmit);
+//# sourceMappingURL=search_submit.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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 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 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 {
+    constructor() {
+        super(...arguments);
+        this.buttonRef = ref_js.createRef();
+        this.history = [];
+        this.translations = {};
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        try {
+            this._historyContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+            this._historyContext$ = await this._historyContextConsumer.consumeAsync(search_constants.SEARCH_CONTEXT_NAMES.historyContext);
+            this._historyContextObserver = new observer.Observer((searchHistory) => {
+                this.requestUpdate();
+                const button = this.buttonRef.value;
+                searchHistory.showLoadMore ? button.show() : button.hide();
+            });
+            this._historyContext$.subscribe(this._historyContextObserver);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+    }
+    render() {
+        var _a;
+        return when.when((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.historyContainer}">
+                <h-portal to="${search_constants.SEARCH_PORTAL_DESTINATIONS.historyContent}" hidden>
+                    <h3 class="${search_constants.SEARCH_CLASS_NAMES.historyContainerHeadline}">${this.translations.searchHistory}</h3>
+                    <ul class="${search_constants.SEARCH_CLASS_NAMES.historyContainerList}">
+                        ${repeat.repeat(this.history, (historyElement) => lit.html `<li class="${search_constants.SEARCH_CLASS_NAMES.historyContainerItem}">
+                                <h-search-history-select item-label="${historyElement.label}">
+                                    <span class="search__icon_main-color search__list-icon icon icon-reload"></span>
+                                    <span class="search__history-item-value">${historyElement.label}</span>
+                                </h-search-history-select>
+                                <h-search-history-remove item-id="${historyElement.id}">X</h-search-history-remove>
+                            </li>`)}
+                    </ul>
+                    <h-search-history-load-more class="${search_constants.SEARCH_CLASS_NAMES.historyContainerLoadMore}" ${ref_js.ref(this.buttonRef)}
+                        >${this.translations.loadMore}</h-search-history-load-more
+                    >
+                </h-portal>
+
+                <h-portal-target
+                    name="${search_constants.SEARCH_PORTAL_DESTINATIONS.historyContent}"
+                    class="${search_constants.SEARCH_CLASS_NAMES.historyPortalContainer}"
+                    style="position: absolute; left: 0; bottom: 0"
+                ></h-portal-target>
+            </div> `);
+    }
+};
+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: Object }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchHistory.prototype, "translations", void 0);
+exports.HSearchHistory = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchHistory)
+], exports.HSearchHistory);
+//# sourceMappingURL=search_history.js.map

package/build/cjs/packages/phoenix/src/components/form/search/{search_history.js.map → subcomponents/history/search_history.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,qBAAqB,uEAA+E;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;"}

package/build/cjs/packages/phoenix/src/components/form/search/{history/search_history_load_more_btn.js → subcomponents/history/search_history_load_more.js}

@@ -2,17 +2,17 @@
 
 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 btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
-var visibility_controller = require('../../../../controllers/visibility_controller/visibility_controller.js');
-var search_constants = require('../search_constants.js');
+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 btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
+var visibility_controller = require('../../../../../controllers/visibility_controller/visibility_controller.js');
+var search_constants = require('../../search_constants.js');
 
-exports.HSearchHistoryLoadMoreBtn = class HSearchHistoryLoadMoreBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HSearchHistoryLoadMore = class HSearchHistoryLoadMore extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
-        this._dispatchHistoryLoadMoreEvent = (ev) => {
+        this._dispatchHistoryLoadMoreEvent = () => {
             this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, {
                 bubbles: true
             }));
@@ -31,8 +31,8 @@ exports.HSearchHistoryLoadMoreBtn = class HSearchHistoryLoadMoreBtn extends phoe
         this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchHistoryLoadMoreEvent);
     }
 };
-exports.HSearchHistoryLoadMoreBtn = tslib_es6.__decorate([
+exports.HSearchHistoryLoadMore = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.historyLoadMoreButton),
     tslib_es6.__metadata("design:paramtypes", [])
-], exports.HSearchHistoryLoadMoreBtn);
-//# sourceMappingURL=search_history_load_more_btn.js.map
+], exports.HSearchHistoryLoadMore);
+//# sourceMappingURL=search_history_load_more.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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 btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
+var search_constants = require('../../search_constants.js');
+
+exports.HSearchHistoryRemove = class HSearchHistoryRemove extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchRemoveHistoryItemEvent = () => {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.removeHistoryItem, {
+                bubbles: true,
+                detail: {
+                    id: this.historyItemId
+                }
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchRemoveHistoryItemEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchRemoveHistoryItemEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'item-id' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchHistoryRemove.prototype, "historyItemId", void 0);
+exports.HSearchHistoryRemove = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.historyRemoveButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchHistoryRemove);
+//# sourceMappingURL=search_history_remove.js.map

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

@@ -0,0 +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;"}

package/build/cjs/packages/phoenix/src/components/form/search/{history/search_history_select_btn.js → subcomponents/history/search_history_select.js}

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
 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 btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
-var search_constants = require('../search_constants.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 btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
+var search_constants = require('../../search_constants.js');
 
-exports.HSearchHistorySelectBtn = class HSearchHistorySelectBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HSearchHistorySelect = class HSearchHistorySelect extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this._dispatchHistorySelectEvent = () => {
             this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
                 bubbles: true,
                 detail: {
-                    searchPhrase: this.historyLabel
+                    searchPhrase: this.historyItemLabel
                 }
             }));
         };
@@ -30,9 +30,9 @@ exports.HSearchHistorySelectBtn = class HSearchHistorySelectBtn extends phoenix_
 tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'item-label' }),
     tslib_es6.__metadata("design:type", String)
-], exports.HSearchHistorySelectBtn.prototype, "historyLabel", void 0);
-exports.HSearchHistorySelectBtn = tslib_es6.__decorate([
+], exports.HSearchHistorySelect.prototype, "historyItemLabel", void 0);
+exports.HSearchHistorySelect = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.historySelectButton),
     tslib_es6.__metadata("design:paramtypes", [])
-], exports.HSearchHistorySelectBtn);
-//# sourceMappingURL=search_history_select_btn.js.map
+], exports.HSearchHistorySelect);
+//# sourceMappingURL=search_history_select.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,67 @@
+'use strict';
+
+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 {
+    connectedCallback() {
+        super.connectedCallback();
+        this._input = this.querySelector('input[type="search"]');
+        if (!this._input) {
+            throw new Error('Search input not found');
+        }
+        this._setupSearchContext();
+        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);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+    }
+    _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 !== 'Enter') {
+                this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, ev.target.value);
+                return;
+            }
+            this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, ev.target.value);
+        });
+        this._input.addEventListener('search', (ev) => {
+            if (this._input.value !== '') {
+                return;
+            }
+            this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchInput, ev.target.value);
+        });
+    }
+    _dispatchCustomEvent(eventName, searchPhrase) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            detail: {
+                searchPhrase
+            }
+        }));
+    }
+};
+exports.HSearchInput = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchInput)
+], exports.HSearchInput);
+//# sourceMappingURL=search_input.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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 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 {
+    constructor() {
+        super(...arguments);
+        this.searchPhrase = '';
+        this.history = [];
+        this.translations = {};
+    }
+    _createEmptyResults() {
+        return {
+            suggestions: [],
+            products: [],
+            producers: [],
+            categories: []
+        };
+    }
+    _isNoResultsForSearchPhrase() {
+        return this.searchPhrase && isEqual['default'](this.results, this._createEmptyResults());
+    }
+    _hasHistoryAndEmptyPhrase() {
+        return this.searchPhrase === '' && this.history.length > 0;
+    }
+    _hasNoHistoryAndEmptyPhrase() {
+        return this.searchPhrase === '' && this.history.length === 0;
+    }
+    render() {
+        return lit.html ` ${when.when(this._isNoResultsForSearchPhrase(), () => lit.html `<div>${this.translations.searchInStore}</div>`, () => lit.html `${when.when(this._hasHistoryAndEmptyPhrase(), () => lit.html `<div>${this.translations.enterSearchPraseOrChooseFromHistory}</div>`)}
+                ${when.when(this._hasNoHistoryAndEmptyPhrase(), () => lit.html `<div>${this.translations.enterSearchPrase}</div>`)} `)}`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'search-phrase' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchMessage.prototype, "searchPhrase", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object, attribute: 'result-data' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchMessage.prototype, "results", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Array }),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearchMessage.prototype, "history", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchMessage.prototype, "translations", void 0);
+exports.HSearchMessage = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchMessage)
+], exports.HSearchMessage);
+//# sourceMappingURL=search_message.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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 repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
+
+exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.translations = {};
+    }
+    render() {
+        var _a;
+        return lit.html `${when.when((_a = this.producers) === null || _a === void 0 ? void 0 : _a.length, () => lit.html `<div class="search__section">
+                <h3 class="search__section-head search__section-head_sticky search__section-head_line">${this.translations.producers}</h3>
+                <ul class="search__list">
+                    ${repeat.repeat(this.producers, (producer) => lit.html `<li class="search__list-item">
+                            <a href="${producer.url}" class="search__result-link">
+                                <div class="search__result-icon none">${producer.img}</div>
+                                <div class="search__result-content">
+                                    <div class="search__result-note"></div>
+                                    <div class="search__result-title">
+                                        <h5 class="search__result-title-item search__result_bold">
+                                            <span class="search__result_match">${producer.name}</span>
+                                        </h5>
+                                    </div>
+                                    <div class="search__result-note"></div></div
+                            ></a>
+                        </li>`)}
+                </ul>
+            </div>`)}`;
+    }
+};
+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: Object }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchProducerContent.prototype, "translations", void 0);
+exports.HSearchProducerContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProducerContent)
+], exports.HSearchProducerContent);
+//# sourceMappingURL=search_producer_content.js.map

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

@@ -0,0 +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;"}