@shoper/phoenix_design_system 1.18.23-3 → 1.18.23-5
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 +2 -2
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +7 -9
- 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 +3 -13
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/modal/modal.js +5 -5
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +4 -4
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +32 -176
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.js +53 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js +36 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js +89 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.js +77 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -2
- package/build/esm/packages/phoenix/src/components/form/search/search.js +7 -9
- 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.js +3 -13
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/modal/modal.js +5 -5
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js +4 -4
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +19 -17
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +33 -177
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +12 -11
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +1 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.d.ts +17 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.js +49 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.d.ts +11 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js +32 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/index.d.ts +6 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/index.js +5 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/index.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.d.ts +31 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js +85 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.d.ts +21 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.js +73 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.js.map +1 -0
- package/package.json +1 -1
|
@@ -35,8 +35,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
35
35
|
this.preventFocusTrap = false;
|
|
36
36
|
this.noAutoFocus = false;
|
|
37
37
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
38
|
-
this._focusTrapController = new focus_trap_controller.FocusTrapController({
|
|
39
|
-
|
|
38
|
+
this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
|
|
39
|
+
mode: 'toggler',
|
|
40
40
|
getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
|
|
41
41
|
getToggler: () => this.$dropdownToggler
|
|
42
42
|
});
|
|
@@ -34,11 +34,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
34
34
|
this._id = v4['default']();
|
|
35
35
|
this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
|
|
36
36
|
this._searchContentContainerId = v4['default']();
|
|
37
|
-
this._mobileFocusTrapController = new focus_trap_controller.FocusTrapController({
|
|
38
|
-
|
|
39
|
-
getContainer: () => this
|
|
40
|
-
noAutofocus: true,
|
|
41
|
-
cyclicKeydown: true
|
|
37
|
+
this._mobileFocusTrapController = new focus_trap_controller.FocusTrapController(this, {
|
|
38
|
+
mode: 'cyclic',
|
|
39
|
+
getContainer: () => this
|
|
42
40
|
});
|
|
43
41
|
this._searchResultsRef = ref_js.createRef();
|
|
44
42
|
this._searchHistoryRef = ref_js.createRef();
|
|
@@ -402,7 +400,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
402
400
|
$searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
|
|
403
401
|
};
|
|
404
402
|
this._handleOpenSearchWithKeyboard = (ev) => {
|
|
405
|
-
if (ev.code !== 'Enter')
|
|
403
|
+
if (ev.code !== 'Enter' || ev.repeat)
|
|
406
404
|
return;
|
|
407
405
|
ev.preventDefault();
|
|
408
406
|
this._handleOpenSearch();
|
|
@@ -636,13 +634,13 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
636
634
|
if (!this._togglerElement)
|
|
637
635
|
return;
|
|
638
636
|
this._togglerElement.addEventListener('click', this._handleOpenSearch);
|
|
639
|
-
this._togglerElement.addEventListener('
|
|
637
|
+
this._togglerElement.addEventListener('keydown', this._handleOpenSearchWithKeyboard);
|
|
640
638
|
}
|
|
641
639
|
_teardownToggler() {
|
|
642
640
|
if (!this._togglerElement)
|
|
643
641
|
return;
|
|
644
642
|
this._togglerElement.removeEventListener('click', this._handleOpenSearch);
|
|
645
|
-
this._togglerElement.removeEventListener('
|
|
643
|
+
this._togglerElement.removeEventListener('keydown', this._handleOpenSearchWithKeyboard);
|
|
646
644
|
}
|
|
647
645
|
render() {
|
|
648
646
|
super.render();
|
|
@@ -652,7 +650,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
652
650
|
tabindex="0"
|
|
653
651
|
aria-haspopup="dialog"
|
|
654
652
|
@click=${this._handleOpenSearch}
|
|
655
|
-
@
|
|
653
|
+
@keydown=${this._handleOpenSearchWithKeyboard}
|
|
656
654
|
>
|
|
657
655
|
${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
|
|
658
656
|
<span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js
CHANGED
|
@@ -72,25 +72,15 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
|
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
74
|
});
|
|
75
|
-
this.input.addEventListener('
|
|
76
|
-
if (ev.key
|
|
75
|
+
this.input.addEventListener('keydown', (ev) => {
|
|
76
|
+
if (ev.key !== 'Enter' || ev.repeat)
|
|
77
77
|
return;
|
|
78
|
-
if (ev.key !== 'Enter') {
|
|
79
|
-
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
80
|
-
detail: {
|
|
81
|
-
searchPhrase: ev.target.value
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
78
|
if (this._isSearchPhraseCleared) {
|
|
87
79
|
this._isSearchPhraseCleared = false;
|
|
88
80
|
return;
|
|
89
81
|
}
|
|
90
82
|
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
91
|
-
detail: {
|
|
92
|
-
searchPhrase: ev.target.value
|
|
93
|
-
}
|
|
83
|
+
detail: { searchPhrase: ev.target.value }
|
|
94
84
|
});
|
|
95
85
|
});
|
|
96
86
|
this.input.addEventListener('keyup', debounce['default']((ev) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -47,8 +47,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
50
|
-
this._focusTrapController = new focus_trap_controller.FocusTrapController({
|
|
51
|
-
|
|
50
|
+
this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
|
|
51
|
+
mode: 'sentinel',
|
|
52
52
|
getContainer: () => this._contentRef.value,
|
|
53
53
|
noAutofocus: this.noAutofocus
|
|
54
54
|
});
|
|
@@ -138,14 +138,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
138
138
|
}
|
|
139
139
|
firstUpdated(props) {
|
|
140
140
|
super.firstUpdated(props);
|
|
141
|
-
this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
|
|
141
|
+
this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
|
|
142
142
|
}
|
|
143
143
|
updated(changedProps) {
|
|
144
144
|
if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
|
|
145
145
|
this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
|
|
146
146
|
}
|
|
147
147
|
if (changedProps.has('noAutofocus')) {
|
|
148
|
-
this._focusTrapController.noAutofocus = this.noAutofocus;
|
|
148
|
+
this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
151
|
async open() {
|
|
@@ -163,7 +163,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
163
163
|
setTimeout(() => {
|
|
164
164
|
var _a;
|
|
165
165
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
|
|
166
|
-
this._focusTrapController.focusFirst();
|
|
166
|
+
this._focusTrapController.strategy.focusFirst();
|
|
167
167
|
resolve();
|
|
168
168
|
}, transitionDuration);
|
|
169
169
|
});
|
|
@@ -46,8 +46,8 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
49
|
-
this._focusTrapController = new focus_trap_controller.FocusTrapController({
|
|
50
|
-
|
|
49
|
+
this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
|
|
50
|
+
mode: 'sentinel',
|
|
51
51
|
getContainer: () => this._contentRef.value
|
|
52
52
|
});
|
|
53
53
|
this._handleCloseFromCloseComponent = async (ev) => {
|
|
@@ -136,7 +136,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
136
136
|
}
|
|
137
137
|
firstUpdated(props) {
|
|
138
138
|
super.firstUpdated(props);
|
|
139
|
-
this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
|
|
139
|
+
this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
|
|
140
140
|
}
|
|
141
141
|
updated(changedProps) {
|
|
142
142
|
if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
|
|
@@ -158,7 +158,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
158
158
|
setTimeout(() => {
|
|
159
159
|
var _a;
|
|
160
160
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
|
|
161
|
-
this._focusTrapController.focusFirst();
|
|
161
|
+
this._focusTrapController.strategy.focusFirst();
|
|
162
162
|
resolve();
|
|
163
163
|
}, transitionDuration);
|
|
164
164
|
});
|
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js
CHANGED
|
@@ -4,197 +4,53 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
require('lit');
|
|
7
|
-
var
|
|
7
|
+
var sentinel_focus_trap_strategy = require('./strategies/sentinel_focus_trap_strategy.js');
|
|
8
|
+
var cyclic_focus_trap_strategy = require('./strategies/cyclic_focus_trap_strategy.js');
|
|
9
|
+
var toggler_focus_trap_strategy = require('./strategies/toggler_focus_trap_strategy.js');
|
|
8
10
|
|
|
9
|
-
var
|
|
11
|
+
var _FocusTrapController_strategy;
|
|
12
|
+
function createStrategy(props) {
|
|
13
|
+
switch (props.mode) {
|
|
14
|
+
case 'sentinel': return new sentinel_focus_trap_strategy.SentinelFocusTrapStrategy({ getContainer: props.getContainer, noAutofocus: props.noAutofocus });
|
|
15
|
+
case 'cyclic': return new cyclic_focus_trap_strategy.CyclicFocusTrapStrategy(props.getContainer);
|
|
16
|
+
case 'toggler': return new toggler_focus_trap_strategy.TogglerFocusTrapStrategy({ getContainer: props.getContainer, getToggler: props.getToggler });
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A thin Lit ReactiveController that owns the lifecycle of a FocusTrapStrategy.
|
|
21
|
+
*
|
|
22
|
+
* Pass a discriminated-union `props` object with `mode: 'sentinel' | 'cyclic' | 'toggler'`
|
|
23
|
+
* and the required options for that mode. The controller creates the correct strategy
|
|
24
|
+
* internally and exposes it as a typed `.strategy` property for mode-specific API access
|
|
25
|
+
* (e.g. `controller.strategy.setSentinels(...)` when mode is 'sentinel').
|
|
26
|
+
*/
|
|
10
27
|
class FocusTrapController {
|
|
11
|
-
constructor(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
_FocusTrapController_cyclicKeydown.set(this, void 0);
|
|
15
|
-
_FocusTrapController_active.set(this, false);
|
|
16
|
-
_FocusTrapController_sentinelStart.set(this, void 0);
|
|
17
|
-
_FocusTrapController_sentinelEnd.set(this, void 0);
|
|
18
|
-
// ─── Sentinel mode ───────────────────────────────────────────────────────
|
|
19
|
-
this._handleSentinelModeKeyUp = (ev) => {
|
|
20
|
-
var _a;
|
|
21
|
-
if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
|
|
22
|
-
return;
|
|
23
|
-
const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
|
|
24
|
-
if (!container)
|
|
25
|
-
return;
|
|
26
|
-
if (ev.shiftKey) {
|
|
27
|
-
if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_sentinelStart, "f")) {
|
|
28
|
-
const focusableElements = this._getFocusableElements(container);
|
|
29
|
-
(_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
30
|
-
ev.preventDefault();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
else if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_sentinelEnd, "f")) {
|
|
34
|
-
utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
|
|
35
|
-
ev.preventDefault();
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
// ─── Cyclic keydown mode ─────────────────────────────────────────────────
|
|
39
|
-
//
|
|
40
|
-
// No sentinel elements. Tab past the last focusable element wraps to the
|
|
41
|
-
// first; Shift+Tab past the first wraps to the last. Uses keydown +
|
|
42
|
-
// preventDefault so the browser never moves focus outside the container.
|
|
43
|
-
this._handleCyclicKeyDown = (ev) => {
|
|
44
|
-
if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
|
|
45
|
-
return;
|
|
46
|
-
const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
|
|
47
|
-
if (!container)
|
|
48
|
-
return;
|
|
49
|
-
const focusableElements = this._getFocusableElements(container);
|
|
50
|
-
if (focusableElements.length === 0)
|
|
51
|
-
return;
|
|
52
|
-
const $target = ev.target;
|
|
53
|
-
if (ev.shiftKey) {
|
|
54
|
-
if ($target === focusableElements[0]) {
|
|
55
|
-
ev.preventDefault();
|
|
56
|
-
focusableElements[focusableElements.length - 1].focus();
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
61
|
-
ev.preventDefault();
|
|
62
|
-
focusableElements[0].focus();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
// ─── Toggler mode ────────────────────────────────────────────────────────
|
|
67
|
-
//
|
|
68
|
-
// Cycle: toggler → content[0] → … → content[last] → toggler (and reverse).
|
|
69
|
-
// Uses keydown + preventDefault so the browser never moves focus on its own.
|
|
70
|
-
this._handleTogglerModeKeyDown = (ev) => {
|
|
71
|
-
var _a;
|
|
72
|
-
if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
|
|
73
|
-
return;
|
|
74
|
-
const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
|
|
75
|
-
const toggler = (_a = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
76
|
-
if (!container || !toggler)
|
|
77
|
-
return;
|
|
78
|
-
const $target = ev.target;
|
|
79
|
-
const focusableElements = this._getFocusableElements(container);
|
|
80
|
-
if (ev.shiftKey) {
|
|
81
|
-
// Shift+Tab on toggler → last content element
|
|
82
|
-
if (toggler.contains($target)) {
|
|
83
|
-
const last = focusableElements[focusableElements.length - 1];
|
|
84
|
-
if (!last)
|
|
85
|
-
return;
|
|
86
|
-
ev.preventDefault();
|
|
87
|
-
last.focus();
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
// Shift+Tab on first content element → toggler
|
|
91
|
-
if ($target === focusableElements[0]) {
|
|
92
|
-
ev.preventDefault();
|
|
93
|
-
toggler.focus();
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
else {
|
|
97
|
-
// Tab on toggler → first content element
|
|
98
|
-
if (toggler.contains($target)) {
|
|
99
|
-
const first = focusableElements[0];
|
|
100
|
-
if (!first)
|
|
101
|
-
return;
|
|
102
|
-
ev.preventDefault();
|
|
103
|
-
first.focus();
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
// Tab on last content element → toggler
|
|
107
|
-
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
108
|
-
ev.preventDefault();
|
|
109
|
-
toggler.focus();
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_getContainer, getContainer, "f");
|
|
114
|
-
tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_getToggler, getToggler, "f");
|
|
115
|
-
tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_cyclicKeydown, cyclicKeydown, "f");
|
|
116
|
-
this.noAutofocus = noAutofocus;
|
|
28
|
+
constructor(host, props) {
|
|
29
|
+
_FocusTrapController_strategy.set(this, void 0);
|
|
30
|
+
tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_strategy, createStrategy(props), "f");
|
|
117
31
|
host.addController(this);
|
|
118
32
|
}
|
|
33
|
+
/** The underlying strategy instance, typed to match the mode passed at construction. */
|
|
34
|
+
get strategy() {
|
|
35
|
+
return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
|
|
36
|
+
}
|
|
119
37
|
hostConnected() {
|
|
120
|
-
|
|
121
|
-
document.addEventListener('keydown', this._handleCyclicKeyDown);
|
|
122
|
-
}
|
|
123
|
-
else if (tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) {
|
|
124
|
-
document.addEventListener('keydown', this._handleTogglerModeKeyDown);
|
|
125
|
-
}
|
|
126
|
-
else {
|
|
127
|
-
document.addEventListener('keyup', this._handleSentinelModeKeyUp);
|
|
128
|
-
}
|
|
38
|
+
tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
|
|
129
39
|
}
|
|
130
40
|
hostDisconnected() {
|
|
131
|
-
|
|
132
|
-
document.removeEventListener('keydown', this._handleCyclicKeyDown);
|
|
133
|
-
}
|
|
134
|
-
else if (tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) {
|
|
135
|
-
document.removeEventListener('keydown', this._handleTogglerModeKeyDown);
|
|
136
|
-
}
|
|
137
|
-
else {
|
|
138
|
-
document.removeEventListener('keyup', this._handleSentinelModeKeyUp);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
/** Sentinel mode only: call once in firstUpdated with the two bookend elements. */
|
|
142
|
-
setSentinels(start, end) {
|
|
143
|
-
tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_sentinelStart, start, "f");
|
|
144
|
-
tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_sentinelEnd, end, "f");
|
|
41
|
+
tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
|
|
145
42
|
}
|
|
146
43
|
activate() {
|
|
147
|
-
tslib_es6.
|
|
148
|
-
// Sentinel mode: move focus to sentinelStart to prime the trap.
|
|
149
|
-
if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f") && !this.noAutofocus) {
|
|
150
|
-
const scrollY = window.scrollY;
|
|
151
|
-
setTimeout(() => {
|
|
152
|
-
var _a;
|
|
153
|
-
(_a = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
154
|
-
window.scrollTo(0, scrollY);
|
|
155
|
-
}, 0);
|
|
156
|
-
}
|
|
44
|
+
tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
|
|
157
45
|
}
|
|
158
46
|
deactivate() {
|
|
159
|
-
tslib_es6.
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* Sentinel mode: move focus to the first real interactive element after the
|
|
163
|
-
* open transition completes (skips sentinelStart at index 0).
|
|
164
|
-
*/
|
|
165
|
-
focusFirst() {
|
|
166
|
-
if (this.noAutofocus)
|
|
167
|
-
return;
|
|
168
|
-
requestAnimationFrame(() => {
|
|
169
|
-
const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
|
|
170
|
-
if (!container)
|
|
171
|
-
return;
|
|
172
|
-
const focusableElements = this._getFocusableElements(container);
|
|
173
|
-
if (focusableElements.length > 0) {
|
|
174
|
-
focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
|
|
175
|
-
}
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
_getFocusableElements(container) {
|
|
179
|
-
return utilities.UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
|
|
47
|
+
tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
|
|
180
48
|
}
|
|
181
49
|
getFocusableElements(container) {
|
|
182
|
-
return this.
|
|
183
|
-
}
|
|
184
|
-
_isElementTrulyFocusable($el) {
|
|
185
|
-
const style = window.getComputedStyle($el);
|
|
186
|
-
if (style.display === 'none' || style.visibility === 'hidden') {
|
|
187
|
-
return false;
|
|
188
|
-
}
|
|
189
|
-
if ($el.nodeName === 'H-PORTAL')
|
|
190
|
-
return true;
|
|
191
|
-
const $parent = $el.parentElement;
|
|
192
|
-
if (!$parent)
|
|
193
|
-
return true;
|
|
194
|
-
return this._isElementTrulyFocusable($parent);
|
|
50
|
+
return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
|
|
195
51
|
}
|
|
196
52
|
}
|
|
197
|
-
|
|
53
|
+
_FocusTrapController_strategy = new WeakMap();
|
|
198
54
|
|
|
199
55
|
exports.FocusTrapController = FocusTrapController;
|
|
200
56
|
//# sourceMappingURL=focus_trap_controller.js.map
|
|
@@ -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;
|
|
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;"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var focus_trap_strategy = require('./focus_trap_strategy.js');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Cyclic keydown focus trap.
|
|
9
|
+
*
|
|
10
|
+
* No sentinel DOM elements. Tab past the last focusable element wraps to the first;
|
|
11
|
+
* Shift+Tab past the first wraps to the last. Uses `keydown` + `preventDefault` so the
|
|
12
|
+
* browser never moves focus outside the container.
|
|
13
|
+
*
|
|
14
|
+
* Suitable when the host is not portaled and `inert` is not applied to background content
|
|
15
|
+
* (e.g. a full-screen search overlay on mobile).
|
|
16
|
+
*/
|
|
17
|
+
class CyclicFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
|
|
18
|
+
constructor(getContainer) {
|
|
19
|
+
super(getContainer);
|
|
20
|
+
this._handleKeyDown = (ev) => {
|
|
21
|
+
if (!this.active || ev.code !== 'Tab')
|
|
22
|
+
return;
|
|
23
|
+
const container = this.getContainer();
|
|
24
|
+
if (!container)
|
|
25
|
+
return;
|
|
26
|
+
const focusableElements = this.getFocusableElements(container);
|
|
27
|
+
if (focusableElements.length === 0)
|
|
28
|
+
return;
|
|
29
|
+
const $target = ev.target;
|
|
30
|
+
if (ev.shiftKey) {
|
|
31
|
+
if ($target === focusableElements[0]) {
|
|
32
|
+
ev.preventDefault();
|
|
33
|
+
focusableElements[focusableElements.length - 1].focus();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
38
|
+
ev.preventDefault();
|
|
39
|
+
focusableElements[0].focus();
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
attach() {
|
|
45
|
+
document.addEventListener('keydown', this._handleKeyDown);
|
|
46
|
+
}
|
|
47
|
+
detach() {
|
|
48
|
+
document.removeEventListener('keydown', this._handleKeyDown);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
exports.CyclicFocusTrapStrategy = CyclicFocusTrapStrategy;
|
|
53
|
+
//# sourceMappingURL=cyclic_focus_trap_strategy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,36 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var utilities = require('@dreamcommerce/utilities');
|
|
6
|
+
|
|
7
|
+
class FocusTrapStrategy {
|
|
8
|
+
constructor(getContainer) {
|
|
9
|
+
this.getContainer = getContainer;
|
|
10
|
+
this.active = false;
|
|
11
|
+
}
|
|
12
|
+
activate() {
|
|
13
|
+
this.active = true;
|
|
14
|
+
}
|
|
15
|
+
deactivate() {
|
|
16
|
+
this.active = false;
|
|
17
|
+
}
|
|
18
|
+
getFocusableElements(container) {
|
|
19
|
+
return utilities.UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
|
|
20
|
+
}
|
|
21
|
+
_isElementTrulyFocusable($el) {
|
|
22
|
+
const style = window.getComputedStyle($el);
|
|
23
|
+
if (style.display === 'none' || style.visibility === 'hidden') {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
if ($el.nodeName === 'H-PORTAL')
|
|
27
|
+
return true;
|
|
28
|
+
const $parent = $el.parentElement;
|
|
29
|
+
if (!$parent)
|
|
30
|
+
return true;
|
|
31
|
+
return this._isElementTrulyFocusable($parent);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
exports.FocusTrapStrategy = FocusTrapStrategy;
|
|
36
|
+
//# sourceMappingURL=focus_trap_strategy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
6
|
+
var utilities = require('@dreamcommerce/utilities');
|
|
7
|
+
var focus_trap_strategy = require('./focus_trap_strategy.js');
|
|
8
|
+
|
|
9
|
+
var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
|
|
10
|
+
/**
|
|
11
|
+
* Sentinel mode focus trap.
|
|
12
|
+
*
|
|
13
|
+
* Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
|
|
14
|
+
* escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
|
|
15
|
+
* background content is marked `inert`, giving the browser an extra safety net.
|
|
16
|
+
*
|
|
17
|
+
* Reacts on `keyup` so that the browser's native focus movement has already completed
|
|
18
|
+
* before we redirect it.
|
|
19
|
+
*/
|
|
20
|
+
class SentinelFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
|
|
21
|
+
constructor({ getContainer, noAutofocus = false }) {
|
|
22
|
+
super(getContainer);
|
|
23
|
+
_SentinelFocusTrapStrategy_sentinelStart.set(this, void 0);
|
|
24
|
+
_SentinelFocusTrapStrategy_sentinelEnd.set(this, void 0);
|
|
25
|
+
this._handleKeyUp = (ev) => {
|
|
26
|
+
var _a;
|
|
27
|
+
if (!this.active || ev.code !== 'Tab')
|
|
28
|
+
return;
|
|
29
|
+
const container = this.getContainer();
|
|
30
|
+
if (!container)
|
|
31
|
+
return;
|
|
32
|
+
if (ev.shiftKey) {
|
|
33
|
+
if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) {
|
|
34
|
+
const focusableElements = this.getFocusableElements(container);
|
|
35
|
+
(_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
36
|
+
ev.preventDefault();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
else if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelEnd, "f")) {
|
|
40
|
+
utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
|
|
41
|
+
ev.preventDefault();
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
this.noAutofocus = noAutofocus;
|
|
45
|
+
}
|
|
46
|
+
/** Call once in firstUpdated with the two bookend sentinel elements. */
|
|
47
|
+
setSentinels(start, end) {
|
|
48
|
+
tslib_es6.__classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelStart, start, "f");
|
|
49
|
+
tslib_es6.__classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelEnd, end, "f");
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Move focus to the first real interactive element after the open transition
|
|
53
|
+
* completes (skips sentinelStart at index 0).
|
|
54
|
+
*/
|
|
55
|
+
focusFirst() {
|
|
56
|
+
if (this.noAutofocus)
|
|
57
|
+
return;
|
|
58
|
+
requestAnimationFrame(() => {
|
|
59
|
+
const container = this.getContainer();
|
|
60
|
+
if (!container)
|
|
61
|
+
return;
|
|
62
|
+
const focusableElements = this.getFocusableElements(container);
|
|
63
|
+
if (focusableElements.length > 0) {
|
|
64
|
+
focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
attach() {
|
|
69
|
+
document.addEventListener('keyup', this._handleKeyUp);
|
|
70
|
+
}
|
|
71
|
+
detach() {
|
|
72
|
+
document.removeEventListener('keyup', this._handleKeyUp);
|
|
73
|
+
}
|
|
74
|
+
activate() {
|
|
75
|
+
this.active = true;
|
|
76
|
+
if (!this.noAutofocus) {
|
|
77
|
+
const scrollY = window.scrollY;
|
|
78
|
+
setTimeout(() => {
|
|
79
|
+
var _a;
|
|
80
|
+
(_a = tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
81
|
+
window.scrollTo(0, scrollY);
|
|
82
|
+
}, 0);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
_SentinelFocusTrapStrategy_sentinelStart = new WeakMap(), _SentinelFocusTrapStrategy_sentinelEnd = new WeakMap();
|
|
87
|
+
|
|
88
|
+
exports.SentinelFocusTrapStrategy = SentinelFocusTrapStrategy;
|
|
89
|
+
//# sourceMappingURL=sentinel_focus_trap_strategy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|