@shoper/phoenix_design_system 1.18.10 → 1.18.11-0

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 (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +36 -56
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/modal/modal.js +14 -5
  4. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -3
  6. package/build/esm/packages/phoenix/src/components/form/search/search.js +36 -56
  7. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +1 -0
  9. package/build/esm/packages/phoenix/src/components/modal/modal.js +14 -5
  10. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -8,7 +8,6 @@ var decorators = require('lit/decorators');
8
8
  var utilities = require('@dreamcommerce/utilities');
9
9
  var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
10
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
11
- var icon_constants = require('../../icon/icon_constants.js');
12
11
  var observer = require('../../../core/classes/observer/observer.js');
13
12
  var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
14
13
  var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
@@ -27,13 +26,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
27
26
  this.view = search_constants.DEFAULT_VIEW;
28
27
  this.isDevSearchPopupFixesFlagEnabled = false;
29
28
  this.displayMode = 'dropdown';
29
+ this._togglerElement = null;
30
30
  this._id = v4['default']();
31
- this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
32
31
  this._searchContentContainerId = v4['default']();
33
32
  this._searchResultsRef = ref_js.createRef();
34
33
  this._searchHistoryRef = ref_js.createRef();
35
34
  this._searchMessageRef = ref_js.createRef();
36
- this._openSearchButtonLabelRef = ref_js.createRef();
37
35
  this._shouldShowHistory = false;
38
36
  this._shouldShowResults = false;
39
37
  this._shouldShowMessage = false;
@@ -171,8 +169,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
171
169
  };
172
170
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
173
171
  var _a;
174
- const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
175
- const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
172
+ const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
173
+ const hasHomeOrEndBeenPressed = ev.key === 'Home' || ev.key === 'End';
176
174
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
177
175
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
178
176
  ev.preventDefault();
@@ -245,12 +243,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
245
243
  this._handleBackwardFocus($gridSearchItems);
246
244
  };
247
245
  this._findSearchItemsContainer = () => {
248
- const containers = [
249
- this._searchHistoryRef.value,
250
- this._searchResultsRef.value,
251
- this._searchMessageRef.value
252
- ];
253
- return containers.find(container => container && !utilities.UiDomUtils.isElementEmpty(container));
246
+ const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
247
+ return containers.find((container) => container && !utilities.UiDomUtils.isElementEmpty(container));
254
248
  };
255
249
  this._handleBackwardFocus = ($searchItems) => {
256
250
  var _a;
@@ -347,11 +341,20 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
347
341
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
348
342
  }
349
343
  };
350
- this._setupAriaAttributes = () => {
351
- var _a;
352
- if (this._translations.openSearchButtonAriaLabel) {
353
- (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
354
- }
344
+ this._handleOpenSearch = () => {
345
+ this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
346
+ const shouldShowMessage = this._searchPhrase !== '';
347
+ this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
348
+ const $searchInput = this.querySelector(`
349
+ ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
350
+ `);
351
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
352
+ };
353
+ this._handleOpenSearchWithKeyboard = (ev) => {
354
+ if (ev.code !== 'Enter')
355
+ return;
356
+ ev.preventDefault();
357
+ this._handleOpenSearch();
355
358
  };
356
359
  }
357
360
  async connectedCallback() {
@@ -388,7 +391,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
388
391
  this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
389
392
  this._setupInitialSearchPhrase();
390
393
  this._setupListeners();
391
- this._setupAriaAttributes();
394
+ this._setupToggler();
392
395
  }
393
396
  disconnectedCallback() {
394
397
  var _a;
@@ -398,6 +401,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
398
401
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
399
402
  window.removeEventListener('resize', this._switchTypeOfSearchView);
400
403
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
404
+ this._teardownToggler();
401
405
  }
402
406
  _setupContext() {
403
407
  this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -555,7 +559,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
555
559
  }
556
560
  }
557
561
  _handleChooseSearchItem($el) {
558
- const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
562
+ const $activeSearchItem = this.displayMode === 'dropdown'
563
+ ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
564
+ : document.activeElement;
559
565
  if (!$activeSearchItem)
560
566
  return;
561
567
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -580,49 +586,24 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
580
586
  _submitSearchPhrase(searchPhrase) {
581
587
  this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
582
588
  }
583
- _handleOpenSearch() {
584
- this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
585
- const shouldShowMessage = this._searchPhrase !== '';
586
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
587
- const $searchInput = this.querySelector(`
588
- ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
589
- `);
590
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
589
+ _setupToggler() {
590
+ this._togglerElement = this.querySelector('.js-search-toggler');
591
+ if (!this._togglerElement)
592
+ return;
593
+ this._togglerElement.addEventListener('click', this._handleOpenSearch);
594
+ this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
591
595
  }
592
- _handleOpenSearchWithKeyboard(ev) {
593
- if (ev.code !== 'Enter')
596
+ _teardownToggler() {
597
+ if (!this._togglerElement)
594
598
  return;
595
- ev.preventDefault();
596
- this._handleOpenSearch();
599
+ this._togglerElement.removeEventListener('click', this._handleOpenSearch);
600
+ this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
597
601
  }
598
602
  render() {
599
603
  super.render();
600
604
  return lit.html `
601
- <div
602
- class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
603
- tabindex="0"
604
- aria-haspopup="dialog"
605
- @click=${this._handleOpenSearch}
606
- @keyup=${this._handleOpenSearchWithKeyboard}
607
- >
608
- ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
609
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
610
- ${this._translations.openSearchButtonAriaLabel}
611
- </span>
612
- `)}
613
- <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
614
- <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
615
- ${this._translations.search}
616
- </div>
617
- </div>
618
-
619
-
620
605
  ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
621
- <div
622
- class="${search_constants.SEARCH_CLASS_NAMES.container}"
623
- id="${this._searchContentContainerId}"
624
- role="${this._containerRole}"
625
- >
606
+ <div class="${search_constants.SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
626
607
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
627
608
  ${ref_js.ref(this._searchMessageRef)}
628
609
  .history="${this._historyLimitedContent}"
@@ -653,8 +634,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
653
634
  ?is-dev-search-popup-fixes-flag-enabled=${this.isDevSearchPopupFixesFlagEnabled}
654
635
  ></h-search-results>`)}
655
636
  </div>
656
- `, () => lit.html `
657
- <div
637
+ `, () => lit.html ` <div
658
638
  class="${search_constants.SEARCH_CLASS_NAMES.container}"
659
639
  id="${this._searchContentContainerId}"
660
640
  role="${this._containerRole}"
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;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;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,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;AACA;"}
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -24,6 +24,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
24
24
  this.class = '';
25
25
  this.transition = 'scale';
26
26
  this.modalLabel = '';
27
+ this.noAutofocus = false;
27
28
  this._firstFocusableElement = undefined;
28
29
  this._focusableElements = null;
29
30
  this._lastFocusableElement = undefined;
@@ -39,11 +40,13 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
39
40
  document.addEventListener('keydown', this._bindCloseOnEsc);
40
41
  document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
41
42
  this._dispatchModalOpenedEvent();
42
- setTimeout(() => {
43
- var _a;
44
- (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
45
- window.scrollTo(0, scrollY);
46
- }, 0);
43
+ if (!this.noAutofocus) {
44
+ setTimeout(() => {
45
+ var _a;
46
+ (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
47
+ window.scrollTo(0, scrollY);
48
+ }, 0);
49
+ }
47
50
  },
48
51
  false: () => {
49
52
  HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
@@ -168,6 +171,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
168
171
  }
169
172
  }
170
173
  _setFocusToFirstFocusableElementInModalOrCloseBtn() {
174
+ if (this.noAutofocus)
175
+ return;
171
176
  requestAnimationFrame(() => {
172
177
  if (this._contentRef.value) {
173
178
  const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
@@ -247,6 +252,10 @@ tslib_es6.__decorate([
247
252
  decorators_js.property({ type: String, attribute: 'modal-label' }),
248
253
  tslib_es6.__metadata("design:type", Object)
249
254
  ], exports.HModal.prototype, "modalLabel", void 0);
255
+ tslib_es6.__decorate([
256
+ decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
257
+ tslib_es6.__metadata("design:type", Object)
258
+ ], exports.HModal.prototype, "noAutofocus", void 0);
250
259
  tslib_es6.__decorate([
251
260
  decorators_js.state(),
252
261
  tslib_es6.__metadata("design:type", Object)
package/build/cjs/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -15,13 +15,12 @@ export declare class HSearch extends PhoenixLightLitElement {
15
15
  private _searchInput;
16
16
  private _inputField;
17
17
  private _searchForm;
18
+ private _togglerElement;
18
19
  private _id;
19
- private _openSearchButtonAriaLabelId;
20
20
  private _searchContentContainerId;
21
21
  private _searchResultsRef;
22
22
  private _searchHistoryRef;
23
23
  private _searchMessageRef;
24
- private _openSearchButtonLabelRef;
25
24
  private _shouldShowHistory;
26
25
  private _shouldShowResults;
27
26
  private _shouldShowMessage;
@@ -78,8 +77,9 @@ export declare class HSearch extends PhoenixLightLitElement {
78
77
  private _isSuggesterLayerVisible;
79
78
  private _preventSubmitOnSearchClear;
80
79
  private _resetSearchOnFocusOutside;
81
- private _setupAriaAttributes;
82
80
  private _handleOpenSearch;
83
81
  private _handleOpenSearchWithKeyboard;
82
+ private _setupToggler;
83
+ private _teardownToggler;
84
84
  protected render(): TemplateResult;
85
85
  }
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -4,7 +4,6 @@ import { property, state } from 'lit/decorators';
4
4
  import { UiDomUtils } from '@dreamcommerce/utilities';
5
5
  import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
6
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
7
- import { ICONS_SIZES } from '../../icon/icon_constants.js';
8
7
  import { Observer } from '../../../core/classes/observer/observer.js';
9
8
  import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
10
9
  import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior_subject.js';
@@ -23,13 +22,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
23
22
  this.view = DEFAULT_VIEW;
24
23
  this.isDevSearchPopupFixesFlagEnabled = false;
25
24
  this.displayMode = 'dropdown';
25
+ this._togglerElement = null;
26
26
  this._id = v4();
27
- this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
28
27
  this._searchContentContainerId = v4();
29
28
  this._searchResultsRef = createRef();
30
29
  this._searchHistoryRef = createRef();
31
30
  this._searchMessageRef = createRef();
32
- this._openSearchButtonLabelRef = createRef();
33
31
  this._shouldShowHistory = false;
34
32
  this._shouldShowResults = false;
35
33
  this._shouldShowMessage = false;
@@ -167,8 +165,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
167
165
  };
168
166
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
169
167
  var _a;
170
- const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
171
- const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
168
+ const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
169
+ const hasHomeOrEndBeenPressed = ev.key === 'Home' || ev.key === 'End';
172
170
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
173
171
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
174
172
  ev.preventDefault();
@@ -241,12 +239,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
241
239
  this._handleBackwardFocus($gridSearchItems);
242
240
  };
243
241
  this._findSearchItemsContainer = () => {
244
- const containers = [
245
- this._searchHistoryRef.value,
246
- this._searchResultsRef.value,
247
- this._searchMessageRef.value
248
- ];
249
- return containers.find(container => container && !UiDomUtils.isElementEmpty(container));
242
+ const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
243
+ return containers.find((container) => container && !UiDomUtils.isElementEmpty(container));
250
244
  };
251
245
  this._handleBackwardFocus = ($searchItems) => {
252
246
  var _a;
@@ -343,11 +337,20 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
343
337
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
344
338
  }
345
339
  };
346
- this._setupAriaAttributes = () => {
347
- var _a;
348
- if (this._translations.openSearchButtonAriaLabel) {
349
- (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
350
- }
340
+ this._handleOpenSearch = () => {
341
+ this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
342
+ const shouldShowMessage = this._searchPhrase !== '';
343
+ this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
344
+ const $searchInput = this.querySelector(`
345
+ ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
346
+ `);
347
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
348
+ };
349
+ this._handleOpenSearchWithKeyboard = (ev) => {
350
+ if (ev.code !== 'Enter')
351
+ return;
352
+ ev.preventDefault();
353
+ this._handleOpenSearch();
351
354
  };
352
355
  }
353
356
  async connectedCallback() {
@@ -384,7 +387,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
384
387
  this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
385
388
  this._setupInitialSearchPhrase();
386
389
  this._setupListeners();
387
- this._setupAriaAttributes();
390
+ this._setupToggler();
388
391
  }
389
392
  disconnectedCallback() {
390
393
  var _a;
@@ -394,6 +397,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
394
397
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
395
398
  window.removeEventListener('resize', this._switchTypeOfSearchView);
396
399
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
400
+ this._teardownToggler();
397
401
  }
398
402
  _setupContext() {
399
403
  this._historyContextProvider = new ContextProviderController(this);
@@ -551,7 +555,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
551
555
  }
552
556
  }
553
557
  _handleChooseSearchItem($el) {
554
- const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
558
+ const $activeSearchItem = this.displayMode === 'dropdown'
559
+ ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
560
+ : document.activeElement;
555
561
  if (!$activeSearchItem)
556
562
  return;
557
563
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -576,49 +582,24 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
576
582
  _submitSearchPhrase(searchPhrase) {
577
583
  this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
578
584
  }
579
- _handleOpenSearch() {
580
- this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
581
- const shouldShowMessage = this._searchPhrase !== '';
582
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
583
- const $searchInput = this.querySelector(`
584
- ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
585
- `);
586
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
585
+ _setupToggler() {
586
+ this._togglerElement = this.querySelector('.js-search-toggler');
587
+ if (!this._togglerElement)
588
+ return;
589
+ this._togglerElement.addEventListener('click', this._handleOpenSearch);
590
+ this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
587
591
  }
588
- _handleOpenSearchWithKeyboard(ev) {
589
- if (ev.code !== 'Enter')
592
+ _teardownToggler() {
593
+ if (!this._togglerElement)
590
594
  return;
591
- ev.preventDefault();
592
- this._handleOpenSearch();
595
+ this._togglerElement.removeEventListener('click', this._handleOpenSearch);
596
+ this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
593
597
  }
594
598
  render() {
595
599
  super.render();
596
600
  return html `
597
- <div
598
- class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
599
- tabindex="0"
600
- aria-haspopup="dialog"
601
- @click=${this._handleOpenSearch}
602
- @keyup=${this._handleOpenSearchWithKeyboard}
603
- >
604
- ${n(this._translations.openSearchButtonAriaLabel, () => html `
605
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
606
- ${this._translations.openSearchButtonAriaLabel}
607
- </span>
608
- `)}
609
- <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
610
- <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
611
- ${this._translations.search}
612
- </div>
613
- </div>
614
-
615
-
616
601
  ${n(this._isSuggesterLayerVisible(), () => html `
617
- <div
618
- class="${SEARCH_CLASS_NAMES.container}"
619
- id="${this._searchContentContainerId}"
620
- role="${this._containerRole}"
621
- >
602
+ <div class="${SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
622
603
  ${n(this._shouldShowMessage, () => html `<h-search-message
623
604
  ${ref(this._searchMessageRef)}
624
605
  .history="${this._historyLimitedContent}"
@@ -649,8 +630,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
649
630
  ?is-dev-search-popup-fixes-flag-enabled=${this.isDevSearchPopupFixesFlagEnabled}
650
631
  ></h-search-results>`)}
651
632
  </div>
652
- `, () => html `
653
- <div
633
+ `, () => html ` <div
654
634
  class="${SEARCH_CLASS_NAMES.container}"
655
635
  id="${this._searchContentContainerId}"
656
636
  role="${this._containerRole}"
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;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;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,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;AACA;"}
package/build/esm/packages/phoenix/src/components/modal/modal.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare class HModal extends PhoenixLightLitElement {
6
6
  class: string;
7
7
  transition: string;
8
8
  modalLabel: string;
9
+ noAutofocus: boolean;
9
10
  _firstFocusableElement: HTMLElement | undefined;
10
11
  _focusableElements: HTMLElement[] | null;
11
12
  _lastFocusableElement: HTMLElement | undefined;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -20,6 +20,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
20
20
  this.class = '';
21
21
  this.transition = 'scale';
22
22
  this.modalLabel = '';
23
+ this.noAutofocus = false;
23
24
  this._firstFocusableElement = undefined;
24
25
  this._focusableElements = null;
25
26
  this._lastFocusableElement = undefined;
@@ -35,11 +36,13 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
35
36
  document.addEventListener('keydown', this._bindCloseOnEsc);
36
37
  document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
37
38
  this._dispatchModalOpenedEvent();
38
- setTimeout(() => {
39
- var _a;
40
- (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
41
- window.scrollTo(0, scrollY);
42
- }, 0);
39
+ if (!this.noAutofocus) {
40
+ setTimeout(() => {
41
+ var _a;
42
+ (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
43
+ window.scrollTo(0, scrollY);
44
+ }, 0);
45
+ }
43
46
  },
44
47
  false: () => {
45
48
  HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
@@ -164,6 +167,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
164
167
  }
165
168
  }
166
169
  _setFocusToFirstFocusableElementInModalOrCloseBtn() {
170
+ if (this.noAutofocus)
171
+ return;
167
172
  requestAnimationFrame(() => {
168
173
  if (this._contentRef.value) {
169
174
  const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
@@ -243,6 +248,10 @@ __decorate([
243
248
  property({ type: String, attribute: 'modal-label' }),
244
249
  __metadata("design:type", Object)
245
250
  ], HModal.prototype, "modalLabel", void 0);
251
+ __decorate([
252
+ property({ type: Boolean, attribute: 'no-autofocus' }),
253
+ __metadata("design:type", Object)
254
+ ], HModal.prototype, "noAutofocus", void 0);
246
255
  __decorate([
247
256
  state(),
248
257
  __metadata("design:type", Object)
package/build/esm/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;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.18.10",
5
+ "version": "1.18.11-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",