@shoper/phoenix_design_system 1.18.23-9 → 1.18.24
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 +77 -14
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +4 -28
- 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 +13 -3
- 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 +18 -37
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/modal/modal.js +67 -13
- package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/modal/modal_constants.js +3 -1
- package/build/cjs/packages/phoenix/src/components/modal/modal_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +63 -9
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/sheet/sheet_constants.js +3 -1
- package/build/cjs/packages/phoenix/src/components/sheet/sheet_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +6 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +77 -14
- 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 -5
- package/build/esm/packages/phoenix/src/components/form/search/search.js +4 -28
- 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 +13 -3
- 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 +18 -37
- 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 +9 -1
- package/build/esm/packages/phoenix/src/components/modal/modal.js +69 -15
- package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/modal/modal_constants.js +3 -2
- package/build/esm/packages/phoenix/src/components/modal/modal_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/sheet/sheet.d.ts +9 -1
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js +65 -11
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.js +3 -2
- package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.js.map +1 -1
- package/package.json +1 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +0 -38
- 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 -22
- 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 -62
- 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 -34
- 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 -15
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +0 -2
- 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 -13
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +0 -17
- 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 -8
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +0 -58
- 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
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var utilities = require('@dreamcommerce/utilities');
|
|
6
|
-
|
|
7
|
-
class BaseFocusTrapStrategy {
|
|
8
|
-
constructor(getContainer) {
|
|
9
|
-
this.getContainer = getContainer;
|
|
10
|
-
this.active = false;
|
|
11
|
-
this.noAutofocus = false;
|
|
12
|
-
this._handleKeyDown = (ev) => {
|
|
13
|
-
if (!this.active || ev.code !== 'Tab')
|
|
14
|
-
return;
|
|
15
|
-
const container = this.getContainer();
|
|
16
|
-
if (!container)
|
|
17
|
-
return;
|
|
18
|
-
const focusableElements = this.getFocusableElements(container);
|
|
19
|
-
if (focusableElements.length === 0)
|
|
20
|
-
return;
|
|
21
|
-
const $target = ev.target;
|
|
22
|
-
if (ev.shiftKey) {
|
|
23
|
-
if ($target === focusableElements[0]) {
|
|
24
|
-
ev.preventDefault();
|
|
25
|
-
focusableElements[focusableElements.length - 1].focus();
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
30
|
-
ev.preventDefault();
|
|
31
|
-
focusableElements[0].focus();
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
attach() {
|
|
37
|
-
document.addEventListener('keydown', this._handleKeyDown);
|
|
38
|
-
}
|
|
39
|
-
detach() {
|
|
40
|
-
document.removeEventListener('keydown', this._handleKeyDown);
|
|
41
|
-
}
|
|
42
|
-
activate() {
|
|
43
|
-
this.active = true;
|
|
44
|
-
}
|
|
45
|
-
deactivate() {
|
|
46
|
-
this.active = false;
|
|
47
|
-
}
|
|
48
|
-
getFocusableElements(container) {
|
|
49
|
-
return utilities.UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
|
|
50
|
-
}
|
|
51
|
-
_isElementTrulyFocusable($el) {
|
|
52
|
-
const style = window.getComputedStyle($el);
|
|
53
|
-
if (style.display === 'none' || style.visibility === 'hidden') {
|
|
54
|
-
return false;
|
|
55
|
-
}
|
|
56
|
-
if ($el.nodeName === 'H-PORTAL')
|
|
57
|
-
return true;
|
|
58
|
-
const $parent = $el.parentElement;
|
|
59
|
-
if (!$parent)
|
|
60
|
-
return true;
|
|
61
|
-
return this._isElementTrulyFocusable($parent);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
exports.BaseFocusTrapStrategy = BaseFocusTrapStrategy;
|
|
66
|
-
//# sourceMappingURL=base_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
|
|
6
|
-
|
|
7
|
-
class CyclicFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
|
|
8
|
-
constructor({ getContainer }) {
|
|
9
|
-
super(getContainer);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
exports.CyclicFocusTrapStrategy = CyclicFocusTrapStrategy;
|
|
14
|
-
//# sourceMappingURL=cyclic_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var cyclic_focus_trap_strategy = require('./cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js');
|
|
6
|
-
var toggler_focus_trap_strategy = require('./toggler_focus_trap_strategy/toggler_focus_trap_strategy.js');
|
|
7
|
-
var sentinel_focus_trap_strategy = require('./sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js');
|
|
8
|
-
|
|
9
|
-
const FOCUS_TRAP_STRATEGY_TYPES = {
|
|
10
|
-
cyclic: 'cyclic',
|
|
11
|
-
toggler: 'toggler',
|
|
12
|
-
sentinel: 'sentinel',
|
|
13
|
-
};
|
|
14
|
-
const FOCUS_TRAP_STRATEGY_STRATEGIES = {
|
|
15
|
-
[FOCUS_TRAP_STRATEGY_TYPES.cyclic]: cyclic_focus_trap_strategy.CyclicFocusTrapStrategy,
|
|
16
|
-
[FOCUS_TRAP_STRATEGY_TYPES.toggler]: toggler_focus_trap_strategy.TogglerFocusTrapStrategy,
|
|
17
|
-
[FOCUS_TRAP_STRATEGY_TYPES.sentinel]: sentinel_focus_trap_strategy.SentinelFocusTrapStrategy,
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
exports.FOCUS_TRAP_STRATEGY_STRATEGIES = FOCUS_TRAP_STRATEGY_STRATEGIES;
|
|
21
|
-
exports.FOCUS_TRAP_STRATEGY_TYPES = FOCUS_TRAP_STRATEGY_TYPES;
|
|
22
|
-
//# sourceMappingURL=focus_trap_strategy_constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
|
|
6
|
-
|
|
7
|
-
class SentinelFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
|
|
8
|
-
constructor({ getContainer, noAutofocus = false }) {
|
|
9
|
-
super(getContainer);
|
|
10
|
-
this.noAutofocus = noAutofocus;
|
|
11
|
-
}
|
|
12
|
-
activate() {
|
|
13
|
-
this.active = true;
|
|
14
|
-
if (!this.noAutofocus) {
|
|
15
|
-
requestAnimationFrame(() => {
|
|
16
|
-
const container = this.getContainer();
|
|
17
|
-
if (!container)
|
|
18
|
-
return;
|
|
19
|
-
const focusableElements = this.getFocusableElements(container);
|
|
20
|
-
const shouldSkipStartSentinel = focusableElements.length > 1;
|
|
21
|
-
const $firstFocusableContentElement = shouldSkipStartSentinel ? focusableElements[1] : focusableElements[0];
|
|
22
|
-
$firstFocusableContentElement === null || $firstFocusableContentElement === void 0 ? void 0 : $firstFocusableContentElement.focus();
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
exports.SentinelFocusTrapStrategy = SentinelFocusTrapStrategy;
|
|
29
|
-
//# sourceMappingURL=sentinel_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
|
|
7
|
-
|
|
8
|
-
var _TogglerFocusTrapStrategy_getToggler;
|
|
9
|
-
class TogglerFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
|
|
10
|
-
constructor({ getContainer, getToggler }) {
|
|
11
|
-
super(getContainer);
|
|
12
|
-
_TogglerFocusTrapStrategy_getToggler.set(this, void 0);
|
|
13
|
-
this._handleKeyDown = (ev) => {
|
|
14
|
-
var _a;
|
|
15
|
-
if (!this.active || ev.code !== 'Tab')
|
|
16
|
-
return;
|
|
17
|
-
const container = this.getContainer();
|
|
18
|
-
const toggler = (_a = tslib_es6.__classPrivateFieldGet(this, _TogglerFocusTrapStrategy_getToggler, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
19
|
-
if (!container || !toggler)
|
|
20
|
-
return;
|
|
21
|
-
const $target = ev.target;
|
|
22
|
-
const focusableElements = this.getFocusableElements(container);
|
|
23
|
-
if (ev.shiftKey) {
|
|
24
|
-
// Shift+Tab on toggler → last content element
|
|
25
|
-
if (toggler.contains($target)) {
|
|
26
|
-
const last = focusableElements[focusableElements.length - 1];
|
|
27
|
-
if (!last)
|
|
28
|
-
return;
|
|
29
|
-
ev.preventDefault();
|
|
30
|
-
last.focus();
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
// Shift+Tab on first content element → toggler
|
|
34
|
-
if ($target === focusableElements[0]) {
|
|
35
|
-
ev.preventDefault();
|
|
36
|
-
toggler.focus();
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
// Tab on toggler → first content element
|
|
41
|
-
if (toggler.contains($target)) {
|
|
42
|
-
const first = focusableElements[0];
|
|
43
|
-
if (!first)
|
|
44
|
-
return;
|
|
45
|
-
ev.preventDefault();
|
|
46
|
-
first.focus();
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
// Tab on last content element → toggler
|
|
50
|
-
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
51
|
-
ev.preventDefault();
|
|
52
|
-
toggler.focus();
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
tslib_es6.__classPrivateFieldSet(this, _TogglerFocusTrapStrategy_getToggler, getToggler, "f");
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
_TogglerFocusTrapStrategy_getToggler = new WeakMap();
|
|
60
|
-
|
|
61
|
-
exports.TogglerFocusTrapStrategy = TogglerFocusTrapStrategy;
|
|
62
|
-
//# sourceMappingURL=toggler_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
-
import type { TFocusTrapProps } from './focus_trap_controller_types';
|
|
3
|
-
import { IBaseFocusTrapStrategy } from './strategies/base_focus_trap_strategy_types';
|
|
4
|
-
export declare class FocusTrapController<TProps extends TFocusTrapProps = TFocusTrapProps> implements ReactiveController {
|
|
5
|
-
#private;
|
|
6
|
-
constructor(host: ReactiveControllerHost, { mode, ...strategyProps }: TProps);
|
|
7
|
-
get strategy(): IBaseFocusTrapStrategy;
|
|
8
|
-
hostConnected(): void;
|
|
9
|
-
hostDisconnected(): void;
|
|
10
|
-
activate(): void;
|
|
11
|
-
deactivate(): void;
|
|
12
|
-
getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
13
|
-
}
|
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import 'lit';
|
|
3
|
-
import { FOCUS_TRAP_STRATEGY_STRATEGIES } from './strategies/focus_trap_strategy_constants.js';
|
|
4
|
-
|
|
5
|
-
var _FocusTrapController_strategy;
|
|
6
|
-
class FocusTrapController {
|
|
7
|
-
constructor(host, { mode, ...strategyProps }) {
|
|
8
|
-
_FocusTrapController_strategy.set(this, void 0);
|
|
9
|
-
__classPrivateFieldSet(this, _FocusTrapController_strategy, new FOCUS_TRAP_STRATEGY_STRATEGIES[mode](strategyProps), "f");
|
|
10
|
-
host.addController(this);
|
|
11
|
-
}
|
|
12
|
-
get strategy() {
|
|
13
|
-
return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
|
|
14
|
-
}
|
|
15
|
-
hostConnected() {
|
|
16
|
-
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
|
|
17
|
-
}
|
|
18
|
-
hostDisconnected() {
|
|
19
|
-
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
|
|
20
|
-
}
|
|
21
|
-
activate() {
|
|
22
|
-
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
|
|
23
|
-
}
|
|
24
|
-
deactivate() {
|
|
25
|
-
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
|
|
26
|
-
}
|
|
27
|
-
getFocusableElements(container) {
|
|
28
|
-
return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
_FocusTrapController_strategy = new WeakMap();
|
|
32
|
-
|
|
33
|
-
export { FocusTrapController };
|
|
34
|
-
//# sourceMappingURL=focus_trap_controller.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare type TSentinelFocusTrapProps = {
|
|
2
|
-
mode: 'sentinel';
|
|
3
|
-
getContainer: () => HTMLElement | undefined;
|
|
4
|
-
noAutofocus?: boolean;
|
|
5
|
-
};
|
|
6
|
-
export declare type TCyclicFocusTrapProps = {
|
|
7
|
-
mode: 'cyclic';
|
|
8
|
-
getContainer: () => HTMLElement | undefined;
|
|
9
|
-
};
|
|
10
|
-
export declare type TTogglerFocusTrapProps = {
|
|
11
|
-
mode: 'toggler';
|
|
12
|
-
getContainer: () => HTMLElement | undefined;
|
|
13
|
-
getToggler: () => HTMLElement | null | undefined;
|
|
14
|
-
};
|
|
15
|
-
export declare type TFocusTrapProps = TSentinelFocusTrapProps | TCyclicFocusTrapProps | TTogglerFocusTrapProps;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"focus_trap_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/focus_trap_controller/focus_trap_controller_types.ts"],"names":[],"mappings":""}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { IBaseFocusTrapStrategy } from './base_focus_trap_strategy_types';
|
|
2
|
-
export declare abstract class BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
|
|
3
|
-
protected readonly getContainer: () => HTMLElement | undefined;
|
|
4
|
-
protected active: boolean;
|
|
5
|
-
noAutofocus: boolean;
|
|
6
|
-
constructor(getContainer: () => HTMLElement | undefined);
|
|
7
|
-
attach(): void;
|
|
8
|
-
detach(): void;
|
|
9
|
-
activate(): void;
|
|
10
|
-
deactivate(): void;
|
|
11
|
-
getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
12
|
-
protected _handleKeyDown: (ev: KeyboardEvent) => void;
|
|
13
|
-
private _isElementTrulyFocusable;
|
|
14
|
-
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
2
|
-
|
|
3
|
-
class BaseFocusTrapStrategy {
|
|
4
|
-
constructor(getContainer) {
|
|
5
|
-
this.getContainer = getContainer;
|
|
6
|
-
this.active = false;
|
|
7
|
-
this.noAutofocus = false;
|
|
8
|
-
this._handleKeyDown = (ev) => {
|
|
9
|
-
if (!this.active || ev.code !== 'Tab')
|
|
10
|
-
return;
|
|
11
|
-
const container = this.getContainer();
|
|
12
|
-
if (!container)
|
|
13
|
-
return;
|
|
14
|
-
const focusableElements = this.getFocusableElements(container);
|
|
15
|
-
if (focusableElements.length === 0)
|
|
16
|
-
return;
|
|
17
|
-
const $target = ev.target;
|
|
18
|
-
if (ev.shiftKey) {
|
|
19
|
-
if ($target === focusableElements[0]) {
|
|
20
|
-
ev.preventDefault();
|
|
21
|
-
focusableElements[focusableElements.length - 1].focus();
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
26
|
-
ev.preventDefault();
|
|
27
|
-
focusableElements[0].focus();
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
attach() {
|
|
33
|
-
document.addEventListener('keydown', this._handleKeyDown);
|
|
34
|
-
}
|
|
35
|
-
detach() {
|
|
36
|
-
document.removeEventListener('keydown', this._handleKeyDown);
|
|
37
|
-
}
|
|
38
|
-
activate() {
|
|
39
|
-
this.active = true;
|
|
40
|
-
}
|
|
41
|
-
deactivate() {
|
|
42
|
-
this.active = false;
|
|
43
|
-
}
|
|
44
|
-
getFocusableElements(container) {
|
|
45
|
-
return UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
|
|
46
|
-
}
|
|
47
|
-
_isElementTrulyFocusable($el) {
|
|
48
|
-
const style = window.getComputedStyle($el);
|
|
49
|
-
if (style.display === 'none' || style.visibility === 'hidden') {
|
|
50
|
-
return false;
|
|
51
|
-
}
|
|
52
|
-
if ($el.nodeName === 'H-PORTAL')
|
|
53
|
-
return true;
|
|
54
|
-
const $parent = $el.parentElement;
|
|
55
|
-
if (!$parent)
|
|
56
|
-
return true;
|
|
57
|
-
return this._isElementTrulyFocusable($parent);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export { BaseFocusTrapStrategy };
|
|
62
|
-
//# sourceMappingURL=base_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base_focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.ts"],"names":[],"mappings":""}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
|
|
2
|
-
import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
|
|
3
|
-
import { TCyclicFocusTrapStrategyProps } from './cyclic_focus_trap_strategy_types';
|
|
4
|
-
export declare class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
|
|
5
|
-
constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
|
|
6
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
|
|
2
|
-
|
|
3
|
-
class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy {
|
|
4
|
-
constructor({ getContainer }) {
|
|
5
|
-
super(getContainer);
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export { CyclicFocusTrapStrategy };
|
|
10
|
-
//# sourceMappingURL=cyclic_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cyclic_focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../../src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.ts"],"names":[],"mappings":""}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy/cyclic_focus_trap_strategy';
|
|
2
|
-
import { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy/toggler_focus_trap_strategy';
|
|
3
|
-
import { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy/sentinel_focus_trap_strategy';
|
|
4
|
-
export declare const FOCUS_TRAP_STRATEGY_TYPES: {
|
|
5
|
-
readonly cyclic: "cyclic";
|
|
6
|
-
readonly toggler: "toggler";
|
|
7
|
-
readonly sentinel: "sentinel";
|
|
8
|
-
};
|
|
9
|
-
export declare const FOCUS_TRAP_STRATEGY_STRATEGIES: {
|
|
10
|
-
readonly cyclic: typeof CyclicFocusTrapStrategy;
|
|
11
|
-
readonly toggler: typeof TogglerFocusTrapStrategy;
|
|
12
|
-
readonly sentinel: typeof SentinelFocusTrapStrategy;
|
|
13
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js';
|
|
2
|
-
import { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy/toggler_focus_trap_strategy.js';
|
|
3
|
-
import { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js';
|
|
4
|
-
|
|
5
|
-
const FOCUS_TRAP_STRATEGY_TYPES = {
|
|
6
|
-
cyclic: 'cyclic',
|
|
7
|
-
toggler: 'toggler',
|
|
8
|
-
sentinel: 'sentinel',
|
|
9
|
-
};
|
|
10
|
-
const FOCUS_TRAP_STRATEGY_STRATEGIES = {
|
|
11
|
-
[FOCUS_TRAP_STRATEGY_TYPES.cyclic]: CyclicFocusTrapStrategy,
|
|
12
|
-
[FOCUS_TRAP_STRATEGY_TYPES.toggler]: TogglerFocusTrapStrategy,
|
|
13
|
-
[FOCUS_TRAP_STRATEGY_TYPES.sentinel]: SentinelFocusTrapStrategy,
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export { FOCUS_TRAP_STRATEGY_STRATEGIES, FOCUS_TRAP_STRATEGY_TYPES };
|
|
17
|
-
//# sourceMappingURL=focus_trap_strategy_constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
|
|
2
|
-
import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
|
|
3
|
-
import { TSentinelFocusTrapStrategyProps } from './sentinel_focus_trap_strategy_types';
|
|
4
|
-
export declare class SentinelFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
|
|
5
|
-
constructor({ getContainer, noAutofocus }: TSentinelFocusTrapStrategyProps);
|
|
6
|
-
activate(): void;
|
|
7
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
|
|
2
|
-
|
|
3
|
-
class SentinelFocusTrapStrategy extends BaseFocusTrapStrategy {
|
|
4
|
-
constructor({ getContainer, noAutofocus = false }) {
|
|
5
|
-
super(getContainer);
|
|
6
|
-
this.noAutofocus = noAutofocus;
|
|
7
|
-
}
|
|
8
|
-
activate() {
|
|
9
|
-
this.active = true;
|
|
10
|
-
if (!this.noAutofocus) {
|
|
11
|
-
requestAnimationFrame(() => {
|
|
12
|
-
const container = this.getContainer();
|
|
13
|
-
if (!container)
|
|
14
|
-
return;
|
|
15
|
-
const focusableElements = this.getFocusableElements(container);
|
|
16
|
-
const shouldSkipStartSentinel = focusableElements.length > 1;
|
|
17
|
-
const $firstFocusableContentElement = shouldSkipStartSentinel ? focusableElements[1] : focusableElements[0];
|
|
18
|
-
$firstFocusableContentElement === null || $firstFocusableContentElement === void 0 ? void 0 : $firstFocusableContentElement.focus();
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export { SentinelFocusTrapStrategy };
|
|
25
|
-
//# sourceMappingURL=sentinel_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sentinel_focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../../src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.ts"],"names":[],"mappings":""}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
|
|
2
|
-
import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
|
|
3
|
-
import { TTogglerFocusTrapStrategyProps } from './toggler_focus_trap_strategy_types';
|
|
4
|
-
export declare class TogglerFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
|
|
5
|
-
#private;
|
|
6
|
-
constructor({ getContainer, getToggler }: TTogglerFocusTrapStrategyProps);
|
|
7
|
-
protected _handleKeyDown: (ev: KeyboardEvent) => void;
|
|
8
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
|
|
3
|
-
|
|
4
|
-
var _TogglerFocusTrapStrategy_getToggler;
|
|
5
|
-
class TogglerFocusTrapStrategy extends BaseFocusTrapStrategy {
|
|
6
|
-
constructor({ getContainer, getToggler }) {
|
|
7
|
-
super(getContainer);
|
|
8
|
-
_TogglerFocusTrapStrategy_getToggler.set(this, void 0);
|
|
9
|
-
this._handleKeyDown = (ev) => {
|
|
10
|
-
var _a;
|
|
11
|
-
if (!this.active || ev.code !== 'Tab')
|
|
12
|
-
return;
|
|
13
|
-
const container = this.getContainer();
|
|
14
|
-
const toggler = (_a = __classPrivateFieldGet(this, _TogglerFocusTrapStrategy_getToggler, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
15
|
-
if (!container || !toggler)
|
|
16
|
-
return;
|
|
17
|
-
const $target = ev.target;
|
|
18
|
-
const focusableElements = this.getFocusableElements(container);
|
|
19
|
-
if (ev.shiftKey) {
|
|
20
|
-
// Shift+Tab on toggler → last content element
|
|
21
|
-
if (toggler.contains($target)) {
|
|
22
|
-
const last = focusableElements[focusableElements.length - 1];
|
|
23
|
-
if (!last)
|
|
24
|
-
return;
|
|
25
|
-
ev.preventDefault();
|
|
26
|
-
last.focus();
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
// Shift+Tab on first content element → toggler
|
|
30
|
-
if ($target === focusableElements[0]) {
|
|
31
|
-
ev.preventDefault();
|
|
32
|
-
toggler.focus();
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
// Tab on toggler → first content element
|
|
37
|
-
if (toggler.contains($target)) {
|
|
38
|
-
const first = focusableElements[0];
|
|
39
|
-
if (!first)
|
|
40
|
-
return;
|
|
41
|
-
ev.preventDefault();
|
|
42
|
-
first.focus();
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
// Tab on last content element → toggler
|
|
46
|
-
if ($target === focusableElements[focusableElements.length - 1]) {
|
|
47
|
-
ev.preventDefault();
|
|
48
|
-
toggler.focus();
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
__classPrivateFieldSet(this, _TogglerFocusTrapStrategy_getToggler, getToggler, "f");
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
_TogglerFocusTrapStrategy_getToggler = new WeakMap();
|
|
56
|
-
|
|
57
|
-
export { TogglerFocusTrapStrategy };
|
|
58
|
-
//# sourceMappingURL=toggler_focus_trap_strategy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,kDAAsD;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toggler_focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../../src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.ts"],"names":[],"mappings":""}
|