npm - @shoper/phoenix_design_system - Versions diffs - 1.17.16-1 → 1.17.16-10 - Mend

@shoper/phoenix_design_system 1.17.16-1 → 1.17.16-10

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 (15) hide show

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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');
@@ -32,10 +33,13 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         if (!this.input) {
             throw new Error('Search input not found');
         }
-        this._setupInitialValue();
         this._setupListeners();
         this._setupAttributes();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._setupInitialValue();
+    }
     _setupInitialValue() {
         const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
         const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 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

@@ -39,6 +39,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
         catch (_a) {
             console.error('Search context is not provided');
         }
+        this._setupSuggestionData2();
     }
     _setupSuggestionData(results) {
         let suggestionsData = [];
@@ -80,6 +81,51 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
         }
         this._suggestionsData = suggestionsData;
     }
+    _setupSuggestionData2() {
+        let suggestionsData = [];
+        if (this.suggestions.length) {
+            this.suggestions.forEach((suggestion, index) => {
+                suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
+                if (index)
+                    return;
+                const isProductInTheCategory = this.products.length;
+                if (isProductInTheCategory) {
+                    const lang = this.locale.split('_')[0];
+                    suggestionsData.push({
+                        suggestionName: suggestion,
+                        categoryName: this.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}`
+                    });
+                }
+                if (this.categories.length) {
+                    suggestionsData = [
+                        ...suggestionsData,
+                        ...this.categories.map((category) => ({
+                            categoryName: category.name,
+                            url: category.url,
+                            type: search_constants.SUGGESTIONS_TYPE.category
+                        }))
+                    ];
+                }
+            });
+        }
+        else if (this.categories.length) {
+            suggestionsData = [
+                ...this.categories.map((category) => ({
+                    categoryName: category.name,
+                    url: category.url,
+                    type: search_constants.SUGGESTIONS_TYPE.category
+                }))
+            ];
+        }
+        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 +140,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 +153,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
             : ''}"
@@ -115,7 +162,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
                                 aria-label="${this.suggestionAriaLabel ?
             `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
             ''}"
-                                tabindex="0"
+                                tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
                                 role="option"
                             >
                                 ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -166,6 +213,22 @@ 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)

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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/input/search_input.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
 export declare class HSearchInput extends PhoenixLightLitElement {
     input: HTMLInputElement | null;
     moduleInstanceId: string;
     private _isSearchPhraseCleared;
     connectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
     private _setupInitialValue;
     private _deserializeInputPhrase;
     private _setupListeners;

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+import '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';
@@ -28,10 +29,13 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
         if (!this.input) {
             throw new Error('Search input not found');
         }
-        this._setupInitialValue();
         this._setupListeners();
         this._setupAttributes();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._setupInitialValue();
+    }
     _setupInitialValue() {
         const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
         const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);

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

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,5 +1,6 @@
 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$;
@@ -11,11 +12,17 @@ export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
     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 _setupSuggestionData2;
+    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

@@ -35,6 +35,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
         catch (_a) {
             console.error('Search context is not provided');
         }
+        this._setupSuggestionData2();
     }
     _setupSuggestionData(results) {
         let suggestionsData = [];
@@ -76,6 +77,51 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
         }
         this._suggestionsData = suggestionsData;
     }
+    _setupSuggestionData2() {
+        let suggestionsData = [];
+        if (this.suggestions.length) {
+            this.suggestions.forEach((suggestion, index) => {
+                suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
+                if (index)
+                    return;
+                const isProductInTheCategory = this.products.length;
+                if (isProductInTheCategory) {
+                    const lang = this.locale.split('_')[0];
+                    suggestionsData.push({
+                        suggestionName: suggestion,
+                        categoryName: this.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}`
+                    });
+                }
+                if (this.categories.length) {
+                    suggestionsData = [
+                        ...suggestionsData,
+                        ...this.categories.map((category) => ({
+                            categoryName: category.name,
+                            url: category.url,
+                            type: SUGGESTIONS_TYPE.category
+                        }))
+                    ];
+                }
+            });
+        }
+        else if (this.categories.length) {
+            suggestionsData = [
+                ...this.categories.map((category) => ({
+                    categoryName: category.name,
+                    url: category.url,
+                    type: SUGGESTIONS_TYPE.category
+                }))
+            ];
+        }
+        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 +136,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 +149,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
             : ''}"
@@ -111,7 +158,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                                 aria-label="${this.suggestionAriaLabel ?
             `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
             ''}"
-                                tabindex="0"
+                                tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
                                 role="option"
                             >
                                 ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -162,6 +209,22 @@ __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)

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