@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.
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +0 -41
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +91 -16
- package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +51 -22
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +44 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +66 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +14 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +10 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
- package/build/cjs/packages/phoenix/src/index.js +7 -7
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +0 -5
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +0 -41
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +7 -0
- package/build/esm/packages/phoenix/src/components/form/search/search.js +91 -16
- package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +51 -22
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +13 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +40 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +6 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +3 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +14 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +62 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.d.ts +8 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js +2 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +6 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +10 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +3 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js +2 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts +3 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +6 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
- package/build/esm/packages/phoenix/src/index.js +1 -1
- 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;
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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;"}
|
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,36 +69,60 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
|
|
|
68
69
|
}
|
|
69
70
|
});
|
|
70
71
|
});
|
|
71
|
-
this.
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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;"}
|
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts
ADDED
|
@@ -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
|
+
}
|
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js
ADDED
|
@@ -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 @@
|
|
|
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
|
+
}
|