npm - @shoper/phoenix_design_system - Versions diffs - 1.17.16-4 → 1.17.16-6 - Mend

@shoper/phoenix_design_system 1.17.16-4 → 1.17.16-6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED Viewed

@@ -76,10 +76,6 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                         locale="${this.locale}"
                         view="${this.view}"
                         module-instance-id="${this.moduleInstanceId}"
-                        search-phrase="${this.searchPhrase}"
-                        .suggestions="${this.results.suggestions}"
-                        .products="${this.results.products}"
-                        .categories="${this.results.categories}"
                         .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
                     >
                     </h-search-suggestion-content>`)}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,8DAAkE;AACrF;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA;AACA;AACA;AACA;~~"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,8DAAkE;AACrF;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;AACA;AACA;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 CHANGED Viewed

@@ -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-html/directives/when.js');
 var search_constants = require('../../search_constants.js');
 var repeat = require('../../../../../../../../external/lit-html/directives/repeat.js');
@@ -14,7 +16,9 @@ var repeat = require('../../../../../../../../external/lit-html/directives/repea
 exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.initialItemIds = {};
         this.translations = {};
+        this._searchPhrase = '';
         this._suggestionsData = [];
         this._updateSearchPhrase = (ev, suggestion) => {
             ev.stopPropagation();
@@ -23,29 +27,40 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
     }
     async connectedCallback() {
         super.connectedCallback();
-        this._setupSuggestionData();
+        try {
+            this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+            this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
+            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() {
+    _setupSuggestionData(results) {
         let suggestionsData = [];
-        if (this.suggestions.length) {
-            this.suggestions.forEach((suggestion, index) => {
+        if (results.suggestions.length) {
+            results.suggestions.forEach((suggestion, index) => {
                 suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
                 if (index)
                     return;
-                const isProductInTheCategory = this.products.length;
+                const isProductInTheCategory = results.products.length;
                 if (isProductInTheCategory) {
                     const lang = this.locale.split('_')[0];
                     suggestionsData.push({
                         suggestionName: suggestion,
-                        categoryName: this.products[0].category.breadcrumbs,
+                        categoryName: results.products[0].category.breadcrumbs,
                         type: search_constants.SUGGESTIONS_TYPE.suggestionInCategory,
-                        url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
+                        url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
                     });
                 }
-                if (this.categories.length) {
+                if (results.categories.length) {
                     suggestionsData = [
                         ...suggestionsData,
-                        ...this.categories.map((category) => ({
+                        ...results.categories.map((category) => ({
                             categoryName: category.name,
                             url: category.url,
                             type: search_constants.SUGGESTIONS_TYPE.category
@@ -54,9 +69,9 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
                 }
             });
         }
-        else if (this.categories.length) {
+        else if (results.categories.length) {
             suggestionsData = [
-                ...this.categories.map((category) => ({
+                ...results.categories.map((category) => ({
                     categoryName: category.name,
                     url: category.url,
                     type: search_constants.SUGGESTIONS_TYPE.category
@@ -65,11 +80,6 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
         }
         this._suggestionsData = suggestionsData;
     }
-    _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
-        if (ev.key !== 'Enter' && ev.key !== ' ')
-            return;
-        this._handleSuggestion(suggestion, suggestionType);
-    }
     _handleSuggestion(suggestion, suggestionType) {
         if (suggestionType !== search_constants.SUGGESTIONS_TYPE.suggestion)
             return;
@@ -84,10 +94,10 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
         });
     }
     _getMatchedPhrase(phrase) {
-        const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
+        const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
         if (!phraseIncludesSearchPhrase)
             return lit.html `${phrase}`;
-        const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
+        const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
         return lit.html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
     }
     render() {
@@ -97,7 +107,6 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
                 <ul>
                     ${repeat.repeat(this._suggestionsData, (suggestion, index) => lit.html `<li
                                 @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
-                                @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
                                 class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
             ? search_constants.SEARCH_CLASS_NAMES.itemActive
             : ''}"
@@ -106,7 +115,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
                                 aria-label="${this.suggestionAriaLabel ?
             `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
             ''}"
-                                tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
+                                tabindex="0"
                                 role="option"
                             >
                                 ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -137,6 +146,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'search-id' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchSuggestionContent.prototype, "searchId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchSuggestionContent.prototype, "initialItemIds", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)
@@ -153,26 +166,14 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'module-instance-id' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'search-phrase' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSearchSuggestionContent.prototype, "searchPhrase", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Object }),
-    tslib_es6.__metadata("design:type", Array)
-], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Object }),
-    tslib_es6.__metadata("design:type", Array)
-], exports.HSearchSuggestionContent.prototype, "products", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Object, attribute: false }),
-    tslib_es6.__metadata("design:type", Array)
-], exports.HSearchSuggestionContent.prototype, "categories", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", 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)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map CHANGED Viewed

	@@ -1 +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,8DAAkE;AACrF;AACA,qBAAqB,gEAAoE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA;~~"}
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,mBAAmB,8DAAkE;AACrF;AACA,qBAAqB,gEAAoE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED Viewed

@@ -72,10 +72,6 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                         locale="${this.locale}"
                         view="${this.view}"
                         module-instance-id="${this.moduleInstanceId}"
-                        search-phrase="${this.searchPhrase}"
-                        .suggestions="${this.results.suggestions}"
-                        .products="${this.results.products}"
-                        .categories="${this.results.categories}"
                         .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
                     >
                     </h-search-suggestion-content>`)}

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA;AACA;AACA;AACA;~~"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;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;AACA;AACA;AACA;AACA;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/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts CHANGED Viewed

@@ -1,22 +1,21 @@
 import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import type { TCategory, TProduct } from "../../search_types";
 export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
+    private _searchContextConsumer;
+    private _searchContext$;
+    private _searchContextObserver;
     activeItemId: string;
     searchId: string;
+    initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     view: string;
     locale: string;
     moduleInstanceId: string;
-    searchPhrase: string;
-    suggestions: string[];
-    products: TProduct[];
-    categories: TCategory[];
     suggestionAriaLabel?: string;
+    private _searchPhrase;
     private _suggestionsData;
     connectedCallback(): Promise<void>;
     private _setupSuggestionData;
-    private _handleSuggestionWithKeyboard;
     private _handleSuggestion;
     private _dispatchEventWithSearchPhrase;
     private _getMatchedPhrase;

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED Viewed

@@ -3,6 +3,8 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
+import { Observer } from '../../../../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
 import { when as n } from '../../../../../../../../external/lit-html/directives/when.js';
 import { SEARCH_CUSTOM_EVENT_NAMES, SUGGESTIONS_TYPE, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
 import { repeat as c } from '../../../../../../../../external/lit-html/directives/repeat.js';
@@ -10,7 +12,9 @@ import { repeat as c } from '../../../../../../../../external/lit-html/directive
 let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.initialItemIds = {};
         this.translations = {};
+        this._searchPhrase = '';
         this._suggestionsData = [];
         this._updateSearchPhrase = (ev, suggestion) => {
             ev.stopPropagation();
@@ -19,29 +23,40 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
     }
     async connectedCallback() {
         super.connectedCallback();
-        this._setupSuggestionData();
+        try {
+            this._searchContextConsumer = new ContextConsumerController(this);
+            this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
+            this._searchContextObserver = new 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() {
+    _setupSuggestionData(results) {
         let suggestionsData = [];
-        if (this.suggestions.length) {
-            this.suggestions.forEach((suggestion, index) => {
+        if (results.suggestions.length) {
+            results.suggestions.forEach((suggestion, index) => {
                 suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
                 if (index)
                     return;
-                const isProductInTheCategory = this.products.length;
+                const isProductInTheCategory = results.products.length;
                 if (isProductInTheCategory) {
                     const lang = this.locale.split('_')[0];
                     suggestionsData.push({
                         suggestionName: suggestion,
-                        categoryName: this.products[0].category.breadcrumbs,
+                        categoryName: results.products[0].category.breadcrumbs,
                         type: SUGGESTIONS_TYPE.suggestionInCategory,
-                        url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
+                        url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
                     });
                 }
-                if (this.categories.length) {
+                if (results.categories.length) {
                     suggestionsData = [
                         ...suggestionsData,
-                        ...this.categories.map((category) => ({
+                        ...results.categories.map((category) => ({
                             categoryName: category.name,
                             url: category.url,
                             type: SUGGESTIONS_TYPE.category
@@ -50,9 +65,9 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                 }
             });
         }
-        else if (this.categories.length) {
+        else if (results.categories.length) {
             suggestionsData = [
-                ...this.categories.map((category) => ({
+                ...results.categories.map((category) => ({
                     categoryName: category.name,
                     url: category.url,
                     type: SUGGESTIONS_TYPE.category
@@ -61,11 +76,6 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
         }
         this._suggestionsData = suggestionsData;
     }
-    _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
-        if (ev.key !== 'Enter' && ev.key !== ' ')
-            return;
-        this._handleSuggestion(suggestion, suggestionType);
-    }
     _handleSuggestion(suggestion, suggestionType) {
         if (suggestionType !== SUGGESTIONS_TYPE.suggestion)
             return;
@@ -80,10 +90,10 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
         });
     }
     _getMatchedPhrase(phrase) {
-        const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
+        const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
         if (!phraseIncludesSearchPhrase)
             return html `${phrase}`;
-        const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
+        const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
         return html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
     }
     render() {
@@ -93,7 +103,6 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                 <ul>
                     ${c(this._suggestionsData, (suggestion, index) => html `<li
                                 @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
-                                @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
                                 class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
             ? SEARCH_CLASS_NAMES.itemActive
             : ''}"
@@ -102,7 +111,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                                 aria-label="${this.suggestionAriaLabel ?
             `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
             ''}"
-                                tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
+                                tabindex="0"
                                 role="option"
                             >
                                 ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -133,6 +142,10 @@ __decorate([
     property({ type: String, attribute: 'search-id' }),
     __metadata("design:type", String)
 ], HSearchSuggestionContent.prototype, "searchId", void 0);
+__decorate([
+    property({ type: Object, reflect: true }),
+    __metadata("design:type", Object)
+], HSearchSuggestionContent.prototype, "initialItemIds", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
@@ -149,26 +162,14 @@ __decorate([
     property({ type: String, attribute: 'module-instance-id' }),
     __metadata("design:type", String)
 ], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-phrase' }),
-    __metadata("design:type", String)
-], HSearchSuggestionContent.prototype, "searchPhrase", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Array)
-], HSearchSuggestionContent.prototype, "suggestions", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Array)
-], HSearchSuggestionContent.prototype, "products", void 0);
-__decorate([
-    property({ type: Object, attribute: false }),
-    __metadata("design:type", Array)
-], HSearchSuggestionContent.prototype, "categories", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;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;~~"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;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;"}

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.17.16-4",
+  "version": "1.17.16-6",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",