@shoper/phoenix_design_system 1.6.7 → 1.6.8

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

@@ -7,10 +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 behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
 var context_provider_controller = require('../../../core/context/context_provider_controller.js');
+var global_constants = require('../../../global_constants.js');
 var when = require('../../../../../../external/lit/external/lit-html/directives/when.js');
 var search_constants = require('./search_constants.js');
 
@@ -29,10 +31,16 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._translations = {};
         this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
-            if (outsideClick) {
-                this._shouldShowMessage = false;
-                this._hideHistorySuggestionsAndResults();
-            }
+            if (!outsideClick)
+                return;
+            this._resetSearchView();
+        };
+        this._switchTypeOfSearchView = () => {
+            if (!this._isSuggesterLayerVisible())
+                return;
+            window.innerWidth > global_constants.BREAKPOINTS.sm
+                ? this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened)
+                : this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
         };
     }
     async connectedCallback() {
@@ -59,6 +67,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('click', this._hideSuggesterOnClickOutside);
+        window.removeEventListener('resize', this._switchTypeOfSearchView);
     }
     _setupContext() {
         this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -66,7 +75,10 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     _setupListeners() {
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusinInput, (ev) => {
-            this._displaySuggester(ev.detail.searchPhrase);
+            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);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
@@ -83,8 +95,13 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                 this._updateSearchView(updatedInput.value, true);
             }
             else {
-                this._resetSearchViewAndSubmitSearchPhrase(updatedInput.value);
+                this._resetSearchView();
             }
+            this._submitSearchPhrase(updatedInput.value);
+        });
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.close, () => {
+            this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+            this._resetSearchView();
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
             const contentLength = this._searchHistory.length;
@@ -95,31 +112,15 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             this._historyContext.notify({ showLoadMore: this._historyLimitedContent.length < contentLength });
         });
         document.addEventListener('click', this._hideSuggesterOnClickOutside);
+        window.addEventListener('resize', this._switchTypeOfSearchView);
     }
-    _updateSearchView(searchPhrase, shouldShowMessage) {
+    _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
         this._shouldShowMessage = shouldShowMessage;
         this._displaySuggester(searchPhrase);
+        if (!shouldUpdateSearchPhrase)
+            return;
         this._updateSearchPhrase(searchPhrase);
     }
-    _resetSearchViewAndSubmitSearchPhrase(searchPhrase) {
-        this._shouldShowMessage = false;
-        this._hideHistorySuggestionsAndResults();
-        this._submitSearchPhrase(searchPhrase);
-    }
-    _updateSearchPhrase(searchPhrase) {
-        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
-    }
-    _submitSearchPhrase(searchPhrase) {
-        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
-    }
-    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
-        this.dispatchEvent(new CustomEvent(eventName, {
-            detail: {
-                searchPhrase
-            },
-            bubbles: true
-        }));
-    }
     _displaySuggester(searchPhrase) {
         if (searchPhrase === '' && this._searchHistory.length !== 0) {
             this._displayHistorySuggestions();
@@ -135,24 +136,67 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._shouldShowHistory = true;
         this._shouldShowResults = false;
     }
+    _hideHistorySuggestionsAndResults() {
+        this._shouldShowHistory = false;
+        this._shouldShowResults = false;
+    }
     _displayResults() {
         this._shouldShowHistory = false;
         this._shouldShowResults = true;
     }
-    _hideHistorySuggestionsAndResults() {
-        this._shouldShowHistory = false;
-        this._shouldShowResults = false;
+    _updateSearchPhrase(searchPhrase) {
+        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
+    }
+    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: {
+                searchPhrase
+            },
+            bubbles: true
+        }));
+    }
+    _resetSearchView() {
+        this._shouldShowMessage = false;
+        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();
+    }
+    _submitSearchPhrase(searchPhrase) {
+        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
+    }
+    _isSuggesterLayerVisible() {
+        return this.settings.isSearchSuggestLayerEnabled && (this._shouldShowHistory || this._shouldShowResults || this._shouldShowMessage);
+    }
+    _handleOpenSearch() {
+        this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+        const shouldShowMessage = this._searchPhrase !== '';
+        this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
     }
     render() {
         return lit.html `
-            ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
-                    .history="${this._historyLimitedContent}"
-                    .results="${this._searchResults}"
-                    .translations="${this._translations}"
-                    search-phrase="${this._searchPhrase}"
-                ></h-search-message>`)}
-            ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history .history="${this._historyLimitedContent}" .translations="${this._translations}"></h-search-history>`)}
-            ${when.when(this._shouldShowResults, () => lit.html `<h-search-results .results="${this._searchResults}" .translations="${this._translations}"></h-search-results>`)}
+            <div class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon" @click=${this._handleOpenSearch}>
+                <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
+                <div class="labeled-icon__signature">${this._translations.search}</div>
+            </div>
+
+            ${when.when(this._isSuggesterLayerVisible(), () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.container}">
+                    ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
+                            .history="${this._historyLimitedContent}"
+                            .results="${this._searchResults}"
+                            .translations="${this._translations}"
+                            search-phrase="${this._searchPhrase}"
+                        ></h-search-message>`)}
+                    ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
+                                .history="${this._historyLimitedContent}"
+                                .translations="${this._translations}"
+                            ></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}"
+                            ></h-search-results>`)}
+                </div>`)}
         `;
     }
 };
@@ -188,6 +232,10 @@ tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", behavior_subject.BehaviorSubject)
 ], exports.HSearch.prototype, "_historyContext", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearch.prototype, "settings", void 0);
 exports.HSearch = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.search)
 ], exports.HSearch);

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

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

@@ -7,6 +7,7 @@ const SEARCH_COMPONENT_NAMES = {
     searchInput: 'h-search-input',
     clearButton: 'h-search-clear',
     submitButton: 'h-search-submit',
+    closeButton: 'h-search-close',
     searchResults: 'h-search-results',
     searchHistory: 'h-search-history',
     searchMessage: 'h-search-message',
@@ -22,8 +23,10 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
     searchPhraseSubmitted: 'search.searchPhraseSubmitted',
     removeHistoryItem: 'search.removeHistoryItem',
     loadMoreHistoryItems: 'search.loadMoreHistoryItems',
+    loadMoreProducts: 'search.loadMoreProducts',
     clear: 'search.clearSearchPhrase',
     submit: 'search.submitSearchPhrase',
+    close: 'search.close',
     focusinInput: 'search.input.focusin',
     keyupInput: 'search.input.keyup',
     searchInput: 'search.input.search'
@@ -31,16 +34,36 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
 const SEARCH_NATIVE_EVENT_NAMES = {
     click: 'click'
 };
+const baseSearchCssClass = 'search';
 const SEARCH_CLASS_NAMES = {
-    inputSearch: 'search__input_search',
-    historyContainer: 'search__history-list-container',
-    historyContainerHeadline: 'search__history-list-container_headline',
-    historyContainerList: 'search__history-list-container_list-items',
-    historyContainerItem: 'search__history-list-container_item',
-    historyContainerLoadMore: 'search__history-list-container_load-more',
-    historyPortalContainer: 'search__history-portal-container',
-    resultsListContainer: 'search__results-list-container',
-    resultsPortalContainer: 'search__results-portal-container'
+    searchBar: `${baseSearchCssClass}__bar`,
+    container: `${baseSearchCssClass}__container`,
+    icon: `${baseSearchCssClass}__icon`,
+    outline: `${baseSearchCssClass}_outline`,
+    mobileOpened: `${baseSearchCssClass}_mobile-opened`,
+    headline: `${baseSearchCssClass}__headline`,
+    section: `${baseSearchCssClass}__section`,
+    item: `${baseSearchCssClass}__item`,
+    itemHoverable: `${baseSearchCssClass}__item_hoverable`,
+    link: `${baseSearchCssClass}__link`,
+    linkWithImage: `${baseSearchCssClass}__link_with-image`,
+    categoryTitle: `${baseSearchCssClass}__category-title`,
+    productIconFilled: `${baseSearchCssClass}__product-icon-filled`,
+    productIconEmpty: `${baseSearchCssClass}__product-icon-empty`,
+    productButton: `${baseSearchCssClass}__product-button`,
+    productText: `${baseSearchCssClass}__product-text`,
+    productPriceInfo: `${baseSearchCssClass}__product-price-info`,
+    productPriceBasic: `${baseSearchCssClass}__product-price_basic`,
+    productPricePromotion: `${baseSearchCssClass}__product-price_promotion`,
+    starScore: 'star-score',
+    historyItemValue: `${baseSearchCssClass}__history-item-value`,
+    historyRemoveIcon: `${baseSearchCssClass}__history-remove-icon`,
+    historyLoadMore: `${baseSearchCssClass}__history-load-more`,
+    historySelect: `${baseSearchCssClass}__history-select`,
+    message: `${baseSearchCssClass}__message`,
+    messageWithHistory: `${baseSearchCssClass}__message_with-history`,
+    messageNoResults: `${baseSearchCssClass}__message_no-results`,
+    messageText: `${baseSearchCssClass}__message-text`
 };
 const SEARCH_CONTEXT_NAMES = {
     historyContext: 'historyContext',
@@ -54,13 +77,15 @@ const SEARCH_SLOT_NAMES = {
     clearButton: 'search.clear.button'
 };
 const SEARCH_CONFIGURATION = {
-    historyContentLimit: 3
+    historyContentLimit: 3,
+    maxCharactersInProductName: 28
 };
 const EMPTY_SEARCH_RESULTS = {
     suggestions: [],
     products: [],
     producers: [],
-    categories: []
+    categories: [],
+    productsPagesCount: 0
 };
 
 exports.EMPTY_SEARCH_RESULTS = EMPTY_SEARCH_RESULTS;

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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_close.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.HSearchClose = class HSearchClose extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._btnController = new btn_controller.BtnController(this, this._dispatchCloseEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchCloseEvent);
+    }
+    _dispatchCloseEvent() {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.close, {
+            bubbles: true
+        }));
+    }
+};
+exports.HSearchClose = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.closeButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchClose);
+//# sourceMappingURL=search_close.js.map

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_close.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

@@ -29,6 +29,8 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
             this._historyContextObserver = new observer.Observer((searchHistory) => {
                 this.requestUpdate();
                 const button = this.buttonRef.value;
+                if (!button)
+                    return;
                 searchHistory.showLoadMore ? button.show() : button.hide();
             });
             this._historyContext$.subscribe(this._historyContextObserver);
@@ -39,29 +41,30 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
     }
     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>
+        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>
 
-                <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> `);
+                <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}">
+                                <h-icon icon-name="icon-clock"></h-icon>
+
+                                <span class="${search_constants.SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
+                            </h-search-history-select>
+
+                            <h-search-history-remove item-id="${historyElement.id}">
+                                <h-icon
+                                    icon-name="icon-x"
+                                    clickable=${true}
+                                    size="l"
+                                    css-classes="${search_constants.SEARCH_CLASS_NAMES.historyRemoveIcon}"
+                                ></h-icon>
+                            </h-search-history-remove>
+                        </li>`)}
+                </ul>
+
+                <h-search-history-load-more class="${search_constants.SEARCH_CLASS_NAMES.historyLoadMore}" ${ref_js.ref(this.buttonRef)}>
+                    ${this.translations.loadMore}
+                </h-search-history-load-more>`);
     }
 };
 tslib_es6.__decorate([

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;"}
+{"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;"}

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

@@ -23,7 +23,8 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
             suggestions: [],
             products: [],
             producers: [],
-            categories: []
+            categories: [],
+            productsPagesCount: 0
         };
     }
     _isNoResultsForSearchPhrase() {
@@ -36,8 +37,14 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
         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>`)} `)}`;
+        return lit.html `
+            ${when.when(this._isNoResultsForSearchPhrase(), () => lit.html `<p class="${search_constants.SEARCH_CLASS_NAMES.messageNoResults}">
+                        ${this.searchPhrase} - <a class="${search_constants.SEARCH_CLASS_NAMES.messageText}">${this.translations.searchInStore}</a>
+                    </p>`, () => lit.html `${when.when(this._hasHistoryAndEmptyPhrase(), () => lit.html `<p class="${search_constants.SEARCH_CLASS_NAMES.message} ${search_constants.SEARCH_CLASS_NAMES.messageWithHistory}">
+                                ${this.translations.enterSearchPraseOrChooseFromHistory}
+                            </p>`)}
+                    ${when.when(this._hasNoHistoryAndEmptyPhrase(), () => lit.html `<p class="${search_constants.SEARCH_CLASS_NAMES.message}">${this.translations.enterSearchPrase}</p>`)} `)}
+        `;
     }
 };
 tslib_es6.__decorate([

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;"}
+{"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;"}

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

@@ -17,25 +17,25 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
         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>`)}`;
+        return lit.html `
+            <h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.producers}</h3>
+
+            <ul>
+                ${repeat.repeat(this.producers, (producer) => {
+            var _a, _b;
+            return lit.html `<li class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable}">
+                        <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}"
+                        >
+                            ${when.when((_b = producer.image) === null || _b === void 0 ? void 0 : _b.imagePath, () => { var _a; return lit.html `<img src="${(_a = producer.image) === null || _a === void 0 ? void 0 : _a.imagePath}" alt="${producer.name}" />`; })}
+
+                            <span>${producer.name}</span>
+                        </a>
+                    </li>`;
+        })}
+            </ul>
+        `;
     }
 };
 tslib_es6.__decorate([

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

@@ -15,50 +15,66 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
     constructor() {
         super(...arguments);
         this.translations = {};
+        this.getProductRateHtml = (productRate) => {
+            return lit.html `
+            <div class="${search_constants.SEARCH_CLASS_NAMES.starScore}">
+                ${[1, 2, 3, 4, 5].map((score) => lit.html ` <h-icon
+                            icon-name="icon-star"
+                            css-classes=${productRate >= score ? search_constants.SEARCH_CLASS_NAMES.productIconFilled : search_constants.SEARCH_CLASS_NAMES.productIconEmpty}
+                            noStroke=${true}
+                        ></h-icon>`)}
+            </div>
+        `;
+        };
     }
-    handleGoToProductsFor(ev) {
-        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
-            bubbles: true,
-            detail: {
-                searchPhrase: ev.target.textContent
-            }
-        }));
+    _getShortenProductName(productName) {
+        return productName.substring(0, search_constants.SEARCH_CONFIGURATION.maxCharactersInProductName) + '...';
     }
     render() {
-        var _a;
-        return when.when((_a = this.products) === 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.products}</h3>
+        return lit.html `
+            <h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.products}</h3>
 
-                <ul>
-                    ${repeat.repeat(this.products, (product) => lit.html `<li class="search__list-item">
-                            <a href="${product.url}" class="search__result-link"
-                                ><div class="search__result-icon">
-                                    <img src="${product.img}" alt="product image" />
-                                </div>
-                                <div class="search__result-content">
-                                    <div class="search__result-title">
-                                        <h5 class="search__result-title-item">${product.name}</h5>
-                                    </div>
-                                    <div class="search__result-note">
-                                        <span class="search__result-note-item search__result-item_active">${product.price}</span>
-                                    </div>
-                                </div></a
-                            >
-                        </li>`)}
-                </ul>
+            <ul>
+                ${repeat.repeat(this.products, (product) => {
+            var _a, _b;
+            return lit.html ` <li class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable}">
+                        <a
+                            href="${product.url}"
+                            class="${((_a = product.image) === null || _a === void 0 ? void 0 : _a.imagePath) ? search_constants.SEARCH_CLASS_NAMES.linkWithImage : search_constants.SEARCH_CLASS_NAMES.link}"
+                        >
+                            ${when.when((_b = product.image) === null || _b === void 0 ? void 0 : _b.imagePath, () => { var _a; return lit.html `<img src="${(_a = product.image) === null || _a === void 0 ? void 0 : _a.imagePath}" alt="${product.name}" />`; })}
 
-                <div class="search__section-footer">
-                    <button @click="${this.handleGoToProductsFor}" class="search__section-btn-load-more" type="button">
-                        ${this.translations.goToProductsGor} teraz
-                    </button>
-                </div>
-            </div>`);
+                            <div>
+                                ${when.when(this.settings.showProductRate, () => this.getProductRateHtml(product.rate))}
+
+                                <div>${this.settings.isNamesShorteningEnabled ? this._getShortenProductName(product.name) : product.name}</div>
+
+                                ${when.when(this.settings.showProductPrice, () => lit.html ` ${when.when(product.prices.promotion.text.length, () => lit.html `<div>
+                                            <span class="${search_constants.SEARCH_CLASS_NAMES.productPricePromotion}">${product.prices.promotion.text}</span>
+                                            <span class="${search_constants.SEARCH_CLASS_NAMES.productPriceBasic}">${product.prices.basic.text}</span>
+                                        </div>`, () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.productText}">${product.prices.basic.text}</div>`)}
+                                    ${when.when(product.isStock, () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.productPriceInfo}">
+                                                ${this.translations.priceForTheBaseModel}
+                                            </div>`)}`)}
+                                ${when.when(this.settings.showProductAvailability, () => lit.html `<div>
+                                            ${this.translations.availability}: <span class="${search_constants.SEARCH_CLASS_NAMES.productText}">${product.availabilityLabel}<span>
+                                        </div>`)}
+                            </div>
+                        </a>
+                    </li>`;
+        })}
+            </ul>
+        `;
     }
 };
 tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchProductContent.prototype, "products", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchProductContent.prototype, "settings", 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_product_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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}