@shoper/phoenix_design_system 1.18.23-0 → 1.18.23-10
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 +24 -93
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +55 -8
- 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 +39 -11
- package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +33 -10
- package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +47 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +66 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +14 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +12 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +29 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +60 -0
- package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +3 -10
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +24 -93
- 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 +6 -0
- package/build/esm/packages/phoenix/src/components/form/search/search.js +55 -8
- 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.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/modal/modal.js +39 -11
- package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/sheet/sheet.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js +33 -10
- package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +13 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js +43 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.d.ts +14 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js +5 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +14 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +62 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.d.ts +8 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js +2 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +6 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +10 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +3 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js +2 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts +5 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js +8 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.d.ts +7 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js +25 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.d.ts +4 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js +2 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.d.ts +11 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js +56 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.d.ts +4 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js +2 -0
- package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types.js.map +1 -0
- package/package.json +1 -1
|
@@ -12,6 +12,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
|
12
12
|
import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
|
|
13
13
|
import { BREAKPOINTS } from '../../../global_constants.js';
|
|
14
14
|
import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
|
|
15
|
+
import { FOCUS_TRAP_STRATEGY_TYPES } from '../../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
|
|
16
|
+
import { FocusTrapController } from '../../../controllers/focus_trap_controller/focus_trap_controller.js';
|
|
15
17
|
import { MODAL_EVENTS } from '../../modal/modal_constants.js';
|
|
16
18
|
import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
|
|
17
19
|
import { when as n } from '../../../../../../external/lit-html/directives/when.js';
|
|
@@ -23,11 +25,17 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
23
25
|
this.view = DEFAULT_VIEW;
|
|
24
26
|
this.isSearchIconFixEnabled = false;
|
|
25
27
|
this.isSearchUxFixesFlagEnabled = false;
|
|
28
|
+
this.isSearchFocusTrapFixEnabled = false;
|
|
26
29
|
this.displayMode = 'dropdown';
|
|
27
30
|
this._togglerElement = null;
|
|
31
|
+
this._mobileDialogOpener = null;
|
|
28
32
|
this._id = v4();
|
|
29
33
|
this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
|
|
30
34
|
this._searchContentContainerId = v4();
|
|
35
|
+
this.mobileFocusTrapController = new FocusTrapController(this, {
|
|
36
|
+
mode: FOCUS_TRAP_STRATEGY_TYPES.cyclic,
|
|
37
|
+
getContainer: () => this
|
|
38
|
+
});
|
|
31
39
|
this._searchResultsRef = createRef();
|
|
32
40
|
this._searchHistoryRef = createRef();
|
|
33
41
|
this._searchMessageRef = createRef();
|
|
@@ -323,6 +331,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
323
331
|
if (window.innerWidth > BREAKPOINTS.sm) {
|
|
324
332
|
const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
|
|
325
333
|
this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
|
|
334
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
335
|
+
this._deactivateMobileDialog();
|
|
326
336
|
if (hasBeenOpened && this.displayMode !== 'dropdown') {
|
|
327
337
|
const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
|
|
328
338
|
const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
|
|
@@ -338,6 +348,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
338
348
|
};
|
|
339
349
|
this._openMobileView = () => {
|
|
340
350
|
this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
351
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
352
|
+
this._activateMobileDialog();
|
|
341
353
|
};
|
|
342
354
|
this._isSuggesterLayerVisible = () => {
|
|
343
355
|
var _a;
|
|
@@ -358,6 +370,19 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
358
370
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
359
371
|
}
|
|
360
372
|
};
|
|
373
|
+
this._activateMobileDialog = () => {
|
|
374
|
+
if (this.displayMode !== 'dropdown')
|
|
375
|
+
return;
|
|
376
|
+
this._mobileDialogOpener = document.activeElement;
|
|
377
|
+
this.setAttribute('role', 'dialog');
|
|
378
|
+
this.setAttribute('aria-modal', 'true');
|
|
379
|
+
this.mobileFocusTrapController.activate();
|
|
380
|
+
};
|
|
381
|
+
this._deactivateMobileDialog = () => {
|
|
382
|
+
this.removeAttribute('role');
|
|
383
|
+
this.removeAttribute('aria-modal');
|
|
384
|
+
this.mobileFocusTrapController.deactivate();
|
|
385
|
+
};
|
|
361
386
|
this._setupAriaAttributes = () => {
|
|
362
387
|
var _a;
|
|
363
388
|
if (this._translations.openSearchButtonAriaLabel) {
|
|
@@ -366,6 +391,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
366
391
|
};
|
|
367
392
|
this._handleOpenSearch = () => {
|
|
368
393
|
this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
394
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
395
|
+
this._activateMobileDialog();
|
|
369
396
|
const shouldShowMessage = this._searchPhrase !== '';
|
|
370
397
|
this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
|
|
371
398
|
const $searchInput = this.querySelector(`
|
|
@@ -374,7 +401,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
374
401
|
$searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
|
|
375
402
|
};
|
|
376
403
|
this._handleOpenSearchWithKeyboard = (ev) => {
|
|
377
|
-
|
|
404
|
+
const isRepeated = this.isSearchFocusTrapFixEnabled ? ev.repeat : false;
|
|
405
|
+
if (ev.code !== 'Enter' || isRepeated)
|
|
378
406
|
return;
|
|
379
407
|
ev.preventDefault();
|
|
380
408
|
this._handleOpenSearch();
|
|
@@ -383,6 +411,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
383
411
|
async connectedCallback() {
|
|
384
412
|
super.connectedCallback();
|
|
385
413
|
this._setupContext();
|
|
414
|
+
this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
|
|
415
|
+
this._setupInitialSearchPhrase();
|
|
416
|
+
this._setupListeners();
|
|
417
|
+
this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
|
|
386
418
|
try {
|
|
387
419
|
this._searchContextConsumer = new ContextConsumerController(this);
|
|
388
420
|
this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
|
|
@@ -411,10 +443,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
411
443
|
catch (_a) {
|
|
412
444
|
console.error('Search context is not provided');
|
|
413
445
|
}
|
|
414
|
-
this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
|
|
415
|
-
this._setupInitialSearchPhrase();
|
|
416
|
-
this._setupListeners();
|
|
417
|
-
this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
|
|
418
446
|
}
|
|
419
447
|
disconnectedCallback() {
|
|
420
448
|
var _a;
|
|
@@ -486,8 +514,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
486
514
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
|
|
487
515
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
|
|
488
516
|
this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
|
|
517
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
518
|
+
this._deactivateMobileDialog();
|
|
489
519
|
this._resetSearchView();
|
|
490
520
|
this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
|
|
521
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
522
|
+
requestAnimationFrame(() => { var _a; return (_a = this._mobileDialogOpener) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
491
523
|
});
|
|
492
524
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
|
|
493
525
|
const contentLength = this._searchHistory.length;
|
|
@@ -606,13 +638,23 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
606
638
|
if (!this._togglerElement)
|
|
607
639
|
return;
|
|
608
640
|
this._togglerElement.addEventListener('click', this._handleOpenSearch);
|
|
609
|
-
|
|
641
|
+
if (this.isSearchFocusTrapFixEnabled) {
|
|
642
|
+
this._togglerElement.addEventListener('keydown', this._handleOpenSearchWithKeyboard);
|
|
643
|
+
}
|
|
644
|
+
else {
|
|
645
|
+
this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
|
|
646
|
+
}
|
|
610
647
|
}
|
|
611
648
|
_teardownToggler() {
|
|
612
649
|
if (!this._togglerElement)
|
|
613
650
|
return;
|
|
614
651
|
this._togglerElement.removeEventListener('click', this._handleOpenSearch);
|
|
615
|
-
|
|
652
|
+
if (this.isSearchFocusTrapFixEnabled) {
|
|
653
|
+
this._togglerElement.removeEventListener('keydown', this._handleOpenSearchWithKeyboard);
|
|
654
|
+
}
|
|
655
|
+
else {
|
|
656
|
+
this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
|
|
657
|
+
}
|
|
616
658
|
}
|
|
617
659
|
render() {
|
|
618
660
|
super.render();
|
|
@@ -622,7 +664,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
622
664
|
tabindex="0"
|
|
623
665
|
aria-haspopup="dialog"
|
|
624
666
|
@click=${this._handleOpenSearch}
|
|
625
|
-
@keyup=${this._handleOpenSearchWithKeyboard}
|
|
667
|
+
@keyup=${this.isSearchFocusTrapFixEnabled ? undefined : this._handleOpenSearchWithKeyboard}
|
|
668
|
+
@keydown=${this.isSearchFocusTrapFixEnabled ? this._handleOpenSearchWithKeyboard : undefined}
|
|
626
669
|
>
|
|
627
670
|
${n(this._translations.openSearchButtonAriaLabel, () => html `
|
|
628
671
|
<span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
|
|
@@ -692,6 +735,10 @@ __decorate([
|
|
|
692
735
|
property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
|
|
693
736
|
__metadata("design:type", Boolean)
|
|
694
737
|
], HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
|
|
738
|
+
__decorate([
|
|
739
|
+
property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
|
|
740
|
+
__metadata("design:type", Boolean)
|
|
741
|
+
], HSearch.prototype, "isSearchFocusTrapFixEnabled", void 0);
|
|
695
742
|
__decorate([
|
|
696
743
|
property({ type: String, attribute: 'display-mode' }),
|
|
697
744
|
__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js
CHANGED
|
@@ -68,25 +68,15 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
|
|
|
68
68
|
}
|
|
69
69
|
});
|
|
70
70
|
});
|
|
71
|
-
this.input.addEventListener('
|
|
72
|
-
if (ev.key
|
|
71
|
+
this.input.addEventListener('keydown', (ev) => {
|
|
72
|
+
if (ev.key !== 'Enter' || ev.repeat)
|
|
73
73
|
return;
|
|
74
|
-
if (ev.key !== 'Enter') {
|
|
75
|
-
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
76
|
-
detail: {
|
|
77
|
-
searchPhrase: ev.target.value
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
74
|
if (this._isSearchPhraseCleared) {
|
|
83
75
|
this._isSearchPhraseCleared = false;
|
|
84
76
|
return;
|
|
85
77
|
}
|
|
86
78
|
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
87
|
-
detail: {
|
|
88
|
-
searchPhrase: ev.target.value
|
|
89
|
-
}
|
|
79
|
+
detail: { searchPhrase: ev.target.value }
|
|
90
80
|
});
|
|
91
81
|
});
|
|
92
82
|
this.input.addEventListener('keyup', debounce_1((ev) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,6 +7,7 @@ export declare class HModal extends PhoenixLightLitElement {
|
|
|
7
7
|
transition: string;
|
|
8
8
|
modalLabel: string;
|
|
9
9
|
noAutofocus: boolean;
|
|
10
|
+
isSearchFocusTrapFixEnabled: boolean;
|
|
10
11
|
_firstFocusableElement: HTMLElement | undefined;
|
|
11
12
|
_focusableElements: HTMLElement[] | null;
|
|
12
13
|
_lastFocusableElement: HTMLElement | undefined;
|
|
@@ -17,6 +18,7 @@ export declare class HModal extends PhoenixLightLitElement {
|
|
|
17
18
|
private _propsChangeStrategies;
|
|
18
19
|
private static openModals;
|
|
19
20
|
private _backdropController;
|
|
21
|
+
private _focusTrapController;
|
|
20
22
|
private static _appendModalsPortal;
|
|
21
23
|
static isSomeModalOpen(): boolean;
|
|
22
24
|
constructor();
|
|
@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
|
9
9
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
10
10
|
import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
|
|
11
11
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
12
|
+
import { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
|
|
13
|
+
import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
|
|
12
14
|
import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
|
|
13
15
|
import { HModalClose } from './modal_close.js';
|
|
14
16
|
|
|
@@ -21,6 +23,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
21
23
|
this.transition = 'scale';
|
|
22
24
|
this.modalLabel = '';
|
|
23
25
|
this.noAutofocus = false;
|
|
26
|
+
this.isSearchFocusTrapFixEnabled = false;
|
|
24
27
|
this._firstFocusableElement = undefined;
|
|
25
28
|
this._focusableElements = null;
|
|
26
29
|
this._lastFocusableElement = undefined;
|
|
@@ -36,22 +39,35 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
36
39
|
document.addEventListener('keydown', this._bindCloseOnEsc);
|
|
37
40
|
document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
|
|
38
41
|
this._dispatchModalOpenedEvent();
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
this._focusTrapController.activate();
|
|
43
|
+
if (this.isSearchFocusTrapFixEnabled) {
|
|
44
|
+
this._focusTrapController.activate();
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
if (!this.noAutofocus) {
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
var _a;
|
|
50
|
+
(_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
51
|
+
window.scrollTo(0, scrollY);
|
|
52
|
+
}, 0);
|
|
53
|
+
}
|
|
45
54
|
}
|
|
46
55
|
},
|
|
47
56
|
false: () => {
|
|
48
57
|
HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
|
|
49
58
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
50
59
|
document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
|
|
60
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
61
|
+
this._focusTrapController.deactivate();
|
|
51
62
|
}
|
|
52
63
|
}
|
|
53
64
|
};
|
|
54
65
|
this._backdropController = new BackdropController();
|
|
66
|
+
this._focusTrapController = new FocusTrapController(this, {
|
|
67
|
+
mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
|
|
68
|
+
getContainer: () => this._contentRef.value,
|
|
69
|
+
noAutofocus: this.noAutofocus
|
|
70
|
+
});
|
|
55
71
|
this._keepFocusWithinModal = (ev) => {
|
|
56
72
|
var _a;
|
|
57
73
|
const isTabPressed = ev.code === 'Tab';
|
|
@@ -145,7 +161,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
145
161
|
connectedCallback() {
|
|
146
162
|
super.connectedCallback();
|
|
147
163
|
HModal_1._appendModalsPortal();
|
|
148
|
-
|
|
164
|
+
if (!this.isSearchFocusTrapFixEnabled)
|
|
165
|
+
document.addEventListener('keyup', this._keepFocusWithinModal);
|
|
149
166
|
document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
150
167
|
}
|
|
151
168
|
disconnectedCallback() {
|
|
@@ -154,17 +171,23 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
154
171
|
this.close();
|
|
155
172
|
document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
156
173
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
157
|
-
|
|
174
|
+
if (!this.isSearchFocusTrapFixEnabled)
|
|
175
|
+
document.removeEventListener('keyup', this._keepFocusWithinModal);
|
|
158
176
|
}
|
|
159
177
|
firstUpdated(props) {
|
|
160
178
|
super.firstUpdated(props);
|
|
161
|
-
this.
|
|
162
|
-
|
|
179
|
+
if (!this.isSearchFocusTrapFixEnabled) {
|
|
180
|
+
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
181
|
+
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
182
|
+
}
|
|
163
183
|
}
|
|
164
184
|
updated(changedProps) {
|
|
165
185
|
if (changedProps.has(MODAL_OPENED_PROP)) {
|
|
166
186
|
this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
|
|
167
187
|
}
|
|
188
|
+
if (this.isSearchFocusTrapFixEnabled && changedProps.has('noAutofocus')) {
|
|
189
|
+
this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
|
|
190
|
+
}
|
|
168
191
|
}
|
|
169
192
|
_setFocusToFirstFocusableElementInModalOrCloseBtn() {
|
|
170
193
|
if (this.noAutofocus)
|
|
@@ -193,7 +216,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
193
216
|
setTimeout(() => {
|
|
194
217
|
var _a;
|
|
195
218
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
|
|
196
|
-
this.
|
|
219
|
+
if (!this.isSearchFocusTrapFixEnabled)
|
|
220
|
+
this._setFocusToFirstFocusableElementInModalOrCloseBtn();
|
|
197
221
|
resolve();
|
|
198
222
|
}, transitionDuration);
|
|
199
223
|
});
|
|
@@ -252,6 +276,10 @@ __decorate([
|
|
|
252
276
|
property({ type: Boolean, attribute: 'no-autofocus' }),
|
|
253
277
|
__metadata("design:type", Object)
|
|
254
278
|
], HModal.prototype, "noAutofocus", void 0);
|
|
279
|
+
__decorate([
|
|
280
|
+
property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
|
|
281
|
+
__metadata("design:type", Boolean)
|
|
282
|
+
], HModal.prototype, "isSearchFocusTrapFixEnabled", void 0);
|
|
255
283
|
__decorate([
|
|
256
284
|
state(),
|
|
257
285
|
__metadata("design:type", Object)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,6 +6,7 @@ export declare class HSheet extends PhoenixLightLitElement {
|
|
|
6
6
|
class: string;
|
|
7
7
|
transition: string;
|
|
8
8
|
sheetLabel: string;
|
|
9
|
+
isSearchFocusTrapFixEnabled: boolean;
|
|
9
10
|
_firstFocusableElement: HTMLElement | undefined;
|
|
10
11
|
_focusableElements: HTMLElement[] | null;
|
|
11
12
|
_lastFocusableElement: HTMLElement | undefined;
|
|
@@ -16,6 +17,7 @@ export declare class HSheet extends PhoenixLightLitElement {
|
|
|
16
17
|
private _propsChangeStrategies;
|
|
17
18
|
private static openSheets;
|
|
18
19
|
private _backdropController;
|
|
20
|
+
private _focusTrapController;
|
|
19
21
|
private static _appendSheetPortal;
|
|
20
22
|
static isSomeSheetOpen(): boolean;
|
|
21
23
|
constructor();
|
|
@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
|
9
9
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
10
10
|
import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
|
|
11
11
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
12
|
+
import { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
|
|
13
|
+
import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
|
|
12
14
|
import { SHEET_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
|
|
13
15
|
import { HSheetClose } from './sheet_close.js';
|
|
14
16
|
|
|
@@ -20,6 +22,7 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
|
|
|
20
22
|
this.class = '';
|
|
21
23
|
this.transition = 'scale';
|
|
22
24
|
this.sheetLabel = '';
|
|
25
|
+
this.isSearchFocusTrapFixEnabled = false;
|
|
23
26
|
this._firstFocusableElement = undefined;
|
|
24
27
|
this._focusableElements = null;
|
|
25
28
|
this._lastFocusableElement = undefined;
|
|
@@ -35,20 +38,31 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
|
|
|
35
38
|
document.addEventListener('keydown', this._bindCloseOnEsc);
|
|
36
39
|
document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
|
|
37
40
|
this._dispatchSheetOpenedEvent();
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
if (this.isSearchFocusTrapFixEnabled) {
|
|
42
|
+
this._focusTrapController.activate();
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
var _a;
|
|
47
|
+
(_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
48
|
+
window.scrollTo(0, scrollY);
|
|
49
|
+
}, 0);
|
|
50
|
+
}
|
|
43
51
|
},
|
|
44
52
|
false: () => {
|
|
45
53
|
HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
|
|
46
54
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
47
55
|
document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
|
|
56
|
+
if (this.isSearchFocusTrapFixEnabled)
|
|
57
|
+
this._focusTrapController.deactivate();
|
|
48
58
|
}
|
|
49
59
|
}
|
|
50
60
|
};
|
|
51
61
|
this._backdropController = new BackdropController();
|
|
62
|
+
this._focusTrapController = new FocusTrapController(this, {
|
|
63
|
+
mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
|
|
64
|
+
getContainer: () => this._contentRef.value
|
|
65
|
+
});
|
|
52
66
|
this._keepFocusWithinSheet = (ev) => {
|
|
53
67
|
var _a;
|
|
54
68
|
const isTabPressed = ev.code === 'Tab';
|
|
@@ -142,7 +156,8 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
|
|
|
142
156
|
connectedCallback() {
|
|
143
157
|
super.connectedCallback();
|
|
144
158
|
HSheet_1._appendSheetPortal();
|
|
145
|
-
|
|
159
|
+
if (!this.isSearchFocusTrapFixEnabled)
|
|
160
|
+
document.addEventListener('keyup', this._keepFocusWithinSheet);
|
|
146
161
|
document.addEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
147
162
|
}
|
|
148
163
|
disconnectedCallback() {
|
|
@@ -151,12 +166,15 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
|
|
|
151
166
|
this.close();
|
|
152
167
|
document.removeEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
|
|
153
168
|
document.removeEventListener('keydown', this._bindCloseOnEsc);
|
|
154
|
-
|
|
169
|
+
if (!this.isSearchFocusTrapFixEnabled)
|
|
170
|
+
document.removeEventListener('keyup', this._keepFocusWithinSheet);
|
|
155
171
|
}
|
|
156
172
|
firstUpdated(props) {
|
|
157
173
|
super.firstUpdated(props);
|
|
158
|
-
this.
|
|
159
|
-
|
|
174
|
+
if (!this.isSearchFocusTrapFixEnabled) {
|
|
175
|
+
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
176
|
+
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
177
|
+
}
|
|
160
178
|
}
|
|
161
179
|
updated(changedProps) {
|
|
162
180
|
if (changedProps.has(SHEET_OPENED_PROP)) {
|
|
@@ -188,7 +206,8 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
|
|
|
188
206
|
setTimeout(() => {
|
|
189
207
|
var _a;
|
|
190
208
|
(_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
|
|
191
|
-
this.
|
|
209
|
+
if (!this.isSearchFocusTrapFixEnabled)
|
|
210
|
+
this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
|
|
192
211
|
resolve();
|
|
193
212
|
}, transitionDuration);
|
|
194
213
|
});
|
|
@@ -241,6 +260,10 @@ __decorate([
|
|
|
241
260
|
property({ type: String, attribute: 'sheet-label' }),
|
|
242
261
|
__metadata("design:type", Object)
|
|
243
262
|
], HSheet.prototype, "sheetLabel", void 0);
|
|
263
|
+
__decorate([
|
|
264
|
+
property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
|
|
265
|
+
__metadata("design:type", Boolean)
|
|
266
|
+
], HSheet.prototype, "isSearchFocusTrapFixEnabled", void 0);
|
|
244
267
|
__decorate([
|
|
245
268
|
state(),
|
|
246
269
|
__metadata("design:type", Object)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
import type { TFocusTrapProps } from './focus_trap_controller_types';
|
|
3
|
+
import { IBaseFocusTrapStrategy } from './strategies/base_focus_trap_strategy_types';
|
|
4
|
+
export declare class FocusTrapController implements ReactiveController {
|
|
5
|
+
#private;
|
|
6
|
+
constructor(host: ReactiveControllerHost, props: TFocusTrapProps);
|
|
7
|
+
get strategy(): IBaseFocusTrapStrategy;
|
|
8
|
+
hostConnected(): void;
|
|
9
|
+
hostDisconnected(): void;
|
|
10
|
+
activate(): void;
|
|
11
|
+
deactivate(): void;
|
|
12
|
+
getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
13
|
+
}
|
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
+
import 'lit';
|
|
3
|
+
import { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js';
|
|
4
|
+
import { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js';
|
|
5
|
+
import { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js';
|
|
6
|
+
import { FOCUS_TRAP_STRATEGY_TYPES } from './strategies/focus_trap_strategy_constants.js';
|
|
7
|
+
|
|
8
|
+
var _a, _FocusTrapController_strategy, _FocusTrapController_createStrategy;
|
|
9
|
+
class FocusTrapController {
|
|
10
|
+
constructor(host, props) {
|
|
11
|
+
_FocusTrapController_strategy.set(this, void 0);
|
|
12
|
+
__classPrivateFieldSet(this, _FocusTrapController_strategy, __classPrivateFieldGet(FocusTrapController, _a, "m", _FocusTrapController_createStrategy).call(FocusTrapController, props), "f");
|
|
13
|
+
host.addController(this);
|
|
14
|
+
}
|
|
15
|
+
get strategy() {
|
|
16
|
+
return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
|
|
17
|
+
}
|
|
18
|
+
hostConnected() {
|
|
19
|
+
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
|
|
20
|
+
}
|
|
21
|
+
hostDisconnected() {
|
|
22
|
+
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
|
|
23
|
+
}
|
|
24
|
+
activate() {
|
|
25
|
+
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
|
|
26
|
+
}
|
|
27
|
+
deactivate() {
|
|
28
|
+
__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
|
|
29
|
+
}
|
|
30
|
+
getFocusableElements(container) {
|
|
31
|
+
return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
_a = FocusTrapController, _FocusTrapController_strategy = new WeakMap(), _FocusTrapController_createStrategy = function _FocusTrapController_createStrategy(props) {
|
|
35
|
+
switch (props.mode) {
|
|
36
|
+
case FOCUS_TRAP_STRATEGY_TYPES.sentinel: return new SentinelFocusTrapStrategy(props);
|
|
37
|
+
case FOCUS_TRAP_STRATEGY_TYPES.cyclic: return new CyclicFocusTrapStrategy(props);
|
|
38
|
+
case FOCUS_TRAP_STRATEGY_TYPES.toggler: return new TogglerFocusTrapStrategy(props);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export { FocusTrapController };
|
|
43
|
+
//# sourceMappingURL=focus_trap_controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { TCyclicFocusTrapStrategyProps } from "./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types";
|
|
2
|
+
import { FOCUS_TRAP_STRATEGY_TYPES } from "./strategies/focus_trap_strategy_constants";
|
|
3
|
+
import { TSentinelFocusTrapStrategyProps } from "./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types";
|
|
4
|
+
import { TTogglerFocusTrapStrategyProps } from "./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types";
|
|
5
|
+
export declare type TSentinelFocusTrapProps = TSentinelFocusTrapStrategyProps & {
|
|
6
|
+
mode: typeof FOCUS_TRAP_STRATEGY_TYPES.sentinel;
|
|
7
|
+
};
|
|
8
|
+
export declare type TCyclicFocusTrapProps = TCyclicFocusTrapStrategyProps & {
|
|
9
|
+
mode: typeof FOCUS_TRAP_STRATEGY_TYPES.cyclic;
|
|
10
|
+
};
|
|
11
|
+
export declare type TTogglerFocusTrapProps = TTogglerFocusTrapStrategyProps & {
|
|
12
|
+
mode: typeof FOCUS_TRAP_STRATEGY_TYPES.toggler;
|
|
13
|
+
};
|
|
14
|
+
export declare type TFocusTrapProps = TSentinelFocusTrapProps | TCyclicFocusTrapProps | TTogglerFocusTrapProps;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import "./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types";
|
|
2
|
+
import "./strategies/focus_trap_strategy_constants";
|
|
3
|
+
import "./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types";
|
|
4
|
+
import "./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types";
|
|
5
|
+
//# sourceMappingURL=focus_trap_controller_types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus_trap_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/focus_trap_controller/focus_trap_controller_types.ts"],"names":[],"mappings":"AAAA,OAA8C,0EAA0E,CAAC;AACzH,OAA0C,4CAA4C,CAAC;AACvF,OAAgD,8EAA8E,CAAC;AAC/H,OAA+C,4EAA4E,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IBaseFocusTrapStrategy } from './base_focus_trap_strategy_types';
|
|
2
|
+
export declare abstract class BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
|
|
3
|
+
protected readonly getContainer: () => HTMLElement | undefined;
|
|
4
|
+
protected active: boolean;
|
|
5
|
+
noAutofocus: boolean;
|
|
6
|
+
constructor(getContainer: () => HTMLElement | undefined);
|
|
7
|
+
attach(): void;
|
|
8
|
+
detach(): void;
|
|
9
|
+
activate(): void;
|
|
10
|
+
deactivate(): void;
|
|
11
|
+
getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
12
|
+
protected _handleKeyDown: (ev: KeyboardEvent) => void;
|
|
13
|
+
private _isElementTrulyFocusable;
|
|
14
|
+
}
|