@shoper/phoenix_design_system 1.18.23-0 → 1.18.23-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +24 -93
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/search.js +55 -8
  4. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +3 -13
  6. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/modal/modal.js +39 -11
  8. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +33 -10
  10. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +47 -0
  12. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
  13. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +66 -0
  14. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
  15. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +14 -0
  16. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
  17. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +12 -0
  18. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
  19. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +29 -0
  20. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +1 -0
  21. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +60 -0
  22. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +1 -0
  23. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +3 -10
  24. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +24 -93
  25. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  26. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +6 -0
  27. package/build/esm/packages/phoenix/src/components/form/search/search.js +55 -8
  28. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  29. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +3 -13
  30. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +2 -0
  32. package/build/esm/packages/phoenix/src/components/modal/modal.js +39 -11
  33. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  34. package/build/esm/packages/phoenix/src/components/sheet/sheet.d.ts +2 -0
  35. package/build/esm/packages/phoenix/src/components/sheet/sheet.js +33 -10
  36. package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  37. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +13 -0
  38. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +43 -0
  39. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
  40. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +14 -0
  41. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +5 -0
  42. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +1 -0
  43. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +14 -0
  44. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +62 -0
  45. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
  46. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.d.ts +8 -0
  47. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js +2 -0
  48. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js.map +1 -0
  49. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +6 -0
  50. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +10 -0
  51. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
  52. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +3 -0
  53. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js +2 -0
  54. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js.map +1 -0
  55. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts +5 -0
  56. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +8 -0
  57. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
  58. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.d.ts +7 -0
  59. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +25 -0
  60. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +1 -0
  61. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.d.ts +4 -0
  62. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js +2 -0
  63. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js.map +1 -0
  64. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.d.ts +11 -0
  65. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +56 -0
  66. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +1 -0
  67. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.d.ts +4 -0
  68. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js +2 -0
  69. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js.map +1 -0
  70. package/package.json +1 -1
@@ -12,6 +12,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
12
12
  import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
13
13
  import { BREAKPOINTS } from '../../../global_constants.js';
14
14
  import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
15
+ import { FOCUS_TRAP_STRATEGY_TYPES } from '../../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
16
+ import { FocusTrapController } from '../../../controllers/focus_trap_controller/focus_trap_controller.js';
15
17
  import { MODAL_EVENTS } from '../../modal/modal_constants.js';
16
18
  import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
17
19
  import { when as n } from '../../../../../../external/lit-html/directives/when.js';
@@ -23,11 +25,17 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
23
25
  this.view = DEFAULT_VIEW;
24
26
  this.isSearchIconFixEnabled = false;
25
27
  this.isSearchUxFixesFlagEnabled = false;
28
+ this.isSearchFocusTrapFixEnabled = false;
26
29
  this.displayMode = 'dropdown';
27
30
  this._togglerElement = null;
31
+ this._mobileDialogOpener = null;
28
32
  this._id = v4();
29
33
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
30
34
  this._searchContentContainerId = v4();
35
+ this.mobileFocusTrapController = new FocusTrapController(this, {
36
+ mode: FOCUS_TRAP_STRATEGY_TYPES.cyclic,
37
+ getContainer: () => this
38
+ });
31
39
  this._searchResultsRef = createRef();
32
40
  this._searchHistoryRef = createRef();
33
41
  this._searchMessageRef = createRef();
@@ -323,6 +331,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
323
331
  if (window.innerWidth > BREAKPOINTS.sm) {
324
332
  const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
325
333
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
334
+ if (this.isSearchFocusTrapFixEnabled)
335
+ this._deactivateMobileDialog();
326
336
  if (hasBeenOpened && this.displayMode !== 'dropdown') {
327
337
  const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
328
338
  const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
@@ -338,6 +348,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
338
348
  };
339
349
  this._openMobileView = () => {
340
350
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
351
+ if (this.isSearchFocusTrapFixEnabled)
352
+ this._activateMobileDialog();
341
353
  };
342
354
  this._isSuggesterLayerVisible = () => {
343
355
  var _a;
@@ -358,6 +370,19 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
358
370
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
359
371
  }
360
372
  };
373
+ this._activateMobileDialog = () => {
374
+ if (this.displayMode !== 'dropdown')
375
+ return;
376
+ this._mobileDialogOpener = document.activeElement;
377
+ this.setAttribute('role', 'dialog');
378
+ this.setAttribute('aria-modal', 'true');
379
+ this.mobileFocusTrapController.activate();
380
+ };
381
+ this._deactivateMobileDialog = () => {
382
+ this.removeAttribute('role');
383
+ this.removeAttribute('aria-modal');
384
+ this.mobileFocusTrapController.deactivate();
385
+ };
361
386
  this._setupAriaAttributes = () => {
362
387
  var _a;
363
388
  if (this._translations.openSearchButtonAriaLabel) {
@@ -366,6 +391,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
366
391
  };
367
392
  this._handleOpenSearch = () => {
368
393
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
394
+ if (this.isSearchFocusTrapFixEnabled)
395
+ this._activateMobileDialog();
369
396
  const shouldShowMessage = this._searchPhrase !== '';
370
397
  this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
371
398
  const $searchInput = this.querySelector(`
@@ -374,7 +401,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
374
401
  $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
375
402
  };
376
403
  this._handleOpenSearchWithKeyboard = (ev) => {
377
- if (ev.code !== 'Enter')
404
+ const isRepeated = this.isSearchFocusTrapFixEnabled ? ev.repeat : false;
405
+ if (ev.code !== 'Enter' || isRepeated)
378
406
  return;
379
407
  ev.preventDefault();
380
408
  this._handleOpenSearch();
@@ -383,6 +411,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
383
411
  async connectedCallback() {
384
412
  super.connectedCallback();
385
413
  this._setupContext();
414
+ this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
415
+ this._setupInitialSearchPhrase();
416
+ this._setupListeners();
417
+ this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
386
418
  try {
387
419
  this._searchContextConsumer = new ContextConsumerController(this);
388
420
  this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
@@ -411,10 +443,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
411
443
  catch (_a) {
412
444
  console.error('Search context is not provided');
413
445
  }
414
- this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
415
- this._setupInitialSearchPhrase();
416
- this._setupListeners();
417
- this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
418
446
  }
419
447
  disconnectedCallback() {
420
448
  var _a;
@@ -486,8 +514,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
486
514
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
487
515
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
488
516
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
517
+ if (this.isSearchFocusTrapFixEnabled)
518
+ this._deactivateMobileDialog();
489
519
  this._resetSearchView();
490
520
  this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
521
+ if (this.isSearchFocusTrapFixEnabled)
522
+ requestAnimationFrame(() => { var _a; return (_a = this._mobileDialogOpener) === null || _a === void 0 ? void 0 : _a.focus(); });
491
523
  });
492
524
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
493
525
  const contentLength = this._searchHistory.length;
@@ -606,13 +638,23 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
606
638
  if (!this._togglerElement)
607
639
  return;
608
640
  this._togglerElement.addEventListener('click', this._handleOpenSearch);
609
- this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
641
+ if (this.isSearchFocusTrapFixEnabled) {
642
+ this._togglerElement.addEventListener('keydown', this._handleOpenSearchWithKeyboard);
643
+ }
644
+ else {
645
+ this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
646
+ }
610
647
  }
611
648
  _teardownToggler() {
612
649
  if (!this._togglerElement)
613
650
  return;
614
651
  this._togglerElement.removeEventListener('click', this._handleOpenSearch);
615
- this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
652
+ if (this.isSearchFocusTrapFixEnabled) {
653
+ this._togglerElement.removeEventListener('keydown', this._handleOpenSearchWithKeyboard);
654
+ }
655
+ else {
656
+ this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
657
+ }
616
658
  }
617
659
  render() {
618
660
  super.render();
@@ -622,7 +664,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
622
664
  tabindex="0"
623
665
  aria-haspopup="dialog"
624
666
  @click=${this._handleOpenSearch}
625
- @keyup=${this._handleOpenSearchWithKeyboard}
667
+ @keyup=${this.isSearchFocusTrapFixEnabled ? undefined : this._handleOpenSearchWithKeyboard}
668
+ @keydown=${this.isSearchFocusTrapFixEnabled ? this._handleOpenSearchWithKeyboard : undefined}
626
669
  >
627
670
  ${n(this._translations.openSearchButtonAriaLabel, () => html `
628
671
  <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
@@ -692,6 +735,10 @@ __decorate([
692
735
  property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
693
736
  __metadata("design:type", Boolean)
694
737
  ], HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
738
+ __decorate([
739
+ property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
740
+ __metadata("design:type", Boolean)
741
+ ], HSearch.prototype, "isSearchFocusTrapFixEnabled", void 0);
695
742
  __decorate([
696
743
  property({ type: String, attribute: 'display-mode' }),
697
744
  __metadata("design:type", String)
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;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;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -68,25 +68,15 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
68
68
  }
69
69
  });
70
70
  });
71
- this.input.addEventListener('keyup', (ev) => {
72
- if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
71
+ this.input.addEventListener('keydown', (ev) => {
72
+ if (ev.key !== 'Enter' || ev.repeat)
73
73
  return;
74
- if (ev.key !== 'Enter') {
75
- this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
76
- detail: {
77
- searchPhrase: ev.target.value
78
- }
79
- });
80
- return;
81
- }
82
74
  if (this._isSearchPhraseCleared) {
83
75
  this._isSearchPhraseCleared = false;
84
76
  return;
85
77
  }
86
78
  this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
87
- detail: {
88
- searchPhrase: ev.target.value
89
- }
79
+ detail: { searchPhrase: ev.target.value }
90
80
  });
91
81
  });
92
82
  this.input.addEventListener('keyup', debounce_1((ev) => {
@@ -1 +1 @@
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;"}
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;"}
@@ -7,6 +7,7 @@ export declare class HModal extends PhoenixLightLitElement {
7
7
  transition: string;
8
8
  modalLabel: string;
9
9
  noAutofocus: boolean;
10
+ isSearchFocusTrapFixEnabled: boolean;
10
11
  _firstFocusableElement: HTMLElement | undefined;
11
12
  _focusableElements: HTMLElement[] | null;
12
13
  _lastFocusableElement: HTMLElement | undefined;
@@ -17,6 +18,7 @@ export declare class HModal extends PhoenixLightLitElement {
17
18
  private _propsChangeStrategies;
18
19
  private static openModals;
19
20
  private _backdropController;
21
+ private _focusTrapController;
20
22
  private static _appendModalsPortal;
21
23
  static isSomeModalOpen(): boolean;
22
24
  constructor();
@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
9
9
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
10
10
  import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
11
11
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
12
+ import { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
13
+ import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
12
14
  import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
13
15
  import { HModalClose } from './modal_close.js';
14
16
 
@@ -21,6 +23,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
21
23
  this.transition = 'scale';
22
24
  this.modalLabel = '';
23
25
  this.noAutofocus = false;
26
+ this.isSearchFocusTrapFixEnabled = false;
24
27
  this._firstFocusableElement = undefined;
25
28
  this._focusableElements = null;
26
29
  this._lastFocusableElement = undefined;
@@ -36,22 +39,35 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
36
39
  document.addEventListener('keydown', this._bindCloseOnEsc);
37
40
  document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
38
41
  this._dispatchModalOpenedEvent();
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);
42
+ this._focusTrapController.activate();
43
+ if (this.isSearchFocusTrapFixEnabled) {
44
+ this._focusTrapController.activate();
45
+ }
46
+ else {
47
+ if (!this.noAutofocus) {
48
+ setTimeout(() => {
49
+ var _a;
50
+ (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
51
+ window.scrollTo(0, scrollY);
52
+ }, 0);
53
+ }
45
54
  }
46
55
  },
47
56
  false: () => {
48
57
  HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
49
58
  document.removeEventListener('keydown', this._bindCloseOnEsc);
50
59
  document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
60
+ if (this.isSearchFocusTrapFixEnabled)
61
+ this._focusTrapController.deactivate();
51
62
  }
52
63
  }
53
64
  };
54
65
  this._backdropController = new BackdropController();
66
+ this._focusTrapController = new FocusTrapController(this, {
67
+ mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
68
+ getContainer: () => this._contentRef.value,
69
+ noAutofocus: this.noAutofocus
70
+ });
55
71
  this._keepFocusWithinModal = (ev) => {
56
72
  var _a;
57
73
  const isTabPressed = ev.code === 'Tab';
@@ -145,7 +161,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
145
161
  connectedCallback() {
146
162
  super.connectedCallback();
147
163
  HModal_1._appendModalsPortal();
148
- document.addEventListener('keyup', this._keepFocusWithinModal);
164
+ if (!this.isSearchFocusTrapFixEnabled)
165
+ document.addEventListener('keyup', this._keepFocusWithinModal);
149
166
  document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
150
167
  }
151
168
  disconnectedCallback() {
@@ -154,17 +171,23 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
154
171
  this.close();
155
172
  document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
156
173
  document.removeEventListener('keydown', this._bindCloseOnEsc);
157
- document.removeEventListener('keyup', this._keepFocusWithinModal);
174
+ if (!this.isSearchFocusTrapFixEnabled)
175
+ document.removeEventListener('keyup', this._keepFocusWithinModal);
158
176
  }
159
177
  firstUpdated(props) {
160
178
  super.firstUpdated(props);
161
- this._firstFocusableElement = this._focusSentinelStart.value;
162
- this._lastFocusableElement = this._focusSentinelEnd.value;
179
+ if (!this.isSearchFocusTrapFixEnabled) {
180
+ this._firstFocusableElement = this._focusSentinelStart.value;
181
+ this._lastFocusableElement = this._focusSentinelEnd.value;
182
+ }
163
183
  }
164
184
  updated(changedProps) {
165
185
  if (changedProps.has(MODAL_OPENED_PROP)) {
166
186
  this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
167
187
  }
188
+ if (this.isSearchFocusTrapFixEnabled && changedProps.has('noAutofocus')) {
189
+ this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
190
+ }
168
191
  }
169
192
  _setFocusToFirstFocusableElementInModalOrCloseBtn() {
170
193
  if (this.noAutofocus)
@@ -193,7 +216,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
193
216
  setTimeout(() => {
194
217
  var _a;
195
218
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
196
- this._setFocusToFirstFocusableElementInModalOrCloseBtn();
219
+ if (!this.isSearchFocusTrapFixEnabled)
220
+ this._setFocusToFirstFocusableElementInModalOrCloseBtn();
197
221
  resolve();
198
222
  }, transitionDuration);
199
223
  });
@@ -252,6 +276,10 @@ __decorate([
252
276
  property({ type: Boolean, attribute: 'no-autofocus' }),
253
277
  __metadata("design:type", Object)
254
278
  ], HModal.prototype, "noAutofocus", void 0);
279
+ __decorate([
280
+ property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
281
+ __metadata("design:type", Boolean)
282
+ ], HModal.prototype, "isSearchFocusTrapFixEnabled", void 0);
255
283
  __decorate([
256
284
  state(),
257
285
  __metadata("design:type", Object)
@@ -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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -6,6 +6,7 @@ export declare class HSheet extends PhoenixLightLitElement {
6
6
  class: string;
7
7
  transition: string;
8
8
  sheetLabel: string;
9
+ isSearchFocusTrapFixEnabled: boolean;
9
10
  _firstFocusableElement: HTMLElement | undefined;
10
11
  _focusableElements: HTMLElement[] | null;
11
12
  _lastFocusableElement: HTMLElement | undefined;
@@ -16,6 +17,7 @@ export declare class HSheet extends PhoenixLightLitElement {
16
17
  private _propsChangeStrategies;
17
18
  private static openSheets;
18
19
  private _backdropController;
20
+ private _focusTrapController;
19
21
  private static _appendSheetPortal;
20
22
  static isSomeSheetOpen(): boolean;
21
23
  constructor();
@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
9
9
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
10
10
  import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
11
11
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
12
+ import { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
13
+ import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
12
14
  import { SHEET_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
13
15
  import { HSheetClose } from './sheet_close.js';
14
16
 
@@ -20,6 +22,7 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
20
22
  this.class = '';
21
23
  this.transition = 'scale';
22
24
  this.sheetLabel = '';
25
+ this.isSearchFocusTrapFixEnabled = false;
23
26
  this._firstFocusableElement = undefined;
24
27
  this._focusableElements = null;
25
28
  this._lastFocusableElement = undefined;
@@ -35,20 +38,31 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
35
38
  document.addEventListener('keydown', this._bindCloseOnEsc);
36
39
  document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
37
40
  this._dispatchSheetOpenedEvent();
38
- setTimeout(() => {
39
- var _a;
40
- (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
41
- window.scrollTo(0, scrollY);
42
- }, 0);
41
+ if (this.isSearchFocusTrapFixEnabled) {
42
+ this._focusTrapController.activate();
43
+ }
44
+ else {
45
+ setTimeout(() => {
46
+ var _a;
47
+ (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
48
+ window.scrollTo(0, scrollY);
49
+ }, 0);
50
+ }
43
51
  },
44
52
  false: () => {
45
53
  HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
46
54
  document.removeEventListener('keydown', this._bindCloseOnEsc);
47
55
  document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
56
+ if (this.isSearchFocusTrapFixEnabled)
57
+ this._focusTrapController.deactivate();
48
58
  }
49
59
  }
50
60
  };
51
61
  this._backdropController = new BackdropController();
62
+ this._focusTrapController = new FocusTrapController(this, {
63
+ mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
64
+ getContainer: () => this._contentRef.value
65
+ });
52
66
  this._keepFocusWithinSheet = (ev) => {
53
67
  var _a;
54
68
  const isTabPressed = ev.code === 'Tab';
@@ -142,7 +156,8 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
142
156
  connectedCallback() {
143
157
  super.connectedCallback();
144
158
  HSheet_1._appendSheetPortal();
145
- document.addEventListener('keyup', this._keepFocusWithinSheet);
159
+ if (!this.isSearchFocusTrapFixEnabled)
160
+ document.addEventListener('keyup', this._keepFocusWithinSheet);
146
161
  document.addEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
147
162
  }
148
163
  disconnectedCallback() {
@@ -151,12 +166,15 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
151
166
  this.close();
152
167
  document.removeEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
153
168
  document.removeEventListener('keydown', this._bindCloseOnEsc);
154
- document.removeEventListener('keyup', this._keepFocusWithinSheet);
169
+ if (!this.isSearchFocusTrapFixEnabled)
170
+ document.removeEventListener('keyup', this._keepFocusWithinSheet);
155
171
  }
156
172
  firstUpdated(props) {
157
173
  super.firstUpdated(props);
158
- this._firstFocusableElement = this._focusSentinelStart.value;
159
- this._lastFocusableElement = this._focusSentinelEnd.value;
174
+ if (!this.isSearchFocusTrapFixEnabled) {
175
+ this._firstFocusableElement = this._focusSentinelStart.value;
176
+ this._lastFocusableElement = this._focusSentinelEnd.value;
177
+ }
160
178
  }
161
179
  updated(changedProps) {
162
180
  if (changedProps.has(SHEET_OPENED_PROP)) {
@@ -188,7 +206,8 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
188
206
  setTimeout(() => {
189
207
  var _a;
190
208
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
191
- this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
209
+ if (!this.isSearchFocusTrapFixEnabled)
210
+ this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
192
211
  resolve();
193
212
  }, transitionDuration);
194
213
  });
@@ -241,6 +260,10 @@ __decorate([
241
260
  property({ type: String, attribute: 'sheet-label' }),
242
261
  __metadata("design:type", Object)
243
262
  ], HSheet.prototype, "sheetLabel", void 0);
263
+ __decorate([
264
+ property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
265
+ __metadata("design:type", Boolean)
266
+ ], HSheet.prototype, "isSearchFocusTrapFixEnabled", void 0);
244
267
  __decorate([
245
268
  state(),
246
269
  __metadata("design:type", Object)
@@ -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;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -0,0 +1,13 @@
1
+ import { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ import type { TFocusTrapProps } from './focus_trap_controller_types';
3
+ import { IBaseFocusTrapStrategy } from './strategies/base_focus_trap_strategy_types';
4
+ export declare class FocusTrapController implements ReactiveController {
5
+ #private;
6
+ constructor(host: ReactiveControllerHost, props: TFocusTrapProps);
7
+ get strategy(): IBaseFocusTrapStrategy;
8
+ hostConnected(): void;
9
+ hostDisconnected(): void;
10
+ activate(): void;
11
+ deactivate(): void;
12
+ getFocusableElements(container: HTMLElement): HTMLElement[];
13
+ }
@@ -0,0 +1,43 @@
1
+ import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
2
+ import 'lit';
3
+ import { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js';
4
+ import { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js';
5
+ import { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js';
6
+ import { FOCUS_TRAP_STRATEGY_TYPES } from './strategies/focus_trap_strategy_constants.js';
7
+
8
+ var _a, _FocusTrapController_strategy, _FocusTrapController_createStrategy;
9
+ class FocusTrapController {
10
+ constructor(host, props) {
11
+ _FocusTrapController_strategy.set(this, void 0);
12
+ __classPrivateFieldSet(this, _FocusTrapController_strategy, __classPrivateFieldGet(FocusTrapController, _a, "m", _FocusTrapController_createStrategy).call(FocusTrapController, props), "f");
13
+ host.addController(this);
14
+ }
15
+ get strategy() {
16
+ return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
17
+ }
18
+ hostConnected() {
19
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
20
+ }
21
+ hostDisconnected() {
22
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
23
+ }
24
+ activate() {
25
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
26
+ }
27
+ deactivate() {
28
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
29
+ }
30
+ getFocusableElements(container) {
31
+ return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
32
+ }
33
+ }
34
+ _a = FocusTrapController, _FocusTrapController_strategy = new WeakMap(), _FocusTrapController_createStrategy = function _FocusTrapController_createStrategy(props) {
35
+ switch (props.mode) {
36
+ case FOCUS_TRAP_STRATEGY_TYPES.sentinel: return new SentinelFocusTrapStrategy(props);
37
+ case FOCUS_TRAP_STRATEGY_TYPES.cyclic: return new CyclicFocusTrapStrategy(props);
38
+ case FOCUS_TRAP_STRATEGY_TYPES.toggler: return new TogglerFocusTrapStrategy(props);
39
+ }
40
+ };
41
+
42
+ export { FocusTrapController };
43
+ //# sourceMappingURL=focus_trap_controller.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -0,0 +1,14 @@
1
+ import { TCyclicFocusTrapStrategyProps } from "./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types";
2
+ import { FOCUS_TRAP_STRATEGY_TYPES } from "./strategies/focus_trap_strategy_constants";
3
+ import { TSentinelFocusTrapStrategyProps } from "./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types";
4
+ import { TTogglerFocusTrapStrategyProps } from "./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types";
5
+ export declare type TSentinelFocusTrapProps = TSentinelFocusTrapStrategyProps & {
6
+ mode: typeof FOCUS_TRAP_STRATEGY_TYPES.sentinel;
7
+ };
8
+ export declare type TCyclicFocusTrapProps = TCyclicFocusTrapStrategyProps & {
9
+ mode: typeof FOCUS_TRAP_STRATEGY_TYPES.cyclic;
10
+ };
11
+ export declare type TTogglerFocusTrapProps = TTogglerFocusTrapStrategyProps & {
12
+ mode: typeof FOCUS_TRAP_STRATEGY_TYPES.toggler;
13
+ };
14
+ export declare type TFocusTrapProps = TSentinelFocusTrapProps | TCyclicFocusTrapProps | TTogglerFocusTrapProps;
@@ -0,0 +1,5 @@
1
+ import "./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types";
2
+ import "./strategies/focus_trap_strategy_constants";
3
+ import "./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types";
4
+ import "./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types";
5
+ //# sourceMappingURL=focus_trap_controller_types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"focus_trap_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/focus_trap_controller/focus_trap_controller_types.ts"],"names":[],"mappings":"AAAA,OAA8C,0EAA0E,CAAC;AACzH,OAA0C,4CAA4C,CAAC;AACvF,OAAgD,8EAA8E,CAAC;AAC/H,OAA+C,4EAA4E,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { IBaseFocusTrapStrategy } from './base_focus_trap_strategy_types';
2
+ export declare abstract class BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
3
+ protected readonly getContainer: () => HTMLElement | undefined;
4
+ protected active: boolean;
5
+ noAutofocus: boolean;
6
+ constructor(getContainer: () => HTMLElement | undefined);
7
+ attach(): void;
8
+ detach(): void;
9
+ activate(): void;
10
+ deactivate(): void;
11
+ getFocusableElements(container: HTMLElement): HTMLElement[];
12
+ protected _handleKeyDown: (ev: KeyboardEvent) => void;
13
+ private _isElementTrulyFocusable;
14
+ }