@shoper/phoenix_design_system 1.17.16-2 → 1.17.16-4

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 (24) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +21 -14
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  4. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  8. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +36 -37
  10. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -3
  12. package/build/esm/packages/phoenix/src/components/form/search/search.js +21 -14
  13. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +2 -0
  15. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +5 -1
  16. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -1
  19. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +4 -0
  20. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts +6 -5
  22. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +36 -37
  23. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
  24. package/package.json +1 -1
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=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
40
+ tabindex="0"
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=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
53
+ tabindex="0"
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
@@ -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
  : ''}"
@@ -115,7 +106,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
115
106
  aria-label="${this.suggestionAriaLabel ?
116
107
  `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
117
108
  ''}"
118
- tabindex="0"
109
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
119
110
  role="option"
120
111
  >
121
112
  ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -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)
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,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;"}
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/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=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
36
+ tabindex="0"
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=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
49
+ tabindex="0"
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,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;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js CHANGED
@@ -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
  : ''}"
@@ -111,7 +102,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
111
102
  aria-label="${this.suggestionAriaLabel ?
112
103
  `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
113
104
  ''}"
114
- tabindex="0"
105
+ tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
115
106
  role="option"
116
107
  >
117
108
  ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -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)
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,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;"}
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-2",
5
+ "version": "1.17.16-4",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",