@shoper/phoenix_design_system 1.11.7-3 → 1.11.7-5

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 (31) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +32 -26
  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 +7 -11
  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/results/search_producer_content.js +1 -0
  6. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -0
  8. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +10 -14
  10. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +1 -0
  12. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/index.js +7 -7
  14. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +4 -4
  15. package/build/esm/packages/phoenix/src/components/form/search/search.js +33 -27
  16. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/form/search/search_types.d.ts +0 -3
  18. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.d.ts +1 -2
  19. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js +8 -12
  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/results/search_producer_content.js +1 -0
  22. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map +1 -1
  23. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -0
  24. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.d.ts +2 -3
  26. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +10 -14
  27. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +1 -0
  29. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  30. package/build/esm/packages/phoenix/src/index.js +1 -1
  31. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -22,7 +22,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
22
22
  constructor() {
23
23
  super(...arguments);
24
24
  this.view = search_constants.DEFAULT_VIEW;
25
- this.searchResultsRef = ref_js.createRef();
25
+ this._searchResultsRef = ref_js.createRef();
26
+ this._searchHistoryRef = ref_js.createRef();
26
27
  this._shouldShowHistory = false;
27
28
  this._shouldShowResults = false;
28
29
  this._shouldShowMessage = false;
@@ -35,29 +36,16 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
35
36
  this._activeItemId = -1;
36
37
  this._translations = {};
37
38
  this._bindKeys = (ev) => {
38
- var _a, _b;
39
- const searchItemsCount = this._getSearchItemsCount();
39
+ var _a;
40
40
  switch (ev.key) {
41
41
  case 'ArrowDown':
42
42
  ev.preventDefault();
43
- if (((_a = this.searchResultsRef.value) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) && this._activeItemId === searchItemsCount - 1) {
44
- const $activeElement = document.activeElement;
45
- const focusableElements = utilities.UiDomUtils.getFocusableElements(this.searchResultsRef.value);
46
- const $nextFocusableElement = focusableElements[focusableElements.indexOf($activeElement) + 1];
47
- if ($nextFocusableElement)
48
- $nextFocusableElement.focus();
49
- else
50
- this._activeItemId = 0;
51
- return;
52
- }
53
- this._activeItemId = this._activeItemId === searchItemsCount - 1 ? 0 : this._activeItemId + 1;
54
- this._dispatchActiveItemChangeEvent();
43
+ this._focusOutsideActiveItemsForward();
55
44
  this._scroll(search_constants.SCROLL_DIRECTIONS.down);
56
45
  break;
57
46
  case 'ArrowUp':
58
47
  ev.preventDefault();
59
- this._activeItemId = this._activeItemId === 0 || this._activeItemId === -1 ? searchItemsCount - 1 : this._activeItemId - 1;
60
- this._dispatchActiveItemChangeEvent();
48
+ this._focusOutsideActiveItemsBackward();
61
49
  this._scroll(search_constants.SCROLL_DIRECTIONS.up);
62
50
  break;
63
51
  case 'Enter':
@@ -72,7 +60,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
72
60
  this._resetSearchView();
73
61
  break;
74
62
  case 'Tab':
75
- const isFocusedOnSearchInput = !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.matches('input[type="search"]'));
63
+ const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
76
64
  if (!isFocusedOnSearchInput) {
77
65
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
78
66
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
@@ -82,14 +70,31 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
82
70
  break;
83
71
  }
84
72
  };
85
- this._dispatchActiveItemChangeEvent = () => {
86
- const ev = new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, {
87
- detail: {
88
- activeItemId: this._activeItemId
89
- },
90
- bubbles: true
73
+ this._focusOutsideActiveItemsForward = () => {
74
+ const $activeElement = document.activeElement;
75
+ const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
76
+ if (!$searchItemsContainer)
77
+ return;
78
+ const $searchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
79
+ return !!$el.getAttribute('data-search-item-id');
80
+ });
81
+ const indexOfCurrentElement = $searchItems.indexOf($activeElement);
82
+ const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
83
+ const $nextSearchItemElement = $searchItems[indexOfNextElement];
84
+ $nextSearchItemElement.focus();
85
+ };
86
+ this._focusOutsideActiveItemsBackward = () => {
87
+ const $activeElement = document.activeElement;
88
+ const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
89
+ if (!$searchItemsContainer)
90
+ return;
91
+ const $searchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
92
+ return !!$el.getAttribute('data-search-item-id');
91
93
  });
92
- this.dispatchEvent(ev);
94
+ const indexOfCurrentElement = $searchItems.indexOf($activeElement);
95
+ const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
96
+ const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
97
+ $previousSearchItemElement.focus();
93
98
  };
94
99
  this._getSearchItemsCount = () => {
95
100
  if (this._shouldShowHistory)
@@ -346,6 +351,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
346
351
  module-instance-id="${this.moduleInstanceId}"
347
352
  ></h-search-message>`)}
348
353
  ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
354
+ ${ref_js.ref(this._searchHistoryRef)}
349
355
  .history="${this._historyLimitedContent}"
350
356
  .translations="${this._translations}"
351
357
  active-item-id="${this._activeItemId}"
@@ -353,7 +359,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
353
359
  .historyAriaLabel="${this.settings.historyAriaLabel}"
354
360
  ></h-search-history>`)}
355
361
  ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
356
- ${ref_js.ref(this.searchResultsRef)}
362
+ ${ref_js.ref(this._searchResultsRef)}
357
363
  .results="${this._searchResults}"
358
364
  search-phrase="${this._searchPhrase}"
359
365
  .settings="${this.settings}"
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js CHANGED
@@ -11,6 +11,7 @@ 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');
14
15
  var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
15
16
  var search_constants = require('../../search_constants.js');
16
17
  var repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
@@ -19,13 +20,9 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
19
20
  constructor() {
20
21
  super(...arguments);
21
22
  this.buttonRef = ref_js.createRef();
23
+ this._loadMoreButtonId = v4['default']();
22
24
  this.history = [];
23
25
  this.translations = {};
24
- this._handleActiveItemChange = (ev) => {
25
- const { activeItemId } = ev.detail;
26
- const $activeItem = this.querySelector(`[data-search-item-id="${activeItemId}"]`);
27
- $activeItem === null || $activeItem === void 0 ? void 0 : $activeItem.focus();
28
- };
29
26
  }
30
27
  async connectedCallback() {
31
28
  super.connectedCallback();
@@ -44,11 +41,6 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
44
41
  catch (_a) {
45
42
  console.error('Search context is not provided');
46
43
  }
47
- document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
48
- }
49
- disconnectedCallback() {
50
- super.disconnectedCallback();
51
- document.removeEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
52
44
  }
53
45
  render() {
54
46
  var _a;
@@ -82,7 +74,11 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
82
74
  </li>`)}
83
75
  </ul>
84
76
 
85
- <h-search-history-load-more class="${search_constants.SEARCH_CLASS_NAMES.historyLoadMore}" ${ref_js.ref(this.buttonRef)}>
77
+ <h-search-history-load-more
78
+ class="${search_constants.SEARCH_CLASS_NAMES.historyLoadMore}"
79
+ data-search-item-id="${this._loadMoreButtonId}"
80
+ ${ref_js.ref(this.buttonRef)}
81
+ >
86
82
  ${this.translations.loadMore}
87
83
  </h-search-history-load-more>`);
88
84
  }
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,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;"}
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;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js CHANGED
@@ -37,6 +37,7 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
37
37
  : ''}"
38
38
  data-search-item-id="${this.initialItemIds.producers + index}"
39
39
  aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
40
+ tabindex="0"
40
41
  >
41
42
  <a
42
43
  href="${producer.url}"
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js CHANGED
@@ -50,6 +50,7 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
50
50
  : ''}"
51
51
  data-search-item-id="${this.initialItemIds.products + index}"
52
52
  aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
53
+ tabindex="0"
53
54
  >
54
55
  <a
55
56
  href="${product.url}"
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED
@@ -7,6 +7,7 @@ var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
8
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
10
+ var v4 = require('../../../../../../../../external/uuid/dist/esm-browser/v4.js');
10
11
  var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
11
12
  var search_constants = require('../../search_constants.js');
12
13
  var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
@@ -14,14 +15,11 @@ var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
14
15
  exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.PhoenixLightLitElement {
15
16
  constructor() {
16
17
  super(...arguments);
18
+ this._loadMoreButtonId = v4['default']();
19
+ this._goToProductsForButtonId = v4['default']();
17
20
  this.searchPhrase = '';
18
21
  this.translations = {};
19
22
  this._productPage = 1;
20
- this._handleActiveItemChange = (ev) => {
21
- const { activeItemId } = ev.detail;
22
- const $activeItem = this.querySelector(`[data-search-item-id="${activeItemId}"]`);
23
- $activeItem === null || $activeItem === void 0 ? void 0 : $activeItem.focus();
24
- };
25
23
  this._getInitialItemsIds = () => {
26
24
  const suggestionInCategoryInitialItemId = this.results.suggestions.length;
27
25
  const categoryInitialItemId = this._isProductInTheCategory() ? suggestionInCategoryInitialItemId + 1 : suggestionInCategoryInitialItemId;
@@ -35,14 +33,6 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
35
33
  };
36
34
  };
37
35
  }
38
- connectedCallback() {
39
- super.connectedCallback();
40
- document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
41
- }
42
- disconnectedCallback() {
43
- super.disconnectedCallback();
44
- document.removeEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
45
- }
46
36
  _isProductInTheCategory() {
47
37
  return this.results.products.length && this.results.suggestions.length;
48
38
  }
@@ -103,10 +93,16 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
103
93
  class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
104
94
  @click="${this.handleLoadMoreProducts}"
105
95
  type="button"
96
+ data-search-item-id="${this._loadMoreButtonId}"
106
97
  >
107
98
  ${this.translations.loadMore}
108
99
  </button>`), () => lit.html `
109
- <button class="${search_constants.SEARCH_CLASS_NAMES.productButton}" @click="${this.handleGoToProductsFor}" type="button">
100
+ <button
101
+ class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
102
+ @click="${this.handleGoToProductsFor}"
103
+ type="button"
104
+ data-search-item-id="${this._goToProductsForButtonId}"
105
+ >
110
106
  ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
111
107
  </button>
112
108
  `)}
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,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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -113,6 +113,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
113
113
  data-suggested-value="${suggestion.suggestionName}"
114
114
  data-search-item-id="${index}"
115
115
  aria-label=${this.suggestionAriaLabel ? `${this.suggestionAriaLabel} ${suggestion.suggestionName}` : undefined}
116
+ tabindex="0"
116
117
  >
117
118
  ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
118
119
  <h-icon
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;"}
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;"}
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -100,9 +100,9 @@ var button_stepper = require('./components/form/input_stepper/button_stepper.js'
100
100
  var search_constants = require('./components/form/search/search_constants.js');
101
101
  var search_input = require('./components/form/search/subcomponents/input/search_input.js');
102
102
  var search_results = require('./components/form/search/subcomponents/results/search_results.js');
103
- var search = require('./components/form/search/search.js');
104
103
  var search_history_load_more = require('./components/form/search/subcomponents/history/search_history_load_more.js');
105
104
  var search_history = require('./components/form/search/subcomponents/history/search_history.js');
105
+ var search = require('./components/form/search/search.js');
106
106
  var search_submit = require('./components/form/search/subcomponents/buttons/search_submit.js');
107
107
  var search_clear = require('./components/form/search/subcomponents/buttons/search_clear.js');
108
108
  var search_close = require('./components/form/search/subcomponents/buttons/search_close.js');
@@ -598,12 +598,6 @@ Object.defineProperty(exports, 'HSearchResults', {
598
598
  return search_results.HSearchResults;
599
599
  }
600
600
  });
601
- Object.defineProperty(exports, 'HSearch', {
602
- enumerable: true,
603
- get: function () {
604
- return search.HSearch;
605
- }
606
- });
607
601
  Object.defineProperty(exports, 'HSearchHistoryLoadMore', {
608
602
  enumerable: true,
609
603
  get: function () {
@@ -616,6 +610,12 @@ Object.defineProperty(exports, 'HSearchHistory', {
616
610
  return search_history.HSearchHistory;
617
611
  }
618
612
  });
613
+ Object.defineProperty(exports, 'HSearch', {
614
+ enumerable: true,
615
+ get: function () {
616
+ return search.HSearch;
617
+ }
618
+ });
619
619
  Object.defineProperty(exports, 'HSearchSubmit', {
620
620
  enumerable: true,
621
621
  get: function () {
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
3
  import type { TSearchSettings } from "./search_types";
4
- import { Ref } from 'lit/directives/ref.js';
5
- import { HSearchResults } from './subcomponents/results/search_results';
6
4
  export declare class HSearch extends PhoenixLightLitElement {
7
5
  settings: TSearchSettings;
8
6
  view: string;
@@ -14,7 +12,8 @@ export declare class HSearch extends PhoenixLightLitElement {
14
12
  private _searchContextObserver;
15
13
  private _searchInput;
16
14
  private _inputField;
17
- searchResultsRef: Ref<HSearchResults>;
15
+ private _searchResultsRef;
16
+ private _searchHistoryRef;
18
17
  private _shouldShowHistory;
19
18
  private _shouldShowResults;
20
19
  private _shouldShowMessage;
@@ -40,7 +39,8 @@ export declare class HSearch extends PhoenixLightLitElement {
40
39
  private _handleToggleHistoryAndResults;
41
40
  private _toggleSearchInputAria;
42
41
  private _bindKeys;
43
- private _dispatchActiveItemChangeEvent;
42
+ private _focusOutsideActiveItemsForward;
43
+ private _focusOutsideActiveItemsBackward;
44
44
  private _getSearchItemsCount;
45
45
  private _scroll;
46
46
  private _handleChooseSearchItem;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -12,13 +12,14 @@ 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
14
  import { when as n } from '../../../../../../external/lit/external/lit-html/directives/when.js';
15
- import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SCROLL_DIRECTIONS, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_CONFIGURATION, SEARCH_COMPONENT_NAMES, SEARCH_CONTEXT_NAMES } from './search_constants.js';
15
+ import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SCROLL_DIRECTIONS, SEARCH_CONFIGURATION, SEARCH_COMPONENT_NAMES, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
16
16
 
17
17
  let HSearch = class HSearch extends PhoenixLightLitElement {
18
18
  constructor() {
19
19
  super(...arguments);
20
20
  this.view = DEFAULT_VIEW;
21
- this.searchResultsRef = createRef();
21
+ this._searchResultsRef = createRef();
22
+ this._searchHistoryRef = createRef();
22
23
  this._shouldShowHistory = false;
23
24
  this._shouldShowResults = false;
24
25
  this._shouldShowMessage = false;
@@ -31,29 +32,16 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
31
32
  this._activeItemId = -1;
32
33
  this._translations = {};
33
34
  this._bindKeys = (ev) => {
34
- var _a, _b;
35
- const searchItemsCount = this._getSearchItemsCount();
35
+ var _a;
36
36
  switch (ev.key) {
37
37
  case 'ArrowDown':
38
38
  ev.preventDefault();
39
- if (((_a = this.searchResultsRef.value) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) && this._activeItemId === searchItemsCount - 1) {
40
- const $activeElement = document.activeElement;
41
- const focusableElements = UiDomUtils.getFocusableElements(this.searchResultsRef.value);
42
- const $nextFocusableElement = focusableElements[focusableElements.indexOf($activeElement) + 1];
43
- if ($nextFocusableElement)
44
- $nextFocusableElement.focus();
45
- else
46
- this._activeItemId = 0;
47
- return;
48
- }
49
- this._activeItemId = this._activeItemId === searchItemsCount - 1 ? 0 : this._activeItemId + 1;
50
- this._dispatchActiveItemChangeEvent();
39
+ this._focusOutsideActiveItemsForward();
51
40
  this._scroll(SCROLL_DIRECTIONS.down);
52
41
  break;
53
42
  case 'ArrowUp':
54
43
  ev.preventDefault();
55
- this._activeItemId = this._activeItemId === 0 || this._activeItemId === -1 ? searchItemsCount - 1 : this._activeItemId - 1;
56
- this._dispatchActiveItemChangeEvent();
44
+ this._focusOutsideActiveItemsBackward();
57
45
  this._scroll(SCROLL_DIRECTIONS.up);
58
46
  break;
59
47
  case 'Enter':
@@ -68,7 +56,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
68
56
  this._resetSearchView();
69
57
  break;
70
58
  case 'Tab':
71
- const isFocusedOnSearchInput = !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.matches('input[type="search"]'));
59
+ const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
72
60
  if (!isFocusedOnSearchInput) {
73
61
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
74
62
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
@@ -78,14 +66,31 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
78
66
  break;
79
67
  }
80
68
  };
81
- this._dispatchActiveItemChangeEvent = () => {
82
- const ev = new CustomEvent(SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, {
83
- detail: {
84
- activeItemId: this._activeItemId
85
- },
86
- bubbles: true
69
+ this._focusOutsideActiveItemsForward = () => {
70
+ const $activeElement = document.activeElement;
71
+ const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
72
+ if (!$searchItemsContainer)
73
+ return;
74
+ const $searchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
75
+ return !!$el.getAttribute('data-search-item-id');
76
+ });
77
+ const indexOfCurrentElement = $searchItems.indexOf($activeElement);
78
+ const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
79
+ const $nextSearchItemElement = $searchItems[indexOfNextElement];
80
+ $nextSearchItemElement.focus();
81
+ };
82
+ this._focusOutsideActiveItemsBackward = () => {
83
+ const $activeElement = document.activeElement;
84
+ const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
85
+ if (!$searchItemsContainer)
86
+ return;
87
+ const $searchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
88
+ return !!$el.getAttribute('data-search-item-id');
87
89
  });
88
- this.dispatchEvent(ev);
90
+ const indexOfCurrentElement = $searchItems.indexOf($activeElement);
91
+ const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
92
+ const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
93
+ $previousSearchItemElement.focus();
89
94
  };
90
95
  this._getSearchItemsCount = () => {
91
96
  if (this._shouldShowHistory)
@@ -342,6 +347,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
342
347
  module-instance-id="${this.moduleInstanceId}"
343
348
  ></h-search-message>`)}
344
349
  ${n(this._shouldShowHistory, () => html `<h-search-history
350
+ ${ref(this._searchHistoryRef)}
345
351
  .history="${this._historyLimitedContent}"
346
352
  .translations="${this._translations}"
347
353
  active-item-id="${this._activeItemId}"
@@ -349,7 +355,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
349
355
  .historyAriaLabel="${this.settings.historyAriaLabel}"
350
356
  ></h-search-history>`)}
351
357
  ${n(this._shouldShowResults, () => html `<h-search-results
352
- ${ref(this.searchResultsRef)}
358
+ ${ref(this._searchResultsRef)}
353
359
  .results="${this._searchResults}"
354
360
  search-phrase="${this._searchPhrase}"
355
361
  .settings="${this.settings}"
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/search/search_types.d.ts CHANGED
@@ -87,6 +87,3 @@ export declare type THandleToggleHistoryAndResults = {
87
87
  shouldShowHistory: boolean;
88
88
  shouldShowResults: boolean;
89
89
  };
90
- export declare type TActiveItemChangeEventDetail = {
91
- activeItemId: number;
92
- };
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.d.ts CHANGED
@@ -8,13 +8,12 @@ export declare class HSearchHistory extends PhoenixLightLitElement {
8
8
  private _historyContext$;
9
9
  private _historyContextObserver;
10
10
  buttonRef: Ref<HSearchHistoryLoadMore>;
11
+ private _loadMoreButtonId;
11
12
  history: TSearchHistoryItem[];
12
13
  activeItemId: number;
13
14
  translations: Record<string, string>;
14
15
  moduleInstanceId: string;
15
16
  historyAriaLabel?: string;
16
17
  connectedCallback(): Promise<void>;
17
- private _handleActiveItemChange;
18
- disconnectedCallback(): void;
19
18
  protected render(): TemplateResult;
20
19
  }
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js CHANGED
@@ -7,21 +7,18 @@ 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';
10
11
  import { when as n } from '../../../../../../../../external/lit/external/lit-html/directives/when.js';
11
- import { SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
12
+ import { SEARCH_CONTEXT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
12
13
  import { repeat as c } from '../../../../../../../../external/lit/external/lit-html/directives/repeat.js';
13
14
 
14
15
  let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
15
16
  constructor() {
16
17
  super(...arguments);
17
18
  this.buttonRef = createRef();
19
+ this._loadMoreButtonId = v4();
18
20
  this.history = [];
19
21
  this.translations = {};
20
- this._handleActiveItemChange = (ev) => {
21
- const { activeItemId } = ev.detail;
22
- const $activeItem = this.querySelector(`[data-search-item-id="${activeItemId}"]`);
23
- $activeItem === null || $activeItem === void 0 ? void 0 : $activeItem.focus();
24
- };
25
22
  }
26
23
  async connectedCallback() {
27
24
  super.connectedCallback();
@@ -40,11 +37,6 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
40
37
  catch (_a) {
41
38
  console.error('Search context is not provided');
42
39
  }
43
- document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
44
- }
45
- disconnectedCallback() {
46
- super.disconnectedCallback();
47
- document.removeEventListener(SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
48
40
  }
49
41
  render() {
50
42
  var _a;
@@ -78,7 +70,11 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
78
70
  </li>`)}
79
71
  </ul>
80
72
 
81
- <h-search-history-load-more class="${SEARCH_CLASS_NAMES.historyLoadMore}" ${ref(this.buttonRef)}>
73
+ <h-search-history-load-more
74
+ class="${SEARCH_CLASS_NAMES.historyLoadMore}"
75
+ data-search-item-id="${this._loadMoreButtonId}"
76
+ ${ref(this.buttonRef)}
77
+ >
82
78
  ${this.translations.loadMore}
83
79
  </h-search-history-load-more>`);
84
80
  }
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,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;"}
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;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js CHANGED
@@ -33,6 +33,7 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
33
33
  : ''}"
34
34
  data-search-item-id="${this.initialItemIds.producers + index}"
35
35
  aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
36
+ tabindex="0"
36
37
  >
37
38
  <a
38
39
  href="${producer.url}"
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js CHANGED
@@ -46,6 +46,7 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
46
46
  : ''}"
47
47
  data-search-item-id="${this.initialItemIds.products + index}"
48
48
  aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
49
+ tabindex="0"
49
50
  >
50
51
  <a
51
52
  href="${product.url}"
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.d.ts CHANGED
@@ -2,6 +2,8 @@ import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
3
  import type { TSearchResults, TSearchSettings } from "../../search_types";
4
4
  export declare class HSearchResults extends PhoenixLightLitElement {
5
+ private _loadMoreButtonId;
6
+ private _goToProductsForButtonId;
5
7
  results: TSearchResults;
6
8
  searchPhrase: string;
7
9
  settings: TSearchSettings;
@@ -11,9 +13,6 @@ export declare class HSearchResults extends PhoenixLightLitElement {
11
13
  translations: Record<string, string>;
12
14
  moduleInstanceId: string;
13
15
  private _productPage;
14
- connectedCallback(): void;
15
- private _handleActiveItemChange;
16
- disconnectedCallback(): void;
17
16
  private _getInitialItemsIds;
18
17
  private _isProductInTheCategory;
19
18
  private _areSearchResultsNotEmpty;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED
@@ -3,6 +3,7 @@ import { html } from 'lit';
3
3
  import { property, state } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
6
+ import v4 from '../../../../../../../../external/uuid/dist/esm-browser/v4.js';
6
7
  import { when as n } from '../../../../../../../../external/lit/external/lit-html/directives/when.js';
7
8
  import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, EMPTY_SEARCH_RESULTS } from '../../search_constants.js';
8
9
  import isEqual_1 from '../../../../../../../../external/lodash/isEqual.js';
@@ -10,14 +11,11 @@ import isEqual_1 from '../../../../../../../../external/lodash/isEqual.js';
10
11
  let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
11
12
  constructor() {
12
13
  super(...arguments);
14
+ this._loadMoreButtonId = v4();
15
+ this._goToProductsForButtonId = v4();
13
16
  this.searchPhrase = '';
14
17
  this.translations = {};
15
18
  this._productPage = 1;
16
- this._handleActiveItemChange = (ev) => {
17
- const { activeItemId } = ev.detail;
18
- const $activeItem = this.querySelector(`[data-search-item-id="${activeItemId}"]`);
19
- $activeItem === null || $activeItem === void 0 ? void 0 : $activeItem.focus();
20
- };
21
19
  this._getInitialItemsIds = () => {
22
20
  const suggestionInCategoryInitialItemId = this.results.suggestions.length;
23
21
  const categoryInitialItemId = this._isProductInTheCategory() ? suggestionInCategoryInitialItemId + 1 : suggestionInCategoryInitialItemId;
@@ -31,14 +29,6 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
31
29
  };
32
30
  };
33
31
  }
34
- connectedCallback() {
35
- super.connectedCallback();
36
- document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
37
- }
38
- disconnectedCallback() {
39
- super.disconnectedCallback();
40
- document.removeEventListener(SEARCH_CUSTOM_EVENT_NAMES.activeItemChange, this._handleActiveItemChange);
41
- }
42
32
  _isProductInTheCategory() {
43
33
  return this.results.products.length && this.results.suggestions.length;
44
34
  }
@@ -99,10 +89,16 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
99
89
  class="${SEARCH_CLASS_NAMES.productButton}"
100
90
  @click="${this.handleLoadMoreProducts}"
101
91
  type="button"
92
+ data-search-item-id="${this._loadMoreButtonId}"
102
93
  >
103
94
  ${this.translations.loadMore}
104
95
  </button>`), () => html `
105
- <button class="${SEARCH_CLASS_NAMES.productButton}" @click="${this.handleGoToProductsFor}" type="button">
96
+ <button
97
+ class="${SEARCH_CLASS_NAMES.productButton}"
98
+ @click="${this.handleGoToProductsFor}"
99
+ type="button"
100
+ data-search-item-id="${this._goToProductsForButtonId}"
101
+ >
106
102
  ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
107
103
  </button>
108
104
  `)}
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,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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -109,6 +109,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
109
109
  data-suggested-value="${suggestion.suggestionName}"
110
110
  data-search-item-id="${index}"
111
111
  aria-label=${this.suggestionAriaLabel ? `${this.suggestionAriaLabel} ${suggestion.suggestionName}` : undefined}
112
+ tabindex="0"
112
113
  >
113
114
  ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
114
115
  <h-icon
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;"}
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;"}
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -96,9 +96,9 @@ export { HButtonStepper } from './components/form/input_stepper/button_stepper.j
96
96
  export { DEFAULT_VIEW, EMPTY_SEARCH_RESULTS, SCROLL_DIRECTIONS, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_PORTAL_DESTINATIONS, SEARCH_SLOT_NAMES, SUGGESTIONS_TYPE } from './components/form/search/search_constants.js';
97
97
  export { HSearchInput } from './components/form/search/subcomponents/input/search_input.js';
98
98
  export { HSearchResults } from './components/form/search/subcomponents/results/search_results.js';
99
- export { HSearch } from './components/form/search/search.js';
100
99
  export { HSearchHistoryLoadMore } from './components/form/search/subcomponents/history/search_history_load_more.js';
101
100
  export { HSearchHistory } from './components/form/search/subcomponents/history/search_history.js';
101
+ export { HSearch } from './components/form/search/search.js';
102
102
  export { HSearchSubmit } from './components/form/search/subcomponents/buttons/search_submit.js';
103
103
  export { HSearchClear } from './components/form/search/subcomponents/buttons/search_clear.js';
104
104
  export { HSearchClose } from './components/form/search/subcomponents/buttons/search_close.js';
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.7-3",
5
+ "version": "1.11.7-5",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",