@shoper/phoenix_design_system 1.18.28-0 → 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 +91 -16
  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 +7 -0
  20. package/build/esm/packages/phoenix/src/components/form/search/search.js +91 -16
  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,9 +1,7 @@
1
1
  import { HColorItem } from "./color_item/color_item";
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
- import { TemplateResult } from 'lit-html';
4
3
  export declare class HColorSwatches extends PhoenixLightLitElement {
5
4
  multiple: boolean;
6
- devVisualSubcategories: boolean;
7
5
  numberOfVisibleColors: number;
8
6
  selectedColors: HColorItem[];
9
7
  showMoreBtnText: string;
@@ -13,8 +11,6 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
13
11
  clearAllColors(): void;
14
12
  connectedCallback(): void;
15
13
  private _addCssClasses;
16
- private _hideItems;
17
- private _showAllItemsEvent;
18
14
  private _setupEvents;
19
15
  private _setupCheckboxGroupEvents;
20
16
  private _setupRadioGroupEvents;
@@ -34,5 +30,4 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
34
30
  private _removeExistingColorFromArray;
35
31
  private _dispatchColorChangeEvent;
36
32
  disconnectedCallback(): void;
37
- protected render(): TemplateResult | void;
38
33
  }
@@ -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,10 +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;
9
+ isSearchUxFixesFlagEnabled: boolean;
10
+ isSearchFocusTrapFixEnabled: boolean;
8
11
  displayMode: TSearchDisplayMode;
9
12
  moduleInstanceId: string;
10
13
  private _historyContextProvider;
@@ -15,9 +18,11 @@ export declare class HSearch extends PhoenixLightLitElement {
15
18
  private _inputField;
16
19
  private _searchForm;
17
20
  private _togglerElement;
21
+ private _mobileDialogOpener;
18
22
  private _id;
19
23
  private _openSearchButtonAriaLabelId;
20
24
  private _searchContentContainerId;
25
+ mobileFocusTrapController: FocusTrapController;
21
26
  private _searchResultsRef;
22
27
  private _searchHistoryRef;
23
28
  private _searchMessageRef;
@@ -79,6 +84,8 @@ export declare class HSearch extends PhoenixLightLitElement {
79
84
  private _isSuggesterLayerVisible;
80
85
  private _preventSubmitOnSearchClear;
81
86
  private _resetSearchOnFocusOutside;
87
+ private _activateMobileDialog;
88
+ private _deactivateMobileDialog;
82
89
  private _handleOpenSearch;
83
90
  private _handleOpenSearchWithKeyboard;
84
91
  private _setupToggler;
@@ -15,16 +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;
25
+ this.isSearchUxFixesFlagEnabled = false;
26
+ this.isSearchFocusTrapFixEnabled = false;
23
27
  this.displayMode = 'dropdown';
24
28
  this._togglerElement = null;
29
+ this._mobileDialogOpener = null;
25
30
  this._id = v4();
26
31
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
27
32
  this._searchContentContainerId = v4();
33
+ this.mobileFocusTrapController = new FocusTrapController(this, {
34
+ mode: FOCUS_TRAP_STRATEGY_TYPES.cyclic,
35
+ getContainer: () => this
36
+ });
28
37
  this._searchResultsRef = createRef();
29
38
  this._searchHistoryRef = createRef();
30
39
  this._searchMessageRef = createRef();
@@ -44,14 +53,24 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
44
53
  this._handleSubmitForm = () => {
45
54
  if (this._activeItemId !== `${this._id}-1`)
46
55
  return;
47
- const inputFieldValue = this._inputField.value.trim();
56
+ const inputFieldValue = this.isSearchUxFixesFlagEnabled ? this._inputField.value.trim() : this._inputField.value;
48
57
  if (inputFieldValue === '') {
49
58
  this._updateSearchView(this._inputField.value, true);
50
- return;
59
+ if (this.isSearchUxFixesFlagEnabled)
60
+ return;
61
+ }
62
+ else {
63
+ if (!this.isSearchUxFixesFlagEnabled)
64
+ this._resetSearchView();
65
+ }
66
+ if (this.isSearchUxFixesFlagEnabled) {
67
+ const normalizedPhrase = this._inputField.value.trim().replace(/\s+/g, ' ');
68
+ this._inputField.value = normalizedPhrase;
69
+ this._submitSearchPhrase(normalizedPhrase);
70
+ }
71
+ else {
72
+ this._submitSearchPhrase(this._inputField.value);
51
73
  }
52
- const normalizedPhrase = this._inputField.value.trim().replace(/\s+/g, ' ');
53
- this._inputField.value = normalizedPhrase;
54
- this._submitSearchPhrase(normalizedPhrase);
55
74
  };
56
75
  this._bindKeys = (ev) => {
57
76
  if (this.displayMode !== 'dropdown') {
@@ -301,7 +320,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
301
320
  if (!outsideClick)
302
321
  return;
303
322
  this._resetSearchView();
304
- this._removeSearchKeyboardNavigation();
323
+ this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
305
324
  };
306
325
  this._switchTypeOfSearchView = () => {
307
326
  var _a;
@@ -310,6 +329,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
310
329
  if (window.innerWidth > BREAKPOINTS.sm) {
311
330
  const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
312
331
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
332
+ if (this.isSearchFocusTrapFixEnabled)
333
+ this._deactivateMobileDialog();
313
334
  if (hasBeenOpened && this.displayMode !== 'dropdown') {
314
335
  const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
315
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');
@@ -325,6 +346,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
325
346
  };
326
347
  this._openMobileView = () => {
327
348
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
349
+ if (this.isSearchFocusTrapFixEnabled)
350
+ this._activateMobileDialog();
328
351
  };
329
352
  this._isSuggesterLayerVisible = () => {
330
353
  var _a;
@@ -345,8 +368,21 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
345
368
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
346
369
  }
347
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
+ };
348
382
  this._handleOpenSearch = () => {
349
383
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
384
+ if (this.isSearchFocusTrapFixEnabled)
385
+ this._activateMobileDialog();
350
386
  const shouldShowMessage = this._searchPhrase !== '';
351
387
  this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
352
388
  const $searchInput = this.querySelector(`
@@ -355,7 +391,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
355
391
  $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
356
392
  };
357
393
  this._handleOpenSearchWithKeyboard = (ev) => {
358
- if (ev.code !== 'Enter')
394
+ const isRepeated = this.isSearchFocusTrapFixEnabled ? ev.repeat : false;
395
+ if (ev.code !== 'Enter' || isRepeated)
359
396
  return;
360
397
  ev.preventDefault();
361
398
  this._handleOpenSearch();
@@ -364,6 +401,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
364
401
  async connectedCallback() {
365
402
  super.connectedCallback();
366
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
+ }
367
410
  try {
368
411
  this._searchContextConsumer = new ContextConsumerController(this);
369
412
  this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
@@ -392,10 +435,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
392
435
  catch (_a) {
393
436
  console.error('Search context is not provided');
394
437
  }
395
- this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
396
- this._setupInitialSearchPhrase();
397
- this._setupListeners();
398
- 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
+ }
399
444
  }
400
445
  disconnectedCallback() {
401
446
  var _a;
@@ -466,8 +511,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
466
511
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
467
512
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
468
513
  this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
514
+ if (this.isSearchFocusTrapFixEnabled)
515
+ this._deactivateMobileDialog();
469
516
  this._resetSearchView();
470
- this._removeSearchKeyboardNavigation();
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(); });
471
520
  });
472
521
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
473
522
  const contentLength = this._searchHistory.length;
@@ -574,8 +623,16 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
574
623
  this._setActiveItemId(`${this._id}-1`);
575
624
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
576
625
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
577
- if (this.displayMode === 'dropdown')
578
- 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
+ }
635
+ !this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
579
636
  }
580
637
  _submitSearchPhrase(searchPhrase) {
581
638
  this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
@@ -585,13 +642,23 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
585
642
  if (!this._togglerElement)
586
643
  return;
587
644
  this._togglerElement.addEventListener('click', this._handleOpenSearch);
588
- 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
+ }
589
651
  }
590
652
  _teardownToggler() {
591
653
  if (!this._togglerElement)
592
654
  return;
593
655
  this._togglerElement.removeEventListener('click', this._handleOpenSearch);
594
- 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
+ }
595
662
  }
596
663
  render() {
597
664
  super.render();
@@ -648,6 +715,14 @@ __decorate([
648
715
  property({ type: String }),
649
716
  __metadata("design:type", String)
650
717
  ], HSearch.prototype, "locale", void 0);
718
+ __decorate([
719
+ property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
720
+ __metadata("design:type", Boolean)
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);
651
726
  __decorate([
652
727
  property({ type: String, attribute: 'display-mode' }),
653
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;"}
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
+ }