@shoper/phoenix_design_system 1.17.16-1 → 1.17.16-11

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
  1. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  2. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  4. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +37 -23
  6. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +2 -0
  8. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  9. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  11. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts +6 -2
  13. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +37 -23
  14. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  15. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
+ require('lit');
6
7
  var decorators = require('lit/decorators');
7
8
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
9
  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
32
33
  if (!this.input) {
33
34
  throw new Error('Search input not found');
34
35
  }
35
- this._setupInitialValue();
36
36
  this._setupListeners();
37
37
  this._setupAttributes();
38
38
  }
39
+ firstUpdated(props) {
40
+ super.firstUpdated(props);
41
+ this._setupInitialValue();
42
+ }
39
43
  _setupInitialValue() {
40
44
  const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
41
45
  const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -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
@@ -76,6 +76,10 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
76
76
  locale="${this.locale}"
77
77
  view="${this.view}"
78
78
  module-instance-id="${this.moduleInstanceId}"
79
+ search-phrase="${this.searchPhrase}"
80
+ .suggestions="${this.results.suggestions}"
81
+ .products="${this.results.products}"
82
+ .categories="${this.results.categories}"
79
83
  .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
80
84
  >
81
85
  </h-search-suggestion-content>`)}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map CHANGED
@@ -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
@@ -16,9 +16,7 @@ var repeat = require('../../../../../../../../external/lit-html/directives/repea
16
16
  exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
17
17
  constructor() {
18
18
  super(...arguments);
19
- this.initialItemIds = {};
20
19
  this.translations = {};
21
- this._searchPhrase = '';
22
20
  this._suggestionsData = [];
23
21
  this._updateSearchPhrase = (ev, suggestion) => {
24
22
  ev.stopPropagation();
@@ -27,11 +25,12 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
27
25
  }
28
26
  async connectedCallback() {
29
27
  super.connectedCallback();
28
+ this._setupSuggestionData();
30
29
  try {
31
30
  this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
32
31
  this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
33
32
  this._searchContextObserver = new observer.Observer((searchData) => {
34
- this._searchPhrase = searchData.searchPhrase;
33
+ this.searchPhrase = searchData.searchPhrase;
35
34
  this._setupSuggestionData(searchData.results);
36
35
  });
37
36
  this._searchContext$.subscribe(this._searchContextObserver);
@@ -42,25 +41,26 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
42
41
  }
43
42
  _setupSuggestionData(results) {
44
43
  let suggestionsData = [];
45
- if (results.suggestions.length) {
46
- results.suggestions.forEach((suggestion, index) => {
44
+ const source = results || this;
45
+ if (source.suggestions.length) {
46
+ source.suggestions.forEach((suggestion, index) => {
47
47
  suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
48
48
  if (index)
49
49
  return;
50
- const isProductInTheCategory = results.products.length;
50
+ const isProductInTheCategory = source.products.length;
51
51
  if (isProductInTheCategory) {
52
52
  const lang = this.locale.split('_')[0];
53
53
  suggestionsData.push({
54
54
  suggestionName: suggestion,
55
- categoryName: results.products[0].category.breadcrumbs,
55
+ categoryName: source.products[0].category.breadcrumbs,
56
56
  type: search_constants.SUGGESTIONS_TYPE.suggestionInCategory,
57
- url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
57
+ url: `/${lang}/c/${source.products[0].category.name}/${source.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
58
58
  });
59
59
  }
60
- if (results.categories.length) {
60
+ if (source.categories.length) {
61
61
  suggestionsData = [
62
62
  ...suggestionsData,
63
- ...results.categories.map((category) => ({
63
+ ...source.categories.map((category) => ({
64
64
  categoryName: category.name,
65
65
  url: category.url,
66
66
  type: search_constants.SUGGESTIONS_TYPE.category
@@ -69,9 +69,9 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
69
69
  }
70
70
  });
71
71
  }
72
- else if (results.categories.length) {
72
+ else if (source.categories.length) {
73
73
  suggestionsData = [
74
- ...results.categories.map((category) => ({
74
+ ...source.categories.map((category) => ({
75
75
  categoryName: category.name,
76
76
  url: category.url,
77
77
  type: search_constants.SUGGESTIONS_TYPE.category
@@ -80,6 +80,11 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
80
80
  }
81
81
  this._suggestionsData = suggestionsData;
82
82
  }
83
+ _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
84
+ if (ev.key !== 'Enter' && ev.key !== ' ')
85
+ return;
86
+ this._handleSuggestion(suggestion, suggestionType);
87
+ }
83
88
  _handleSuggestion(suggestion, suggestionType) {
84
89
  if (suggestionType !== search_constants.SUGGESTIONS_TYPE.suggestion)
85
90
  return;
@@ -94,10 +99,10 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
94
99
  });
95
100
  }
96
101
  _getMatchedPhrase(phrase) {
97
- const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
102
+ const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
98
103
  if (!phraseIncludesSearchPhrase)
99
104
  return lit.html `${phrase}`;
100
- const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
105
+ const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
101
106
  return lit.html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
102
107
  }
103
108
  render() {
@@ -107,6 +112,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
107
112
  <ul>
108
113
  ${repeat.repeat(this._suggestionsData, (suggestion, index) => lit.html `<li
109
114
  @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
115
+ @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
110
116
  class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
111
117
  ? search_constants.SEARCH_CLASS_NAMES.itemActive
112
118
  : ''}"
@@ -115,7 +121,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
115
121
  aria-label="${this.suggestionAriaLabel ?
116
122
  `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
117
123
  ''}"
118
- tabindex="0"
124
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
119
125
  role="option"
120
126
  >
121
127
  ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -146,10 +152,6 @@ tslib_es6.__decorate([
146
152
  decorators.property({ type: String, attribute: 'search-id' }),
147
153
  tslib_es6.__metadata("design:type", String)
148
154
  ], exports.HSearchSuggestionContent.prototype, "searchId", void 0);
149
- tslib_es6.__decorate([
150
- decorators.property({ type: Object, reflect: true }),
151
- tslib_es6.__metadata("design:type", Object)
152
- ], exports.HSearchSuggestionContent.prototype, "initialItemIds", void 0);
153
155
  tslib_es6.__decorate([
154
156
  decorators.property({ type: Object }),
155
157
  tslib_es6.__metadata("design:type", Object)
@@ -167,13 +169,25 @@ tslib_es6.__decorate([
167
169
  tslib_es6.__metadata("design:type", String)
168
170
  ], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
169
171
  tslib_es6.__decorate([
170
- decorators.property({ type: String }),
172
+ decorators.property({ type: String, attribute: 'search-phrase' }),
171
173
  tslib_es6.__metadata("design:type", String)
172
- ], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
174
+ ], exports.HSearchSuggestionContent.prototype, "searchPhrase", void 0);
173
175
  tslib_es6.__decorate([
174
- decorators.state(),
176
+ decorators.property({ type: Object }),
177
+ tslib_es6.__metadata("design:type", Array)
178
+ ], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
179
+ tslib_es6.__decorate([
180
+ decorators.property({ type: Object }),
181
+ tslib_es6.__metadata("design:type", Array)
182
+ ], exports.HSearchSuggestionContent.prototype, "products", void 0);
183
+ tslib_es6.__decorate([
184
+ decorators.property({ type: Object, attribute: false }),
185
+ tslib_es6.__metadata("design:type", Array)
186
+ ], exports.HSearchSuggestionContent.prototype, "categories", void 0);
187
+ tslib_es6.__decorate([
188
+ decorators.property({ type: String }),
175
189
  tslib_es6.__metadata("design:type", String)
176
- ], exports.HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
190
+ ], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
177
191
  tslib_es6.__decorate([
178
192
  decorators.state(),
179
193
  tslib_es6.__metadata("design:type", Array)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map CHANGED
@@ -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;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ import { PropertyValues } from 'lit';
2
3
  export declare class HSearchInput extends PhoenixLightLitElement {
3
4
  input: HTMLInputElement | null;
4
5
  moduleInstanceId: string;
5
6
  private _isSearchPhraseCleared;
6
7
  connectedCallback(): void;
8
+ firstUpdated(props: PropertyValues): void;
7
9
  private _setupInitialValue;
8
10
  private _deserializeInputPhrase;
9
11
  private _setupListeners;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
2
+ import 'lit';
2
3
  import { property, state } from 'lit/decorators';
3
4
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
5
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
@@ -28,10 +29,13 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
28
29
  if (!this.input) {
29
30
  throw new Error('Search input not found');
30
31
  }
31
- this._setupInitialValue();
32
32
  this._setupListeners();
33
33
  this._setupAttributes();
34
34
  }
35
+ firstUpdated(props) {
36
+ super.firstUpdated(props);
37
+ this._setupInitialValue();
38
+ }
35
39
  _setupInitialValue() {
36
40
  const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
37
41
  const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -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
@@ -72,6 +72,10 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
72
72
  locale="${this.locale}"
73
73
  view="${this.view}"
74
74
  module-instance-id="${this.moduleInstanceId}"
75
+ search-phrase="${this.searchPhrase}"
76
+ .suggestions="${this.results.suggestions}"
77
+ .products="${this.results.products}"
78
+ .categories="${this.results.categories}"
75
79
  .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
76
80
  >
77
81
  </h-search-suggestion-content>`)}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map CHANGED
@@ -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
@@ -1,21 +1,25 @@
1
1
  import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
+ import type { TCategory, TProduct } from "../../search_types";
3
4
  export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
4
5
  private _searchContextConsumer;
5
6
  private _searchContext$;
6
7
  private _searchContextObserver;
7
8
  activeItemId: string;
8
9
  searchId: string;
9
- initialItemIds: Record<string, number>;
10
10
  translations: Record<string, string>;
11
11
  view: string;
12
12
  locale: string;
13
13
  moduleInstanceId: string;
14
+ searchPhrase: string;
15
+ suggestions: string[];
16
+ products: TProduct[];
17
+ categories: TCategory[];
14
18
  suggestionAriaLabel?: string;
15
- private _searchPhrase;
16
19
  private _suggestionsData;
17
20
  connectedCallback(): Promise<void>;
18
21
  private _setupSuggestionData;
22
+ private _handleSuggestionWithKeyboard;
19
23
  private _handleSuggestion;
20
24
  private _dispatchEventWithSearchPhrase;
21
25
  private _getMatchedPhrase;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -12,9 +12,7 @@ import { repeat as c } from '../../../../../../../../external/lit-html/directive
12
12
  let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLightLitElement {
13
13
  constructor() {
14
14
  super(...arguments);
15
- this.initialItemIds = {};
16
15
  this.translations = {};
17
- this._searchPhrase = '';
18
16
  this._suggestionsData = [];
19
17
  this._updateSearchPhrase = (ev, suggestion) => {
20
18
  ev.stopPropagation();
@@ -23,11 +21,12 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
23
21
  }
24
22
  async connectedCallback() {
25
23
  super.connectedCallback();
24
+ this._setupSuggestionData();
26
25
  try {
27
26
  this._searchContextConsumer = new ContextConsumerController(this);
28
27
  this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
29
28
  this._searchContextObserver = new Observer((searchData) => {
30
- this._searchPhrase = searchData.searchPhrase;
29
+ this.searchPhrase = searchData.searchPhrase;
31
30
  this._setupSuggestionData(searchData.results);
32
31
  });
33
32
  this._searchContext$.subscribe(this._searchContextObserver);
@@ -38,25 +37,26 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
38
37
  }
39
38
  _setupSuggestionData(results) {
40
39
  let suggestionsData = [];
41
- if (results.suggestions.length) {
42
- results.suggestions.forEach((suggestion, index) => {
40
+ const source = results || this;
41
+ if (source.suggestions.length) {
42
+ source.suggestions.forEach((suggestion, index) => {
43
43
  suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
44
44
  if (index)
45
45
  return;
46
- const isProductInTheCategory = results.products.length;
46
+ const isProductInTheCategory = source.products.length;
47
47
  if (isProductInTheCategory) {
48
48
  const lang = this.locale.split('_')[0];
49
49
  suggestionsData.push({
50
50
  suggestionName: suggestion,
51
- categoryName: results.products[0].category.breadcrumbs,
51
+ categoryName: source.products[0].category.breadcrumbs,
52
52
  type: SUGGESTIONS_TYPE.suggestionInCategory,
53
- url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
53
+ url: `/${lang}/c/${source.products[0].category.name}/${source.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
54
54
  });
55
55
  }
56
- if (results.categories.length) {
56
+ if (source.categories.length) {
57
57
  suggestionsData = [
58
58
  ...suggestionsData,
59
- ...results.categories.map((category) => ({
59
+ ...source.categories.map((category) => ({
60
60
  categoryName: category.name,
61
61
  url: category.url,
62
62
  type: SUGGESTIONS_TYPE.category
@@ -65,9 +65,9 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
65
65
  }
66
66
  });
67
67
  }
68
- else if (results.categories.length) {
68
+ else if (source.categories.length) {
69
69
  suggestionsData = [
70
- ...results.categories.map((category) => ({
70
+ ...source.categories.map((category) => ({
71
71
  categoryName: category.name,
72
72
  url: category.url,
73
73
  type: SUGGESTIONS_TYPE.category
@@ -76,6 +76,11 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
76
76
  }
77
77
  this._suggestionsData = suggestionsData;
78
78
  }
79
+ _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
80
+ if (ev.key !== 'Enter' && ev.key !== ' ')
81
+ return;
82
+ this._handleSuggestion(suggestion, suggestionType);
83
+ }
79
84
  _handleSuggestion(suggestion, suggestionType) {
80
85
  if (suggestionType !== SUGGESTIONS_TYPE.suggestion)
81
86
  return;
@@ -90,10 +95,10 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
90
95
  });
91
96
  }
92
97
  _getMatchedPhrase(phrase) {
93
- const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
98
+ const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
94
99
  if (!phraseIncludesSearchPhrase)
95
100
  return html `${phrase}`;
96
- const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
101
+ const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
97
102
  return html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
98
103
  }
99
104
  render() {
@@ -103,6 +108,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
103
108
  <ul>
104
109
  ${c(this._suggestionsData, (suggestion, index) => html `<li
105
110
  @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
111
+ @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
106
112
  class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
107
113
  ? SEARCH_CLASS_NAMES.itemActive
108
114
  : ''}"
@@ -111,7 +117,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
111
117
  aria-label="${this.suggestionAriaLabel ?
112
118
  `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
113
119
  ''}"
114
- tabindex="0"
120
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
115
121
  role="option"
116
122
  >
117
123
  ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -142,10 +148,6 @@ __decorate([
142
148
  property({ type: String, attribute: 'search-id' }),
143
149
  __metadata("design:type", String)
144
150
  ], HSearchSuggestionContent.prototype, "searchId", void 0);
145
- __decorate([
146
- property({ type: Object, reflect: true }),
147
- __metadata("design:type", Object)
148
- ], HSearchSuggestionContent.prototype, "initialItemIds", void 0);
149
151
  __decorate([
150
152
  property({ type: Object }),
151
153
  __metadata("design:type", Object)
@@ -163,13 +165,25 @@ __decorate([
163
165
  __metadata("design:type", String)
164
166
  ], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
165
167
  __decorate([
166
- property({ type: String }),
168
+ property({ type: String, attribute: 'search-phrase' }),
167
169
  __metadata("design:type", String)
168
- ], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
170
+ ], HSearchSuggestionContent.prototype, "searchPhrase", void 0);
169
171
  __decorate([
170
- state(),
172
+ property({ type: Object }),
173
+ __metadata("design:type", Array)
174
+ ], HSearchSuggestionContent.prototype, "suggestions", void 0);
175
+ __decorate([
176
+ property({ type: Object }),
177
+ __metadata("design:type", Array)
178
+ ], HSearchSuggestionContent.prototype, "products", void 0);
179
+ __decorate([
180
+ property({ type: Object, attribute: false }),
181
+ __metadata("design:type", Array)
182
+ ], HSearchSuggestionContent.prototype, "categories", void 0);
183
+ __decorate([
184
+ property({ type: String }),
171
185
  __metadata("design:type", String)
172
- ], HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
186
+ ], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
173
187
  __decorate([
174
188
  state(),
175
189
  __metadata("design:type", Array)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map CHANGED
@@ -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;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.17.16-1",
5
+ "version": "1.17.16-11",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",