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

@shoper/phoenix_design_system 1.17.16-6 → 1.17.16-7

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,6 +76,10 @@ 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;"}
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;"}

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

@@ -7,8 +7,6 @@ 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');
@@ -16,9 +14,7 @@ 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();
@@ -27,40 +23,29 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
     }
     async connectedCallback() {
         super.connectedCallback();
-        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');
-        }
+        this._setupSuggestionData();
     }
-    _setupSuggestionData(results) {
+    _setupSuggestionData() {
         let suggestionsData = [];
-        if (results.suggestions.length) {
-            results.suggestions.forEach((suggestion, index) => {
+        if (this.suggestions.length) {
+            this.suggestions.forEach((suggestion, index) => {
                 suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
                 if (index)
                     return;
-                const isProductInTheCategory = results.products.length;
+                const isProductInTheCategory = this.products.length;
                 if (isProductInTheCategory) {
                     const lang = this.locale.split('_')[0];
                     suggestionsData.push({
                         suggestionName: suggestion,
-                        categoryName: results.products[0].category.breadcrumbs,
+                        categoryName: this.products[0].category.breadcrumbs,
                         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}`
+                        url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
                     });
                 }
-                if (results.categories.length) {
+                if (this.categories.length) {
                     suggestionsData = [
                         ...suggestionsData,
-                        ...results.categories.map((category) => ({
+                        ...this.categories.map((category) => ({
                             categoryName: category.name,
                             url: category.url,
                             type: search_constants.SUGGESTIONS_TYPE.category
@@ -69,9 +54,9 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
                 }
             });
         }
-        else if (results.categories.length) {
+        else if (this.categories.length) {
             suggestionsData = [
-                ...results.categories.map((category) => ({
+                ...this.categories.map((category) => ({
                     categoryName: category.name,
                     url: category.url,
                     type: search_constants.SUGGESTIONS_TYPE.category
@@ -80,6 +65,11 @@ 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;
@@ -94,10 +84,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() {
@@ -107,6 +97,7 @@ 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
             : ''}"
@@ -146,10 +137,6 @@ 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)
@@ -167,13 +154,25 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String }),
+    decorators.property({ type: String, attribute: 'search-phrase' }),
     tslib_es6.__metadata("design:type", String)
-], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
+], exports.HSearchSuggestionContent.prototype, "searchPhrase", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    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, "_searchPhrase", void 0);
+], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", 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~~;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;"}
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;"}

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

@@ -72,6 +72,10 @@ 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;"}
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;"}

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

@@ -1,21 +1,22 @@
 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,8 +3,6 @@ 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';
@@ -12,9 +10,7 @@ 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();
@@ -23,40 +19,29 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
     }
     async connectedCallback() {
         super.connectedCallback();
-        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');
-        }
+        this._setupSuggestionData();
     }
-    _setupSuggestionData(results) {
+    _setupSuggestionData() {
         let suggestionsData = [];
-        if (results.suggestions.length) {
-            results.suggestions.forEach((suggestion, index) => {
+        if (this.suggestions.length) {
+            this.suggestions.forEach((suggestion, index) => {
                 suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
                 if (index)
                     return;
-                const isProductInTheCategory = results.products.length;
+                const isProductInTheCategory = this.products.length;
                 if (isProductInTheCategory) {
                     const lang = this.locale.split('_')[0];
                     suggestionsData.push({
                         suggestionName: suggestion,
-                        categoryName: results.products[0].category.breadcrumbs,
+                        categoryName: this.products[0].category.breadcrumbs,
                         type: SUGGESTIONS_TYPE.suggestionInCategory,
-                        url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
+                        url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
                     });
                 }
-                if (results.categories.length) {
+                if (this.categories.length) {
                     suggestionsData = [
                         ...suggestionsData,
-                        ...results.categories.map((category) => ({
+                        ...this.categories.map((category) => ({
                             categoryName: category.name,
                             url: category.url,
                             type: SUGGESTIONS_TYPE.category
@@ -65,9 +50,9 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                 }
             });
         }
-        else if (results.categories.length) {
+        else if (this.categories.length) {
             suggestionsData = [
-                ...results.categories.map((category) => ({
+                ...this.categories.map((category) => ({
                     categoryName: category.name,
                     url: category.url,
                     type: SUGGESTIONS_TYPE.category
@@ -76,6 +61,11 @@ 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;
@@ -90,10 +80,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() {
@@ -103,6 +93,7 @@ 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
             : ''}"
@@ -142,10 +133,6 @@ __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)
@@ -163,13 +150,25 @@ __decorate([
     __metadata("design:type", String)
 ], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'search-phrase' }),
     __metadata("design:type", String)
-], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
+], HSearchSuggestionContent.prototype, "searchPhrase", void 0);
 __decorate([
-    state(),
+    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, "_searchPhrase", void 0);
+], HSearchSuggestionContent.prototype, "suggestionAriaLabel", 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~~;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;"}
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;"}

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-6",
+  "version": "1.17.16-7",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",