@shoper/phoenix_design_system 1.18.23-9 → 1.18.24-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 (83) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +77 -14
  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 +4 -28
  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 +13 -3
  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/form/select/select.js +24 -42
  8. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/modal/modal.js +67 -13
  10. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/modal/modal_constants.js +3 -1
  12. package/build/cjs/packages/phoenix/src/components/modal/modal_constants.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +63 -9
  14. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  15. package/build/cjs/packages/phoenix/src/components/sheet/sheet_constants.js +3 -1
  16. package/build/cjs/packages/phoenix/src/components/sheet/sheet_constants.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +6 -1
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +77 -14
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +0 -5
  21. package/build/esm/packages/phoenix/src/components/form/search/search.js +4 -28
  22. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  23. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +13 -3
  24. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +0 -1
  26. package/build/esm/packages/phoenix/src/components/form/select/select.js +24 -42
  27. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +9 -1
  29. package/build/esm/packages/phoenix/src/components/modal/modal.js +69 -15
  30. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/components/modal/modal_constants.js +3 -2
  32. package/build/esm/packages/phoenix/src/components/modal/modal_constants.js.map +1 -1
  33. package/build/esm/packages/phoenix/src/components/sheet/sheet.d.ts +9 -1
  34. package/build/esm/packages/phoenix/src/components/sheet/sheet.js +65 -11
  35. package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  36. package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.js +3 -2
  37. package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.js.map +1 -1
  38. package/package.json +1 -1
  39. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +0 -38
  40. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +0 -1
  41. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +0 -66
  42. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +0 -1
  43. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +0 -14
  44. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +0 -1
  45. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +0 -22
  46. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +0 -1
  47. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +0 -29
  48. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +0 -1
  49. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +0 -62
  50. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +0 -1
  51. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +0 -13
  52. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +0 -34
  53. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +0 -1
  54. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +0 -15
  55. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +0 -2
  56. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +0 -1
  57. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +0 -14
  58. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +0 -62
  59. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +0 -1
  60. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.d.ts +0 -8
  61. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js +0 -2
  62. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js.map +0 -1
  63. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +0 -6
  64. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +0 -10
  65. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +0 -1
  66. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +0 -3
  67. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js +0 -2
  68. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js.map +0 -1
  69. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts +0 -13
  70. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +0 -17
  71. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +0 -1
  72. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.d.ts +0 -7
  73. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +0 -25
  74. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +0 -1
  75. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.d.ts +0 -4
  76. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js +0 -2
  77. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js.map +0 -1
  78. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.d.ts +0 -8
  79. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +0 -58
  80. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +0 -1
  81. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.d.ts +0 -4
  82. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js +0 -2
  83. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js.map +0 -1
@@ -3,15 +3,16 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ var utilities = require('@dreamcommerce/utilities');
6
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
8
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
9
  var decorators_js = require('@lit/reactive-element/decorators.js');
10
+ require('@lit/reactive-element');
9
11
  var litHtml = require('lit-html');
10
12
  var ref_js = require('lit-html/directives/ref.js');
11
13
  var portal_constants = require('../portal/portal_constants.js');
12
14
  var backdrop_constants = require('../backdrop/backdrop_constants.js');
13
15
  var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
14
- var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
15
16
  var modal_constants = require('./modal_constants.js');
16
17
  var modal_close = require('./modal_close.js');
17
18
 
@@ -24,31 +25,54 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
24
25
  this.transition = 'scale';
25
26
  this.modalLabel = '';
26
27
  this.noAutofocus = false;
28
+ this._firstFocusableElement = undefined;
29
+ this._focusableElements = null;
30
+ this._lastFocusableElement = undefined;
27
31
  this._focusedToggler = null;
28
32
  this._contentRef = ref_js.createRef();
33
+ this._focusSentinelStart = ref_js.createRef();
34
+ this._focusSentinelEnd = ref_js.createRef();
29
35
  this._propsChangeStrategies = {
30
36
  [modal_constants.MODAL_OPENED_PROP]: {
31
37
  true: () => {
38
+ const scrollY = window.scrollY;
32
39
  HModal_1.openModals = [...HModal_1.openModals, this];
33
40
  document.addEventListener('keydown', this._bindCloseOnEsc);
34
41
  document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
35
42
  this._dispatchModalOpenedEvent();
36
- this._focusTrapController.activate();
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
+ }
37
50
  },
38
51
  false: () => {
39
52
  HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
40
53
  document.removeEventListener('keydown', this._bindCloseOnEsc);
41
54
  document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
42
- this._focusTrapController.deactivate();
43
55
  }
44
56
  }
45
57
  };
46
58
  this._backdropController = new backdrop_controller.BackdropController();
47
- this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
48
- mode: 'sentinel',
49
- getContainer: () => this._contentRef.value,
50
- noAutofocus: this.noAutofocus
51
- });
59
+ this._keepFocusWithinModal = (ev) => {
60
+ var _a;
61
+ const isTabPressed = ev.code === 'Tab';
62
+ if (isTabPressed && this._contentRef.value) {
63
+ if (ev.shiftKey) {
64
+ if (document.activeElement === this._firstFocusableElement) {
65
+ const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
66
+ (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
67
+ ev.preventDefault();
68
+ }
69
+ }
70
+ else if (document.activeElement === this._lastFocusableElement) {
71
+ utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
72
+ ev.preventDefault();
73
+ }
74
+ }
75
+ };
52
76
  this._handleCloseFromCloseComponent = async (ev) => {
53
77
  var _a;
54
78
  ev.stopPropagation();
@@ -109,6 +133,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
109
133
  });
110
134
  };
111
135
  this.hidden = true;
136
+ this._focusableElements = [...this.querySelectorAll(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
112
137
  }
113
138
  static _appendModalsPortal() {
114
139
  const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${modal_constants.MODALS_PORTAL_NAME}"]`);
@@ -124,6 +149,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
124
149
  connectedCallback() {
125
150
  super.connectedCallback();
126
151
  HModal_1._appendModalsPortal();
152
+ document.addEventListener('keyup', this._keepFocusWithinModal);
127
153
  document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
128
154
  }
129
155
  disconnectedCallback() {
@@ -132,14 +158,29 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
132
158
  this.close();
133
159
  document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
134
160
  document.removeEventListener('keydown', this._bindCloseOnEsc);
161
+ document.removeEventListener('keyup', this._keepFocusWithinModal);
162
+ }
163
+ firstUpdated(props) {
164
+ super.firstUpdated(props);
165
+ this._firstFocusableElement = this._focusSentinelStart.value;
166
+ this._lastFocusableElement = this._focusSentinelEnd.value;
135
167
  }
136
168
  updated(changedProps) {
137
169
  if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
138
170
  this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
139
171
  }
140
- if (changedProps.has('noAutofocus')) {
141
- this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
142
- }
172
+ }
173
+ _setFocusToFirstFocusableElementInModalOrCloseBtn() {
174
+ if (this.noAutofocus)
175
+ return;
176
+ requestAnimationFrame(() => {
177
+ if (this._contentRef.value) {
178
+ const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
179
+ if (focusableElements.length > 0) {
180
+ focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
181
+ }
182
+ }
183
+ });
143
184
  }
144
185
  async open() {
145
186
  this._focusedToggler = document.activeElement;
@@ -156,6 +197,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
156
197
  setTimeout(() => {
157
198
  var _a;
158
199
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
200
+ this._setFocusToFirstFocusableElementInModalOrCloseBtn();
159
201
  resolve();
160
202
  }, transitionDuration);
161
203
  });
@@ -183,11 +225,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
183
225
  return litHtml.html `
184
226
  <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
185
227
  <div class="modal-wrapper ${this.class}">
186
- <div tabindex="0"></div>
228
+ <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
187
229
  <div ${ref_js.ref(this._contentRef)} class="modal" role="dialog" aria-label="${this.modalLabel}">
188
230
  <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
189
231
  </div>
190
- <div tabindex="0"></div>
232
+ <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
191
233
  </div>
192
234
  </h-portal>
193
235
  `;
@@ -214,6 +256,18 @@ tslib_es6.__decorate([
214
256
  decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
215
257
  tslib_es6.__metadata("design:type", Object)
216
258
  ], exports.HModal.prototype, "noAutofocus", void 0);
259
+ tslib_es6.__decorate([
260
+ decorators_js.state(),
261
+ tslib_es6.__metadata("design:type", Object)
262
+ ], exports.HModal.prototype, "_firstFocusableElement", void 0);
263
+ tslib_es6.__decorate([
264
+ decorators_js.state(),
265
+ tslib_es6.__metadata("design:type", Object)
266
+ ], exports.HModal.prototype, "_focusableElements", void 0);
267
+ tslib_es6.__decorate([
268
+ decorators_js.state(),
269
+ tslib_es6.__metadata("design:type", Object)
270
+ ], exports.HModal.prototype, "_lastFocusableElement", void 0);
217
271
  exports.HModal = HModal_1 = tslib_es6.__decorate([
218
272
  phoenix_custom_element.phoenixCustomElement('h-modal'),
219
273
  tslib_es6.__metadata("design:paramtypes", [])
@@ -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;"}
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;"}
@@ -9,8 +9,10 @@ const MODAL_EVENTS = {
9
9
  opened: 'opened',
10
10
  closed: 'closed'
11
11
  };
12
- const MODAL_OPENED_PROP = 'opened';
12
+ const MODAL_OPENED_PROP = 'opened';
13
+ const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
13
14
 
15
+ exports.FOCUSABLE_ELEMENTS_WITHIN_MODAL = FOCUSABLE_ELEMENTS_WITHIN_MODAL;
14
16
  exports.MODALS_PORTAL_NAME = MODALS_PORTAL_NAME;
15
17
  exports.MODAL_EVENTS = MODAL_EVENTS;
16
18
  exports.MODAL_OPENED_PROP = MODAL_OPENED_PROP;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -3,15 +3,16 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ var utilities = require('@dreamcommerce/utilities');
6
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
8
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
9
  var decorators_js = require('@lit/reactive-element/decorators.js');
10
+ require('@lit/reactive-element');
9
11
  var litHtml = require('lit-html');
10
12
  var ref_js = require('lit-html/directives/ref.js');
11
13
  var portal_constants = require('../portal/portal_constants.js');
12
14
  var backdrop_constants = require('../backdrop/backdrop_constants.js');
13
15
  var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
14
- var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
15
16
  var sheet_constants = require('./sheet_constants.js');
16
17
  var sheet_close = require('./sheet_close.js');
17
18
 
@@ -23,30 +24,52 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
23
24
  this.class = '';
24
25
  this.transition = 'scale';
25
26
  this.sheetLabel = '';
27
+ this._firstFocusableElement = undefined;
28
+ this._focusableElements = null;
29
+ this._lastFocusableElement = undefined;
26
30
  this._focusedToggler = null;
27
31
  this._contentRef = ref_js.createRef();
32
+ this._focusSentinelStart = ref_js.createRef();
33
+ this._focusSentinelEnd = ref_js.createRef();
28
34
  this._propsChangeStrategies = {
29
35
  [sheet_constants.SHEET_OPENED_PROP]: {
30
36
  true: () => {
37
+ const scrollY = window.scrollY;
31
38
  HSheet_1.openSheets = [...HSheet_1.openSheets, this];
32
39
  document.addEventListener('keydown', this._bindCloseOnEsc);
33
40
  document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
34
41
  this._dispatchSheetOpenedEvent();
35
- this._focusTrapController.activate();
42
+ setTimeout(() => {
43
+ var _a;
44
+ (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
45
+ window.scrollTo(0, scrollY);
46
+ }, 0);
36
47
  },
37
48
  false: () => {
38
49
  HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
39
50
  document.removeEventListener('keydown', this._bindCloseOnEsc);
40
51
  document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
41
- this._focusTrapController.deactivate();
42
52
  }
43
53
  }
44
54
  };
45
55
  this._backdropController = new backdrop_controller.BackdropController();
46
- this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
47
- mode: 'sentinel',
48
- getContainer: () => this._contentRef.value
49
- });
56
+ this._keepFocusWithinSheet = (ev) => {
57
+ var _a;
58
+ const isTabPressed = ev.code === 'Tab';
59
+ if (isTabPressed && this._contentRef.value) {
60
+ if (ev.shiftKey) {
61
+ if (document.activeElement === this._firstFocusableElement) {
62
+ const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
63
+ (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
64
+ ev.preventDefault();
65
+ }
66
+ }
67
+ else if (document.activeElement === this._lastFocusableElement) {
68
+ utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
69
+ ev.preventDefault();
70
+ }
71
+ }
72
+ };
50
73
  this._handleCloseFromCloseComponent = async (ev) => {
51
74
  var _a;
52
75
  ev.stopPropagation();
@@ -107,6 +130,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
107
130
  });
108
131
  };
109
132
  this.hidden = true;
133
+ this._focusableElements = [...this.querySelectorAll(sheet_constants.FOCUSABLE_ELEMENTS_WITHIN_SHEET)];
110
134
  }
111
135
  static _appendSheetPortal() {
112
136
  const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${sheet_constants.SHEETS_PORTAL_NAME}"]`);
@@ -122,6 +146,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
122
146
  connectedCallback() {
123
147
  super.connectedCallback();
124
148
  HSheet_1._appendSheetPortal();
149
+ document.addEventListener('keyup', this._keepFocusWithinSheet);
125
150
  document.addEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
126
151
  }
127
152
  disconnectedCallback() {
@@ -130,12 +155,28 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
130
155
  this.close();
131
156
  document.removeEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
132
157
  document.removeEventListener('keydown', this._bindCloseOnEsc);
158
+ document.removeEventListener('keyup', this._keepFocusWithinSheet);
159
+ }
160
+ firstUpdated(props) {
161
+ super.firstUpdated(props);
162
+ this._firstFocusableElement = this._focusSentinelStart.value;
163
+ this._lastFocusableElement = this._focusSentinelEnd.value;
133
164
  }
134
165
  updated(changedProps) {
135
166
  if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
136
167
  this._propsChangeStrategies[sheet_constants.SHEET_OPENED_PROP][String(this[sheet_constants.SHEET_OPENED_PROP])]();
137
168
  }
138
169
  }
170
+ _setFocusToFirstFocusableElementInSheetOrCloseBtn() {
171
+ requestAnimationFrame(() => {
172
+ if (this._contentRef.value) {
173
+ const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
174
+ if (focusableElements.length > 0) {
175
+ focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
176
+ }
177
+ }
178
+ });
179
+ }
139
180
  async open() {
140
181
  this._focusedToggler = document.activeElement;
141
182
  return new Promise((resolve) => {
@@ -151,6 +192,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
151
192
  setTimeout(() => {
152
193
  var _a;
153
194
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
195
+ this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
154
196
  resolve();
155
197
  }, transitionDuration);
156
198
  });
@@ -176,11 +218,11 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
176
218
  return litHtml.html `
177
219
  <h-portal ?disabled="${!this.opened}" to="${sheet_constants.SHEETS_PORTAL_NAME}" hidden>
178
220
  <div class="sheet-wrapper ${this.class}">
179
- <div tabindex="0"></div>
221
+ <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
180
222
  <div ${ref_js.ref(this._contentRef)} class="sheet" role="dialog" aria-label="${this.sheetLabel}">
181
223
  <div class="sheet__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
182
224
  </div>
183
- <div tabindex="0"></div>
225
+ <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
184
226
  </div>
185
227
  </h-portal>
186
228
  `;
@@ -203,6 +245,18 @@ tslib_es6.__decorate([
203
245
  decorators_js.property({ type: String, attribute: 'sheet-label' }),
204
246
  tslib_es6.__metadata("design:type", Object)
205
247
  ], exports.HSheet.prototype, "sheetLabel", void 0);
248
+ tslib_es6.__decorate([
249
+ decorators_js.state(),
250
+ tslib_es6.__metadata("design:type", Object)
251
+ ], exports.HSheet.prototype, "_firstFocusableElement", void 0);
252
+ tslib_es6.__decorate([
253
+ decorators_js.state(),
254
+ tslib_es6.__metadata("design:type", Object)
255
+ ], exports.HSheet.prototype, "_focusableElements", void 0);
256
+ tslib_es6.__decorate([
257
+ decorators_js.state(),
258
+ tslib_es6.__metadata("design:type", Object)
259
+ ], exports.HSheet.prototype, "_lastFocusableElement", void 0);
206
260
  exports.HSheet = HSheet_1 = tslib_es6.__decorate([
207
261
  phoenix_custom_element.phoenixCustomElement('h-sheet'),
208
262
  tslib_es6.__metadata("design:paramtypes", [])
@@ -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;"}
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;"}
@@ -9,8 +9,10 @@ const SHEET_EVENTS = {
9
9
  opened: 'opened',
10
10
  closed: 'closed'
11
11
  };
12
- const SHEET_OPENED_PROP = 'opened';
12
+ const SHEET_OPENED_PROP = 'opened';
13
+ const FOCUSABLE_ELEMENTS_WITHIN_SHEET = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
13
14
 
15
+ exports.FOCUSABLE_ELEMENTS_WITHIN_SHEET = FOCUSABLE_ELEMENTS_WITHIN_SHEET;
14
16
  exports.SHEETS_PORTAL_NAME = SHEETS_PORTAL_NAME;
15
17
  exports.SHEET_EVENTS = SHEET_EVENTS;
16
18
  exports.SHEET_OPENED_PROP = SHEET_OPENED_PROP;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -26,7 +26,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
26
26
  private _dropdownContentChildrenHeight;
27
27
  private _hasScrollableClassInitially;
28
28
  private _backdropController;
29
- private _focusTrapController;
30
29
  constructor();
31
30
  connectedCallback(): Promise<void>;
32
31
  private static _appendDropdownPortal;
@@ -46,8 +45,14 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
46
45
  private _closeDropdownOnEscape;
47
46
  private _keepFocusWithinDropdownForwards;
48
47
  private _handleFocusOnNextElementAfterDropdown;
48
+ private _handleFocusFromTogglerForwards;
49
+ private _handleFocusFromSentinelEndForwards;
49
50
  private _keepFocusWithinDropdownBackwards;
50
51
  private _handleDefaultFocusFromDropdownBackwards;
52
+ private _handleFocusFromTogglerBackwards;
53
+ private _handleFocusFromSentinelStartBackwards;
54
+ private _getTrulyFocusableElements;
55
+ private _isElementTrulyFocusable;
51
56
  private _hoverToggle;
52
57
  private _isHoveredWithinDropdown;
53
58
  private _focusOnFirstContentElement;
@@ -12,7 +12,6 @@ import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
12
12
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
13
13
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
14
14
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
15
- import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
16
15
  import throttle_1 from '../../../../../external/lodash/throttle.js';
17
16
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
18
17
 
@@ -31,11 +30,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
31
30
  this.preventFocusTrap = false;
32
31
  this.noAutoFocus = false;
33
32
  this._backdropController = new BackdropController();
34
- this._focusTrapController = new FocusTrapController(this, {
35
- mode: 'toggler',
36
- getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
37
- getToggler: () => this.$dropdownToggler
38
- });
39
33
  this._handleClickOutside = async (target) => {
40
34
  var _a, _b;
41
35
  if (!this.opened)
@@ -73,8 +67,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
73
67
  this._dispatchShowDropdownEvent();
74
68
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
75
69
  this._toggleScroll();
76
- if (!this.preventFocusTrap)
77
- this._focusTrapController.activate();
78
70
  resolve();
79
71
  }, transitionDuration);
80
72
  });
@@ -115,7 +107,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
115
107
  var _a;
116
108
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
117
109
  this.opened = false;
118
- this._focusTrapController.deactivate();
119
110
  this._dispatchHideDropdownEvent();
120
111
  resolve();
121
112
  }, transitionDuration);
@@ -147,16 +138,31 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
147
138
  await this.hide();
148
139
  };
149
140
  this._keepFocusWithinDropdownForwards = (ev) => {
150
- if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
141
+ var _a, _b;
142
+ if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
151
143
  return;
152
- if (this.$dropdownContent.contains(ev.target)) {
144
+ const $target = ev.target;
145
+ if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
153
146
  this._handleFocusOnNextElementAfterDropdown(ev);
147
+ return;
148
+ }
149
+ if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
150
+ this._handleFocusFromTogglerForwards(ev);
151
+ return;
154
152
  }
153
+ this._handleFocusFromSentinelEndForwards(ev, $target);
155
154
  };
156
155
  this._keepFocusWithinDropdownBackwards = (ev) => {
157
- if (!this.opened || !this.$dropdownContent || !this.preventFocusTrap)
156
+ if (!this.opened || !this.$dropdownContent)
158
157
  return;
159
- this._handleDefaultFocusFromDropdownBackwards(ev);
158
+ const $target = ev.target;
159
+ if (this.preventFocusTrap) {
160
+ this._handleDefaultFocusFromDropdownBackwards(ev);
161
+ }
162
+ else {
163
+ this._handleFocusFromTogglerBackwards(ev, $target);
164
+ this._handleFocusFromSentinelStartBackwards(ev, $target);
165
+ }
160
166
  };
161
167
  this._hoverToggle = async (ev) => {
162
168
  if (window.innerWidth < BREAKPOINTS.xs)
@@ -178,7 +184,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
178
184
  this._focusOnFirstContentElement = () => {
179
185
  if (!this.$dropdownContent)
180
186
  return;
181
- const $firstFocusableElement = this._focusTrapController.getFocusableElements(this.$dropdownContent)[0];
187
+ const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
182
188
  if ($firstFocusableElement)
183
189
  $firstFocusableElement.focus();
184
190
  };
@@ -296,11 +302,68 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
296
302
  UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
297
303
  return;
298
304
  }
305
+ _handleFocusFromTogglerForwards(ev) {
306
+ if (!this.$dropdownContent)
307
+ return;
308
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
309
+ if (trulyFocusableElements.length === 0)
310
+ return;
311
+ ev.preventDefault();
312
+ trulyFocusableElements[0].focus();
313
+ }
314
+ _handleFocusFromSentinelEndForwards(ev, $target) {
315
+ var _a;
316
+ if (!this.$dropdownContent)
317
+ return;
318
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
319
+ const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
320
+ if ($target !== $lastFocusableElement)
321
+ return;
322
+ ev.preventDefault();
323
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
324
+ }
299
325
  _handleDefaultFocusFromDropdownBackwards(ev) {
300
326
  ev.preventDefault();
301
327
  this.hide();
302
328
  UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
303
329
  }
330
+ _handleFocusFromTogglerBackwards(ev, $target) {
331
+ var _a;
332
+ if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
333
+ return;
334
+ ev.preventDefault();
335
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
336
+ if (trulyFocusableElements.length === 0)
337
+ return;
338
+ const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
339
+ $lastFocusableElement.focus();
340
+ }
341
+ _handleFocusFromSentinelStartBackwards(ev, $target) {
342
+ var _a;
343
+ if (!this.$dropdownContent)
344
+ return;
345
+ const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
346
+ if ($target !== $firstFocusableElement)
347
+ return;
348
+ ev.preventDefault();
349
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
350
+ }
351
+ _getTrulyFocusableElements($container) {
352
+ const focusableElements = UiDomUtils.getFocusableElements($container);
353
+ return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
354
+ }
355
+ _isElementTrulyFocusable($el) {
356
+ const style = window.getComputedStyle($el);
357
+ if (style.display === 'none' || style.visibility === 'hidden') {
358
+ return false;
359
+ }
360
+ if ($el.nodeName === 'H-PORTAL')
361
+ return true;
362
+ const $parent = $el.parentElement;
363
+ if (!$parent)
364
+ return true;
365
+ return this._isElementTrulyFocusable($parent);
366
+ }
304
367
  _isHoveredWithinDropdown(element) {
305
368
  var _a;
306
369
  if (element === this)
@@ -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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,7 +1,6 @@
1
1
  import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
3
  import type { TSearchDisplayMode, TSearchSettings } from "./search_types";
4
- import { FocusTrapController } from "../../../controllers/focus_trap_controller/focus_trap_controller";
5
4
  export declare class HSearch extends PhoenixLightLitElement {
6
5
  settings: TSearchSettings;
7
6
  view: string;
@@ -18,11 +17,9 @@ export declare class HSearch extends PhoenixLightLitElement {
18
17
  private _inputField;
19
18
  private _searchForm;
20
19
  private _togglerElement;
21
- private _mobileDialogOpener;
22
20
  private _id;
23
21
  private _openSearchButtonAriaLabelId;
24
22
  private _searchContentContainerId;
25
- mobileFocusTrapController: FocusTrapController;
26
23
  private _searchResultsRef;
27
24
  private _searchHistoryRef;
28
25
  private _searchMessageRef;
@@ -84,8 +81,6 @@ export declare class HSearch extends PhoenixLightLitElement {
84
81
  private _isSuggesterLayerVisible;
85
82
  private _preventSubmitOnSearchClear;
86
83
  private _resetSearchOnFocusOutside;
87
- private _activateMobileDialog;
88
- private _deactivateMobileDialog;
89
84
  private _setupAriaAttributes;
90
85
  private _handleOpenSearch;
91
86
  private _handleOpenSearchWithKeyboard;