@shoper/phoenix_design_system 1.11.10-1 → 1.11.10-3

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 (36) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +35 -12
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js +19 -7
  4. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +14 -0
  6. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +6 -1
  8. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +6 -1
  10. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +9 -2
  12. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +6 -1
  14. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -0
  16. package/build/esm/packages/phoenix/src/components/form/search/search.js +35 -12
  17. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.d.ts +1 -1
  19. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js +19 -7
  20. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +1 -0
  22. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +15 -1
  23. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  24. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.d.ts +1 -0
  25. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +6 -1
  26. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map +1 -1
  27. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.d.ts +1 -0
  28. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +6 -1
  29. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map +1 -1
  30. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.d.ts +1 -0
  31. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +9 -2
  32. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  33. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts +1 -0
  34. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +6 -1
  35. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  36. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -15,6 +15,7 @@ var behavior_subject = require('../../../core/classes/behavior_subject/behavior_
15
15
  var ref_js = require('lit-html/directives/ref.js');
16
16
  var context_provider_controller = require('../../../core/context/context_provider_controller.js');
17
17
  var global_constants = require('../../../global_constants.js');
18
+ var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
18
19
  var when = require('../../../../../../external/lit/external/lit-html/directives/when.js');
19
20
  var search_constants = require('./search_constants.js');
20
21
 
@@ -22,6 +23,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
22
23
  constructor() {
23
24
  super(...arguments);
24
25
  this.view = search_constants.DEFAULT_VIEW;
26
+ this._id = v4['default']();
27
+ this._searchContentContainerId = v4['default']();
25
28
  this._searchResultsRef = ref_js.createRef();
26
29
  this._searchHistoryRef = ref_js.createRef();
27
30
  this._shouldShowHistory = false;
@@ -33,7 +36,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
33
36
  this._historyContext = new behavior_subject.BehaviorSubject({
34
37
  showLoadMore: false
35
38
  });
36
- this._activeItemId = '-1';
39
+ this._activeItemId = `${this.id}-1`;
37
40
  this._translations = {};
38
41
  this._bindKeys = (ev) => {
39
42
  var _a;
@@ -48,15 +51,15 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
48
51
  break;
49
52
  case 'ArrowLeft':
50
53
  ev.preventDefault();
51
- this._handleForwardGridFocus();
54
+ this._handleBackwardGridFocus();
52
55
  break;
53
56
  case 'ArrowRight':
54
57
  ev.preventDefault();
55
- this._handleBackwardGridFocus();
58
+ this._handleForwardGridFocus();
56
59
  break;
57
60
  case 'Enter':
58
61
  ev.preventDefault();
59
- if (this._activeItemId === '-1' || !this._shouldShowResults)
62
+ if (this._activeItemId === `${this.id}-1` || !this._shouldShowResults)
60
63
  return;
61
64
  this._handleChooseSearchItem();
62
65
  break;
@@ -85,12 +88,16 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
85
88
  }
86
89
  };
87
90
  this._handleForwardListFocus = () => {
91
+ var _a, _b;
88
92
  const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
89
93
  if (!$searchItemsContainer)
90
94
  return;
95
+ const isActiveElementAGridSearchItem = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id')) === null || _b === void 0 ? void 0 : _b.includes('grid');
91
96
  const $listSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
92
97
  const searchItemId = $el.getAttribute('data-search-item-id');
93
- return !!searchItemId && !searchItemId.includes('grid');
98
+ const isListSearchItem = !!searchItemId && !searchItemId.includes('grid');
99
+ const isGridSearchItem = !!searchItemId && searchItemId.includes('grid');
100
+ return isActiveElementAGridSearchItem ? isGridSearchItem : isListSearchItem;
94
101
  });
95
102
  this._handleForwardFocus($listSearchItems);
96
103
  };
@@ -110,15 +117,19 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
110
117
  const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
111
118
  const $nextSearchItemElement = $searchItems[indexOfNextElement];
112
119
  $nextSearchItemElement.focus();
113
- this._activeItemId = (_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : '-1';
120
+ this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
114
121
  };
115
122
  this._handleBackwardListFocus = () => {
123
+ var _a, _b;
116
124
  const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
117
125
  if (!$searchItemsContainer)
118
126
  return;
127
+ const isActiveElementAGridSearchItem = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id')) === null || _b === void 0 ? void 0 : _b.includes('grid');
119
128
  const $listSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
120
129
  const searchItemId = $el.getAttribute('data-search-item-id');
121
- return !!searchItemId && !searchItemId.includes('grid');
130
+ const isListSearchItem = !!searchItemId && !searchItemId.includes('grid');
131
+ const isGridSearchItem = !!searchItemId && searchItemId.includes('grid');
132
+ return isActiveElementAGridSearchItem ? isGridSearchItem : isListSearchItem;
122
133
  });
123
134
  this._handleBackwardFocus($listSearchItems);
124
135
  };
@@ -138,7 +149,11 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
138
149
  const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
139
150
  const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
140
151
  $previousSearchItemElement.focus();
141
- this._activeItemId = (_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : '-1';
152
+ this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
153
+ };
154
+ this._setActiveItemId = (newActiveItemId) => {
155
+ this._activeItemId = newActiveItemId;
156
+ this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
142
157
  };
143
158
  this._hideSuggesterOnClickOutside = (ev) => {
144
159
  const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
@@ -236,7 +251,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
236
251
  this._updateSearchView('', false);
237
252
  });
238
253
  this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
239
- if (this._activeItemId !== '-1')
254
+ if (this._activeItemId !== `${this.id}-1`)
240
255
  return;
241
256
  if (this._inputField.value === '') {
242
257
  this._updateSearchView(this._inputField.value, true);
@@ -263,7 +278,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
263
278
  }
264
279
  _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
265
280
  this._shouldShowMessage = shouldShowMessage;
266
- this._activeItemId = '-1';
281
+ this._setActiveItemId(`${this.id}-1`);
282
+ this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
267
283
  this._displaySuggester(searchPhrase);
268
284
  if (!shouldUpdateSearchPhrase)
269
285
  return;
@@ -327,7 +343,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
327
343
  }
328
344
  _resetSearchView() {
329
345
  this._shouldShowMessage = false;
330
- this._activeItemId = '-1';
346
+ this._setActiveItemId(`${this.id}-1`);
331
347
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
332
348
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
333
349
  this._hideHistorySuggestionsAndResults();
@@ -366,7 +382,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
366
382
  <div class="labeled-icon__signature">${this._translations.search}</div>
367
383
  </div>
368
384
 
369
- ${when.when(this._isSuggesterLayerVisible(), () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.container}">
385
+ ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
386
+ <div
387
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
388
+ id="${this._searchContentContainerId}"
389
+ ${when.when(this._shouldShowHistory, () => `role="grid"`, () => `role="listbox"`)}
390
+ >
370
391
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
371
392
  .history="${this._historyLimitedContent}"
372
393
  .results="${this._searchResults}"
@@ -379,6 +400,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
379
400
  .history="${this._historyLimitedContent}"
380
401
  .translations="${this._translations}"
381
402
  active-item-id="${this._activeItemId}"
403
+ search-id="${this.id}"
382
404
  module-instance-id="${this.moduleInstanceId}"
383
405
  ></h-search-history>`)}
384
406
  ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
@@ -390,6 +412,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
390
412
  view="${this.view}"
391
413
  .translations="${this._translations}"
392
414
  active-item-id="${this._activeItemId}"
415
+ search-id="${this.id}"
393
416
  module-instance-id="${this.moduleInstanceId}"
394
417
  ></h-search-results>`)}
395
418
  </div>`)}
package/build/cjs/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/history/search_history.js CHANGED
@@ -11,7 +11,6 @@ var icon_constants = require('../../../../icon/icon_constants.js');
11
11
  var observer = require('../../../../../core/classes/observer/observer.js');
12
12
  var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
13
13
  var ref_js = require('lit-html/directives/ref.js');
14
- var v4 = require('../../../../../../../../external/uuid/dist/esm-browser/v4.js');
15
14
  var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
16
15
  var search_constants = require('../../search_constants.js');
17
16
  var repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
@@ -20,7 +19,6 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
20
19
  constructor() {
21
20
  super(...arguments);
22
21
  this.buttonRef = ref_js.createRef();
23
- this._loadMoreButtonId = v4['default']();
24
22
  this.history = [];
25
23
  this.translations = {};
26
24
  }
@@ -47,23 +45,33 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
47
45
  return when.when((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => lit.html `<h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.searchHistory}</h3>
48
46
 
49
47
  <ul>
50
- ${repeat.repeat(this.history, (historyElement, index) => lit.html ` <li
51
- class="${search_constants.SEARCH_CLASS_NAMES.item} ${String(index) === this.activeItemId ? search_constants.SEARCH_CLASS_NAMES.itemActive : ''}"
48
+ ${repeat.repeat(this.history, (historyElement, index) => lit.html `
49
+ <li
50
+ class="
51
+ ${search_constants.SEARCH_CLASS_NAMES.item}
52
+ ${`${this.searchId}${index}` === this.activeItemId ? search_constants.SEARCH_CLASS_NAMES.itemActive : ''}
53
+ "
54
+ role="row"
52
55
  >
53
56
  <h-search-history-select
54
57
  item-label="${historyElement.label}"
55
58
  class="${search_constants.SEARCH_CLASS_NAMES.historySelect}"
56
59
  data-suggested-value="${historyElement.label}"
57
- data-search-item-id="${index}"
60
+ data-search-item-id="${this.searchId}${index}"
58
61
  module-instance-id="${this.moduleInstanceId}"
59
62
  aria-label=${this.translations.historyAriaLabel ? `${this.translations.historyAriaLabel} ${historyElement.label}` : undefined}
63
+ role="gridcell"
60
64
  >
61
65
  <h-icon icon-name="icon-clock"></h-icon>
62
66
 
63
67
  <span class="${search_constants.SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
64
68
  </h-search-history-select>
65
69
 
66
- <h-search-history-remove data-search-item-id="${index}-grid" item-id="${historyElement.id}">
70
+ <h-search-history-remove
71
+ data-search-item-id="${this.searchId}${index}-grid"
72
+ item-id="${historyElement.id}"
73
+ role="gridcell"
74
+ >
67
75
  <h-icon
68
76
  icon-name="icon-x"
69
77
  clickable=${true}
@@ -76,7 +84,7 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
76
84
 
77
85
  <h-search-history-load-more
78
86
  class="${search_constants.SEARCH_CLASS_NAMES.historyLoadMore}"
79
- data-search-item-id="${this._loadMoreButtonId}"
87
+ data-search-item-id="${this.searchId}-loadmore"
80
88
  ${ref_js.ref(this.buttonRef)}
81
89
  >
82
90
  ${this.translations.loadMore}
@@ -91,6 +99,10 @@ tslib_es6.__decorate([
91
99
  decorators.property({ type: String, attribute: 'active-item-id' }),
92
100
  tslib_es6.__metadata("design:type", String)
93
101
  ], exports.HSearchHistory.prototype, "activeItemId", void 0);
102
+ tslib_es6.__decorate([
103
+ decorators.property({ type: String, attribute: 'search-id' }),
104
+ tslib_es6.__metadata("design:type", String)
105
+ ], exports.HSearchHistory.prototype, "searchId", void 0);
94
106
  tslib_es6.__decorate([
95
107
  decorators.property({ type: Object }),
96
108
  tslib_es6.__metadata("design:type", Object)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.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;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -12,6 +12,15 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
12
12
  constructor() {
13
13
  super(...arguments);
14
14
  this._isSearchPhraseCleared = false;
15
+ this._setupAttributes = () => {
16
+ var _a, _b, _c, _d, _e, _f;
17
+ (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'combobox');
18
+ (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'list');
19
+ (_c = this.input) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-haspopup', 'grid');
20
+ const $searchContentContainer = (_d = this.closest('h-search')) === null || _d === void 0 ? void 0 : _d.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.container}`);
21
+ (_e = this.input) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-controls', ($searchContentContainer === null || $searchContentContainer === void 0 ? void 0 : $searchContentContainer.id) || '');
22
+ (_f = this.input) === null || _f === void 0 ? void 0 : _f.setAttribute('aria-activedescendant', '');
23
+ };
15
24
  }
16
25
  connectedCallback() {
17
26
  super.connectedCallback();
@@ -21,6 +30,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
21
30
  }
22
31
  this._setupInitialValue();
23
32
  this._setupListeners();
33
+ this._setupAttributes();
24
34
  }
25
35
  _setupInitialValue() {
26
36
  const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
@@ -54,6 +64,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
54
64
  });
55
65
  });
56
66
  this.input.addEventListener('keyup', (ev) => {
67
+ var _a;
57
68
  if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
58
69
  return;
59
70
  if (ev.key !== 'Enter') {
@@ -66,6 +77,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
66
77
  }
67
78
  if (this._isSearchPhraseCleared) {
68
79
  this._isSearchPhraseCleared = false;
80
+ (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-haspopup');
69
81
  return;
70
82
  }
71
83
  this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
@@ -85,9 +97,11 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
85
97
  });
86
98
  });
87
99
  document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, (ev) => {
100
+ var _a;
88
101
  if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
89
102
  return;
90
103
  this._isSearchPhraseCleared = true;
104
+ (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'grid');
91
105
  this.input.value = '';
92
106
  this.input.focus();
93
107
  });
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js CHANGED
@@ -35,9 +35,10 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
35
35
  this.activeItemId
36
36
  ? search_constants.SEARCH_CLASS_NAMES.itemActive
37
37
  : ''}"
38
- data-search-item-id="${this.initialItemIds.producers + index}"
38
+ data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
39
39
  aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
40
40
  tabindex="0"
41
+ role="option"
41
42
  >
42
43
  <a
43
44
  href="${producer.url}"
@@ -61,6 +62,10 @@ tslib_es6.__decorate([
61
62
  decorators.property({ type: String, attribute: 'active-item-id' }),
62
63
  tslib_es6.__metadata("design:type", String)
63
64
  ], exports.HSearchProducerContent.prototype, "activeItemId", void 0);
65
+ tslib_es6.__decorate([
66
+ decorators.property({ type: String, attribute: 'search-id' }),
67
+ tslib_es6.__metadata("design:type", String)
68
+ ], exports.HSearchProducerContent.prototype, "searchId", void 0);
64
69
  tslib_es6.__decorate([
65
70
  decorators.property({ type: Object, reflect: true }),
66
71
  tslib_es6.__metadata("design:type", Object)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js CHANGED
@@ -48,9 +48,10 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
48
48
  this.activeItemId
49
49
  ? search_constants.SEARCH_CLASS_NAMES.itemActive
50
50
  : ''}"
51
- data-search-item-id="${this.initialItemIds.products + index}"
51
+ data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
52
52
  aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
53
53
  tabindex="0"
54
+ role="option"
54
55
  >
55
56
  <a
56
57
  href="${product.url}"
@@ -102,6 +103,10 @@ tslib_es6.__decorate([
102
103
  decorators.property({ type: String, attribute: 'active-item-id' }),
103
104
  tslib_es6.__metadata("design:type", String)
104
105
  ], exports.HSearchProductContent.prototype, "activeItemId", void 0);
106
+ tslib_es6.__decorate([
107
+ decorators.property({ type: String, attribute: 'search-id' }),
108
+ tslib_es6.__metadata("design:type", String)
109
+ ], exports.HSearchProductContent.prototype, "searchId", void 0);
105
110
  tslib_es6.__decorate([
106
111
  decorators.property({ type: Object, reflect: true }),
107
112
  tslib_es6.__metadata("design:type", Object)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -70,6 +70,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
70
70
  ${when.when(((_a = this.results.suggestions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.results.categories) === null || _b === void 0 ? void 0 : _b.length), () => lit.html ` <h-search-suggestion-content
71
71
  class="${search_constants.SEARCH_CLASS_NAMES.section}"
72
72
  active-item-id="${this.activeItemId}"
73
+ search-id="${this.searchId}"
73
74
  .initialItemIds="${this._getInitialItemsIds()}"
74
75
  .translations="${this.translations}"
75
76
  locale="${this.locale}"
@@ -84,6 +85,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
84
85
  .products="${this.results.products}"
85
86
  .settings="${this.settings}"
86
87
  active-item-id="${this.activeItemId}"
88
+ search-id="${this.searchId}"
87
89
  .initialItemIds="${this._getInitialItemsIds()}"
88
90
  .translations="${this.translations}"
89
91
  .productAriaLabel=${this.settings.suggesterProductItemAriaLabel}
@@ -93,7 +95,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
93
95
  class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
94
96
  @click="${this.handleLoadMoreProducts}"
95
97
  type="button"
96
- data-search-item-id="${this._loadMoreButtonId}"
98
+ data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
97
99
  >
98
100
  ${this.translations.loadMore}
99
101
  </button>`), () => lit.html `
@@ -101,7 +103,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
101
103
  class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
102
104
  @click="${this.handleGoToProductsFor}"
103
105
  type="button"
104
- data-search-item-id="${this._goToProductsForButtonId}"
106
+ data-search-item-id="${this.searchId}${this._goToProductsForButtonId}"
105
107
  >
106
108
  ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
107
109
  </button>
@@ -112,6 +114,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
112
114
  class="${search_constants.SEARCH_CLASS_NAMES.section}"
113
115
  .producers="${this.results.producers}"
114
116
  active-item-id="${this.activeItemId}"
117
+ search-id="${this.searchId}"
115
118
  .initialItemIds="${this._getInitialItemsIds()}"
116
119
  .translations="${this.translations}"
117
120
  search-phrase="${this.searchPhrase}"
@@ -145,6 +148,10 @@ tslib_es6.__decorate([
145
148
  decorators.property({ type: String, attribute: 'active-item-id' }),
146
149
  tslib_es6.__metadata("design:type", String)
147
150
  ], exports.HSearchResults.prototype, "activeItemId", void 0);
151
+ tslib_es6.__decorate([
152
+ decorators.property({ type: String, attribute: 'search-id' }),
153
+ tslib_es6.__metadata("design:type", String)
154
+ ], exports.HSearchResults.prototype, "searchId", void 0);
148
155
  tslib_es6.__decorate([
149
156
  decorators.property({ type: Object }),
150
157
  tslib_es6.__metadata("design:type", Object)
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,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -111,9 +111,10 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
111
111
  ? search_constants.SEARCH_CLASS_NAMES.itemActive
112
112
  : ''}"
113
113
  data-suggested-value="${suggestion.suggestionName}"
114
- data-search-item-id="${index}"
114
+ data-search-item-id="${this.searchId}${index}"
115
115
  aria-label=${this.suggestionAriaLabel ? `${this.suggestionAriaLabel} ${suggestion.suggestionName}` : undefined}
116
116
  tabindex="0"
117
+ role="option"
117
118
  >
118
119
  ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
119
120
  <h-icon
@@ -139,6 +140,10 @@ tslib_es6.__decorate([
139
140
  decorators.property({ type: String, attribute: 'active-item-id' }),
140
141
  tslib_es6.__metadata("design:type", String)
141
142
  ], exports.HSearchSuggestionContent.prototype, "activeItemId", void 0);
143
+ tslib_es6.__decorate([
144
+ decorators.property({ type: String, attribute: 'search-id' }),
145
+ tslib_es6.__metadata("design:type", String)
146
+ ], exports.HSearchSuggestionContent.prototype, "searchId", void 0);
142
147
  tslib_es6.__decorate([
143
148
  decorators.property({ type: Object, reflect: true }),
144
149
  tslib_es6.__metadata("design:type", Object)
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,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -12,6 +12,8 @@ export declare class HSearch extends PhoenixLightLitElement {
12
12
  private _searchContextObserver;
13
13
  private _searchInput;
14
14
  private _inputField;
15
+ private _id;
16
+ private _searchContentContainerId;
15
17
  private _searchResultsRef;
16
18
  private _searchHistoryRef;
17
19
  private _shouldShowHistory;
@@ -48,6 +50,7 @@ export declare class HSearch extends PhoenixLightLitElement {
48
50
  private _handleBackwardFocus;
49
51
  private _handleChooseSearchItem;
50
52
  private _resetSearchView;
53
+ private _setActiveItemId;
51
54
  private _submitSearchPhrase;
52
55
  private _hideSuggesterOnClickOutside;
53
56
  private _switchTypeOfSearchView;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -11,6 +11,7 @@ import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior
11
11
  import { createRef, ref } from 'lit-html/directives/ref.js';
12
12
  import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
13
13
  import { BREAKPOINTS } from '../../../global_constants.js';
14
+ import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
14
15
  import { when as n } from '../../../../../../external/lit/external/lit-html/directives/when.js';
15
16
  import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SEARCH_CONFIGURATION, SEARCH_COMPONENT_NAMES, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
16
17
 
@@ -18,6 +19,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
18
19
  constructor() {
19
20
  super(...arguments);
20
21
  this.view = DEFAULT_VIEW;
22
+ this._id = v4();
23
+ this._searchContentContainerId = v4();
21
24
  this._searchResultsRef = createRef();
22
25
  this._searchHistoryRef = createRef();
23
26
  this._shouldShowHistory = false;
@@ -29,7 +32,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
29
32
  this._historyContext = new BehaviorSubject({
30
33
  showLoadMore: false
31
34
  });
32
- this._activeItemId = '-1';
35
+ this._activeItemId = `${this.id}-1`;
33
36
  this._translations = {};
34
37
  this._bindKeys = (ev) => {
35
38
  var _a;
@@ -44,15 +47,15 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
44
47
  break;
45
48
  case 'ArrowLeft':
46
49
  ev.preventDefault();
47
- this._handleForwardGridFocus();
50
+ this._handleBackwardGridFocus();
48
51
  break;
49
52
  case 'ArrowRight':
50
53
  ev.preventDefault();
51
- this._handleBackwardGridFocus();
54
+ this._handleForwardGridFocus();
52
55
  break;
53
56
  case 'Enter':
54
57
  ev.preventDefault();
55
- if (this._activeItemId === '-1' || !this._shouldShowResults)
58
+ if (this._activeItemId === `${this.id}-1` || !this._shouldShowResults)
56
59
  return;
57
60
  this._handleChooseSearchItem();
58
61
  break;
@@ -81,12 +84,16 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
81
84
  }
82
85
  };
83
86
  this._handleForwardListFocus = () => {
87
+ var _a, _b;
84
88
  const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
85
89
  if (!$searchItemsContainer)
86
90
  return;
91
+ const isActiveElementAGridSearchItem = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id')) === null || _b === void 0 ? void 0 : _b.includes('grid');
87
92
  const $listSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
88
93
  const searchItemId = $el.getAttribute('data-search-item-id');
89
- return !!searchItemId && !searchItemId.includes('grid');
94
+ const isListSearchItem = !!searchItemId && !searchItemId.includes('grid');
95
+ const isGridSearchItem = !!searchItemId && searchItemId.includes('grid');
96
+ return isActiveElementAGridSearchItem ? isGridSearchItem : isListSearchItem;
90
97
  });
91
98
  this._handleForwardFocus($listSearchItems);
92
99
  };
@@ -106,15 +113,19 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
106
113
  const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
107
114
  const $nextSearchItemElement = $searchItems[indexOfNextElement];
108
115
  $nextSearchItemElement.focus();
109
- this._activeItemId = (_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : '-1';
116
+ this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
110
117
  };
111
118
  this._handleBackwardListFocus = () => {
119
+ var _a, _b;
112
120
  const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
113
121
  if (!$searchItemsContainer)
114
122
  return;
123
+ const isActiveElementAGridSearchItem = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id')) === null || _b === void 0 ? void 0 : _b.includes('grid');
115
124
  const $listSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
116
125
  const searchItemId = $el.getAttribute('data-search-item-id');
117
- return !!searchItemId && !searchItemId.includes('grid');
126
+ const isListSearchItem = !!searchItemId && !searchItemId.includes('grid');
127
+ const isGridSearchItem = !!searchItemId && searchItemId.includes('grid');
128
+ return isActiveElementAGridSearchItem ? isGridSearchItem : isListSearchItem;
118
129
  });
119
130
  this._handleBackwardFocus($listSearchItems);
120
131
  };
@@ -134,7 +145,11 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
134
145
  const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
135
146
  const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
136
147
  $previousSearchItemElement.focus();
137
- this._activeItemId = (_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : '-1';
148
+ this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
149
+ };
150
+ this._setActiveItemId = (newActiveItemId) => {
151
+ this._activeItemId = newActiveItemId;
152
+ this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
138
153
  };
139
154
  this._hideSuggesterOnClickOutside = (ev) => {
140
155
  const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
@@ -232,7 +247,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
232
247
  this._updateSearchView('', false);
233
248
  });
234
249
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
235
- if (this._activeItemId !== '-1')
250
+ if (this._activeItemId !== `${this.id}-1`)
236
251
  return;
237
252
  if (this._inputField.value === '') {
238
253
  this._updateSearchView(this._inputField.value, true);
@@ -259,7 +274,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
259
274
  }
260
275
  _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
261
276
  this._shouldShowMessage = shouldShowMessage;
262
- this._activeItemId = '-1';
277
+ this._setActiveItemId(`${this.id}-1`);
278
+ this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
263
279
  this._displaySuggester(searchPhrase);
264
280
  if (!shouldUpdateSearchPhrase)
265
281
  return;
@@ -323,7 +339,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
323
339
  }
324
340
  _resetSearchView() {
325
341
  this._shouldShowMessage = false;
326
- this._activeItemId = '-1';
342
+ this._setActiveItemId(`${this.id}-1`);
327
343
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
328
344
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
329
345
  this._hideHistorySuggestionsAndResults();
@@ -362,7 +378,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
362
378
  <div class="labeled-icon__signature">${this._translations.search}</div>
363
379
  </div>
364
380
 
365
- ${n(this._isSuggesterLayerVisible(), () => html `<div class="${SEARCH_CLASS_NAMES.container}">
381
+ ${n(this._isSuggesterLayerVisible(), () => html `
382
+ <div
383
+ class="${SEARCH_CLASS_NAMES.container}"
384
+ id="${this._searchContentContainerId}"
385
+ ${n(this._shouldShowHistory, () => `role="grid"`, () => `role="listbox"`)}
386
+ >
366
387
  ${n(this._shouldShowMessage, () => html `<h-search-message
367
388
  .history="${this._historyLimitedContent}"
368
389
  .results="${this._searchResults}"
@@ -375,6 +396,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
375
396
  .history="${this._historyLimitedContent}"
376
397
  .translations="${this._translations}"
377
398
  active-item-id="${this._activeItemId}"
399
+ search-id="${this.id}"
378
400
  module-instance-id="${this.moduleInstanceId}"
379
401
  ></h-search-history>`)}
380
402
  ${n(this._shouldShowResults, () => html `<h-search-results
@@ -386,6 +408,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
386
408
  view="${this.view}"
387
409
  .translations="${this._translations}"
388
410
  active-item-id="${this._activeItemId}"
411
+ search-id="${this.id}"
389
412
  module-instance-id="${this.moduleInstanceId}"
390
413
  ></h-search-results>`)}
391
414
  </div>`)}
package/build/esm/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/history/search_history.d.ts CHANGED
@@ -8,9 +8,9 @@ export declare class HSearchHistory extends PhoenixLightLitElement {
8
8
  private _historyContext$;
9
9
  private _historyContextObserver;
10
10
  buttonRef: Ref<HSearchHistoryLoadMore>;
11
- private _loadMoreButtonId;
12
11
  history: TSearchHistoryItem[];
13
12
  activeItemId: string;
13
+ searchId: string;
14
14
  translations: Record<string, string>;
15
15
  moduleInstanceId: string;
16
16
  connectedCallback(): Promise<void>;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js CHANGED
@@ -7,7 +7,6 @@ import { ICONS_SIZES } from '../../../../icon/icon_constants.js';
7
7
  import { Observer } from '../../../../../core/classes/observer/observer.js';
8
8
  import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
9
9
  import { createRef, ref } from 'lit-html/directives/ref.js';
10
- import v4 from '../../../../../../../../external/uuid/dist/esm-browser/v4.js';
11
10
  import { when as n } from '../../../../../../../../external/lit/external/lit-html/directives/when.js';
12
11
  import { SEARCH_CONTEXT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
13
12
  import { repeat as c } from '../../../../../../../../external/lit/external/lit-html/directives/repeat.js';
@@ -16,7 +15,6 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
16
15
  constructor() {
17
16
  super(...arguments);
18
17
  this.buttonRef = createRef();
19
- this._loadMoreButtonId = v4();
20
18
  this.history = [];
21
19
  this.translations = {};
22
20
  }
@@ -43,23 +41,33 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
43
41
  return n((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => html `<h3 class="${SEARCH_CLASS_NAMES.headline}">${this.translations.searchHistory}</h3>
44
42
 
45
43
  <ul>
46
- ${c(this.history, (historyElement, index) => html ` <li
47
- class="${SEARCH_CLASS_NAMES.item} ${String(index) === this.activeItemId ? SEARCH_CLASS_NAMES.itemActive : ''}"
44
+ ${c(this.history, (historyElement, index) => html `
45
+ <li
46
+ class="
47
+ ${SEARCH_CLASS_NAMES.item}
48
+ ${`${this.searchId}${index}` === this.activeItemId ? SEARCH_CLASS_NAMES.itemActive : ''}
49
+ "
50
+ role="row"
48
51
  >
49
52
  <h-search-history-select
50
53
  item-label="${historyElement.label}"
51
54
  class="${SEARCH_CLASS_NAMES.historySelect}"
52
55
  data-suggested-value="${historyElement.label}"
53
- data-search-item-id="${index}"
56
+ data-search-item-id="${this.searchId}${index}"
54
57
  module-instance-id="${this.moduleInstanceId}"
55
58
  aria-label=${this.translations.historyAriaLabel ? `${this.translations.historyAriaLabel} ${historyElement.label}` : undefined}
59
+ role="gridcell"
56
60
  >
57
61
  <h-icon icon-name="icon-clock"></h-icon>
58
62
 
59
63
  <span class="${SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
60
64
  </h-search-history-select>
61
65
 
62
- <h-search-history-remove data-search-item-id="${index}-grid" item-id="${historyElement.id}">
66
+ <h-search-history-remove
67
+ data-search-item-id="${this.searchId}${index}-grid"
68
+ item-id="${historyElement.id}"
69
+ role="gridcell"
70
+ >
63
71
  <h-icon
64
72
  icon-name="icon-x"
65
73
  clickable=${true}
@@ -72,7 +80,7 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
72
80
 
73
81
  <h-search-history-load-more
74
82
  class="${SEARCH_CLASS_NAMES.historyLoadMore}"
75
- data-search-item-id="${this._loadMoreButtonId}"
83
+ data-search-item-id="${this.searchId}-loadmore"
76
84
  ${ref(this.buttonRef)}
77
85
  >
78
86
  ${this.translations.loadMore}
@@ -87,6 +95,10 @@ __decorate([
87
95
  property({ type: String, attribute: 'active-item-id' }),
88
96
  __metadata("design:type", String)
89
97
  ], HSearchHistory.prototype, "activeItemId", void 0);
98
+ __decorate([
99
+ property({ type: String, attribute: 'search-id' }),
100
+ __metadata("design:type", String)
101
+ ], HSearchHistory.prototype, "searchId", void 0);
90
102
  __decorate([
91
103
  property({ type: Object }),
92
104
  __metadata("design:type", Object)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.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;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -7,4 +7,5 @@ export declare class HSearchInput extends PhoenixLightLitElement {
7
7
  private _setupInitialValue;
8
8
  private _deserializeInputPhrase;
9
9
  private _setupListeners;
10
+ private _setupAttributes;
10
11
  }
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -2,12 +2,21 @@ import { __decorate, __metadata } from '../../../../../../../../external/tslib/t
2
2
  import { property, state } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
5
- import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
5
+ import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
6
6
 
7
7
  let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
8
8
  constructor() {
9
9
  super(...arguments);
10
10
  this._isSearchPhraseCleared = false;
11
+ this._setupAttributes = () => {
12
+ var _a, _b, _c, _d, _e, _f;
13
+ (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'combobox');
14
+ (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'list');
15
+ (_c = this.input) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-haspopup', 'grid');
16
+ const $searchContentContainer = (_d = this.closest('h-search')) === null || _d === void 0 ? void 0 : _d.querySelector(`.${SEARCH_CLASS_NAMES.container}`);
17
+ (_e = this.input) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-controls', ($searchContentContainer === null || $searchContentContainer === void 0 ? void 0 : $searchContentContainer.id) || '');
18
+ (_f = this.input) === null || _f === void 0 ? void 0 : _f.setAttribute('aria-activedescendant', '');
19
+ };
11
20
  }
12
21
  connectedCallback() {
13
22
  super.connectedCallback();
@@ -17,6 +26,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
17
26
  }
18
27
  this._setupInitialValue();
19
28
  this._setupListeners();
29
+ this._setupAttributes();
20
30
  }
21
31
  _setupInitialValue() {
22
32
  const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
@@ -50,6 +60,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
50
60
  });
51
61
  });
52
62
  this.input.addEventListener('keyup', (ev) => {
63
+ var _a;
53
64
  if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
54
65
  return;
55
66
  if (ev.key !== 'Enter') {
@@ -62,6 +73,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
62
73
  }
63
74
  if (this._isSearchPhraseCleared) {
64
75
  this._isSearchPhraseCleared = false;
76
+ (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-haspopup');
65
77
  return;
66
78
  }
67
79
  this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
@@ -81,9 +93,11 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
81
93
  });
82
94
  });
83
95
  document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.clear, (ev) => {
96
+ var _a;
84
97
  if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
85
98
  return;
86
99
  this._isSearchPhraseCleared = true;
100
+ (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'grid');
87
101
  this.input.value = '';
88
102
  this.input.focus();
89
103
  });
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_producer_content.d.ts CHANGED
@@ -4,6 +4,7 @@ import { TProducer } from "../../search_types";
4
4
  export declare class HSearchProducerContent extends PhoenixLightLitElement {
5
5
  producers: TProducer[];
6
6
  activeItemId: string;
7
+ searchId: string;
7
8
  initialItemIds: Record<string, number>;
8
9
  translations: Record<string, string>;
9
10
  searchPhrase: string;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js CHANGED
@@ -31,9 +31,10 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
31
31
  this.activeItemId
32
32
  ? SEARCH_CLASS_NAMES.itemActive
33
33
  : ''}"
34
- data-search-item-id="${this.initialItemIds.producers + index}"
34
+ data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
35
35
  aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
36
36
  tabindex="0"
37
+ role="option"
37
38
  >
38
39
  <a
39
40
  href="${producer.url}"
@@ -57,6 +58,10 @@ __decorate([
57
58
  property({ type: String, attribute: 'active-item-id' }),
58
59
  __metadata("design:type", String)
59
60
  ], HSearchProducerContent.prototype, "activeItemId", void 0);
61
+ __decorate([
62
+ property({ type: String, attribute: 'search-id' }),
63
+ __metadata("design:type", String)
64
+ ], HSearchProducerContent.prototype, "searchId", void 0);
60
65
  __decorate([
61
66
  property({ type: Object, reflect: true }),
62
67
  __metadata("design:type", Object)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_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,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_product_content.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare class HSearchProductContent extends PhoenixLightLitElement {
5
5
  products: TProduct[];
6
6
  settings: TSearchSettings;
7
7
  activeItemId: string;
8
+ searchId: string;
8
9
  initialItemIds: Record<string, number>;
9
10
  translations: Record<string, string>;
10
11
  productAriaLabel?: string;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js CHANGED
@@ -44,9 +44,10 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
44
44
  this.activeItemId
45
45
  ? SEARCH_CLASS_NAMES.itemActive
46
46
  : ''}"
47
- data-search-item-id="${this.initialItemIds.products + index}"
47
+ data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
48
48
  aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
49
49
  tabindex="0"
50
+ role="option"
50
51
  >
51
52
  <a
52
53
  href="${product.url}"
@@ -98,6 +99,10 @@ __decorate([
98
99
  property({ type: String, attribute: 'active-item-id' }),
99
100
  __metadata("design:type", String)
100
101
  ], HSearchProductContent.prototype, "activeItemId", void 0);
102
+ __decorate([
103
+ property({ type: String, attribute: 'search-id' }),
104
+ __metadata("design:type", String)
105
+ ], HSearchProductContent.prototype, "searchId", void 0);
101
106
  __decorate([
102
107
  property({ type: Object, reflect: true }),
103
108
  __metadata("design:type", Object)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_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,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare class HSearchResults extends PhoenixLightLitElement {
10
10
  view: string;
11
11
  locale: string;
12
12
  activeItemId: string;
13
+ searchId: string;
13
14
  translations: Record<string, string>;
14
15
  moduleInstanceId: string;
15
16
  private _productPage;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED
@@ -66,6 +66,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
66
66
  ${n(((_a = this.results.suggestions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.results.categories) === null || _b === void 0 ? void 0 : _b.length), () => html ` <h-search-suggestion-content
67
67
  class="${SEARCH_CLASS_NAMES.section}"
68
68
  active-item-id="${this.activeItemId}"
69
+ search-id="${this.searchId}"
69
70
  .initialItemIds="${this._getInitialItemsIds()}"
70
71
  .translations="${this.translations}"
71
72
  locale="${this.locale}"
@@ -80,6 +81,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
80
81
  .products="${this.results.products}"
81
82
  .settings="${this.settings}"
82
83
  active-item-id="${this.activeItemId}"
84
+ search-id="${this.searchId}"
83
85
  .initialItemIds="${this._getInitialItemsIds()}"
84
86
  .translations="${this.translations}"
85
87
  .productAriaLabel=${this.settings.suggesterProductItemAriaLabel}
@@ -89,7 +91,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
89
91
  class="${SEARCH_CLASS_NAMES.productButton}"
90
92
  @click="${this.handleLoadMoreProducts}"
91
93
  type="button"
92
- data-search-item-id="${this._loadMoreButtonId}"
94
+ data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
93
95
  >
94
96
  ${this.translations.loadMore}
95
97
  </button>`), () => html `
@@ -97,7 +99,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
97
99
  class="${SEARCH_CLASS_NAMES.productButton}"
98
100
  @click="${this.handleGoToProductsFor}"
99
101
  type="button"
100
- data-search-item-id="${this._goToProductsForButtonId}"
102
+ data-search-item-id="${this.searchId}${this._goToProductsForButtonId}"
101
103
  >
102
104
  ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
103
105
  </button>
@@ -108,6 +110,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
108
110
  class="${SEARCH_CLASS_NAMES.section}"
109
111
  .producers="${this.results.producers}"
110
112
  active-item-id="${this.activeItemId}"
113
+ search-id="${this.searchId}"
111
114
  .initialItemIds="${this._getInitialItemsIds()}"
112
115
  .translations="${this.translations}"
113
116
  search-phrase="${this.searchPhrase}"
@@ -141,6 +144,10 @@ __decorate([
141
144
  property({ type: String, attribute: 'active-item-id' }),
142
145
  __metadata("design:type", String)
143
146
  ], HSearchResults.prototype, "activeItemId", void 0);
147
+ __decorate([
148
+ property({ type: String, attribute: 'search-id' }),
149
+ __metadata("design:type", String)
150
+ ], HSearchResults.prototype, "searchId", void 0);
144
151
  __decorate([
145
152
  property({ type: Object }),
146
153
  __metadata("design:type", Object)
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,2EAAmF;AAC7G;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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
5
5
  private _searchContext$;
6
6
  private _searchContextObserver;
7
7
  activeItemId: string;
8
+ searchId: string;
8
9
  initialItemIds: Record<string, number>;
9
10
  translations: Record<string, string>;
10
11
  view: string;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -107,9 +107,10 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
107
107
  ? SEARCH_CLASS_NAMES.itemActive
108
108
  : ''}"
109
109
  data-suggested-value="${suggestion.suggestionName}"
110
- data-search-item-id="${index}"
110
+ data-search-item-id="${this.searchId}${index}"
111
111
  aria-label=${this.suggestionAriaLabel ? `${this.suggestionAriaLabel} ${suggestion.suggestionName}` : undefined}
112
112
  tabindex="0"
113
+ role="option"
113
114
  >
114
115
  ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
115
116
  <h-icon
@@ -135,6 +136,10 @@ __decorate([
135
136
  property({ type: String, attribute: 'active-item-id' }),
136
137
  __metadata("design:type", String)
137
138
  ], HSearchSuggestionContent.prototype, "activeItemId", void 0);
139
+ __decorate([
140
+ property({ type: String, attribute: 'search-id' }),
141
+ __metadata("design:type", String)
142
+ ], HSearchSuggestionContent.prototype, "searchId", void 0);
138
143
  __decorate([
139
144
  property({ type: Object, reflect: true }),
140
145
  __metadata("design:type", Object)
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,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11.10-1",
5
+ "version": "1.11.10-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",