@shoper/phoenix_design_system 1.6.16 → 1.6.18

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

@@ -148,7 +148,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         });
         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._searchInput.focus();
             this._updateSearchView('', false);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
@@ -277,6 +276,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                                 .results="${this._searchResults}"
                                 search-phrase="${this._searchPhrase}"
                                 .settings="${this.settings}"
+                                locale="${this.locale}"
+                                view="${this.view}"
                                 .translations="${this._translations}"
                                 active-item-id="${this._activeItemId}"
                             ></h-search-results>`)}
@@ -284,6 +285,18 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         `;
     }
 };
+tslib_es6.__decorate([
+    decorators.property({ type: Object }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearch.prototype, "settings", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearch.prototype, "view", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearch.prototype, "locale", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Boolean)
@@ -321,9 +334,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Number)
 ], exports.HSearch.prototype, "_activeItemId", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Object }),
+    decorators.state(),
     tslib_es6.__metadata("design:type", Object)
-], exports.HSearch.prototype, "settings", void 0);
+], exports.HSearch.prototype, "_translations", 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;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;"}
+{"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;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

@@ -29,7 +29,8 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
     close: 'search.close',
     focusinInput: 'search.input.focusin',
     keyupInput: 'search.input.keyup',
-    searchInput: 'search.input.search'
+    searchInput: 'search.input.search',
+    updateSearchPhrase: 'search.updateSearchPhrase'
 };
 const SEARCH_NATIVE_EVENT_NAMES = {
     click: 'click'
@@ -58,6 +59,7 @@ const SEARCH_CLASS_NAMES = {
     productPriceRegular: `${baseSearchCssClass}__product-price_regular`,
     productPricePromotion: `${baseSearchCssClass}__product-price_promotion`,
     productPricePromotionIcon: `${baseSearchCssClass}__product-price_promotion-icon`,
+    productPercentPromotion: `${baseSearchCssClass}__product-price_promotion-percent`,
     productAvailability: `${baseSearchCssClass}__product-availability`,
     starScore: 'star-score',
     historyItemValue: `${baseSearchCssClass}__history-item-value`,
@@ -98,8 +100,15 @@ const EMPTY_SEARCH_RESULTS = {
 const SCROLL_DIRECTIONS = {
     up: 'up',
     down: 'down'
-};
+};
+const SUGGESTIONS_TYPE = {
+    suggestion: 'suggestion',
+    suggestionInCategory: 'suggestionInCategory',
+    category: 'category'
+};
+const DEFAULT_VIEW = 'default';
 
+exports.DEFAULT_VIEW = DEFAULT_VIEW;
 exports.EMPTY_SEARCH_RESULTS = EMPTY_SEARCH_RESULTS;
 exports.SCROLL_DIRECTIONS = SCROLL_DIRECTIONS;
 exports.SEARCH_CLASS_NAMES = SEARCH_CLASS_NAMES;
@@ -110,4 +119,5 @@ exports.SEARCH_CUSTOM_EVENT_NAMES = SEARCH_CUSTOM_EVENT_NAMES;
 exports.SEARCH_NATIVE_EVENT_NAMES = SEARCH_NATIVE_EVENT_NAMES;
 exports.SEARCH_PORTAL_DESTINATIONS = SEARCH_PORTAL_DESTINATIONS;
 exports.SEARCH_SLOT_NAMES = SEARCH_SLOT_NAMES;
+exports.SUGGESTIONS_TYPE = SUGGESTIONS_TYPE;
 //# sourceMappingURL=search_constants.js.map

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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -18,6 +18,11 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
         super();
         this._shouldShow = false;
         this._isRequestPending = false;
+        this._dispatchClearEvent = () => {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, {
+                bubbles: true
+            }));
+        };
         this._btnController = new btn_controller.BtnController(this, this._dispatchClearEvent);
     }
     connectedCallback() {
@@ -25,11 +30,6 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
         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);

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

@@ -11,17 +11,17 @@ var search_constants = require('../../search_constants.js');
 exports.HSearchSubmit = class HSearchSubmit extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
+        this._dispatchSubmitEvent = () => {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
+                bubbles: true
+            }));
+        };
         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),

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

@@ -3,11 +3,16 @@
 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 search_constants = require('../../search_constants.js');
 
 exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._isSearchPhraseCleared = false;
+    }
     connectedCallback() {
         super.connectedCallback();
         this._input = this.querySelector('input[type="search"]');
@@ -51,6 +56,10 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
                 this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, ev.target.value);
                 return;
             }
+            if (this._isSearchPhraseCleared) {
+                this._isSearchPhraseCleared = false;
+                return;
+            }
             this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, ev.target.value);
         });
         this._input.addEventListener('search', (ev) => {
@@ -60,7 +69,13 @@ 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._isSearchPhraseCleared = true;
             this._input.value = '';
+            this._input.focus();
+        });
+        document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.updateSearchPhrase, (ev) => {
+            this._input.value = ev.detail.searchPhrase;
+            this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, ev.detail.searchPhrase);
         });
     }
     _dispatchCustomEvent(eventName, searchPhrase) {
@@ -72,6 +87,10 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         }));
     }
 };
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSearchInput.prototype, "_isSearchPhraseCleared", void 0);
 exports.HSearchInput = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchInput)
 ], exports.HSearchInput);

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;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;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

@@ -37,10 +37,21 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
     _hasNoHistoryAndEmptyPhrase() {
         return this.searchPhrase === '' && this.history.length === 0;
     }
+    handleGoToResults() {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+            bubbles: true,
+            detail: {
+                searchPhrase: this.searchPhrase
+            }
+        }));
+    }
     render() {
         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>
+                        ${this.searchPhrase} -
+                        <button class="${search_constants.SEARCH_CLASS_NAMES.messageText}" @click="${this.handleGoToResults}" type="button">
+                            ${this.translations.searchInStore}
+                        </button>
                     </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>`)}

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

@@ -16,6 +16,12 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
         super(...arguments);
         this.initialItemIds = {};
         this.translations = {};
+        this.searchPhrase = '';
+    }
+    _getMatchedPhrase(phrase) {
+        return phrase.toLowerCase().startsWith(this.searchPhrase)
+            ? lit.html `${phrase.substring(0, this.searchPhrase.length)}<strong>${phrase.substring(this.searchPhrase.length)}</strong>`
+            : lit.html `${phrase}`;
     }
     render() {
         return lit.html `
@@ -37,7 +43,7 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
                         >
                             ${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>
+                            <span>${this._getMatchedPhrase(producer.name)}</span>
                         </a>
                     </li>`;
         })}
@@ -61,6 +67,10 @@ tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchProducerContent.prototype, "translations", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'search-phrase' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchProducerContent.prototype, "searchPhrase", void 0);
 exports.HSearchProducerContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProducerContent)
 ], exports.HSearchProducerContent);

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

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

@@ -29,7 +29,21 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
         };
     }
     _getShortenProductName(productName) {
-        return productName.substring(0, search_constants.SEARCH_CONFIGURATION.maxCharactersInProductName) + '...';
+        return productName.length > search_constants.SEARCH_CONFIGURATION.maxCharactersInProductName
+            ? productName.substring(0, search_constants.SEARCH_CONFIGURATION.maxCharactersInProductName) + '...'
+            : productName;
+    }
+    extractNumber(text) {
+        const numberArray = text
+            .split(' ')
+            .map((word) => parseFloat(word))
+            .filter((number) => !isNaN(number));
+        return numberArray[0];
+    }
+    _getPercentPromotion(prices) {
+        const regularPrice = this.extractNumber(prices.basic.text);
+        const promotionPrice = this.extractNumber(prices.promotion.text);
+        return `-${Math.round(((regularPrice - promotionPrice) / regularPrice) * 100)}%`;
     }
     render() {
         return lit.html `
@@ -65,6 +79,7 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
                                             <div class="${search_constants.SEARCH_CLASS_NAMES.productPriceRegular}">
                                                 <span>${this.translations.regularPrice}:</span>
                                                 <span class="${search_constants.SEARCH_CLASS_NAMES.productPriceBasic}">${product.prices.basic.text}</span>
+                                                <span class="${search_constants.SEARCH_CLASS_NAMES.productPercentPromotion}">${this._getPercentPromotion(product.prices)}</span>
                                             </div>
                                         </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}">

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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_results.js

@@ -63,12 +63,11 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
             return lit.html `
                 ${when.when(((_a = this.results.suggestions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.results.categories) === null || _b === void 0 ? void 0 : _b.length), () => lit.html ` <h-search-suggestion-content
                         class="${search_constants.SEARCH_CLASS_NAMES.section}"
-                        .suggestions="${this.results.suggestions}"
-                        .categories="${this.results.categories}"
-                        .products="${this.results.products}"
                         active-item-id="${this.activeItemId}"
                         .initialItemIds="${this._getInitialItemsIds()}"
                         .translations="${this.translations}"
+                        locale="${this.locale}"
+                        view="${this.view}"
                     >
                     </h-search-suggestion-content>`)}
                 ${when.when((_c = this.results.products) === null || _c === void 0 ? void 0 : _c.length, () => lit.html `
@@ -100,6 +99,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                             active-item-id="${this.activeItemId}"
                             .initialItemIds="${this._getInitialItemsIds()}"
                             .translations="${this.translations}"
+                            search-phrase="${this.searchPhrase}"
                         ></h-search-producer-content>`)}
             `;
         });
@@ -117,6 +117,14 @@ tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchResults.prototype, "settings", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchResults.prototype, "view", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchResults.prototype, "locale", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Number, attribute: 'active-item-id' }),
     tslib_es6.__metadata("design:type", Number)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_suggestion_content.js

@@ -7,6 +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 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 repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
@@ -14,85 +16,124 @@ var repeat = require('../../../../../../../../external/lit/external/lit-html/dir
 exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
-        this.suggestions = [];
         this.initialItemIds = {};
         this.translations = {};
-        this.getSuggestionListHtml = () => {
-            return lit.html `
-            <h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.suggestions}</h3>
-
-            <ul>
-                ${when.when(this.suggestions, () => lit.html `${repeat.repeat(this.suggestions, (suggestion, index) => lit.html `<li
-                                    @click=${() => this.handleSuggestion(suggestion)}
-                                    class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${index === this.activeItemId
-                ? search_constants.SEARCH_CLASS_NAMES.itemActive
-                : ''}"
-                                    data-suggested-value="${suggestion}"
-                                    data-search-item-id="${index}"
-                                >
-                                    <span>${suggestion}</span>
-                                    <h-icon icon-name="icon-arrow-up-left" clickable=${true}></h-icon>
-                                </li>`)}`)}
-                ${when.when(this._isProductInTheCategory(), () => lit.html `<li
-                            @click=${() => this.handleSuggestion(this.suggestions[0])}
-                            class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.suggestionInCategory ===
-                this.activeItemId
-                ? search_constants.SEARCH_CLASS_NAMES.itemActive
-                : ''}"
-                            data-suggested-value="${this.suggestions[0]}"
-                            data-search-item-id="${this.initialItemIds.suggestionInCategory}"
-                        >
-                            <p class="${search_constants.SEARCH_CLASS_NAMES.link}">
-                                <span>${this.suggestions[0]}</span>
-                                <span class="${search_constants.SEARCH_CLASS_NAMES.categoryTitle}">${this.translations.inTheCategory}</span>
-                                <span>${this.products[0].category.name}</span>
-                            </p>
-                        </li>`)}
-                ${when.when(this.categories, () => lit.html `${repeat.repeat(this.categories, (category, index) => lit.html `<li
-                                    class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.categories +
-                index ===
-                this.activeItemId
-                ? search_constants.SEARCH_CLASS_NAMES.itemActive
-                : ''}"
-                                    data-search-item-id="${this.initialItemIds.categories + index}"
-                                >
-                                    <a class="${search_constants.SEARCH_CLASS_NAMES.link}" href="${category.url}">
-                                        <span>${category.name}</span>
-                                        <span class="${search_constants.SEARCH_CLASS_NAMES.categoryTitle}">${this.translations.category}</span>
-                                    </a>
-                                </li>`)}`)}
-            </ul>
-        `;
+        this.view = search_constants.DEFAULT_VIEW;
+        this._searchPhrase = '';
+        this._suggestionsData = [];
+        this._updateSearchPhrase = (ev, suggestion) => {
+            ev.stopPropagation();
+            this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.updateSearchPhrase, suggestion);
         };
-        this._shouldShowSuggestionContent = () => { var _a, _b; return ((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.categories) === null || _b === void 0 ? void 0 : _b.length); };
     }
-    handleSuggestion(suggestion) {
-        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+    async connectedCallback() {
+        super.connectedCallback();
+        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) => {
+                this._searchPhrase = searchData.searchPhrase;
+                this._setupSuggestionData(searchData.results);
+            });
+            this._searchContext$.subscribe(this._searchContextObserver);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+    }
+    _setupSuggestionData(results) {
+        let suggestionsData = [];
+        if (results.suggestions.length) {
+            results.suggestions.forEach((suggestion, index) => {
+                suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
+                if (index)
+                    return;
+                const isProductInTheCategory = results.products.length;
+                if (isProductInTheCategory) {
+                    const lang = this.locale.split('_')[0];
+                    suggestionsData.push({
+                        suggestionName: suggestion,
+                        categoryName: results.products[0].category.name,
+                        type: search_constants.SUGGESTIONS_TYPE.suggestionInCategory,
+                        url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
+                    });
+                }
+                if (results.categories.length) {
+                    suggestionsData = [
+                        ...suggestionsData,
+                        ...results.categories.map((category) => ({
+                            categoryName: category.name,
+                            url: category.url,
+                            type: search_constants.SUGGESTIONS_TYPE.category
+                        }))
+                    ];
+                }
+            });
+        }
+        else if (results.categories.length) {
+            suggestionsData = [
+                ...results.categories.map((category) => ({
+                    categoryName: category.name,
+                    url: category.url,
+                    type: search_constants.SUGGESTIONS_TYPE.category
+                }))
+            ];
+        }
+        this._suggestionsData = suggestionsData;
+    }
+    _handleSuggestion(suggestion, suggestionType) {
+        if (suggestionType !== search_constants.SUGGESTIONS_TYPE.suggestion)
+            return;
+        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, suggestion);
+    }
+    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
+        this.dispatchEvent(new CustomEvent(eventName, {
             bubbles: true,
             detail: {
-                searchPhrase: suggestion
+                searchPhrase
             }
         }));
     }
-    _isProductInTheCategory() {
-        return this.products.length && this.suggestions.length;
+    _getMatchedPhrase(phrase) {
+        const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
+        if (!phraseIncludesSearchPhrase)
+            return lit.html `${phrase}`;
+        const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
+        return lit.html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
     }
     render() {
-        return when.when(this._shouldShowSuggestionContent(), this.getSuggestionListHtml);
+        return when.when(this._suggestionsData.length, () => lit.html `
+                <h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.suggestions}</h3>
+
+                <ul>
+                    ${repeat.repeat(this._suggestionsData, (suggestion, index) => lit.html `<li
+                                @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
+                                class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${index === this.activeItemId
+            ? search_constants.SEARCH_CLASS_NAMES.itemActive
+            : ''}"
+                                data-suggested-value="${suggestion.suggestionName}"
+                                data-search-item-id="${index}"
+                            >
+                                ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
+                                        <h-icon
+                                            icon-name="icon-arrow-up-left"
+                                            clickable=${true}
+                                            @click=${(ev) => this._updateSearchPhrase(ev, suggestion.suggestionName)}
+                                        ></h-icon>`)}
+                                ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestionInCategory, () => lit.html ` <a class="${search_constants.SEARCH_CLASS_NAMES.link}" href=${suggestion.url}>
+                                        <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
+                                        <span class="${search_constants.SEARCH_CLASS_NAMES.categoryTitle}"> ${this.translations.inTheCategory} </span>
+                                        <span> ${suggestion.categoryName} </span>
+                                    </a>`)}
+                                ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.category, () => lit.html ` <a class="${search_constants.SEARCH_CLASS_NAMES.link}" href="${suggestion.url}">
+                                        <span> ${this._getMatchedPhrase(suggestion.categoryName)} </span>
+                                        <span class="${search_constants.SEARCH_CLASS_NAMES.categoryTitle}"> ${this.translations.category} </span>
+                                    </a>`)}
+                            </li>`)}
+                </ul>
+            `);
     }
 };
-tslib_es6.__decorate([
-    decorators.property({ type: Object, reflect: true }),
-    tslib_es6.__metadata("design:type", Array)
-], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Object, reflect: true }),
-    tslib_es6.__metadata("design:type", Array)
-], exports.HSearchSuggestionContent.prototype, "categories", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Object, reflect: true }),
-    tslib_es6.__metadata("design:type", Array)
-], exports.HSearchSuggestionContent.prototype, "products", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Number, attribute: 'active-item-id' }),
     tslib_es6.__metadata("design:type", Number)
@@ -105,6 +146,22 @@ tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchSuggestionContent.prototype, "translations", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchSuggestionContent.prototype, "view", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchSuggestionContent.prototype, "locale", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearchSuggestionContent.prototype, "_suggestionsData", void 0);
 exports.HSearchSuggestionContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchSuggestionContent)
 ], exports.HSearchSuggestionContent);

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.js

@@ -560,6 +560,7 @@ Object.defineProperty(exports, 'HButtonStepper', {
 		return button_stepper.HButtonStepper;
 	}
 });
+exports.DEFAULT_VIEW = search_constants.DEFAULT_VIEW;
 exports.EMPTY_SEARCH_RESULTS = search_constants.EMPTY_SEARCH_RESULTS;
 exports.SCROLL_DIRECTIONS = search_constants.SCROLL_DIRECTIONS;
 exports.SEARCH_CLASS_NAMES = search_constants.SEARCH_CLASS_NAMES;
@@ -570,6 +571,7 @@ exports.SEARCH_CUSTOM_EVENT_NAMES = search_constants.SEARCH_CUSTOM_EVENT_NAMES;
 exports.SEARCH_NATIVE_EVENT_NAMES = search_constants.SEARCH_NATIVE_EVENT_NAMES;
 exports.SEARCH_PORTAL_DESTINATIONS = search_constants.SEARCH_PORTAL_DESTINATIONS;
 exports.SEARCH_SLOT_NAMES = search_constants.SEARCH_SLOT_NAMES;
+exports.SUGGESTIONS_TYPE = search_constants.SUGGESTIONS_TYPE;
 Object.defineProperty(exports, 'HSearch', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}