@shoper/phoenix_design_system 1.18.28 → 1.18.29-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 (47) hide show
  1. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +0 -41
  2. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/search.js +68 -9
  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 +51 -22
  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/controllers/focus_trap_controller/focus_trap_controller.js +44 -0
  8. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
  9. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +66 -0
  10. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
  11. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +14 -0
  12. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
  13. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +10 -0
  14. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
  15. package/build/cjs/packages/phoenix/src/index.js +7 -7
  16. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +0 -5
  17. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +0 -41
  18. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +6 -0
  20. package/build/esm/packages/phoenix/src/components/form/search/search.js +68 -9
  21. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  22. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +1 -0
  23. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +51 -22
  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/controllers/focus_trap_controller/focus_trap_controller.d.ts +13 -0
  26. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +40 -0
  27. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
  28. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +6 -0
  29. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +3 -0
  30. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +1 -0
  31. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +14 -0
  32. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +62 -0
  33. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
  34. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.d.ts +8 -0
  35. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js +2 -0
  36. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js.map +1 -0
  37. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +6 -0
  38. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +10 -0
  39. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
  40. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +3 -0
  41. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js +2 -0
  42. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js.map +1 -0
  43. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts +3 -0
  44. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +6 -0
  45. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
  46. package/build/esm/packages/phoenix/src/index.js +1 -1
  47. package/package.json +1 -1
@@ -1,11 +1,9 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import { html, nothing } from 'lit';
3
2
  import { property } from 'lit/decorators';
4
3
  import { UiDomUtils, ArrayUtils } from '@dreamcommerce/utilities';
5
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
7
6
  import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
8
- import 'lit-html';
9
7
  import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
10
8
  import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
11
9
  import { HColorItem } from './color_item/color_item.js';
@@ -14,7 +12,6 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
14
12
  constructor() {
15
13
  super(...arguments);
16
14
  this.multiple = false;
17
- this.devVisualSubcategories = false;
18
15
  this.selectedColors = [];
19
16
  this.showMoreBtnText = 'Pokaż wszystkie kolory';
20
17
  this._setupEvents = () => {
@@ -138,10 +135,6 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
138
135
  this._$colorSwatchesChildren = [...this.children];
139
136
  this._setupEvents();
140
137
  this._addCssClasses();
141
- if (!this.devVisualSubcategories) {
142
- this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
143
- this._showAllItemsEvent();
144
- }
145
138
  this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
146
139
  this._$colors = [...this.querySelectorAll('h-color-item')];
147
140
  }
@@ -149,26 +142,6 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
149
142
  this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
150
143
  this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
151
144
  }
152
- _hideItems(numberOfVisibleColors) {
153
- if (!this._$colorSwatchesChildren)
154
- return;
155
- this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
156
- if (index > numberOfVisibleColors - 1) {
157
- $colorSwatchesChild.setAttribute('hidden', '');
158
- }
159
- });
160
- }
161
- _showAllItemsEvent() {
162
- this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.showMore, () => {
163
- var _a;
164
- if (!this._$colorSwatchesChildren)
165
- return;
166
- this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
167
- $colorSwatchesChild.removeAttribute('hidden');
168
- });
169
- (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
170
- });
171
- }
172
145
  _handleChangeToNextColorItem({ target }) {
173
146
  const $colorItem = target;
174
147
  const $nextFocusableElement = UiDomUtils.getNextFocusableElement($colorItem);
@@ -234,25 +207,11 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
234
207
  super.disconnectedCallback();
235
208
  document.body.removeEventListener('keydown', this._focusOnSelectedColor);
236
209
  }
237
- render() {
238
- if (!this.devVisualSubcategories) {
239
- return html `
240
- ${this.getSlot('default')}
241
- ${this._$colors.length > this.numberOfVisibleColors
242
- ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
243
- : nothing}
244
- `;
245
- }
246
- }
247
210
  };
248
211
  __decorate([
249
212
  property({ type: Boolean }),
250
213
  __metadata("design:type", Boolean)
251
214
  ], HColorSwatches.prototype, "multiple", void 0);
252
- __decorate([
253
- property({ type: Boolean, attribute: 'dev-visual-subcategories' }),
254
- __metadata("design:type", Boolean)
255
- ], HColorSwatches.prototype, "devVisualSubcategories", void 0);
256
215
  __decorate([
257
216
  property({ type: Number, attribute: 'number-of-visible-colors' }),
258
217
  __metadata("design:type", Number)
@@ -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;"}
@@ -1,11 +1,13 @@
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";
4
5
  export declare class HSearch extends PhoenixLightLitElement {
5
6
  settings: TSearchSettings;
6
7
  view: string;
7
8
  locale: string;
8
9
  isSearchUxFixesFlagEnabled: boolean;
10
+ isSearchFocusTrapFixEnabled: boolean;
9
11
  displayMode: TSearchDisplayMode;
10
12
  moduleInstanceId: string;
11
13
  private _historyContextProvider;
@@ -16,9 +18,11 @@ export declare class HSearch extends PhoenixLightLitElement {
16
18
  private _inputField;
17
19
  private _searchForm;
18
20
  private _togglerElement;
21
+ private _mobileDialogOpener;
19
22
  private _id;
20
23
  private _openSearchButtonAriaLabelId;
21
24
  private _searchContentContainerId;
25
+ mobileFocusTrapController: FocusTrapController;
22
26
  private _searchResultsRef;
23
27
  private _searchHistoryRef;
24
28
  private _searchMessageRef;
@@ -80,6 +84,8 @@ export declare class HSearch extends PhoenixLightLitElement {
80
84
  private _isSuggesterLayerVisible;
81
85
  private _preventSubmitOnSearchClear;
82
86
  private _resetSearchOnFocusOutside;
87
+ private _activateMobileDialog;
88
+ private _deactivateMobileDialog;
83
89
  private _handleOpenSearch;
84
90
  private _handleOpenSearchWithKeyboard;
85
91
  private _setupToggler;
@@ -15,17 +15,25 @@ import { MODAL_EVENTS } from '../../modal/modal_constants.js';
15
15
  import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
16
16
  import { when as n } from '../../../../../../external/lit-html/directives/when.js';
17
17
  import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
18
+ import { FOCUS_TRAP_STRATEGY_TYPES } from '../../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
19
+ import { FocusTrapController } from '../../../controllers/focus_trap_controller/focus_trap_controller.js';
18
20
 
19
21
  let HSearch = class HSearch extends PhoenixLightLitElement {
20
22
  constructor() {
21
23
  super(...arguments);
22
24
  this.view = DEFAULT_VIEW;
23
25
  this.isSearchUxFixesFlagEnabled = false;
26
+ this.isSearchFocusTrapFixEnabled = false;
24
27
  this.displayMode = 'dropdown';
25
28
  this._togglerElement = null;
29
+ this._mobileDialogOpener = null;
26
30
  this._id = v4();
27
31
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
28
32
  this._searchContentContainerId = v4();
33
+ this.mobileFocusTrapController = new FocusTrapController(this, {
34
+ mode: FOCUS_TRAP_STRATEGY_TYPES.cyclic,
35
+ getContainer: () => this
36
+ });
29
37
  this._searchResultsRef = createRef();
30
38
  this._searchHistoryRef = createRef();
31
39
  this._searchMessageRef = createRef();
@@ -321,6 +329,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
321
329
  if (window.innerWidth > BREAKPOINTS.sm) {
322
330
  const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
323
331
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
332
+ if (this.isSearchFocusTrapFixEnabled)
333
+ this._deactivateMobileDialog();
324
334
  if (hasBeenOpened && this.displayMode !== 'dropdown') {
325
335
  const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
326
336
  const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
@@ -336,6 +346,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
336
346
  };
337
347
  this._openMobileView = () => {
338
348
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
349
+ if (this.isSearchFocusTrapFixEnabled)
350
+ this._activateMobileDialog();
339
351
  };
340
352
  this._isSuggesterLayerVisible = () => {
341
353
  var _a;
@@ -356,8 +368,21 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
356
368
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
357
369
  }
358
370
  };
371
+ this._activateMobileDialog = () => {
372
+ this._mobileDialogOpener = document.activeElement;
373
+ this.setAttribute('role', 'dialog');
374
+ this.setAttribute('aria-modal', 'true');
375
+ this.mobileFocusTrapController.activate();
376
+ };
377
+ this._deactivateMobileDialog = () => {
378
+ this.removeAttribute('role');
379
+ this.removeAttribute('aria-modal');
380
+ this.mobileFocusTrapController.deactivate();
381
+ };
359
382
  this._handleOpenSearch = () => {
360
383
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
384
+ if (this.isSearchFocusTrapFixEnabled)
385
+ this._activateMobileDialog();
361
386
  const shouldShowMessage = this._searchPhrase !== '';
362
387
  this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
363
388
  const $searchInput = this.querySelector(`
@@ -366,7 +391,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
366
391
  $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
367
392
  };
368
393
  this._handleOpenSearchWithKeyboard = (ev) => {
369
- if (ev.code !== 'Enter')
394
+ const isRepeated = this.isSearchFocusTrapFixEnabled ? ev.repeat : false;
395
+ if (ev.code !== 'Enter' || isRepeated)
370
396
  return;
371
397
  ev.preventDefault();
372
398
  this._handleOpenSearch();
@@ -375,6 +401,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
375
401
  async connectedCallback() {
376
402
  super.connectedCallback();
377
403
  this._setupContext();
404
+ this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
405
+ if (this.isSearchFocusTrapFixEnabled) {
406
+ this._setupInitialSearchPhrase();
407
+ this._setupListeners();
408
+ this._setupToggler();
409
+ }
378
410
  try {
379
411
  this._searchContextConsumer = new ContextConsumerController(this);
380
412
  this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
@@ -403,10 +435,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
403
435
  catch (_a) {
404
436
  console.error('Search context is not provided');
405
437
  }
406
- this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
407
- this._setupInitialSearchPhrase();
408
- this._setupListeners();
409
- this._setupToggler();
438
+ if (!this.isSearchFocusTrapFixEnabled) {
439
+ this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
440
+ this._setupInitialSearchPhrase();
441
+ this._setupListeners();
442
+ this._setupToggler();
443
+ }
410
444
  }
411
445
  disconnectedCallback() {
412
446
  var _a;
@@ -477,8 +511,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
477
511
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
478
512
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
479
513
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
514
+ if (this.isSearchFocusTrapFixEnabled)
515
+ this._deactivateMobileDialog();
480
516
  this._resetSearchView();
481
517
  this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
518
+ if (this.isSearchFocusTrapFixEnabled)
519
+ requestAnimationFrame(() => { var _a; return (_a = this._mobileDialogOpener) === null || _a === void 0 ? void 0 : _a.focus(); });
482
520
  });
483
521
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
484
522
  const contentLength = this._searchHistory.length;
@@ -585,8 +623,15 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
585
623
  this._setActiveItemId(`${this._id}-1`);
586
624
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
587
625
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
588
- if (this.displayMode === 'dropdown')
589
- this._hideHistorySuggestionsAndResults();
626
+ if (this.displayMode === 'dropdown') {
627
+ const isMobileViewOpen = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
628
+ if (isMobileViewOpen) {
629
+ this._displaySuggester(this._searchPhrase);
630
+ }
631
+ else {
632
+ this._hideHistorySuggestionsAndResults();
633
+ }
634
+ }
590
635
  !this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
591
636
  }
592
637
  _submitSearchPhrase(searchPhrase) {
@@ -597,13 +642,23 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
597
642
  if (!this._togglerElement)
598
643
  return;
599
644
  this._togglerElement.addEventListener('click', this._handleOpenSearch);
600
- this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
645
+ if (this.isSearchFocusTrapFixEnabled) {
646
+ this._togglerElement.addEventListener('keydown', this._handleOpenSearchWithKeyboard);
647
+ }
648
+ else {
649
+ this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
650
+ }
601
651
  }
602
652
  _teardownToggler() {
603
653
  if (!this._togglerElement)
604
654
  return;
605
655
  this._togglerElement.removeEventListener('click', this._handleOpenSearch);
606
- this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
656
+ if (this.isSearchFocusTrapFixEnabled) {
657
+ this._togglerElement.removeEventListener('keydown', this._handleOpenSearchWithKeyboard);
658
+ }
659
+ else {
660
+ this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
661
+ }
607
662
  }
608
663
  render() {
609
664
  super.render();
@@ -664,6 +719,10 @@ __decorate([
664
719
  property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
665
720
  __metadata("design:type", Boolean)
666
721
  ], HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
722
+ __decorate([
723
+ property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
724
+ __metadata("design:type", Boolean)
725
+ ], HSearch.prototype, "isSearchFocusTrapFixEnabled", void 0);
667
726
  __decorate([
668
727
  property({ type: String, attribute: 'display-mode' }),
669
728
  __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,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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -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;
@@ -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,36 +69,60 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
68
69
  }
69
70
  });
70
71
  });
71
- this.input.addEventListener('keyup', (ev) => {
72
- if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
73
- return;
74
- if (ev.key !== 'Enter') {
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
+ });
83
+ });
84
+ this.input.addEventListener('keyup', debounce_1((ev) => {
85
+ if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
86
+ return;
75
87
  this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
76
88
  detail: {
77
89
  searchPhrase: ev.target.value
78
90
  }
79
91
  });
80
- return;
81
- }
82
- if (this._isSearchPhraseCleared) {
83
- this._isSearchPhraseCleared = false;
84
- return;
85
- }
86
- this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
87
- detail: {
88
- searchPhrase: ev.target.value
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;
89
105
  }
90
- });
91
- });
92
- this.input.addEventListener('keyup', debounce_1((ev) => {
93
- if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
94
- return;
95
- this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
96
- detail: {
97
- searchPhrase: ev.target.value
106
+ if (this._isSearchPhraseCleared) {
107
+ this._isSearchPhraseCleared = false;
108
+ return;
98
109
  }
110
+ this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
111
+ detail: {
112
+ searchPhrase: ev.target.value
113
+ }
114
+ });
99
115
  });
100
- }, 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
+ }
101
126
  this.input.addEventListener('search', (ev) => {
102
127
  if (this.input.value !== '') {
103
128
  return;
@@ -131,6 +156,10 @@ __decorate([
131
156
  property({ type: String, attribute: 'module-instance-id' }),
132
157
  __metadata("design:type", String)
133
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);
134
163
  __decorate([
135
164
  state(),
136
165
  __metadata("design:type", Boolean)
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,40 @@
1
+ import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
2
+ import 'lit';
3
+ import { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js';
4
+ import { FOCUS_TRAP_STRATEGY_TYPES } from './strategies/focus_trap_strategy_constants.js';
5
+
6
+ var _a, _FocusTrapController_strategy, _FocusTrapController_createStrategy;
7
+ class FocusTrapController {
8
+ constructor(host, props) {
9
+ _FocusTrapController_strategy.set(this, void 0);
10
+ __classPrivateFieldSet(this, _FocusTrapController_strategy, __classPrivateFieldGet(FocusTrapController, _a, "m", _FocusTrapController_createStrategy).call(FocusTrapController, props), "f");
11
+ host.addController(this);
12
+ }
13
+ get strategy() {
14
+ return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
15
+ }
16
+ hostConnected() {
17
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
18
+ }
19
+ hostDisconnected() {
20
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
21
+ }
22
+ activate() {
23
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
24
+ }
25
+ deactivate() {
26
+ __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
27
+ }
28
+ getFocusableElements(container) {
29
+ return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
30
+ }
31
+ }
32
+ _a = FocusTrapController, _FocusTrapController_strategy = new WeakMap(), _FocusTrapController_createStrategy = function _FocusTrapController_createStrategy(props) {
33
+ switch (props.mode) {
34
+ case FOCUS_TRAP_STRATEGY_TYPES.cyclic: return new CyclicFocusTrapStrategy(props);
35
+ default: return new CyclicFocusTrapStrategy(props);
36
+ }
37
+ };
38
+
39
+ export { FocusTrapController };
40
+ //# 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;"}
@@ -0,0 +1,6 @@
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
+ export declare type TCyclicFocusTrapProps = TCyclicFocusTrapStrategyProps & {
4
+ mode: typeof FOCUS_TRAP_STRATEGY_TYPES.cyclic;
5
+ };
6
+ export declare type TFocusTrapProps = TCyclicFocusTrapProps;
@@ -0,0 +1,3 @@
1
+ import './strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types';
2
+ import './strategies/focus_trap_strategy_constants';
3
+ //# 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"}
@@ -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
+ }
@@ -0,0 +1,62 @@
1
+ import { UiDomUtils } from '@dreamcommerce/utilities';
2
+
3
+ class BaseFocusTrapStrategy {
4
+ constructor(getContainer) {
5
+ this.getContainer = getContainer;
6
+ this.active = false;
7
+ this.noAutofocus = false;
8
+ this._handleKeyDown = (ev) => {
9
+ if (!this.active || ev.code !== 'Tab')
10
+ return;
11
+ const container = this.getContainer();
12
+ if (!container)
13
+ return;
14
+ const focusableElements = this.getFocusableElements(container);
15
+ if (focusableElements.length === 0)
16
+ return;
17
+ const $target = ev.target;
18
+ if (ev.shiftKey) {
19
+ if ($target === focusableElements[0]) {
20
+ ev.preventDefault();
21
+ focusableElements[focusableElements.length - 1].focus();
22
+ }
23
+ }
24
+ else {
25
+ if ($target === focusableElements[focusableElements.length - 1]) {
26
+ ev.preventDefault();
27
+ focusableElements[0].focus();
28
+ }
29
+ }
30
+ };
31
+ }
32
+ attach() {
33
+ document.addEventListener('keydown', this._handleKeyDown);
34
+ }
35
+ detach() {
36
+ document.removeEventListener('keydown', this._handleKeyDown);
37
+ }
38
+ activate() {
39
+ this.active = true;
40
+ }
41
+ deactivate() {
42
+ this.active = false;
43
+ }
44
+ getFocusableElements(container) {
45
+ return UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
46
+ }
47
+ _isElementTrulyFocusable($el) {
48
+ const style = window.getComputedStyle($el);
49
+ if (style.display === 'none' || style.visibility === 'hidden') {
50
+ return false;
51
+ }
52
+ if ($el.nodeName === 'H-PORTAL')
53
+ return true;
54
+ const $parent = $el.parentElement;
55
+ if (!$parent)
56
+ return true;
57
+ return this._isElementTrulyFocusable($parent);
58
+ }
59
+ }
60
+
61
+ export { BaseFocusTrapStrategy };
62
+ //# sourceMappingURL=base_focus_trap_strategy.js.map
@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8 @@
1
+ export interface IBaseFocusTrapStrategy {
2
+ noAutofocus: boolean;
3
+ attach(): void;
4
+ detach(): void;
5
+ activate(): void;
6
+ deactivate(): void;
7
+ getFocusableElements(container: HTMLElement): HTMLElement[];
8
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=base_focus_trap_strategy_types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base_focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,6 @@
1
+ import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
2
+ import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
3
+ import { TCyclicFocusTrapStrategyProps } from './cyclic_focus_trap_strategy_types';
4
+ export declare class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
5
+ constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
6
+ }
@@ -0,0 +1,10 @@
1
+ import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
2
+
3
+ class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy {
4
+ constructor({ getContainer }) {
5
+ super(getContainer);
6
+ }
7
+ }
8
+
9
+ export { CyclicFocusTrapStrategy };
10
+ //# sourceMappingURL=cyclic_focus_trap_strategy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -0,0 +1,3 @@
1
+ export declare type TCyclicFocusTrapStrategyProps = {
2
+ getContainer: () => HTMLElement | undefined;
3
+ };