@shoper/phoenix_design_system 1.18.23-9 → 1.18.24-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/packages/phoenix/src/components/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 +24 -42
- 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 +24 -42
- 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
|
@@ -3,15 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
+
var utilities = require('@dreamcommerce/utilities');
|
|
6
7
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
7
8
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
8
9
|
var decorators_js = require('@lit/reactive-element/decorators.js');
|
|
10
|
+
require('@lit/reactive-element');
|
|
9
11
|
var litHtml = require('lit-html');
|
|
10
12
|
var ref_js = require('lit-html/directives/ref.js');
|
|
11
13
|
var portal_constants = require('../portal/portal_constants.js');
|
|
12
14
|
var backdrop_constants = require('../backdrop/backdrop_constants.js');
|
|
13
15
|
var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
|
|
14
|
-
var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
|
|
15
16
|
var modal_constants = require('./modal_constants.js');
|
|
16
17
|
var modal_close = require('./modal_close.js');
|
|
17
18
|
|
|
@@ -24,31 +25,54 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
24
25
|
this.transition = 'scale';
|
|
25
26
|
this.modalLabel = '';
|
|
26
27
|
this.noAutofocus = false;
|
|
28
|
+
this._firstFocusableElement = undefined;
|
|
29
|
+
this._focusableElements = null;
|
|
30
|
+
this._lastFocusableElement = undefined;
|
|
27
31
|
this._focusedToggler = null;
|
|
28
32
|
this._contentRef = ref_js.createRef();
|
|
33
|
+
this._focusSentinelStart = ref_js.createRef();
|
|
34
|
+
this._focusSentinelEnd = ref_js.createRef();
|
|
29
35
|
this._propsChangeStrategies = {
|
|
30
36
|
[modal_constants.MODAL_OPENED_PROP]: {
|
|
31
37
|
true: () => {
|
|
38
|
+
const scrollY = window.scrollY;
|
|
32
39
|
HModal_1.openModals = [...HModal_1.openModals, this];
|
|
33
40
|
document.addEventListener('keydown', this._bindCloseOnEsc);
|
|
34
41
|
document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
|
|
35
42
|
this._dispatchModalOpenedEvent();
|
|
36
|
-
this.
|
|
43
|
+
if (!this.noAutofocus) {
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
var _a;
|
|
46
|
+
(_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
47
|
+
window.scrollTo(0, scrollY);
|
|
48
|
+
}, 0);
|
|
49
|
+
}
|
|
37
50
|
},
|
|
38
51
|
false: () => {
|
|
39
52
|
HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
|
|
40
53
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
41
54
|
document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
|
|
42
|
-
this._focusTrapController.deactivate();
|
|
43
55
|
}
|
|
44
56
|
}
|
|
45
57
|
};
|
|
46
58
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
47
|
-
this.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
59
|
+
this._keepFocusWithinModal = (ev) => {
|
|
60
|
+
var _a;
|
|
61
|
+
const isTabPressed = ev.code === 'Tab';
|
|
62
|
+
if (isTabPressed && this._contentRef.value) {
|
|
63
|
+
if (ev.shiftKey) {
|
|
64
|
+
if (document.activeElement === this._firstFocusableElement) {
|
|
65
|
+
const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
|
|
66
|
+
(_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
67
|
+
ev.preventDefault();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
else if (document.activeElement === this._lastFocusableElement) {
|
|
71
|
+
utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
|
|
72
|
+
ev.preventDefault();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
};
|
|
52
76
|
this._handleCloseFromCloseComponent = async (ev) => {
|
|
53
77
|
var _a;
|
|
54
78
|
ev.stopPropagation();
|
|
@@ -109,6 +133,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
109
133
|
});
|
|
110
134
|
};
|
|
111
135
|
this.hidden = true;
|
|
136
|
+
this._focusableElements = [...this.querySelectorAll(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
|
|
112
137
|
}
|
|
113
138
|
static _appendModalsPortal() {
|
|
114
139
|
const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${modal_constants.MODALS_PORTAL_NAME}"]`);
|
|
@@ -124,6 +149,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
124
149
|
connectedCallback() {
|
|
125
150
|
super.connectedCallback();
|
|
126
151
|
HModal_1._appendModalsPortal();
|
|
152
|
+
document.addEventListener('keyup', this._keepFocusWithinModal);
|
|
127
153
|
document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
128
154
|
}
|
|
129
155
|
disconnectedCallback() {
|
|
@@ -132,14 +158,29 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
132
158
|
this.close();
|
|
133
159
|
document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
134
160
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
161
|
+
document.removeEventListener('keyup', this._keepFocusWithinModal);
|
|
162
|
+
}
|
|
163
|
+
firstUpdated(props) {
|
|
164
|
+
super.firstUpdated(props);
|
|
165
|
+
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
166
|
+
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
135
167
|
}
|
|
136
168
|
updated(changedProps) {
|
|
137
169
|
if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
|
|
138
170
|
this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
|
|
139
171
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
172
|
+
}
|
|
173
|
+
_setFocusToFirstFocusableElementInModalOrCloseBtn() {
|
|
174
|
+
if (this.noAutofocus)
|
|
175
|
+
return;
|
|
176
|
+
requestAnimationFrame(() => {
|
|
177
|
+
if (this._contentRef.value) {
|
|
178
|
+
const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
|
|
179
|
+
if (focusableElements.length > 0) {
|
|
180
|
+
focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
});
|
|
143
184
|
}
|
|
144
185
|
async open() {
|
|
145
186
|
this._focusedToggler = document.activeElement;
|
|
@@ -156,6 +197,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
156
197
|
setTimeout(() => {
|
|
157
198
|
var _a;
|
|
158
199
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
|
|
200
|
+
this._setFocusToFirstFocusableElementInModalOrCloseBtn();
|
|
159
201
|
resolve();
|
|
160
202
|
}, transitionDuration);
|
|
161
203
|
});
|
|
@@ -183,11 +225,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
183
225
|
return litHtml.html `
|
|
184
226
|
<h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
|
|
185
227
|
<div class="modal-wrapper ${this.class}">
|
|
186
|
-
<div tabindex="0"></div>
|
|
228
|
+
<div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
|
|
187
229
|
<div ${ref_js.ref(this._contentRef)} class="modal" role="dialog" aria-label="${this.modalLabel}">
|
|
188
230
|
<div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
|
|
189
231
|
</div>
|
|
190
|
-
<div tabindex="0"></div>
|
|
232
|
+
<div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
|
|
191
233
|
</div>
|
|
192
234
|
</h-portal>
|
|
193
235
|
`;
|
|
@@ -214,6 +256,18 @@ tslib_es6.__decorate([
|
|
|
214
256
|
decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
|
|
215
257
|
tslib_es6.__metadata("design:type", Object)
|
|
216
258
|
], exports.HModal.prototype, "noAutofocus", void 0);
|
|
259
|
+
tslib_es6.__decorate([
|
|
260
|
+
decorators_js.state(),
|
|
261
|
+
tslib_es6.__metadata("design:type", Object)
|
|
262
|
+
], exports.HModal.prototype, "_firstFocusableElement", void 0);
|
|
263
|
+
tslib_es6.__decorate([
|
|
264
|
+
decorators_js.state(),
|
|
265
|
+
tslib_es6.__metadata("design:type", Object)
|
|
266
|
+
], exports.HModal.prototype, "_focusableElements", void 0);
|
|
267
|
+
tslib_es6.__decorate([
|
|
268
|
+
decorators_js.state(),
|
|
269
|
+
tslib_es6.__metadata("design:type", Object)
|
|
270
|
+
], exports.HModal.prototype, "_lastFocusableElement", void 0);
|
|
217
271
|
exports.HModal = HModal_1 = tslib_es6.__decorate([
|
|
218
272
|
phoenix_custom_element.phoenixCustomElement('h-modal'),
|
|
219
273
|
tslib_es6.__metadata("design:paramtypes", [])
|
|
@@ -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;"}
|
|
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -9,8 +9,10 @@ const MODAL_EVENTS = {
|
|
|
9
9
|
opened: 'opened',
|
|
10
10
|
closed: 'closed'
|
|
11
11
|
};
|
|
12
|
-
const MODAL_OPENED_PROP = 'opened';
|
|
12
|
+
const MODAL_OPENED_PROP = 'opened';
|
|
13
|
+
const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
13
14
|
|
|
15
|
+
exports.FOCUSABLE_ELEMENTS_WITHIN_MODAL = FOCUSABLE_ELEMENTS_WITHIN_MODAL;
|
|
14
16
|
exports.MODALS_PORTAL_NAME = MODALS_PORTAL_NAME;
|
|
15
17
|
exports.MODAL_EVENTS = MODAL_EVENTS;
|
|
16
18
|
exports.MODAL_OPENED_PROP = MODAL_OPENED_PROP;
|
|
@@ -1 +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;"}
|
|
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;"}
|
|
@@ -3,15 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
+
var utilities = require('@dreamcommerce/utilities');
|
|
6
7
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
7
8
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
8
9
|
var decorators_js = require('@lit/reactive-element/decorators.js');
|
|
10
|
+
require('@lit/reactive-element');
|
|
9
11
|
var litHtml = require('lit-html');
|
|
10
12
|
var ref_js = require('lit-html/directives/ref.js');
|
|
11
13
|
var portal_constants = require('../portal/portal_constants.js');
|
|
12
14
|
var backdrop_constants = require('../backdrop/backdrop_constants.js');
|
|
13
15
|
var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
|
|
14
|
-
var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
|
|
15
16
|
var sheet_constants = require('./sheet_constants.js');
|
|
16
17
|
var sheet_close = require('./sheet_close.js');
|
|
17
18
|
|
|
@@ -23,30 +24,52 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
23
24
|
this.class = '';
|
|
24
25
|
this.transition = 'scale';
|
|
25
26
|
this.sheetLabel = '';
|
|
27
|
+
this._firstFocusableElement = undefined;
|
|
28
|
+
this._focusableElements = null;
|
|
29
|
+
this._lastFocusableElement = undefined;
|
|
26
30
|
this._focusedToggler = null;
|
|
27
31
|
this._contentRef = ref_js.createRef();
|
|
32
|
+
this._focusSentinelStart = ref_js.createRef();
|
|
33
|
+
this._focusSentinelEnd = ref_js.createRef();
|
|
28
34
|
this._propsChangeStrategies = {
|
|
29
35
|
[sheet_constants.SHEET_OPENED_PROP]: {
|
|
30
36
|
true: () => {
|
|
37
|
+
const scrollY = window.scrollY;
|
|
31
38
|
HSheet_1.openSheets = [...HSheet_1.openSheets, this];
|
|
32
39
|
document.addEventListener('keydown', this._bindCloseOnEsc);
|
|
33
40
|
document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
|
|
34
41
|
this._dispatchSheetOpenedEvent();
|
|
35
|
-
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
var _a;
|
|
44
|
+
(_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
45
|
+
window.scrollTo(0, scrollY);
|
|
46
|
+
}, 0);
|
|
36
47
|
},
|
|
37
48
|
false: () => {
|
|
38
49
|
HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
|
|
39
50
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
40
51
|
document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
|
|
41
|
-
this._focusTrapController.deactivate();
|
|
42
52
|
}
|
|
43
53
|
}
|
|
44
54
|
};
|
|
45
55
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
46
|
-
this.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
56
|
+
this._keepFocusWithinSheet = (ev) => {
|
|
57
|
+
var _a;
|
|
58
|
+
const isTabPressed = ev.code === 'Tab';
|
|
59
|
+
if (isTabPressed && this._contentRef.value) {
|
|
60
|
+
if (ev.shiftKey) {
|
|
61
|
+
if (document.activeElement === this._firstFocusableElement) {
|
|
62
|
+
const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
|
|
63
|
+
(_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
64
|
+
ev.preventDefault();
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
else if (document.activeElement === this._lastFocusableElement) {
|
|
68
|
+
utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
|
|
69
|
+
ev.preventDefault();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
};
|
|
50
73
|
this._handleCloseFromCloseComponent = async (ev) => {
|
|
51
74
|
var _a;
|
|
52
75
|
ev.stopPropagation();
|
|
@@ -107,6 +130,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
107
130
|
});
|
|
108
131
|
};
|
|
109
132
|
this.hidden = true;
|
|
133
|
+
this._focusableElements = [...this.querySelectorAll(sheet_constants.FOCUSABLE_ELEMENTS_WITHIN_SHEET)];
|
|
110
134
|
}
|
|
111
135
|
static _appendSheetPortal() {
|
|
112
136
|
const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${sheet_constants.SHEETS_PORTAL_NAME}"]`);
|
|
@@ -122,6 +146,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
122
146
|
connectedCallback() {
|
|
123
147
|
super.connectedCallback();
|
|
124
148
|
HSheet_1._appendSheetPortal();
|
|
149
|
+
document.addEventListener('keyup', this._keepFocusWithinSheet);
|
|
125
150
|
document.addEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
126
151
|
}
|
|
127
152
|
disconnectedCallback() {
|
|
@@ -130,12 +155,28 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
130
155
|
this.close();
|
|
131
156
|
document.removeEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
132
157
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
158
|
+
document.removeEventListener('keyup', this._keepFocusWithinSheet);
|
|
159
|
+
}
|
|
160
|
+
firstUpdated(props) {
|
|
161
|
+
super.firstUpdated(props);
|
|
162
|
+
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
163
|
+
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
133
164
|
}
|
|
134
165
|
updated(changedProps) {
|
|
135
166
|
if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
|
|
136
167
|
this._propsChangeStrategies[sheet_constants.SHEET_OPENED_PROP][String(this[sheet_constants.SHEET_OPENED_PROP])]();
|
|
137
168
|
}
|
|
138
169
|
}
|
|
170
|
+
_setFocusToFirstFocusableElementInSheetOrCloseBtn() {
|
|
171
|
+
requestAnimationFrame(() => {
|
|
172
|
+
if (this._contentRef.value) {
|
|
173
|
+
const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
|
|
174
|
+
if (focusableElements.length > 0) {
|
|
175
|
+
focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
}
|
|
139
180
|
async open() {
|
|
140
181
|
this._focusedToggler = document.activeElement;
|
|
141
182
|
return new Promise((resolve) => {
|
|
@@ -151,6 +192,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
151
192
|
setTimeout(() => {
|
|
152
193
|
var _a;
|
|
153
194
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
|
|
195
|
+
this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
|
|
154
196
|
resolve();
|
|
155
197
|
}, transitionDuration);
|
|
156
198
|
});
|
|
@@ -176,11 +218,11 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
|
|
|
176
218
|
return litHtml.html `
|
|
177
219
|
<h-portal ?disabled="${!this.opened}" to="${sheet_constants.SHEETS_PORTAL_NAME}" hidden>
|
|
178
220
|
<div class="sheet-wrapper ${this.class}">
|
|
179
|
-
<div tabindex="0"></div>
|
|
221
|
+
<div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
|
|
180
222
|
<div ${ref_js.ref(this._contentRef)} class="sheet" role="dialog" aria-label="${this.sheetLabel}">
|
|
181
223
|
<div class="sheet__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
|
|
182
224
|
</div>
|
|
183
|
-
<div tabindex="0"></div>
|
|
225
|
+
<div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
|
|
184
226
|
</div>
|
|
185
227
|
</h-portal>
|
|
186
228
|
`;
|
|
@@ -203,6 +245,18 @@ tslib_es6.__decorate([
|
|
|
203
245
|
decorators_js.property({ type: String, attribute: 'sheet-label' }),
|
|
204
246
|
tslib_es6.__metadata("design:type", Object)
|
|
205
247
|
], exports.HSheet.prototype, "sheetLabel", void 0);
|
|
248
|
+
tslib_es6.__decorate([
|
|
249
|
+
decorators_js.state(),
|
|
250
|
+
tslib_es6.__metadata("design:type", Object)
|
|
251
|
+
], exports.HSheet.prototype, "_firstFocusableElement", void 0);
|
|
252
|
+
tslib_es6.__decorate([
|
|
253
|
+
decorators_js.state(),
|
|
254
|
+
tslib_es6.__metadata("design:type", Object)
|
|
255
|
+
], exports.HSheet.prototype, "_focusableElements", void 0);
|
|
256
|
+
tslib_es6.__decorate([
|
|
257
|
+
decorators_js.state(),
|
|
258
|
+
tslib_es6.__metadata("design:type", Object)
|
|
259
|
+
], exports.HSheet.prototype, "_lastFocusableElement", void 0);
|
|
206
260
|
exports.HSheet = HSheet_1 = tslib_es6.__decorate([
|
|
207
261
|
phoenix_custom_element.phoenixCustomElement('h-sheet'),
|
|
208
262
|
tslib_es6.__metadata("design:paramtypes", [])
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -9,8 +9,10 @@ const SHEET_EVENTS = {
|
|
|
9
9
|
opened: 'opened',
|
|
10
10
|
closed: 'closed'
|
|
11
11
|
};
|
|
12
|
-
const SHEET_OPENED_PROP = 'opened';
|
|
12
|
+
const SHEET_OPENED_PROP = 'opened';
|
|
13
|
+
const FOCUSABLE_ELEMENTS_WITHIN_SHEET = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
13
14
|
|
|
15
|
+
exports.FOCUSABLE_ELEMENTS_WITHIN_SHEET = FOCUSABLE_ELEMENTS_WITHIN_SHEET;
|
|
14
16
|
exports.SHEETS_PORTAL_NAME = SHEETS_PORTAL_NAME;
|
|
15
17
|
exports.SHEET_EVENTS = SHEET_EVENTS;
|
|
16
18
|
exports.SHEET_OPENED_PROP = SHEET_OPENED_PROP;
|
|
@@ -1 +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;"}
|
|
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;"}
|
|
@@ -26,7 +26,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
26
26
|
private _dropdownContentChildrenHeight;
|
|
27
27
|
private _hasScrollableClassInitially;
|
|
28
28
|
private _backdropController;
|
|
29
|
-
private _focusTrapController;
|
|
30
29
|
constructor();
|
|
31
30
|
connectedCallback(): Promise<void>;
|
|
32
31
|
private static _appendDropdownPortal;
|
|
@@ -46,8 +45,14 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
46
45
|
private _closeDropdownOnEscape;
|
|
47
46
|
private _keepFocusWithinDropdownForwards;
|
|
48
47
|
private _handleFocusOnNextElementAfterDropdown;
|
|
48
|
+
private _handleFocusFromTogglerForwards;
|
|
49
|
+
private _handleFocusFromSentinelEndForwards;
|
|
49
50
|
private _keepFocusWithinDropdownBackwards;
|
|
50
51
|
private _handleDefaultFocusFromDropdownBackwards;
|
|
52
|
+
private _handleFocusFromTogglerBackwards;
|
|
53
|
+
private _handleFocusFromSentinelStartBackwards;
|
|
54
|
+
private _getTrulyFocusableElements;
|
|
55
|
+
private _isElementTrulyFocusable;
|
|
51
56
|
private _hoverToggle;
|
|
52
57
|
private _isHoveredWithinDropdown;
|
|
53
58
|
private _focusOnFirstContentElement;
|
|
@@ -12,7 +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 { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
|
|
16
15
|
import throttle_1 from '../../../../../external/lodash/throttle.js';
|
|
17
16
|
import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
|
|
18
17
|
|
|
@@ -31,11 +30,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
31
30
|
this.preventFocusTrap = false;
|
|
32
31
|
this.noAutoFocus = false;
|
|
33
32
|
this._backdropController = new BackdropController();
|
|
34
|
-
this._focusTrapController = new FocusTrapController(this, {
|
|
35
|
-
mode: 'toggler',
|
|
36
|
-
getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
|
|
37
|
-
getToggler: () => this.$dropdownToggler
|
|
38
|
-
});
|
|
39
33
|
this._handleClickOutside = async (target) => {
|
|
40
34
|
var _a, _b;
|
|
41
35
|
if (!this.opened)
|
|
@@ -73,8 +67,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
73
67
|
this._dispatchShowDropdownEvent();
|
|
74
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`);
|
|
75
69
|
this._toggleScroll();
|
|
76
|
-
if (!this.preventFocusTrap)
|
|
77
|
-
this._focusTrapController.activate();
|
|
78
70
|
resolve();
|
|
79
71
|
}, transitionDuration);
|
|
80
72
|
});
|
|
@@ -115,7 +107,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
115
107
|
var _a;
|
|
116
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`);
|
|
117
109
|
this.opened = false;
|
|
118
|
-
this._focusTrapController.deactivate();
|
|
119
110
|
this._dispatchHideDropdownEvent();
|
|
120
111
|
resolve();
|
|
121
112
|
}, transitionDuration);
|
|
@@ -147,16 +138,31 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
147
138
|
await this.hide();
|
|
148
139
|
};
|
|
149
140
|
this._keepFocusWithinDropdownForwards = (ev) => {
|
|
150
|
-
|
|
141
|
+
var _a, _b;
|
|
142
|
+
if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
|
|
151
143
|
return;
|
|
152
|
-
|
|
144
|
+
const $target = ev.target;
|
|
145
|
+
if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
|
|
153
146
|
this._handleFocusOnNextElementAfterDropdown(ev);
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
|
|
150
|
+
this._handleFocusFromTogglerForwards(ev);
|
|
151
|
+
return;
|
|
154
152
|
}
|
|
153
|
+
this._handleFocusFromSentinelEndForwards(ev, $target);
|
|
155
154
|
};
|
|
156
155
|
this._keepFocusWithinDropdownBackwards = (ev) => {
|
|
157
|
-
if (!this.opened || !this.$dropdownContent
|
|
156
|
+
if (!this.opened || !this.$dropdownContent)
|
|
158
157
|
return;
|
|
159
|
-
|
|
158
|
+
const $target = ev.target;
|
|
159
|
+
if (this.preventFocusTrap) {
|
|
160
|
+
this._handleDefaultFocusFromDropdownBackwards(ev);
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
this._handleFocusFromTogglerBackwards(ev, $target);
|
|
164
|
+
this._handleFocusFromSentinelStartBackwards(ev, $target);
|
|
165
|
+
}
|
|
160
166
|
};
|
|
161
167
|
this._hoverToggle = async (ev) => {
|
|
162
168
|
if (window.innerWidth < BREAKPOINTS.xs)
|
|
@@ -178,7 +184,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
178
184
|
this._focusOnFirstContentElement = () => {
|
|
179
185
|
if (!this.$dropdownContent)
|
|
180
186
|
return;
|
|
181
|
-
const $firstFocusableElement = this.
|
|
187
|
+
const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
|
|
182
188
|
if ($firstFocusableElement)
|
|
183
189
|
$firstFocusableElement.focus();
|
|
184
190
|
};
|
|
@@ -296,11 +302,68 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
296
302
|
UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
|
|
297
303
|
return;
|
|
298
304
|
}
|
|
305
|
+
_handleFocusFromTogglerForwards(ev) {
|
|
306
|
+
if (!this.$dropdownContent)
|
|
307
|
+
return;
|
|
308
|
+
const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
|
|
309
|
+
if (trulyFocusableElements.length === 0)
|
|
310
|
+
return;
|
|
311
|
+
ev.preventDefault();
|
|
312
|
+
trulyFocusableElements[0].focus();
|
|
313
|
+
}
|
|
314
|
+
_handleFocusFromSentinelEndForwards(ev, $target) {
|
|
315
|
+
var _a;
|
|
316
|
+
if (!this.$dropdownContent)
|
|
317
|
+
return;
|
|
318
|
+
const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
|
|
319
|
+
const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
|
|
320
|
+
if ($target !== $lastFocusableElement)
|
|
321
|
+
return;
|
|
322
|
+
ev.preventDefault();
|
|
323
|
+
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
324
|
+
}
|
|
299
325
|
_handleDefaultFocusFromDropdownBackwards(ev) {
|
|
300
326
|
ev.preventDefault();
|
|
301
327
|
this.hide();
|
|
302
328
|
UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
|
|
303
329
|
}
|
|
330
|
+
_handleFocusFromTogglerBackwards(ev, $target) {
|
|
331
|
+
var _a;
|
|
332
|
+
if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
|
|
333
|
+
return;
|
|
334
|
+
ev.preventDefault();
|
|
335
|
+
const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
|
|
336
|
+
if (trulyFocusableElements.length === 0)
|
|
337
|
+
return;
|
|
338
|
+
const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
|
|
339
|
+
$lastFocusableElement.focus();
|
|
340
|
+
}
|
|
341
|
+
_handleFocusFromSentinelStartBackwards(ev, $target) {
|
|
342
|
+
var _a;
|
|
343
|
+
if (!this.$dropdownContent)
|
|
344
|
+
return;
|
|
345
|
+
const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
|
|
346
|
+
if ($target !== $firstFocusableElement)
|
|
347
|
+
return;
|
|
348
|
+
ev.preventDefault();
|
|
349
|
+
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
350
|
+
}
|
|
351
|
+
_getTrulyFocusableElements($container) {
|
|
352
|
+
const focusableElements = UiDomUtils.getFocusableElements($container);
|
|
353
|
+
return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
|
|
354
|
+
}
|
|
355
|
+
_isElementTrulyFocusable($el) {
|
|
356
|
+
const style = window.getComputedStyle($el);
|
|
357
|
+
if (style.display === 'none' || style.visibility === 'hidden') {
|
|
358
|
+
return false;
|
|
359
|
+
}
|
|
360
|
+
if ($el.nodeName === 'H-PORTAL')
|
|
361
|
+
return true;
|
|
362
|
+
const $parent = $el.parentElement;
|
|
363
|
+
if (!$parent)
|
|
364
|
+
return true;
|
|
365
|
+
return this._isElementTrulyFocusable($parent);
|
|
366
|
+
}
|
|
304
367
|
_isHoveredWithinDropdown(element) {
|
|
305
368
|
var _a;
|
|
306
369
|
if (element === this)
|
|
@@ -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,7 +1,6 @@
|
|
|
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;
|
|
@@ -18,11 +17,9 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
18
17
|
private _inputField;
|
|
19
18
|
private _searchForm;
|
|
20
19
|
private _togglerElement;
|
|
21
|
-
private _mobileDialogOpener;
|
|
22
20
|
private _id;
|
|
23
21
|
private _openSearchButtonAriaLabelId;
|
|
24
22
|
private _searchContentContainerId;
|
|
25
|
-
mobileFocusTrapController: FocusTrapController;
|
|
26
23
|
private _searchResultsRef;
|
|
27
24
|
private _searchHistoryRef;
|
|
28
25
|
private _searchMessageRef;
|
|
@@ -84,8 +81,6 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
84
81
|
private _isSuggesterLayerVisible;
|
|
85
82
|
private _preventSubmitOnSearchClear;
|
|
86
83
|
private _resetSearchOnFocusOutside;
|
|
87
|
-
private _activateMobileDialog;
|
|
88
|
-
private _deactivateMobileDialog;
|
|
89
84
|
private _setupAriaAttributes;
|
|
90
85
|
private _handleOpenSearch;
|
|
91
86
|
private _handleOpenSearchWithKeyboard;
|