@shoper/phoenix_design_system 1.18.23-13 → 1.18.23-15
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/dropdown/dropdown.js +3 -51
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +8 -55
- 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 +22 -51
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +5 -10
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/modal/modal.js +11 -39
- package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +10 -33
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -6
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +3 -51
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +0 -6
- package/build/esm/packages/phoenix/src/components/form/search/search.js +8 -55
- 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 +0 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +22 -51
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +0 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.js +5 -10
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/modal/modal.js +11 -39
- package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/sheet/sheet.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js +10 -33
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
- package/package.json +1 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +0 -47
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +0 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +0 -66
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +0 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +0 -14
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +0 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +0 -12
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +0 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +0 -29
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +0 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +0 -60
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +0 -13
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +0 -43
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +0 -14
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +0 -5
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +0 -14
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +0 -62
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.d.ts +0 -8
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js +0 -2
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +0 -6
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +0 -10
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +0 -3
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js +0 -2
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts +0 -5
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +0 -8
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.d.ts +0 -7
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +0 -25
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.d.ts +0 -4
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js +0 -2
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.d.ts +0 -11
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +0 -56
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +0 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.d.ts +0 -4
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js +0 -2
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js.map +0 -1
|
@@ -13,8 +13,6 @@ var ref_js = require('lit-html/directives/ref.js');
|
|
|
13
13
|
var portal_constants = require('../portal/portal_constants.js');
|
|
14
14
|
var backdrop_constants = require('../backdrop/backdrop_constants.js');
|
|
15
15
|
var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
|
|
16
|
-
var focus_trap_strategy_constants = require('../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js');
|
|
17
|
-
var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
|
|
18
16
|
var sheet_constants = require('./sheet_constants.js');
|
|
19
17
|
var sheet_close = require('./sheet_close.js');
|
|
20
18
|
|
|
@@ -26,7 +24,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
26
24
|
this.class = '';
|
|
27
25
|
this.transition = 'scale';
|
|
28
26
|
this.sheetLabel = '';
|
|
29
|
-
this.isSearchFocusTrapFixEnabled = false;
|
|
30
27
|
this._firstFocusableElement = undefined;
|
|
31
28
|
this._focusableElements = null;
|
|
32
29
|
this._lastFocusableElement = undefined;
|
|
@@ -42,31 +39,20 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
42
39
|
document.addEventListener('keydown', this._bindCloseOnEsc);
|
|
43
40
|
document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
|
|
44
41
|
this._dispatchSheetOpenedEvent();
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var _a;
|
|
51
|
-
(_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
52
|
-
window.scrollTo(0, scrollY);
|
|
53
|
-
}, 0);
|
|
54
|
-
}
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
var _a;
|
|
44
|
+
(_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
45
|
+
window.scrollTo(0, scrollY);
|
|
46
|
+
}, 0);
|
|
55
47
|
},
|
|
56
48
|
false: () => {
|
|
57
49
|
HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
|
|
58
50
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
59
51
|
document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
|
|
60
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
61
|
-
this._focusTrapController.deactivate();
|
|
62
52
|
}
|
|
63
53
|
}
|
|
64
54
|
};
|
|
65
55
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
66
|
-
this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
|
|
67
|
-
mode: focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_TYPES.sentinel,
|
|
68
|
-
getContainer: () => this._contentRef.value
|
|
69
|
-
});
|
|
70
56
|
this._keepFocusWithinSheet = (ev) => {
|
|
71
57
|
var _a;
|
|
72
58
|
const isTabPressed = ev.code === 'Tab';
|
|
@@ -160,8 +146,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
160
146
|
connectedCallback() {
|
|
161
147
|
super.connectedCallback();
|
|
162
148
|
HSheet_1._appendSheetPortal();
|
|
163
|
-
|
|
164
|
-
document.addEventListener('keyup', this._keepFocusWithinSheet);
|
|
149
|
+
document.addEventListener('keyup', this._keepFocusWithinSheet);
|
|
165
150
|
document.addEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
166
151
|
}
|
|
167
152
|
disconnectedCallback() {
|
|
@@ -170,15 +155,12 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
170
155
|
this.close();
|
|
171
156
|
document.removeEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
172
157
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
173
|
-
|
|
174
|
-
document.removeEventListener('keyup', this._keepFocusWithinSheet);
|
|
158
|
+
document.removeEventListener('keyup', this._keepFocusWithinSheet);
|
|
175
159
|
}
|
|
176
160
|
firstUpdated(props) {
|
|
177
161
|
super.firstUpdated(props);
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
181
|
-
}
|
|
162
|
+
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
163
|
+
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
182
164
|
}
|
|
183
165
|
updated(changedProps) {
|
|
184
166
|
if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
|
|
@@ -210,8 +192,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
210
192
|
setTimeout(() => {
|
|
211
193
|
var _a;
|
|
212
194
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
|
|
213
|
-
|
|
214
|
-
this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
|
|
195
|
+
this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
|
|
215
196
|
resolve();
|
|
216
197
|
}, transitionDuration);
|
|
217
198
|
});
|
|
@@ -264,10 +245,6 @@ tslib_es6.__decorate([
|
|
|
264
245
|
decorators_js.property({ type: String, attribute: 'sheet-label' }),
|
|
265
246
|
tslib_es6.__metadata("design:type", Object)
|
|
266
247
|
], exports.HSheet.prototype, "sheetLabel", void 0);
|
|
267
|
-
tslib_es6.__decorate([
|
|
268
|
-
decorators_js.property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
|
|
269
|
-
tslib_es6.__metadata("design:type", Boolean)
|
|
270
|
-
], exports.HSheet.prototype, "isSearchFocusTrapFixEnabled", void 0);
|
|
271
248
|
tslib_es6.__decorate([
|
|
272
249
|
decorators_js.state(),
|
|
273
250
|
tslib_es6.__metadata("design:type", Object)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -18,7 +18,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
18
18
|
id: string;
|
|
19
19
|
preventFocusTrap: boolean;
|
|
20
20
|
noAutoFocus: boolean;
|
|
21
|
-
isSearchFocusTrapFixEnabled: boolean;
|
|
22
21
|
$dropdownToggler: HDropdownToggler | null;
|
|
23
22
|
$dropdownContent: HDropdownContent | null;
|
|
24
23
|
$nestedDropdownContentElements?: HDropdownContent[];
|
|
@@ -27,7 +26,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
27
26
|
private _dropdownContentChildrenHeight;
|
|
28
27
|
private _hasScrollableClassInitially;
|
|
29
28
|
private _backdropController;
|
|
30
|
-
private _focusTrapController;
|
|
31
29
|
constructor();
|
|
32
30
|
connectedCallback(): Promise<void>;
|
|
33
31
|
private static _appendDropdownPortal;
|
|
@@ -45,14 +43,10 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
45
43
|
private _observeScrollToggling;
|
|
46
44
|
private _toggleScroll;
|
|
47
45
|
private _closeDropdownOnEscape;
|
|
48
|
-
private _handleTabForward;
|
|
49
|
-
private _handleTabExitForward;
|
|
50
46
|
private _keepFocusWithinDropdownForwards;
|
|
51
47
|
private _handleFocusOnNextElementAfterDropdown;
|
|
52
48
|
private _handleFocusFromTogglerForwards;
|
|
53
49
|
private _handleFocusFromSentinelEndForwards;
|
|
54
|
-
private _handleTabBackward;
|
|
55
|
-
private _handleTabExitBackward;
|
|
56
50
|
private _keepFocusWithinDropdownBackwards;
|
|
57
51
|
private _handleDefaultFocusFromDropdownBackwards;
|
|
58
52
|
private _handleFocusFromTogglerBackwards;
|
|
@@ -12,8 +12,6 @@ import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
|
|
|
12
12
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
13
13
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
14
14
|
import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
|
|
15
|
-
import { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
|
|
16
|
-
import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
|
|
17
15
|
import throttle_1 from '../../../../../external/lodash/throttle.js';
|
|
18
16
|
import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
|
|
19
17
|
|
|
@@ -31,13 +29,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
31
29
|
this.id = v4();
|
|
32
30
|
this.preventFocusTrap = false;
|
|
33
31
|
this.noAutoFocus = false;
|
|
34
|
-
this.isSearchFocusTrapFixEnabled = false;
|
|
35
32
|
this._backdropController = new BackdropController();
|
|
36
|
-
this._focusTrapController = new FocusTrapController(this, {
|
|
37
|
-
mode: FOCUS_TRAP_STRATEGY_TYPES.toggler,
|
|
38
|
-
getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
|
|
39
|
-
getToggler: () => { var _a; return (_a = this.$dropdownToggler) !== null && _a !== void 0 ? _a : undefined; }
|
|
40
|
-
});
|
|
41
33
|
this._handleClickOutside = async (target) => {
|
|
42
34
|
var _a, _b;
|
|
43
35
|
if (!this.opened)
|
|
@@ -75,8 +67,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
75
67
|
this._dispatchShowDropdownEvent();
|
|
76
68
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
|
|
77
69
|
this._toggleScroll();
|
|
78
|
-
if (this.isSearchFocusTrapFixEnabled && !this.preventFocusTrap)
|
|
79
|
-
this._focusTrapController.activate();
|
|
80
70
|
resolve();
|
|
81
71
|
}, transitionDuration);
|
|
82
72
|
});
|
|
@@ -117,8 +107,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
117
107
|
var _a;
|
|
118
108
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
|
|
119
109
|
this.opened = false;
|
|
120
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
121
|
-
this._focusTrapController.deactivate();
|
|
122
110
|
this._dispatchHideDropdownEvent();
|
|
123
111
|
resolve();
|
|
124
112
|
}, transitionDuration);
|
|
@@ -149,23 +137,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
149
137
|
return;
|
|
150
138
|
await this.hide();
|
|
151
139
|
};
|
|
152
|
-
this._handleTabForward = (ev) => {
|
|
153
|
-
if (this.isSearchFocusTrapFixEnabled) {
|
|
154
|
-
this._handleTabExitForward(ev);
|
|
155
|
-
}
|
|
156
|
-
else {
|
|
157
|
-
this._keepFocusWithinDropdownForwards(ev);
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
this._handleTabExitForward = (ev) => {
|
|
161
|
-
if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
|
|
162
|
-
return;
|
|
163
|
-
if (this.$dropdownContent.contains(ev.target)) {
|
|
164
|
-
ev.preventDefault();
|
|
165
|
-
this.hide();
|
|
166
|
-
UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
|
|
167
|
-
}
|
|
168
|
-
};
|
|
169
140
|
this._keepFocusWithinDropdownForwards = (ev) => {
|
|
170
141
|
var _a, _b;
|
|
171
142
|
if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
|
|
@@ -181,21 +152,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
181
152
|
}
|
|
182
153
|
this._handleFocusFromSentinelEndForwards(ev, $target);
|
|
183
154
|
};
|
|
184
|
-
this._handleTabBackward = (ev) => {
|
|
185
|
-
if (this.isSearchFocusTrapFixEnabled) {
|
|
186
|
-
this._handleTabExitBackward(ev);
|
|
187
|
-
}
|
|
188
|
-
else {
|
|
189
|
-
this._keepFocusWithinDropdownBackwards(ev);
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
this._handleTabExitBackward = (ev) => {
|
|
193
|
-
if (!this.opened || !this.$dropdownContent || !this.preventFocusTrap)
|
|
194
|
-
return;
|
|
195
|
-
ev.preventDefault();
|
|
196
|
-
this.hide();
|
|
197
|
-
UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
|
|
198
|
-
};
|
|
199
155
|
this._keepFocusWithinDropdownBackwards = (ev) => {
|
|
200
156
|
if (!this.opened || !this.$dropdownContent)
|
|
201
157
|
return;
|
|
@@ -228,7 +184,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
228
184
|
this._focusOnFirstContentElement = () => {
|
|
229
185
|
if (!this.$dropdownContent)
|
|
230
186
|
return;
|
|
231
|
-
const $firstFocusableElement = this.
|
|
187
|
+
const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
|
|
232
188
|
if ($firstFocusableElement)
|
|
233
189
|
$firstFocusableElement.focus();
|
|
234
190
|
};
|
|
@@ -257,13 +213,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
257
213
|
host: this,
|
|
258
214
|
target: document.body,
|
|
259
215
|
keys: ['tab'],
|
|
260
|
-
callback: this.
|
|
216
|
+
callback: this._keepFocusWithinDropdownForwards
|
|
261
217
|
});
|
|
262
218
|
new KeystrokesController({
|
|
263
219
|
host: this,
|
|
264
220
|
target: document.body,
|
|
265
221
|
keys: [['shift', 'tab']],
|
|
266
|
-
callback: this.
|
|
222
|
+
callback: this._keepFocusWithinDropdownBackwards,
|
|
267
223
|
containerSelectors: ['h-dropdown', 'h-dropdown-content']
|
|
268
224
|
});
|
|
269
225
|
}
|
|
@@ -513,10 +469,6 @@ __decorate([
|
|
|
513
469
|
property({ type: Boolean, attribute: 'no-autofocus' }),
|
|
514
470
|
__metadata("design:type", Object)
|
|
515
471
|
], HDropdown.prototype, "noAutoFocus", void 0);
|
|
516
|
-
__decorate([
|
|
517
|
-
property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
|
|
518
|
-
__metadata("design:type", Boolean)
|
|
519
|
-
], HDropdown.prototype, "isSearchFocusTrapFixEnabled", void 0);
|
|
520
472
|
HDropdown = HDropdown_1 = __decorate([
|
|
521
473
|
phoenixCustomElement('h-dropdown'),
|
|
522
474
|
__metadata("design:paramtypes", [])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
3
|
import type { TSearchDisplayMode, TSearchSettings } from "./search_types";
|
|
4
|
-
import { FocusTrapController } from "../../../controllers/focus_trap_controller/focus_trap_controller";
|
|
5
4
|
export declare class HSearch extends PhoenixLightLitElement {
|
|
6
5
|
settings: TSearchSettings;
|
|
7
6
|
view: string;
|
|
8
7
|
locale: string;
|
|
9
8
|
isSearchIconFixEnabled: boolean;
|
|
10
9
|
isSearchUxFixesFlagEnabled: boolean;
|
|
11
|
-
isSearchFocusTrapFixEnabled: boolean;
|
|
12
10
|
displayMode: TSearchDisplayMode;
|
|
13
11
|
moduleInstanceId: string;
|
|
14
12
|
private _historyContextProvider;
|
|
@@ -19,11 +17,9 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
19
17
|
private _inputField;
|
|
20
18
|
private _searchForm;
|
|
21
19
|
private _togglerElement;
|
|
22
|
-
private _mobileDialogOpener;
|
|
23
20
|
private _id;
|
|
24
21
|
private _openSearchButtonAriaLabelId;
|
|
25
22
|
private _searchContentContainerId;
|
|
26
|
-
mobileFocusTrapController: FocusTrapController;
|
|
27
23
|
private _searchResultsRef;
|
|
28
24
|
private _searchHistoryRef;
|
|
29
25
|
private _searchMessageRef;
|
|
@@ -85,8 +81,6 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
85
81
|
private _isSuggesterLayerVisible;
|
|
86
82
|
private _preventSubmitOnSearchClear;
|
|
87
83
|
private _resetSearchOnFocusOutside;
|
|
88
|
-
private _activateMobileDialog;
|
|
89
|
-
private _deactivateMobileDialog;
|
|
90
84
|
private _setupAriaAttributes;
|
|
91
85
|
private _handleOpenSearch;
|
|
92
86
|
private _handleOpenSearchWithKeyboard;
|
|
@@ -12,8 +12,6 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
|
12
12
|
import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
|
|
13
13
|
import { BREAKPOINTS } from '../../../global_constants.js';
|
|
14
14
|
import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
|
|
15
|
-
import { FOCUS_TRAP_STRATEGY_TYPES } from '../../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
|
|
16
|
-
import { FocusTrapController } from '../../../controllers/focus_trap_controller/focus_trap_controller.js';
|
|
17
15
|
import { MODAL_EVENTS } from '../../modal/modal_constants.js';
|
|
18
16
|
import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
|
|
19
17
|
import { when as n } from '../../../../../../external/lit-html/directives/when.js';
|
|
@@ -25,17 +23,11 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
25
23
|
this.view = DEFAULT_VIEW;
|
|
26
24
|
this.isSearchIconFixEnabled = false;
|
|
27
25
|
this.isSearchUxFixesFlagEnabled = false;
|
|
28
|
-
this.isSearchFocusTrapFixEnabled = false;
|
|
29
26
|
this.displayMode = 'dropdown';
|
|
30
27
|
this._togglerElement = null;
|
|
31
|
-
this._mobileDialogOpener = null;
|
|
32
28
|
this._id = v4();
|
|
33
29
|
this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
|
|
34
30
|
this._searchContentContainerId = v4();
|
|
35
|
-
this.mobileFocusTrapController = new FocusTrapController(this, {
|
|
36
|
-
mode: FOCUS_TRAP_STRATEGY_TYPES.cyclic,
|
|
37
|
-
getContainer: () => this
|
|
38
|
-
});
|
|
39
31
|
this._searchResultsRef = createRef();
|
|
40
32
|
this._searchHistoryRef = createRef();
|
|
41
33
|
this._searchMessageRef = createRef();
|
|
@@ -331,8 +323,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
331
323
|
if (window.innerWidth > BREAKPOINTS.sm) {
|
|
332
324
|
const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
|
|
333
325
|
this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
|
|
334
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
335
|
-
this._deactivateMobileDialog();
|
|
336
326
|
if (hasBeenOpened && this.displayMode !== 'dropdown') {
|
|
337
327
|
const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
|
|
338
328
|
const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
|
|
@@ -348,8 +338,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
348
338
|
};
|
|
349
339
|
this._openMobileView = () => {
|
|
350
340
|
this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
351
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
352
|
-
this._activateMobileDialog();
|
|
353
341
|
};
|
|
354
342
|
this._isSuggesterLayerVisible = () => {
|
|
355
343
|
var _a;
|
|
@@ -370,19 +358,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
370
358
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
371
359
|
}
|
|
372
360
|
};
|
|
373
|
-
this._activateMobileDialog = () => {
|
|
374
|
-
if (this.displayMode !== 'dropdown')
|
|
375
|
-
return;
|
|
376
|
-
this._mobileDialogOpener = document.activeElement;
|
|
377
|
-
this.setAttribute('role', 'dialog');
|
|
378
|
-
this.setAttribute('aria-modal', 'true');
|
|
379
|
-
this.mobileFocusTrapController.activate();
|
|
380
|
-
};
|
|
381
|
-
this._deactivateMobileDialog = () => {
|
|
382
|
-
this.removeAttribute('role');
|
|
383
|
-
this.removeAttribute('aria-modal');
|
|
384
|
-
this.mobileFocusTrapController.deactivate();
|
|
385
|
-
};
|
|
386
361
|
this._setupAriaAttributes = () => {
|
|
387
362
|
var _a;
|
|
388
363
|
if (this._translations.openSearchButtonAriaLabel) {
|
|
@@ -391,8 +366,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
391
366
|
};
|
|
392
367
|
this._handleOpenSearch = () => {
|
|
393
368
|
this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
394
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
395
|
-
this._activateMobileDialog();
|
|
396
369
|
const shouldShowMessage = this._searchPhrase !== '';
|
|
397
370
|
this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
|
|
398
371
|
const $searchInput = this.querySelector(`
|
|
@@ -401,8 +374,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
401
374
|
$searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
|
|
402
375
|
};
|
|
403
376
|
this._handleOpenSearchWithKeyboard = (ev) => {
|
|
404
|
-
|
|
405
|
-
if (ev.code !== 'Enter' || isRepeated)
|
|
377
|
+
if (ev.code !== 'Enter')
|
|
406
378
|
return;
|
|
407
379
|
ev.preventDefault();
|
|
408
380
|
this._handleOpenSearch();
|
|
@@ -411,10 +383,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
411
383
|
async connectedCallback() {
|
|
412
384
|
super.connectedCallback();
|
|
413
385
|
this._setupContext();
|
|
414
|
-
this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
|
|
415
|
-
this._setupInitialSearchPhrase();
|
|
416
|
-
this._setupListeners();
|
|
417
|
-
this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
|
|
418
386
|
try {
|
|
419
387
|
this._searchContextConsumer = new ContextConsumerController(this);
|
|
420
388
|
this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
|
|
@@ -443,6 +411,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
443
411
|
catch (_a) {
|
|
444
412
|
console.error('Search context is not provided');
|
|
445
413
|
}
|
|
414
|
+
this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
|
|
415
|
+
this._setupInitialSearchPhrase();
|
|
416
|
+
this._setupListeners();
|
|
417
|
+
this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
|
|
446
418
|
}
|
|
447
419
|
disconnectedCallback() {
|
|
448
420
|
var _a;
|
|
@@ -514,12 +486,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
514
486
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
|
|
515
487
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
|
|
516
488
|
this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
|
|
517
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
518
|
-
this._deactivateMobileDialog();
|
|
519
489
|
this._resetSearchView();
|
|
520
490
|
this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
|
|
521
|
-
if (this.isSearchFocusTrapFixEnabled)
|
|
522
|
-
requestAnimationFrame(() => { var _a; return (_a = this._mobileDialogOpener) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
523
491
|
});
|
|
524
492
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
|
|
525
493
|
const contentLength = this._searchHistory.length;
|
|
@@ -638,23 +606,13 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
638
606
|
if (!this._togglerElement)
|
|
639
607
|
return;
|
|
640
608
|
this._togglerElement.addEventListener('click', this._handleOpenSearch);
|
|
641
|
-
|
|
642
|
-
this._togglerElement.addEventListener('keydown', this._handleOpenSearchWithKeyboard);
|
|
643
|
-
}
|
|
644
|
-
else {
|
|
645
|
-
this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
|
|
646
|
-
}
|
|
609
|
+
this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
|
|
647
610
|
}
|
|
648
611
|
_teardownToggler() {
|
|
649
612
|
if (!this._togglerElement)
|
|
650
613
|
return;
|
|
651
614
|
this._togglerElement.removeEventListener('click', this._handleOpenSearch);
|
|
652
|
-
|
|
653
|
-
this._togglerElement.removeEventListener('keydown', this._handleOpenSearchWithKeyboard);
|
|
654
|
-
}
|
|
655
|
-
else {
|
|
656
|
-
this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
|
|
657
|
-
}
|
|
615
|
+
this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
|
|
658
616
|
}
|
|
659
617
|
render() {
|
|
660
618
|
super.render();
|
|
@@ -664,8 +622,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
664
622
|
tabindex="0"
|
|
665
623
|
aria-haspopup="dialog"
|
|
666
624
|
@click=${this._handleOpenSearch}
|
|
667
|
-
@keyup=${this.
|
|
668
|
-
@keydown=${this.isSearchFocusTrapFixEnabled ? this._handleOpenSearchWithKeyboard : undefined}
|
|
625
|
+
@keyup=${this._handleOpenSearchWithKeyboard}
|
|
669
626
|
>
|
|
670
627
|
${n(this._translations.openSearchButtonAriaLabel, () => html `
|
|
671
628
|
<span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
|
|
@@ -735,10 +692,6 @@ __decorate([
|
|
|
735
692
|
property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
|
|
736
693
|
__metadata("design:type", Boolean)
|
|
737
694
|
], HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
|
|
738
|
-
__decorate([
|
|
739
|
-
property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
|
|
740
|
-
__metadata("design:type", Boolean)
|
|
741
|
-
], HSearch.prototype, "isSearchFocusTrapFixEnabled", void 0);
|
|
742
695
|
__decorate([
|
|
743
696
|
property({ type: String, attribute: 'display-mode' }),
|
|
744
697
|
__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;AACA,eAAe,wDAA4D;AAC3E;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;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;"}
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ import { PropertyValues } from 'lit';
|
|
|
3
3
|
export declare class HSearchInput extends PhoenixLightLitElement {
|
|
4
4
|
input: HTMLInputElement | null;
|
|
5
5
|
moduleInstanceId: string;
|
|
6
|
-
isSearchFocusTrapFixEnabled: boolean;
|
|
7
6
|
private _isSearchPhraseCleared;
|
|
8
7
|
connectedCallback(): void;
|
|
9
8
|
firstUpdated(props: PropertyValues): void;
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js
CHANGED
|
@@ -9,7 +9,6 @@ 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;
|
|
13
12
|
this._isSearchPhraseCleared = false;
|
|
14
13
|
this._setupAttributes = () => {
|
|
15
14
|
var _a, _b, _c, _d;
|
|
@@ -69,60 +68,36 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
|
|
|
69
68
|
}
|
|
70
69
|
});
|
|
71
70
|
});
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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;
|
|
71
|
+
this.input.addEventListener('keyup', (ev) => {
|
|
72
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
|
|
73
|
+
return;
|
|
74
|
+
if (ev.key !== 'Enter') {
|
|
87
75
|
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
88
76
|
detail: {
|
|
89
77
|
searchPhrase: ev.target.value
|
|
90
78
|
}
|
|
91
79
|
});
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
searchPhrase: ev.target.value
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
return;
|
|
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
|
|
105
89
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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
|
|
109
98
|
}
|
|
110
|
-
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
111
|
-
detail: {
|
|
112
|
-
searchPhrase: ev.target.value
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
99
|
});
|
|
116
|
-
|
|
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
|
-
}
|
|
100
|
+
}, 200));
|
|
126
101
|
this.input.addEventListener('search', (ev) => {
|
|
127
102
|
if (this.input.value !== '') {
|
|
128
103
|
return;
|
|
@@ -156,10 +131,6 @@ __decorate([
|
|
|
156
131
|
property({ type: String, attribute: 'module-instance-id' }),
|
|
157
132
|
__metadata("design:type", String)
|
|
158
133
|
], 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);
|
|
163
134
|
__decorate([
|
|
164
135
|
state(),
|
|
165
136
|
__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;"}
|
|
@@ -25,7 +25,6 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
25
25
|
assistiveTitleId: string;
|
|
26
26
|
isDevSelectPlaceholderFlagEnabled: boolean;
|
|
27
27
|
isReactiveSelectionFlagEnabled: boolean;
|
|
28
|
-
isSearchFocusTrapFixEnabled: boolean;
|
|
29
28
|
translations: Record<string, string>;
|
|
30
29
|
private _selectOptionsId;
|
|
31
30
|
get selectedIndex(): number;
|