@shoper/phoenix_design_system 1.17.16-0 → 1.17.16-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +12 -1
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -1
  4. package/build/cjs/packages/phoenix/src/components/form/search/search.js +21 -14
  5. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  7. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  8. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -1
  10. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  11. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  12. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +66 -3
  13. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  14. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +3 -1
  15. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  16. package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js +1 -14
  17. package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -0
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +12 -1
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -1
  22. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -3
  23. package/build/esm/packages/phoenix/src/components/form/search/search.js +21 -14
  24. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/form/search/search_types.d.ts +1 -0
  26. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +2 -0
  27. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  28. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  29. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +1 -1
  30. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -1
  31. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  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 +7 -0
  34. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +66 -3
  35. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  36. package/build/esm/packages/phoenix/src/components/sheet/sheet.js +3 -1
  37. package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  38. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.d.ts +0 -1
  39. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js +1 -14
  40. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -1
  41. package/build/esm/packages/phoenix/src/index.d.ts +1 -0
  42. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
+ var utilities = require('@dreamcommerce/utilities');
7
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
9
10
  var dropdown_constants = require('./dropdown_constants.js');
@@ -12,12 +13,22 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
12
13
  constructor() {
13
14
  super();
14
15
  this.name = '';
16
+ this._setupRole = () => {
17
+ const $focusableElements = utilities.UiDomUtils.getFocusableElements(this);
18
+ const role = $focusableElements.length < 2 ? 'dialog' : 'menu';
19
+ this.setAttribute('role', role);
20
+ if (role === 'menu') {
21
+ Array.from(this.children).forEach((element) => {
22
+ element.setAttribute('role', 'menuitem');
23
+ });
24
+ }
25
+ };
15
26
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
16
27
  }
17
28
  connectedCallback() {
18
29
  super.connectedCallback();
19
30
  this.classList.add(dropdown_constants.DROPDOWN_CSS_CLASSES.content);
20
- this.setAttribute('role', 'dialog');
31
+ this._setupRole();
21
32
  }
22
33
  };
23
34
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_toggler.js CHANGED
@@ -15,7 +15,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
15
15
  constructor() {
16
16
  super();
17
17
  this.name = '';
18
- this.ariaHasPopup = 'dialog';
18
+ this.ariaHasPopup = 'menu';
19
19
  this.ariaControls = '';
20
20
  this.role = 'button';
21
21
  this._setupTogglerAria = () => {
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -17,6 +17,7 @@ var context_provider_controller = require('../../../core/context/context_provide
17
17
  var global_constants = require('../../../global_constants.js');
18
18
  var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
19
19
  var modal_constants = require('../../modal/modal_constants.js');
20
+ var sheet_constants = require('../../sheet/sheet_constants.js');
20
21
  var when = require('../../../../../../external/lit-html/directives/when.js');
21
22
  var search_constants = require('./search_constants.js');
22
23
 
@@ -24,6 +25,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
24
25
  constructor() {
25
26
  super(...arguments);
26
27
  this.view = search_constants.DEFAULT_VIEW;
28
+ this.displayMode = 'dropdown';
27
29
  this._id = v4['default']();
28
30
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
29
31
  this._searchContentContainerId = v4['default']();
@@ -44,8 +46,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
44
46
  this._translations = {};
45
47
  this._containerRole = 'grid';
46
48
  this._bindKeys = (ev) => {
47
- if (this.popup) {
48
- this._bindPopupKeys(ev);
49
+ if (this.displayMode !== 'dropdown') {
50
+ this._bindOverlayKeys(ev);
49
51
  }
50
52
  else {
51
53
  this._bindDropdownKeys(ev);
@@ -116,11 +118,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
116
118
  break;
117
119
  }
118
120
  };
119
- this._bindPopupKeys = (ev) => {
121
+ this._bindOverlayKeys = (ev) => {
120
122
  switch (ev.key) {
121
123
  case 'Escape':
122
124
  ev.preventDefault();
123
- this.emitCustomEvent(modal_constants.MODAL_EVENTS.close);
125
+ const eventName = this.displayMode === 'popup' ? modal_constants.MODAL_EVENTS.close : sheet_constants.SHEET_EVENTS.close;
126
+ this.emitCustomEvent(eventName);
124
127
  const $search = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
125
128
  const $searchOpener = $search && $search.querySelector('[aria-haspopup="dialog"]');
126
129
  $searchOpener === null || $searchOpener === void 0 ? void 0 : $searchOpener.focus();
@@ -288,18 +291,22 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
288
291
  this._resetSearchView();
289
292
  };
290
293
  this._switchTypeOfSearchView = () => {
291
- if (!this._isSuggesterLayerVisible() && !this.popup)
294
+ var _a;
295
+ if (!this._isSuggesterLayerVisible() && this.displayMode === 'dropdown')
292
296
  return;
293
297
  if (window.innerWidth > global_constants.BREAKPOINTS.sm) {
294
298
  const hasBeenOpened = this.classList.contains(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
295
299
  this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
296
- if (hasBeenOpened && this.popup) {
300
+ if (hasBeenOpened && this.displayMode !== 'dropdown') {
297
301
  const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
298
- const $searchModal = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('h-modal');
299
- $searchModal === null || $searchModal === void 0 ? void 0 : $searchModal.open();
302
+ const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
303
+ const $overlay = this.querySelector(`[hidden][id="${searchOverlayTriggerName}"]`);
304
+ if (!searchOverlayTriggerName || !$overlay)
305
+ return;
306
+ $overlay === null || $overlay === void 0 ? void 0 : $overlay.open();
300
307
  }
301
308
  }
302
- else if (!this.popup) {
309
+ else if (this.displayMode === 'dropdown') {
303
310
  this._openMobileView();
304
311
  }
305
312
  };
@@ -415,7 +422,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
415
422
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(search_constants.SEARCH_CLASS_NAMES.outline);
416
423
  const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
417
424
  this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
418
- if (!this.popup) {
425
+ if (this.displayMode === 'dropdown') {
419
426
  document.addEventListener('keyup', this._handleSearchTabNavigation);
420
427
  }
421
428
  document.body.addEventListener('keydown', this._bindKeys);
@@ -551,7 +558,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
551
558
  this._setActiveItemId(`${this._id}-1`);
552
559
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
553
560
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
554
- if (!this.popup)
561
+ if (this.displayMode === 'dropdown')
555
562
  this._hideHistorySuggestionsAndResults();
556
563
  this._removeSearchKeyboardNavigation();
557
564
  }
@@ -653,9 +660,9 @@ tslib_es6.__decorate([
653
660
  tslib_es6.__metadata("design:type", String)
654
661
  ], exports.HSearch.prototype, "locale", void 0);
655
662
  tslib_es6.__decorate([
656
- decorators.property({ type: Boolean, attribute: 'popup' }),
657
- tslib_es6.__metadata("design:type", Boolean)
658
- ], exports.HSearch.prototype, "popup", void 0);
663
+ decorators.property({ type: String, attribute: 'display-mode' }),
664
+ tslib_es6.__metadata("design:type", String)
665
+ ], exports.HSearch.prototype, "displayMode", void 0);
659
666
  tslib_es6.__decorate([
660
667
  decorators.property({ type: String, attribute: 'module-instance-id' }),
661
668
  tslib_es6.__metadata("design:type", String)
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,iBAAiB,wDAA4D;AAC7E;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
+ require('lit');
6
7
  var decorators = require('lit/decorators');
7
8
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
9
  var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
@@ -32,10 +33,13 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
32
33
  if (!this.input) {
33
34
  throw new Error('Search input not found');
34
35
  }
35
- this._setupInitialValue();
36
36
  this._setupListeners();
37
37
  this._setupAttributes();
38
38
  }
39
+ firstUpdated(props) {
40
+ super.firstUpdated(props);
41
+ this._setupInitialValue();
42
+ }
39
43
  _setupInitialValue() {
40
44
  const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
41
45
  const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js CHANGED
@@ -37,7 +37,7 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
37
37
  : ''}"
38
38
  data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
39
39
  aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
40
- tabindex="0"
40
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
41
41
  role="option"
42
42
  >
43
43
  <a
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js CHANGED
@@ -50,7 +50,7 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
50
50
  : ''}"
51
51
  data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
52
52
  aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
53
- tabindex="0"
53
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
54
54
  role="option"
55
55
  >
56
56
  <a
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED
@@ -76,6 +76,10 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
76
76
  locale="${this.locale}"
77
77
  view="${this.view}"
78
78
  module-instance-id="${this.moduleInstanceId}"
79
+ search-phrase="${this.searchPhrase}"
80
+ .suggestions="${this.results.suggestions}"
81
+ .products="${this.results.products}"
82
+ .categories="${this.results.categories}"
79
83
  .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
80
84
  >
81
85
  </h-search-suggestion-content>`)}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,8DAAkE;AACrF;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,8DAAkE;AACrF;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -39,6 +39,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
39
39
  catch (_a) {
40
40
  console.error('Search context is not provided');
41
41
  }
42
+ this._setupSuggestionData2();
42
43
  }
43
44
  _setupSuggestionData(results) {
44
45
  let suggestionsData = [];
@@ -80,6 +81,51 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
80
81
  }
81
82
  this._suggestionsData = suggestionsData;
82
83
  }
84
+ _setupSuggestionData2() {
85
+ let suggestionsData = [];
86
+ if (this.suggestions.length) {
87
+ this.suggestions.forEach((suggestion, index) => {
88
+ suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
89
+ if (index)
90
+ return;
91
+ const isProductInTheCategory = this.products.length;
92
+ if (isProductInTheCategory) {
93
+ const lang = this.locale.split('_')[0];
94
+ suggestionsData.push({
95
+ suggestionName: suggestion,
96
+ categoryName: this.products[0].category.breadcrumbs,
97
+ type: search_constants.SUGGESTIONS_TYPE.suggestionInCategory,
98
+ url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
99
+ });
100
+ }
101
+ if (this.categories.length) {
102
+ suggestionsData = [
103
+ ...suggestionsData,
104
+ ...this.categories.map((category) => ({
105
+ categoryName: category.name,
106
+ url: category.url,
107
+ type: search_constants.SUGGESTIONS_TYPE.category
108
+ }))
109
+ ];
110
+ }
111
+ });
112
+ }
113
+ else if (this.categories.length) {
114
+ suggestionsData = [
115
+ ...this.categories.map((category) => ({
116
+ categoryName: category.name,
117
+ url: category.url,
118
+ type: search_constants.SUGGESTIONS_TYPE.category
119
+ }))
120
+ ];
121
+ }
122
+ this._suggestionsData = suggestionsData;
123
+ }
124
+ _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
125
+ if (ev.key !== 'Enter' && ev.key !== ' ')
126
+ return;
127
+ this._handleSuggestion(suggestion, suggestionType);
128
+ }
83
129
  _handleSuggestion(suggestion, suggestionType) {
84
130
  if (suggestionType !== search_constants.SUGGESTIONS_TYPE.suggestion)
85
131
  return;
@@ -94,10 +140,10 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
94
140
  });
95
141
  }
96
142
  _getMatchedPhrase(phrase) {
97
- const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
143
+ const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
98
144
  if (!phraseIncludesSearchPhrase)
99
145
  return lit.html `${phrase}`;
100
- const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
146
+ const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
101
147
  return lit.html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
102
148
  }
103
149
  render() {
@@ -107,6 +153,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
107
153
  <ul>
108
154
  ${repeat.repeat(this._suggestionsData, (suggestion, index) => lit.html `<li
109
155
  @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
156
+ @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
110
157
  class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
111
158
  ? search_constants.SEARCH_CLASS_NAMES.itemActive
112
159
  : ''}"
@@ -115,7 +162,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
115
162
  aria-label="${this.suggestionAriaLabel ?
116
163
  `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
117
164
  ''}"
118
- tabindex="0"
165
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
119
166
  role="option"
120
167
  >
121
168
  ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -166,6 +213,22 @@ tslib_es6.__decorate([
166
213
  decorators.property({ type: String, attribute: 'module-instance-id' }),
167
214
  tslib_es6.__metadata("design:type", String)
168
215
  ], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
216
+ tslib_es6.__decorate([
217
+ decorators.property({ type: String, attribute: 'search-phrase' }),
218
+ tslib_es6.__metadata("design:type", String)
219
+ ], exports.HSearchSuggestionContent.prototype, "searchPhrase", void 0);
220
+ tslib_es6.__decorate([
221
+ decorators.property({ type: Object }),
222
+ tslib_es6.__metadata("design:type", Array)
223
+ ], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
224
+ tslib_es6.__decorate([
225
+ decorators.property({ type: Object }),
226
+ tslib_es6.__metadata("design:type", Array)
227
+ ], exports.HSearchSuggestionContent.prototype, "products", void 0);
228
+ tslib_es6.__decorate([
229
+ decorators.property({ type: Object, attribute: false }),
230
+ tslib_es6.__metadata("design:type", Array)
231
+ ], exports.HSearchSuggestionContent.prototype, "categories", void 0);
169
232
  tslib_es6.__decorate([
170
233
  decorators.property({ type: String }),
171
234
  tslib_es6.__metadata("design:type", String)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,8DAAkE;AACrF;AACA,qBAAqB,gEAAoE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,8DAAkE;AACrF;AACA,qBAAqB,gEAAoE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/sheet/sheet.js CHANGED
@@ -199,7 +199,9 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
199
199
  });
200
200
  }
201
201
  _dispatchSheetOpenedEvent() {
202
- this.emitCustomEvent(sheet_constants.SHEET_EVENTS.opened);
202
+ this.emitCustomEvent(sheet_constants.SHEET_EVENTS.opened, {
203
+ detail: this
204
+ });
203
205
  this._backdropController.show();
204
206
  this._addInertToBodyChildrenElements();
205
207
  }
package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_button.js CHANGED
@@ -19,20 +19,9 @@ exports.HToggleBtn = class HToggleBtn extends phoenix_light_lit_element.PhoenixL
19
19
  this._visibility = {
20
20
  collapse: (isOpened) => {
21
21
  isOpened ? this._visibilityController.show() : this._visibilityController.hide();
22
- this._handleFocusOppositeToggleButtonIfLostFocus();
23
22
  },
24
23
  expand: (isOpened) => {
25
24
  isOpened ? this._visibilityController.hide() : this._visibilityController.show();
26
- this._handleFocusOppositeToggleButtonIfLostFocus();
27
- }
28
- };
29
- this._handleFocusOppositeToggleButtonIfLostFocus = () => {
30
- var _a;
31
- const shouldFocus = this === document.activeElement;
32
- const oppositeAction = this.action === toggle_constants.TOGGLE_ACTIONS.collapse ? toggle_constants.TOGGLE_ACTIONS.expand : toggle_constants.TOGGLE_ACTIONS.collapse;
33
- if (shouldFocus) {
34
- const $oppositeToggleBtn = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[action="${oppositeAction}"]`);
35
- $oppositeToggleBtn === null || $oppositeToggleBtn === void 0 ? void 0 : $oppositeToggleBtn.focus();
36
25
  }
37
26
  };
38
27
  this._dispatchToggleEvent = () => {
@@ -49,12 +38,10 @@ exports.HToggleBtn = class HToggleBtn extends phoenix_light_lit_element.PhoenixL
49
38
  this._visibility[this.action](isOpened);
50
39
  });
51
40
  this._opened$.subscribe(this._openedObserver);
52
- this.setAttribute('aria-expanded', this.action === toggle_constants.TOGGLE_ACTIONS.collapse ? 'true' : 'false');
53
41
  this.addEventListener('click', this._dispatchToggleEvent);
54
42
  }
55
43
  disconnectedCallback() {
56
- super.disconnectedCallback();
57
- this._openedObserver && this._opened$.unsubscribe(this._openedObserver);
44
+ this._opened$.unsubscribe(this._openedObserver);
58
45
  }
59
46
  };
60
47
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.d.ts CHANGED
@@ -3,4 +3,5 @@ export declare class HDropdownContent extends PhoenixLightLitElement {
3
3
  name: string;
4
4
  constructor();
5
5
  connectedCallback(): void;
6
+ private _setupRole;
6
7
  }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
+ import { UiDomUtils } from '@dreamcommerce/utilities';
3
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
5
6
  import { DROPDOWN_CSS_CLASSES } from './dropdown_constants.js';
@@ -8,12 +9,22 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
8
9
  constructor() {
9
10
  super();
10
11
  this.name = '';
12
+ this._setupRole = () => {
13
+ const $focusableElements = UiDomUtils.getFocusableElements(this);
14
+ const role = $focusableElements.length < 2 ? 'dialog' : 'menu';
15
+ this.setAttribute('role', role);
16
+ if (role === 'menu') {
17
+ Array.from(this.children).forEach((element) => {
18
+ element.setAttribute('role', 'menuitem');
19
+ });
20
+ }
21
+ };
11
22
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
12
23
  }
13
24
  connectedCallback() {
14
25
  super.connectedCallback();
15
26
  this.classList.add(DROPDOWN_CSS_CLASSES.content);
16
- this.setAttribute('role', 'dialog');
27
+ this._setupRole();
17
28
  }
18
29
  };
19
30
  __decorate([
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_toggler.js CHANGED
@@ -11,7 +11,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
11
11
  constructor() {
12
12
  super();
13
13
  this.name = '';
14
- this.ariaHasPopup = 'dialog';
14
+ this.ariaHasPopup = 'menu';
15
15
  this.ariaControls = '';
16
16
  this.role = 'button';
17
17
  this._setupTogglerAria = () => {
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
- import type { TSearchSettings } from "./search_types";
3
+ import type { TSearchDisplayMode, TSearchSettings } from "./search_types";
4
4
  export declare class HSearch extends PhoenixLightLitElement {
5
5
  settings: TSearchSettings;
6
6
  view: string;
7
7
  locale: string;
8
- popup: boolean;
8
+ displayMode: TSearchDisplayMode;
9
9
  moduleInstanceId: string;
10
10
  private _historyContextProvider;
11
11
  private _searchContextConsumer;
@@ -49,7 +49,7 @@ export declare class HSearch extends PhoenixLightLitElement {
49
49
  private _toggleSearchContainerAttributes;
50
50
  private _bindKeys;
51
51
  private _bindDropdownKeys;
52
- private _bindPopupKeys;
52
+ private _bindOverlayKeys;
53
53
  private _handleSearchTabNavigation;
54
54
  private _focusOnPreviousElementBeforeSearchInput;
55
55
  private _focusOnNextElementAfterSearchInput;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -13,6 +13,7 @@ import { ContextProviderController } from '../../../core/context/context_provide
13
13
  import { BREAKPOINTS } from '../../../global_constants.js';
14
14
  import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
15
15
  import { MODAL_EVENTS } from '../../modal/modal_constants.js';
16
+ import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
16
17
  import { when as n } from '../../../../../../external/lit-html/directives/when.js';
17
18
  import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
18
19
 
@@ -20,6 +21,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
20
21
  constructor() {
21
22
  super(...arguments);
22
23
  this.view = DEFAULT_VIEW;
24
+ this.displayMode = 'dropdown';
23
25
  this._id = v4();
24
26
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
25
27
  this._searchContentContainerId = v4();
@@ -40,8 +42,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
40
42
  this._translations = {};
41
43
  this._containerRole = 'grid';
42
44
  this._bindKeys = (ev) => {
43
- if (this.popup) {
44
- this._bindPopupKeys(ev);
45
+ if (this.displayMode !== 'dropdown') {
46
+ this._bindOverlayKeys(ev);
45
47
  }
46
48
  else {
47
49
  this._bindDropdownKeys(ev);
@@ -112,11 +114,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
112
114
  break;
113
115
  }
114
116
  };
115
- this._bindPopupKeys = (ev) => {
117
+ this._bindOverlayKeys = (ev) => {
116
118
  switch (ev.key) {
117
119
  case 'Escape':
118
120
  ev.preventDefault();
119
- this.emitCustomEvent(MODAL_EVENTS.close);
121
+ const eventName = this.displayMode === 'popup' ? MODAL_EVENTS.close : SHEET_EVENTS.close;
122
+ this.emitCustomEvent(eventName);
120
123
  const $search = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
121
124
  const $searchOpener = $search && $search.querySelector('[aria-haspopup="dialog"]');
122
125
  $searchOpener === null || $searchOpener === void 0 ? void 0 : $searchOpener.focus();
@@ -284,18 +287,22 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
284
287
  this._resetSearchView();
285
288
  };
286
289
  this._switchTypeOfSearchView = () => {
287
- if (!this._isSuggesterLayerVisible() && !this.popup)
290
+ var _a;
291
+ if (!this._isSuggesterLayerVisible() && this.displayMode === 'dropdown')
288
292
  return;
289
293
  if (window.innerWidth > BREAKPOINTS.sm) {
290
294
  const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
291
295
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
292
- if (hasBeenOpened && this.popup) {
296
+ if (hasBeenOpened && this.displayMode !== 'dropdown') {
293
297
  const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
294
- const $searchModal = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('h-modal');
295
- $searchModal === null || $searchModal === void 0 ? void 0 : $searchModal.open();
298
+ const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
299
+ const $overlay = this.querySelector(`[hidden][id="${searchOverlayTriggerName}"]`);
300
+ if (!searchOverlayTriggerName || !$overlay)
301
+ return;
302
+ $overlay === null || $overlay === void 0 ? void 0 : $overlay.open();
296
303
  }
297
304
  }
298
- else if (!this.popup) {
305
+ else if (this.displayMode === 'dropdown') {
299
306
  this._openMobileView();
300
307
  }
301
308
  };
@@ -411,7 +418,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
411
418
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(SEARCH_CLASS_NAMES.outline);
412
419
  const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
413
420
  this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
414
- if (!this.popup) {
421
+ if (this.displayMode === 'dropdown') {
415
422
  document.addEventListener('keyup', this._handleSearchTabNavigation);
416
423
  }
417
424
  document.body.addEventListener('keydown', this._bindKeys);
@@ -547,7 +554,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
547
554
  this._setActiveItemId(`${this._id}-1`);
548
555
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
549
556
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
550
- if (!this.popup)
557
+ if (this.displayMode === 'dropdown')
551
558
  this._hideHistorySuggestionsAndResults();
552
559
  this._removeSearchKeyboardNavigation();
553
560
  }
@@ -649,9 +656,9 @@ __decorate([
649
656
  __metadata("design:type", String)
650
657
  ], HSearch.prototype, "locale", void 0);
651
658
  __decorate([
652
- property({ type: Boolean, attribute: 'popup' }),
653
- __metadata("design:type", Boolean)
654
- ], HSearch.prototype, "popup", void 0);
659
+ property({ type: String, attribute: 'display-mode' }),
660
+ __metadata("design:type", String)
661
+ ], HSearch.prototype, "displayMode", void 0);
655
662
  __decorate([
656
663
  property({ type: String, attribute: 'module-instance-id' }),
657
664
  __metadata("design:type", String)
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,eAAe,wDAA4D;AAC3E;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -92,3 +92,4 @@ export declare type TSearchFocusInEventDetail = {
92
92
  searchPhrase: string;
93
93
  relatedTarget: EventTarget | null;
94
94
  };
95
+ export declare type TSearchDisplayMode = 'dropdown' | 'popup' | 'sidebar';
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ import { PropertyValues } from 'lit';
2
3
  export declare class HSearchInput extends PhoenixLightLitElement {
3
4
  input: HTMLInputElement | null;
4
5
  moduleInstanceId: string;
5
6
  private _isSearchPhraseCleared;
6
7
  connectedCallback(): void;
8
+ firstUpdated(props: PropertyValues): void;
7
9
  private _setupInitialValue;
8
10
  private _deserializeInputPhrase;
9
11
  private _setupListeners;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
2
+ import 'lit';
2
3
  import { property, state } from 'lit/decorators';
3
4
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
5
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
@@ -28,10 +29,13 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
28
29
  if (!this.input) {
29
30
  throw new Error('Search input not found');
30
31
  }
31
- this._setupInitialValue();
32
32
  this._setupListeners();
33
33
  this._setupAttributes();
34
34
  }
35
+ firstUpdated(props) {
36
+ super.firstUpdated(props);
37
+ this._setupInitialValue();
38
+ }
35
39
  _setupInitialValue() {
36
40
  const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
37
41
  const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js CHANGED
@@ -33,7 +33,7 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
33
33
  : ''}"
34
34
  data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
35
35
  aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
36
- tabindex="0"
36
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
37
37
  role="option"
38
38
  >
39
39
  <a
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js CHANGED
@@ -46,7 +46,7 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
46
46
  : ''}"
47
47
  data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
48
48
  aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
49
- tabindex="0"
49
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
50
50
  role="option"
51
51
  >
52
52
  <a
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js CHANGED
@@ -72,6 +72,10 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
72
72
  locale="${this.locale}"
73
73
  view="${this.view}"
74
74
  module-instance-id="${this.moduleInstanceId}"
75
+ search-phrase="${this.searchPhrase}"
76
+ .suggestions="${this.results.suggestions}"
77
+ .products="${this.results.products}"
78
+ .categories="${this.results.categories}"
75
79
  .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
76
80
  >
77
81
  </h-search-suggestion-content>`)}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
+ import type { TCategory, TProduct } from "../../search_types";
3
4
  export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
4
5
  private _searchContextConsumer;
5
6
  private _searchContext$;
@@ -11,11 +12,17 @@ export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
11
12
  view: string;
12
13
  locale: string;
13
14
  moduleInstanceId: string;
15
+ searchPhrase: string;
16
+ suggestions: string[];
17
+ products: TProduct[];
18
+ categories: TCategory[];
14
19
  suggestionAriaLabel?: string;
15
20
  private _searchPhrase;
16
21
  private _suggestionsData;
17
22
  connectedCallback(): Promise<void>;
18
23
  private _setupSuggestionData;
24
+ private _setupSuggestionData2;
25
+ private _handleSuggestionWithKeyboard;
19
26
  private _handleSuggestion;
20
27
  private _dispatchEventWithSearchPhrase;
21
28
  private _getMatchedPhrase;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -35,6 +35,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
35
35
  catch (_a) {
36
36
  console.error('Search context is not provided');
37
37
  }
38
+ this._setupSuggestionData2();
38
39
  }
39
40
  _setupSuggestionData(results) {
40
41
  let suggestionsData = [];
@@ -76,6 +77,51 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
76
77
  }
77
78
  this._suggestionsData = suggestionsData;
78
79
  }
80
+ _setupSuggestionData2() {
81
+ let suggestionsData = [];
82
+ if (this.suggestions.length) {
83
+ this.suggestions.forEach((suggestion, index) => {
84
+ suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
85
+ if (index)
86
+ return;
87
+ const isProductInTheCategory = this.products.length;
88
+ if (isProductInTheCategory) {
89
+ const lang = this.locale.split('_')[0];
90
+ suggestionsData.push({
91
+ suggestionName: suggestion,
92
+ categoryName: this.products[0].category.breadcrumbs,
93
+ type: SUGGESTIONS_TYPE.suggestionInCategory,
94
+ url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
95
+ });
96
+ }
97
+ if (this.categories.length) {
98
+ suggestionsData = [
99
+ ...suggestionsData,
100
+ ...this.categories.map((category) => ({
101
+ categoryName: category.name,
102
+ url: category.url,
103
+ type: SUGGESTIONS_TYPE.category
104
+ }))
105
+ ];
106
+ }
107
+ });
108
+ }
109
+ else if (this.categories.length) {
110
+ suggestionsData = [
111
+ ...this.categories.map((category) => ({
112
+ categoryName: category.name,
113
+ url: category.url,
114
+ type: SUGGESTIONS_TYPE.category
115
+ }))
116
+ ];
117
+ }
118
+ this._suggestionsData = suggestionsData;
119
+ }
120
+ _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
121
+ if (ev.key !== 'Enter' && ev.key !== ' ')
122
+ return;
123
+ this._handleSuggestion(suggestion, suggestionType);
124
+ }
79
125
  _handleSuggestion(suggestion, suggestionType) {
80
126
  if (suggestionType !== SUGGESTIONS_TYPE.suggestion)
81
127
  return;
@@ -90,10 +136,10 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
90
136
  });
91
137
  }
92
138
  _getMatchedPhrase(phrase) {
93
- const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
139
+ const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
94
140
  if (!phraseIncludesSearchPhrase)
95
141
  return html `${phrase}`;
96
- const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
142
+ const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
97
143
  return html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
98
144
  }
99
145
  render() {
@@ -103,6 +149,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
103
149
  <ul>
104
150
  ${c(this._suggestionsData, (suggestion, index) => html `<li
105
151
  @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
152
+ @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
106
153
  class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
107
154
  ? SEARCH_CLASS_NAMES.itemActive
108
155
  : ''}"
@@ -111,7 +158,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
111
158
  aria-label="${this.suggestionAriaLabel ?
112
159
  `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
113
160
  ''}"
114
- tabindex="0"
161
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
115
162
  role="option"
116
163
  >
117
164
  ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -162,6 +209,22 @@ __decorate([
162
209
  property({ type: String, attribute: 'module-instance-id' }),
163
210
  __metadata("design:type", String)
164
211
  ], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
212
+ __decorate([
213
+ property({ type: String, attribute: 'search-phrase' }),
214
+ __metadata("design:type", String)
215
+ ], HSearchSuggestionContent.prototype, "searchPhrase", void 0);
216
+ __decorate([
217
+ property({ type: Object }),
218
+ __metadata("design:type", Array)
219
+ ], HSearchSuggestionContent.prototype, "suggestions", void 0);
220
+ __decorate([
221
+ property({ type: Object }),
222
+ __metadata("design:type", Array)
223
+ ], HSearchSuggestionContent.prototype, "products", void 0);
224
+ __decorate([
225
+ property({ type: Object, attribute: false }),
226
+ __metadata("design:type", Array)
227
+ ], HSearchSuggestionContent.prototype, "categories", void 0);
165
228
  __decorate([
166
229
  property({ type: String }),
167
230
  __metadata("design:type", String)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/sheet/sheet.js CHANGED
@@ -195,7 +195,9 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
195
195
  });
196
196
  }
197
197
  _dispatchSheetOpenedEvent() {
198
- this.emitCustomEvent(SHEET_EVENTS.opened);
198
+ this.emitCustomEvent(SHEET_EVENTS.opened, {
199
+ detail: this
200
+ });
199
201
  this._backdropController.show();
200
202
  this._addInertToBodyChildrenElements();
201
203
  }
package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_button.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare class HToggleBtn extends PhoenixLightLitElement {
8
8
  action: "collapse";
9
9
  private _visibility;
10
10
  constructor();
11
- private _handleFocusOppositeToggleButtonIfLostFocus;
12
11
  connectedCallback(): Promise<void>;
13
12
  disconnectedCallback(): void;
14
13
  private _dispatchToggleEvent;
package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js CHANGED
@@ -15,20 +15,9 @@ let HToggleBtn = class HToggleBtn extends PhoenixLightLitElement {
15
15
  this._visibility = {
16
16
  collapse: (isOpened) => {
17
17
  isOpened ? this._visibilityController.show() : this._visibilityController.hide();
18
- this._handleFocusOppositeToggleButtonIfLostFocus();
19
18
  },
20
19
  expand: (isOpened) => {
21
20
  isOpened ? this._visibilityController.hide() : this._visibilityController.show();
22
- this._handleFocusOppositeToggleButtonIfLostFocus();
23
- }
24
- };
25
- this._handleFocusOppositeToggleButtonIfLostFocus = () => {
26
- var _a;
27
- const shouldFocus = this === document.activeElement;
28
- const oppositeAction = this.action === TOGGLE_ACTIONS.collapse ? TOGGLE_ACTIONS.expand : TOGGLE_ACTIONS.collapse;
29
- if (shouldFocus) {
30
- const $oppositeToggleBtn = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[action="${oppositeAction}"]`);
31
- $oppositeToggleBtn === null || $oppositeToggleBtn === void 0 ? void 0 : $oppositeToggleBtn.focus();
32
21
  }
33
22
  };
34
23
  this._dispatchToggleEvent = () => {
@@ -45,12 +34,10 @@ let HToggleBtn = class HToggleBtn extends PhoenixLightLitElement {
45
34
  this._visibility[this.action](isOpened);
46
35
  });
47
36
  this._opened$.subscribe(this._openedObserver);
48
- this.setAttribute('aria-expanded', this.action === TOGGLE_ACTIONS.collapse ? 'true' : 'false');
49
37
  this.addEventListener('click', this._dispatchToggleEvent);
50
38
  }
51
39
  disconnectedCallback() {
52
- super.disconnectedCallback();
53
- this._openedObserver && this._opened$.unsubscribe(this._openedObserver);
40
+ this._opened$.unsubscribe(this._openedObserver);
54
41
  }
55
42
  };
56
43
  __decorate([
package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -133,6 +133,7 @@ export { HSearchHistoryLoadMore } from './components/form/search/subcomponents/h
133
133
  export { HSearchSuggestionContent } from './components/form/search/subcomponents/results/search_suggestion_content';
134
134
  export { HSearchProductContent } from './components/form/search/subcomponents/results/search_product_content';
135
135
  export { HSearchProducerContent } from './components/form/search/subcomponents/results/search_producer_content';
136
+ export type { TSearchDisplayMode } from './components/form/search/search_types';
136
137
  export * from './components/form/search/search_constants';
137
138
  export { HToggle } from './components/toggle/toggle';
138
139
  export { HToggleBtn } from './components/toggle/toggle_button';
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.17.16-0",
5
+ "version": "1.17.16-10",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",