@shoper/phoenix_design_system 1.17.16-5 → 1.17.16-7

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 (40) 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_results.js +4 -0
  9. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  10. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +35 -36
  11. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  12. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +3 -1
  13. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  14. package/build/cjs/packages/phoenix/src/components/slider/slider.js +3 -3
  15. package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js +1 -14
  16. package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -0
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +12 -1
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -1
  21. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -3
  22. package/build/esm/packages/phoenix/src/components/form/search/search.js +21 -14
  23. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  24. package/build/esm/packages/phoenix/src/components/form/search/search_types.d.ts +1 -0
  25. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +2 -0
  26. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  27. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  29. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  30. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts +6 -5
  31. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +35 -36
  32. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  33. package/build/esm/packages/phoenix/src/components/sheet/sheet.js +3 -1
  34. package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  35. package/build/esm/packages/phoenix/src/components/slider/slider.js +3 -3
  36. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.d.ts +0 -1
  37. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js +1 -14
  38. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -1
  39. package/build/esm/packages/phoenix/src/index.d.ts +1 -0
  40. package/package.json +2 -2
@@ -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([
@@ -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;"}
@@ -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 = () => {
@@ -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)
@@ -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;"}
@@ -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);
@@ -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;"}
@@ -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>`)}
@@ -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;"}
@@ -7,8 +7,6 @@ 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 observer = require('../../../../../core/classes/observer/observer.js');
11
- var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
12
10
  var when = require('../../../../../../../../external/lit-html/directives/when.js');
13
11
  var search_constants = require('../../search_constants.js');
14
12
  var repeat = require('../../../../../../../../external/lit-html/directives/repeat.js');
@@ -16,9 +14,7 @@ var repeat = require('../../../../../../../../external/lit-html/directives/repea
16
14
  exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
17
15
  constructor() {
18
16
  super(...arguments);
19
- this.initialItemIds = {};
20
17
  this.translations = {};
21
- this._searchPhrase = '';
22
18
  this._suggestionsData = [];
23
19
  this._updateSearchPhrase = (ev, suggestion) => {
24
20
  ev.stopPropagation();
@@ -27,40 +23,29 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
27
23
  }
28
24
  async connectedCallback() {
29
25
  super.connectedCallback();
30
- try {
31
- this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
32
- this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
33
- this._searchContextObserver = new observer.Observer((searchData) => {
34
- this._searchPhrase = searchData.searchPhrase;
35
- this._setupSuggestionData(searchData.results);
36
- });
37
- this._searchContext$.subscribe(this._searchContextObserver);
38
- }
39
- catch (_a) {
40
- console.error('Search context is not provided');
41
- }
26
+ this._setupSuggestionData();
42
27
  }
43
- _setupSuggestionData(results) {
28
+ _setupSuggestionData() {
44
29
  let suggestionsData = [];
45
- if (results.suggestions.length) {
46
- results.suggestions.forEach((suggestion, index) => {
30
+ if (this.suggestions.length) {
31
+ this.suggestions.forEach((suggestion, index) => {
47
32
  suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
48
33
  if (index)
49
34
  return;
50
- const isProductInTheCategory = results.products.length;
35
+ const isProductInTheCategory = this.products.length;
51
36
  if (isProductInTheCategory) {
52
37
  const lang = this.locale.split('_')[0];
53
38
  suggestionsData.push({
54
39
  suggestionName: suggestion,
55
- categoryName: results.products[0].category.breadcrumbs,
40
+ categoryName: this.products[0].category.breadcrumbs,
56
41
  type: search_constants.SUGGESTIONS_TYPE.suggestionInCategory,
57
- url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
42
+ url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
58
43
  });
59
44
  }
60
- if (results.categories.length) {
45
+ if (this.categories.length) {
61
46
  suggestionsData = [
62
47
  ...suggestionsData,
63
- ...results.categories.map((category) => ({
48
+ ...this.categories.map((category) => ({
64
49
  categoryName: category.name,
65
50
  url: category.url,
66
51
  type: search_constants.SUGGESTIONS_TYPE.category
@@ -69,9 +54,9 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
69
54
  }
70
55
  });
71
56
  }
72
- else if (results.categories.length) {
57
+ else if (this.categories.length) {
73
58
  suggestionsData = [
74
- ...results.categories.map((category) => ({
59
+ ...this.categories.map((category) => ({
75
60
  categoryName: category.name,
76
61
  url: category.url,
77
62
  type: search_constants.SUGGESTIONS_TYPE.category
@@ -80,6 +65,11 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
80
65
  }
81
66
  this._suggestionsData = suggestionsData;
82
67
  }
68
+ _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
69
+ if (ev.key !== 'Enter' && ev.key !== ' ')
70
+ return;
71
+ this._handleSuggestion(suggestion, suggestionType);
72
+ }
83
73
  _handleSuggestion(suggestion, suggestionType) {
84
74
  if (suggestionType !== search_constants.SUGGESTIONS_TYPE.suggestion)
85
75
  return;
@@ -94,10 +84,10 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
94
84
  });
95
85
  }
96
86
  _getMatchedPhrase(phrase) {
97
- const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
87
+ const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
98
88
  if (!phraseIncludesSearchPhrase)
99
89
  return lit.html `${phrase}`;
100
- const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
90
+ const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
101
91
  return lit.html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
102
92
  }
103
93
  render() {
@@ -107,6 +97,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
107
97
  <ul>
108
98
  ${repeat.repeat(this._suggestionsData, (suggestion, index) => lit.html `<li
109
99
  @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
100
+ @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
110
101
  class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
111
102
  ? search_constants.SEARCH_CLASS_NAMES.itemActive
112
103
  : ''}"
@@ -146,10 +137,6 @@ tslib_es6.__decorate([
146
137
  decorators.property({ type: String, attribute: 'search-id' }),
147
138
  tslib_es6.__metadata("design:type", String)
148
139
  ], exports.HSearchSuggestionContent.prototype, "searchId", void 0);
149
- tslib_es6.__decorate([
150
- decorators.property({ type: Object, reflect: true }),
151
- tslib_es6.__metadata("design:type", Object)
152
- ], exports.HSearchSuggestionContent.prototype, "initialItemIds", void 0);
153
140
  tslib_es6.__decorate([
154
141
  decorators.property({ type: Object }),
155
142
  tslib_es6.__metadata("design:type", Object)
@@ -167,13 +154,25 @@ tslib_es6.__decorate([
167
154
  tslib_es6.__metadata("design:type", String)
168
155
  ], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
169
156
  tslib_es6.__decorate([
170
- decorators.property({ type: String }),
157
+ decorators.property({ type: String, attribute: 'search-phrase' }),
171
158
  tslib_es6.__metadata("design:type", String)
172
- ], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
159
+ ], exports.HSearchSuggestionContent.prototype, "searchPhrase", void 0);
173
160
  tslib_es6.__decorate([
174
- decorators.state(),
161
+ decorators.property({ type: Object }),
162
+ tslib_es6.__metadata("design:type", Array)
163
+ ], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
164
+ tslib_es6.__decorate([
165
+ decorators.property({ type: Object }),
166
+ tslib_es6.__metadata("design:type", Array)
167
+ ], exports.HSearchSuggestionContent.prototype, "products", void 0);
168
+ tslib_es6.__decorate([
169
+ decorators.property({ type: Object, attribute: false }),
170
+ tslib_es6.__metadata("design:type", Array)
171
+ ], exports.HSearchSuggestionContent.prototype, "categories", void 0);
172
+ tslib_es6.__decorate([
173
+ decorators.property({ type: String }),
175
174
  tslib_es6.__metadata("design:type", String)
176
- ], exports.HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
175
+ ], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
177
176
  tslib_es6.__decorate([
178
177
  decorators.state(),
179
178
  tslib_es6.__metadata("design:type", Array)
@@ -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,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;"}
@@ -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
  }
@@ -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;"}
@@ -34,11 +34,11 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
34
34
  if ($focusableSlideChildren.length === 0)
35
35
  return;
36
36
  const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
37
- $focusableSlideChildren.forEach(($element) => updateFocusability($element));
37
+ $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
38
38
  };
39
39
  this._scanMutationsForNewFocusableElements = (mutationList) => {
40
40
  for (const mutation of mutationList) {
41
- if (mutation.type !== 'childList')
41
+ if (mutation.type !== "childList")
42
42
  continue;
43
43
  const $target = mutation.target;
44
44
  const isFocusable = utilities.UiDomUtils.isFocusable($target);
@@ -68,7 +68,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
68
68
  if (this.settings) {
69
69
  this._settings = (_a = utilities.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
70
70
  }
71
- this._slider = new splide_esm.Splide(this, this._settings);
71
+ this._slider = new splide_esm.Splide(`#${this.id}`, this._settings);
72
72
  if (this._settings.mountOnConnectedCallback) {
73
73
  this._slider.mount();
74
74
  }
@@ -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([
@@ -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;"}
@@ -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
  }
@@ -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([
@@ -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;"}
@@ -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 = () => {
@@ -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;
@@ -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)
@@ -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;"}
@@ -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';
@@ -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;
@@ -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);
@@ -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;"}
@@ -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>`)}
@@ -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;"}
@@ -1,21 +1,22 @@
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
- private _searchContextConsumer;
5
- private _searchContext$;
6
- private _searchContextObserver;
7
5
  activeItemId: string;
8
6
  searchId: string;
9
- initialItemIds: Record<string, number>;
10
7
  translations: Record<string, string>;
11
8
  view: string;
12
9
  locale: string;
13
10
  moduleInstanceId: string;
11
+ searchPhrase: string;
12
+ suggestions: string[];
13
+ products: TProduct[];
14
+ categories: TCategory[];
14
15
  suggestionAriaLabel?: string;
15
- private _searchPhrase;
16
16
  private _suggestionsData;
17
17
  connectedCallback(): Promise<void>;
18
18
  private _setupSuggestionData;
19
+ private _handleSuggestionWithKeyboard;
19
20
  private _handleSuggestion;
20
21
  private _dispatchEventWithSearchPhrase;
21
22
  private _getMatchedPhrase;
@@ -3,8 +3,6 @@ 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 { Observer } from '../../../../../core/classes/observer/observer.js';
7
- import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
8
6
  import { when as n } from '../../../../../../../../external/lit-html/directives/when.js';
9
7
  import { SEARCH_CUSTOM_EVENT_NAMES, SUGGESTIONS_TYPE, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
10
8
  import { repeat as c } from '../../../../../../../../external/lit-html/directives/repeat.js';
@@ -12,9 +10,7 @@ import { repeat as c } from '../../../../../../../../external/lit-html/directive
12
10
  let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLightLitElement {
13
11
  constructor() {
14
12
  super(...arguments);
15
- this.initialItemIds = {};
16
13
  this.translations = {};
17
- this._searchPhrase = '';
18
14
  this._suggestionsData = [];
19
15
  this._updateSearchPhrase = (ev, suggestion) => {
20
16
  ev.stopPropagation();
@@ -23,40 +19,29 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
23
19
  }
24
20
  async connectedCallback() {
25
21
  super.connectedCallback();
26
- try {
27
- this._searchContextConsumer = new ContextConsumerController(this);
28
- this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
29
- this._searchContextObserver = new Observer((searchData) => {
30
- this._searchPhrase = searchData.searchPhrase;
31
- this._setupSuggestionData(searchData.results);
32
- });
33
- this._searchContext$.subscribe(this._searchContextObserver);
34
- }
35
- catch (_a) {
36
- console.error('Search context is not provided');
37
- }
22
+ this._setupSuggestionData();
38
23
  }
39
- _setupSuggestionData(results) {
24
+ _setupSuggestionData() {
40
25
  let suggestionsData = [];
41
- if (results.suggestions.length) {
42
- results.suggestions.forEach((suggestion, index) => {
26
+ if (this.suggestions.length) {
27
+ this.suggestions.forEach((suggestion, index) => {
43
28
  suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
44
29
  if (index)
45
30
  return;
46
- const isProductInTheCategory = results.products.length;
31
+ const isProductInTheCategory = this.products.length;
47
32
  if (isProductInTheCategory) {
48
33
  const lang = this.locale.split('_')[0];
49
34
  suggestionsData.push({
50
35
  suggestionName: suggestion,
51
- categoryName: results.products[0].category.breadcrumbs,
36
+ categoryName: this.products[0].category.breadcrumbs,
52
37
  type: SUGGESTIONS_TYPE.suggestionInCategory,
53
- url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
38
+ url: `/${lang}/c/${this.products[0].category.name}/${this.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
54
39
  });
55
40
  }
56
- if (results.categories.length) {
41
+ if (this.categories.length) {
57
42
  suggestionsData = [
58
43
  ...suggestionsData,
59
- ...results.categories.map((category) => ({
44
+ ...this.categories.map((category) => ({
60
45
  categoryName: category.name,
61
46
  url: category.url,
62
47
  type: SUGGESTIONS_TYPE.category
@@ -65,9 +50,9 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
65
50
  }
66
51
  });
67
52
  }
68
- else if (results.categories.length) {
53
+ else if (this.categories.length) {
69
54
  suggestionsData = [
70
- ...results.categories.map((category) => ({
55
+ ...this.categories.map((category) => ({
71
56
  categoryName: category.name,
72
57
  url: category.url,
73
58
  type: SUGGESTIONS_TYPE.category
@@ -76,6 +61,11 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
76
61
  }
77
62
  this._suggestionsData = suggestionsData;
78
63
  }
64
+ _handleSuggestionWithKeyboard(ev, suggestion, suggestionType) {
65
+ if (ev.key !== 'Enter' && ev.key !== ' ')
66
+ return;
67
+ this._handleSuggestion(suggestion, suggestionType);
68
+ }
79
69
  _handleSuggestion(suggestion, suggestionType) {
80
70
  if (suggestionType !== SUGGESTIONS_TYPE.suggestion)
81
71
  return;
@@ -90,10 +80,10 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
90
80
  });
91
81
  }
92
82
  _getMatchedPhrase(phrase) {
93
- const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
83
+ const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.searchPhrase);
94
84
  if (!phraseIncludesSearchPhrase)
95
85
  return html `${phrase}`;
96
- const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
86
+ const index = phrase.toLowerCase().indexOf(this.searchPhrase) + this.searchPhrase.length;
97
87
  return html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
98
88
  }
99
89
  render() {
@@ -103,6 +93,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
103
93
  <ul>
104
94
  ${c(this._suggestionsData, (suggestion, index) => html `<li
105
95
  @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
96
+ @keydown=${(ev) => this._handleSuggestionWithKeyboard(ev, suggestion.suggestionName, suggestion.type)}
106
97
  class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
107
98
  ? SEARCH_CLASS_NAMES.itemActive
108
99
  : ''}"
@@ -142,10 +133,6 @@ __decorate([
142
133
  property({ type: String, attribute: 'search-id' }),
143
134
  __metadata("design:type", String)
144
135
  ], HSearchSuggestionContent.prototype, "searchId", void 0);
145
- __decorate([
146
- property({ type: Object, reflect: true }),
147
- __metadata("design:type", Object)
148
- ], HSearchSuggestionContent.prototype, "initialItemIds", void 0);
149
136
  __decorate([
150
137
  property({ type: Object }),
151
138
  __metadata("design:type", Object)
@@ -163,13 +150,25 @@ __decorate([
163
150
  __metadata("design:type", String)
164
151
  ], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
165
152
  __decorate([
166
- property({ type: String }),
153
+ property({ type: String, attribute: 'search-phrase' }),
167
154
  __metadata("design:type", String)
168
- ], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
155
+ ], HSearchSuggestionContent.prototype, "searchPhrase", void 0);
169
156
  __decorate([
170
- state(),
157
+ property({ type: Object }),
158
+ __metadata("design:type", Array)
159
+ ], HSearchSuggestionContent.prototype, "suggestions", void 0);
160
+ __decorate([
161
+ property({ type: Object }),
162
+ __metadata("design:type", Array)
163
+ ], HSearchSuggestionContent.prototype, "products", void 0);
164
+ __decorate([
165
+ property({ type: Object, attribute: false }),
166
+ __metadata("design:type", Array)
167
+ ], HSearchSuggestionContent.prototype, "categories", void 0);
168
+ __decorate([
169
+ property({ type: String }),
171
170
  __metadata("design:type", String)
172
- ], HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
171
+ ], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
173
172
  __decorate([
174
173
  state(),
175
174
  __metadata("design:type", Array)
@@ -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,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;"}
@@ -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
  }
@@ -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;"}
@@ -30,11 +30,11 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
30
30
  if ($focusableSlideChildren.length === 0)
31
31
  return;
32
32
  const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
33
- $focusableSlideChildren.forEach(($element) => updateFocusability($element));
33
+ $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
34
34
  };
35
35
  this._scanMutationsForNewFocusableElements = (mutationList) => {
36
36
  for (const mutation of mutationList) {
37
- if (mutation.type !== 'childList')
37
+ if (mutation.type !== "childList")
38
38
  continue;
39
39
  const $target = mutation.target;
40
40
  const isFocusable = UiDomUtils.isFocusable($target);
@@ -64,7 +64,7 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
64
64
  if (this.settings) {
65
65
  this._settings = (_a = JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
66
66
  }
67
- this._slider = new Splide(this, this._settings);
67
+ this._slider = new Splide(`#${this.id}`, this._settings);
68
68
  if (this._settings.mountOnConnectedCallback) {
69
69
  this._slider.mount();
70
70
  }
@@ -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;
@@ -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([
@@ -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;"}
@@ -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-5",
5
+ "version": "1.17.16-7",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -19,7 +19,7 @@
19
19
  "npm": ">=6"
20
20
  },
21
21
  "scripts": {
22
- "storybook": "start-storybook --no-open --port 6007",
22
+ "storybook": "NODE_OPTIONS=--openssl-legacy-provider && start-storybook --no-open --port 6007",
23
23
  "build": "rimraf ./build/ && tsc --project tsconfig.build.json && rollup --config rollup.config.js",
24
24
  "watch": "rollup --config rollup.config.js --watch",
25
25
  "tests:unit": "jest --max-workers=1 -c .config/jest/jest.config.js",