@shoper/phoenix_design_system 1.18.23-10 → 1.18.23-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +122 -5
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +56 -17
  4. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +13 -0
  6. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +122 -5
  7. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +1 -0
  9. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +56 -17
  10. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -35,6 +35,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
35
35
  this.id = v4['default']();
36
36
  this.preventFocusTrap = false;
37
37
  this.noAutoFocus = false;
38
+ this.isSearchFocusTrapFixEnabled = false;
38
39
  this._backdropController = new backdrop_controller.BackdropController();
39
40
  this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
40
41
  mode: focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_TYPES.toggler,
@@ -78,7 +79,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
78
79
  this._dispatchShowDropdownEvent();
79
80
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
80
81
  this._toggleScroll();
81
- if (!this.preventFocusTrap)
82
+ if (this.isSearchFocusTrapFixEnabled && !this.preventFocusTrap)
82
83
  this._focusTrapController.activate();
83
84
  resolve();
84
85
  }, transitionDuration);
@@ -120,7 +121,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
120
121
  var _a;
121
122
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
122
123
  this.opened = false;
123
- this._focusTrapController.deactivate();
124
+ if (this.isSearchFocusTrapFixEnabled)
125
+ this._focusTrapController.deactivate();
124
126
  this._dispatchHideDropdownEvent();
125
127
  resolve();
126
128
  }, transitionDuration);
@@ -151,6 +153,14 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
151
153
  return;
152
154
  await this.hide();
153
155
  };
156
+ this._handleTabForward = (ev) => {
157
+ if (this.isSearchFocusTrapFixEnabled) {
158
+ this._handleTabExitForward(ev);
159
+ }
160
+ else {
161
+ this._keepFocusWithinDropdownForwards(ev);
162
+ }
163
+ };
154
164
  this._handleTabExitForward = (ev) => {
155
165
  if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
156
166
  return;
@@ -160,6 +170,29 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
160
170
  utilities.UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
161
171
  }
162
172
  };
173
+ this._keepFocusWithinDropdownForwards = (ev) => {
174
+ var _a, _b;
175
+ if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
176
+ return;
177
+ const $target = ev.target;
178
+ if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
179
+ this._handleFocusOnNextElementAfterDropdown(ev);
180
+ return;
181
+ }
182
+ if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
183
+ this._handleFocusFromTogglerForwards(ev);
184
+ return;
185
+ }
186
+ this._handleFocusFromSentinelEndForwards(ev, $target);
187
+ };
188
+ this._handleTabBackward = (ev) => {
189
+ if (this.isSearchFocusTrapFixEnabled) {
190
+ this._handleTabExitBackward(ev);
191
+ }
192
+ else {
193
+ this._keepFocusWithinDropdownBackwards(ev);
194
+ }
195
+ };
163
196
  this._handleTabExitBackward = (ev) => {
164
197
  if (!this.opened || !this.$dropdownContent || !this.preventFocusTrap)
165
198
  return;
@@ -167,6 +200,18 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
167
200
  this.hide();
168
201
  utilities.UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
169
202
  };
203
+ this._keepFocusWithinDropdownBackwards = (ev) => {
204
+ if (!this.opened || !this.$dropdownContent)
205
+ return;
206
+ const $target = ev.target;
207
+ if (this.preventFocusTrap) {
208
+ this._handleDefaultFocusFromDropdownBackwards(ev);
209
+ }
210
+ else {
211
+ this._handleFocusFromTogglerBackwards(ev, $target);
212
+ this._handleFocusFromSentinelStartBackwards(ev, $target);
213
+ }
214
+ };
170
215
  this._hoverToggle = async (ev) => {
171
216
  if (window.innerWidth < global_constants.BREAKPOINTS.xs)
172
217
  return;
@@ -187,7 +232,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
187
232
  this._focusOnFirstContentElement = () => {
188
233
  if (!this.$dropdownContent)
189
234
  return;
190
- const $firstFocusableElement = this._focusTrapController.getFocusableElements(this.$dropdownContent)[0];
235
+ const $firstFocusableElement = this.isSearchFocusTrapFixEnabled ? this._focusTrapController.getFocusableElements(this.$dropdownContent)[0] : this._getTrulyFocusableElements(this.$dropdownContent)[0];
191
236
  if ($firstFocusableElement)
192
237
  $firstFocusableElement.focus();
193
238
  };
@@ -216,13 +261,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
216
261
  host: this,
217
262
  target: document.body,
218
263
  keys: ['tab'],
219
- callback: this._handleTabExitForward
264
+ callback: this._handleTabForward
220
265
  });
221
266
  new keystrokes_controller.KeystrokesController({
222
267
  host: this,
223
268
  target: document.body,
224
269
  keys: [['shift', 'tab']],
225
- callback: this._handleTabExitBackward,
270
+ callback: this._handleTabBackward,
226
271
  containerSelectors: ['h-dropdown', 'h-dropdown-content']
227
272
  });
228
273
  }
@@ -299,6 +344,74 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
299
344
  (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
300
345
  }
301
346
  }
347
+ _handleFocusOnNextElementAfterDropdown(ev) {
348
+ ev.preventDefault();
349
+ this.hide();
350
+ utilities.UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
351
+ return;
352
+ }
353
+ _handleFocusFromTogglerForwards(ev) {
354
+ if (!this.$dropdownContent)
355
+ return;
356
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
357
+ if (trulyFocusableElements.length === 0)
358
+ return;
359
+ ev.preventDefault();
360
+ trulyFocusableElements[0].focus();
361
+ }
362
+ _handleFocusFromSentinelEndForwards(ev, $target) {
363
+ var _a;
364
+ if (!this.$dropdownContent)
365
+ return;
366
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
367
+ const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
368
+ if ($target !== $lastFocusableElement)
369
+ return;
370
+ ev.preventDefault();
371
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
372
+ }
373
+ _handleDefaultFocusFromDropdownBackwards(ev) {
374
+ ev.preventDefault();
375
+ this.hide();
376
+ utilities.UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
377
+ }
378
+ _handleFocusFromTogglerBackwards(ev, $target) {
379
+ var _a;
380
+ if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
381
+ return;
382
+ ev.preventDefault();
383
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
384
+ if (trulyFocusableElements.length === 0)
385
+ return;
386
+ const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
387
+ $lastFocusableElement.focus();
388
+ }
389
+ _handleFocusFromSentinelStartBackwards(ev, $target) {
390
+ var _a;
391
+ if (!this.$dropdownContent)
392
+ return;
393
+ const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
394
+ if ($target !== $firstFocusableElement)
395
+ return;
396
+ ev.preventDefault();
397
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
398
+ }
399
+ _getTrulyFocusableElements($container) {
400
+ const focusableElements = utilities.UiDomUtils.getFocusableElements($container);
401
+ return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
402
+ }
403
+ _isElementTrulyFocusable($el) {
404
+ const style = window.getComputedStyle($el);
405
+ if (style.display === 'none' || style.visibility === 'hidden') {
406
+ return false;
407
+ }
408
+ if ($el.nodeName === 'H-PORTAL')
409
+ return true;
410
+ const $parent = $el.parentElement;
411
+ if (!$parent)
412
+ return true;
413
+ return this._isElementTrulyFocusable($parent);
414
+ }
302
415
  _isHoveredWithinDropdown(element) {
303
416
  var _a;
304
417
  if (element === this)
@@ -404,6 +517,10 @@ tslib_es6.__decorate([
404
517
  decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
405
518
  tslib_es6.__metadata("design:type", Object)
406
519
  ], exports.HDropdown.prototype, "noAutoFocus", void 0);
520
+ tslib_es6.__decorate([
521
+ decorators_js.property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
522
+ tslib_es6.__metadata("design:type", Boolean)
523
+ ], exports.HDropdown.prototype, "isSearchFocusTrapFixEnabled", void 0);
407
524
  exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
408
525
  phoenix_custom_element.phoenixCustomElement('h-dropdown'),
409
526
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;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;"}
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,iBAAiB,qDAAyD;AAC1E;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -13,6 +13,7 @@ var search_constants = require('../../search_constants.js');
13
13
  exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
14
14
  constructor() {
15
15
  super(...arguments);
16
+ this.isSearchFocusTrapFixEnabled = false;
16
17
  this._isSearchPhraseCleared = false;
17
18
  this._setupAttributes = () => {
18
19
  var _a, _b, _c, _d;
@@ -72,26 +73,60 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
72
73
  }
73
74
  });
74
75
  });
75
- this.input.addEventListener('keydown', (ev) => {
76
- if (ev.key !== 'Enter' || ev.repeat)
77
- return;
78
- if (this._isSearchPhraseCleared) {
79
- this._isSearchPhraseCleared = false;
80
- return;
81
- }
82
- this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
83
- detail: { searchPhrase: ev.target.value }
76
+ if (this.isSearchFocusTrapFixEnabled) {
77
+ this.input.addEventListener('keydown', (ev) => {
78
+ if (ev.key !== 'Enter' || ev.repeat)
79
+ return;
80
+ if (this._isSearchPhraseCleared) {
81
+ this._isSearchPhraseCleared = false;
82
+ return;
83
+ }
84
+ this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
85
+ detail: { searchPhrase: ev.target.value }
86
+ });
84
87
  });
85
- });
86
- this.input.addEventListener('keyup', debounce['default']((ev) => {
87
- if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
88
- return;
89
- this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
90
- detail: {
91
- searchPhrase: ev.target.value
88
+ this.input.addEventListener('keyup', debounce['default']((ev) => {
89
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
90
+ return;
91
+ this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
92
+ detail: {
93
+ searchPhrase: ev.target.value
94
+ }
95
+ });
96
+ }, 200));
97
+ }
98
+ else {
99
+ this.input.addEventListener('keyup', (ev) => {
100
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
101
+ return;
102
+ if (ev.key !== 'Enter') {
103
+ this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
104
+ detail: {
105
+ searchPhrase: ev.target.value
106
+ }
107
+ });
108
+ return;
109
+ }
110
+ if (this._isSearchPhraseCleared) {
111
+ this._isSearchPhraseCleared = false;
112
+ return;
92
113
  }
114
+ this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
115
+ detail: {
116
+ searchPhrase: ev.target.value
117
+ }
118
+ });
93
119
  });
94
- }, 200));
120
+ this.input.addEventListener('keyup', debounce['default']((ev) => {
121
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
122
+ return;
123
+ this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
124
+ detail: {
125
+ searchPhrase: ev.target.value
126
+ }
127
+ });
128
+ }, 200));
129
+ }
95
130
  this.input.addEventListener('search', (ev) => {
96
131
  if (this.input.value !== '') {
97
132
  return;
@@ -125,6 +160,10 @@ tslib_es6.__decorate([
125
160
  decorators.property({ type: String, attribute: 'module-instance-id' }),
126
161
  tslib_es6.__metadata("design:type", String)
127
162
  ], exports.HSearchInput.prototype, "moduleInstanceId", void 0);
163
+ tslib_es6.__decorate([
164
+ decorators.property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
165
+ tslib_es6.__metadata("design:type", Boolean)
166
+ ], exports.HSearchInput.prototype, "isSearchFocusTrapFixEnabled", void 0);
128
167
  tslib_es6.__decorate([
129
168
  decorators.state(),
130
169
  tslib_es6.__metadata("design:type", Boolean)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
18
18
  id: string;
19
19
  preventFocusTrap: boolean;
20
20
  noAutoFocus: boolean;
21
+ isSearchFocusTrapFixEnabled: boolean;
21
22
  $dropdownToggler: HDropdownToggler | null;
22
23
  $dropdownContent: HDropdownContent | null;
23
24
  $nestedDropdownContentElements?: HDropdownContent[];
@@ -44,8 +45,20 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
44
45
  private _observeScrollToggling;
45
46
  private _toggleScroll;
46
47
  private _closeDropdownOnEscape;
48
+ private _handleTabForward;
47
49
  private _handleTabExitForward;
50
+ private _keepFocusWithinDropdownForwards;
51
+ private _handleFocusOnNextElementAfterDropdown;
52
+ private _handleFocusFromTogglerForwards;
53
+ private _handleFocusFromSentinelEndForwards;
54
+ private _handleTabBackward;
48
55
  private _handleTabExitBackward;
56
+ private _keepFocusWithinDropdownBackwards;
57
+ private _handleDefaultFocusFromDropdownBackwards;
58
+ private _handleFocusFromTogglerBackwards;
59
+ private _handleFocusFromSentinelStartBackwards;
60
+ private _getTrulyFocusableElements;
61
+ private _isElementTrulyFocusable;
49
62
  private _hoverToggle;
50
63
  private _isHoveredWithinDropdown;
51
64
  private _focusOnFirstContentElement;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -31,6 +31,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
31
31
  this.id = v4();
32
32
  this.preventFocusTrap = false;
33
33
  this.noAutoFocus = false;
34
+ this.isSearchFocusTrapFixEnabled = false;
34
35
  this._backdropController = new BackdropController();
35
36
  this._focusTrapController = new FocusTrapController(this, {
36
37
  mode: FOCUS_TRAP_STRATEGY_TYPES.toggler,
@@ -74,7 +75,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
74
75
  this._dispatchShowDropdownEvent();
75
76
  (_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`);
76
77
  this._toggleScroll();
77
- if (!this.preventFocusTrap)
78
+ if (this.isSearchFocusTrapFixEnabled && !this.preventFocusTrap)
78
79
  this._focusTrapController.activate();
79
80
  resolve();
80
81
  }, transitionDuration);
@@ -116,7 +117,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
116
117
  var _a;
117
118
  (_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`);
118
119
  this.opened = false;
119
- this._focusTrapController.deactivate();
120
+ if (this.isSearchFocusTrapFixEnabled)
121
+ this._focusTrapController.deactivate();
120
122
  this._dispatchHideDropdownEvent();
121
123
  resolve();
122
124
  }, transitionDuration);
@@ -147,6 +149,14 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
147
149
  return;
148
150
  await this.hide();
149
151
  };
152
+ this._handleTabForward = (ev) => {
153
+ if (this.isSearchFocusTrapFixEnabled) {
154
+ this._handleTabExitForward(ev);
155
+ }
156
+ else {
157
+ this._keepFocusWithinDropdownForwards(ev);
158
+ }
159
+ };
150
160
  this._handleTabExitForward = (ev) => {
151
161
  if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
152
162
  return;
@@ -156,6 +166,29 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
156
166
  UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
157
167
  }
158
168
  };
169
+ this._keepFocusWithinDropdownForwards = (ev) => {
170
+ var _a, _b;
171
+ if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
172
+ return;
173
+ const $target = ev.target;
174
+ if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
175
+ this._handleFocusOnNextElementAfterDropdown(ev);
176
+ return;
177
+ }
178
+ if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
179
+ this._handleFocusFromTogglerForwards(ev);
180
+ return;
181
+ }
182
+ this._handleFocusFromSentinelEndForwards(ev, $target);
183
+ };
184
+ this._handleTabBackward = (ev) => {
185
+ if (this.isSearchFocusTrapFixEnabled) {
186
+ this._handleTabExitBackward(ev);
187
+ }
188
+ else {
189
+ this._keepFocusWithinDropdownBackwards(ev);
190
+ }
191
+ };
159
192
  this._handleTabExitBackward = (ev) => {
160
193
  if (!this.opened || !this.$dropdownContent || !this.preventFocusTrap)
161
194
  return;
@@ -163,6 +196,18 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
163
196
  this.hide();
164
197
  UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
165
198
  };
199
+ this._keepFocusWithinDropdownBackwards = (ev) => {
200
+ if (!this.opened || !this.$dropdownContent)
201
+ return;
202
+ const $target = ev.target;
203
+ if (this.preventFocusTrap) {
204
+ this._handleDefaultFocusFromDropdownBackwards(ev);
205
+ }
206
+ else {
207
+ this._handleFocusFromTogglerBackwards(ev, $target);
208
+ this._handleFocusFromSentinelStartBackwards(ev, $target);
209
+ }
210
+ };
166
211
  this._hoverToggle = async (ev) => {
167
212
  if (window.innerWidth < BREAKPOINTS.xs)
168
213
  return;
@@ -183,7 +228,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
183
228
  this._focusOnFirstContentElement = () => {
184
229
  if (!this.$dropdownContent)
185
230
  return;
186
- const $firstFocusableElement = this._focusTrapController.getFocusableElements(this.$dropdownContent)[0];
231
+ const $firstFocusableElement = this.isSearchFocusTrapFixEnabled ? this._focusTrapController.getFocusableElements(this.$dropdownContent)[0] : this._getTrulyFocusableElements(this.$dropdownContent)[0];
187
232
  if ($firstFocusableElement)
188
233
  $firstFocusableElement.focus();
189
234
  };
@@ -212,13 +257,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
212
257
  host: this,
213
258
  target: document.body,
214
259
  keys: ['tab'],
215
- callback: this._handleTabExitForward
260
+ callback: this._handleTabForward
216
261
  });
217
262
  new KeystrokesController({
218
263
  host: this,
219
264
  target: document.body,
220
265
  keys: [['shift', 'tab']],
221
- callback: this._handleTabExitBackward,
266
+ callback: this._handleTabBackward,
222
267
  containerSelectors: ['h-dropdown', 'h-dropdown-content']
223
268
  });
224
269
  }
@@ -295,6 +340,74 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
295
340
  (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
296
341
  }
297
342
  }
343
+ _handleFocusOnNextElementAfterDropdown(ev) {
344
+ ev.preventDefault();
345
+ this.hide();
346
+ UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
347
+ return;
348
+ }
349
+ _handleFocusFromTogglerForwards(ev) {
350
+ if (!this.$dropdownContent)
351
+ return;
352
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
353
+ if (trulyFocusableElements.length === 0)
354
+ return;
355
+ ev.preventDefault();
356
+ trulyFocusableElements[0].focus();
357
+ }
358
+ _handleFocusFromSentinelEndForwards(ev, $target) {
359
+ var _a;
360
+ if (!this.$dropdownContent)
361
+ return;
362
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
363
+ const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
364
+ if ($target !== $lastFocusableElement)
365
+ return;
366
+ ev.preventDefault();
367
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
368
+ }
369
+ _handleDefaultFocusFromDropdownBackwards(ev) {
370
+ ev.preventDefault();
371
+ this.hide();
372
+ UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
373
+ }
374
+ _handleFocusFromTogglerBackwards(ev, $target) {
375
+ var _a;
376
+ if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
377
+ return;
378
+ ev.preventDefault();
379
+ const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
380
+ if (trulyFocusableElements.length === 0)
381
+ return;
382
+ const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
383
+ $lastFocusableElement.focus();
384
+ }
385
+ _handleFocusFromSentinelStartBackwards(ev, $target) {
386
+ var _a;
387
+ if (!this.$dropdownContent)
388
+ return;
389
+ const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
390
+ if ($target !== $firstFocusableElement)
391
+ return;
392
+ ev.preventDefault();
393
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
394
+ }
395
+ _getTrulyFocusableElements($container) {
396
+ const focusableElements = UiDomUtils.getFocusableElements($container);
397
+ return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
398
+ }
399
+ _isElementTrulyFocusable($el) {
400
+ const style = window.getComputedStyle($el);
401
+ if (style.display === 'none' || style.visibility === 'hidden') {
402
+ return false;
403
+ }
404
+ if ($el.nodeName === 'H-PORTAL')
405
+ return true;
406
+ const $parent = $el.parentElement;
407
+ if (!$parent)
408
+ return true;
409
+ return this._isElementTrulyFocusable($parent);
410
+ }
298
411
  _isHoveredWithinDropdown(element) {
299
412
  var _a;
300
413
  if (element === this)
@@ -400,6 +513,10 @@ __decorate([
400
513
  property({ type: Boolean, attribute: 'no-autofocus' }),
401
514
  __metadata("design:type", Object)
402
515
  ], HDropdown.prototype, "noAutoFocus", void 0);
516
+ __decorate([
517
+ property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
518
+ __metadata("design:type", Boolean)
519
+ ], HDropdown.prototype, "isSearchFocusTrapFixEnabled", void 0);
403
520
  HDropdown = HDropdown_1 = __decorate([
404
521
  phoenixCustomElement('h-dropdown'),
405
522
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;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;"}
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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts CHANGED
@@ -3,6 +3,7 @@ import { PropertyValues } from 'lit';
3
3
  export declare class HSearchInput extends PhoenixLightLitElement {
4
4
  input: HTMLInputElement | null;
5
5
  moduleInstanceId: string;
6
+ isSearchFocusTrapFixEnabled: boolean;
6
7
  private _isSearchPhraseCleared;
7
8
  connectedCallback(): void;
8
9
  firstUpdated(props: PropertyValues): void;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -9,6 +9,7 @@ import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES }
9
9
  let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
10
10
  constructor() {
11
11
  super(...arguments);
12
+ this.isSearchFocusTrapFixEnabled = false;
12
13
  this._isSearchPhraseCleared = false;
13
14
  this._setupAttributes = () => {
14
15
  var _a, _b, _c, _d;
@@ -68,26 +69,60 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
68
69
  }
69
70
  });
70
71
  });
71
- this.input.addEventListener('keydown', (ev) => {
72
- if (ev.key !== 'Enter' || ev.repeat)
73
- return;
74
- if (this._isSearchPhraseCleared) {
75
- this._isSearchPhraseCleared = false;
76
- return;
77
- }
78
- this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
79
- detail: { searchPhrase: ev.target.value }
72
+ if (this.isSearchFocusTrapFixEnabled) {
73
+ this.input.addEventListener('keydown', (ev) => {
74
+ if (ev.key !== 'Enter' || ev.repeat)
75
+ return;
76
+ if (this._isSearchPhraseCleared) {
77
+ this._isSearchPhraseCleared = false;
78
+ return;
79
+ }
80
+ this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
81
+ detail: { searchPhrase: ev.target.value }
82
+ });
80
83
  });
81
- });
82
- this.input.addEventListener('keyup', debounce_1((ev) => {
83
- if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
84
- return;
85
- this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
86
- detail: {
87
- searchPhrase: ev.target.value
84
+ this.input.addEventListener('keyup', debounce_1((ev) => {
85
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
86
+ return;
87
+ this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
88
+ detail: {
89
+ searchPhrase: ev.target.value
90
+ }
91
+ });
92
+ }, 200));
93
+ }
94
+ else {
95
+ this.input.addEventListener('keyup', (ev) => {
96
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
97
+ return;
98
+ if (ev.key !== 'Enter') {
99
+ this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
100
+ detail: {
101
+ searchPhrase: ev.target.value
102
+ }
103
+ });
104
+ return;
105
+ }
106
+ if (this._isSearchPhraseCleared) {
107
+ this._isSearchPhraseCleared = false;
108
+ return;
88
109
  }
110
+ this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
111
+ detail: {
112
+ searchPhrase: ev.target.value
113
+ }
114
+ });
89
115
  });
90
- }, 200));
116
+ this.input.addEventListener('keyup', debounce_1((ev) => {
117
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
118
+ return;
119
+ this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
120
+ detail: {
121
+ searchPhrase: ev.target.value
122
+ }
123
+ });
124
+ }, 200));
125
+ }
91
126
  this.input.addEventListener('search', (ev) => {
92
127
  if (this.input.value !== '') {
93
128
  return;
@@ -121,6 +156,10 @@ __decorate([
121
156
  property({ type: String, attribute: 'module-instance-id' }),
122
157
  __metadata("design:type", String)
123
158
  ], HSearchInput.prototype, "moduleInstanceId", void 0);
159
+ __decorate([
160
+ property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
161
+ __metadata("design:type", Boolean)
162
+ ], HSearchInput.prototype, "isSearchFocusTrapFixEnabled", void 0);
124
163
  __decorate([
125
164
  state(),
126
165
  __metadata("design:type", Boolean)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;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;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.23-10",
5
+ "version": "1.18.23-11",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",