@internetarchive/modal-manager 2.0.2 → 2.0.4-alpha-webdev7960.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.
Files changed (103) hide show
  1. package/.editorconfig +29 -29
  2. package/.eslintrc.js +14 -14
  3. package/.github/workflows/ci.yml +30 -30
  4. package/.github/workflows/gh-pages-main.yml +42 -42
  5. package/.github/workflows/pr-preview.yml +40 -40
  6. package/LICENSE +661 -661
  7. package/README.md +139 -139
  8. package/custom-elements.json +170 -170
  9. package/dist/index.d.ts +7 -7
  10. package/dist/index.js +5 -5
  11. package/dist/index.js.map +1 -1
  12. package/dist/src/assets/arrow-left-icon.d.ts +2 -0
  13. package/dist/src/assets/arrow-left-icon.js +15 -0
  14. package/dist/src/assets/arrow-left-icon.js.map +1 -0
  15. package/dist/src/assets/ia-logo-icon.d.ts +2 -2
  16. package/dist/src/assets/ia-logo-icon.js +29 -29
  17. package/dist/src/assets/ia-logo-icon.js.map +1 -1
  18. package/dist/src/modal-config.d.ts +104 -92
  19. package/dist/src/modal-config.js +24 -22
  20. package/dist/src/modal-config.js.map +1 -1
  21. package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
  22. package/dist/src/modal-manager-host-bridge-interface.js +1 -1
  23. package/dist/src/modal-manager-host-bridge-interface.js.map +1 -1
  24. package/dist/src/modal-manager-host-bridge.d.ts +34 -34
  25. package/dist/src/modal-manager-host-bridge.js +62 -62
  26. package/dist/src/modal-manager-host-bridge.js.map +1 -1
  27. package/dist/src/modal-manager-interface.d.ts +27 -25
  28. package/dist/src/modal-manager-interface.js +1 -1
  29. package/dist/src/modal-manager-interface.js.map +1 -1
  30. package/dist/src/modal-manager-mode.d.ts +10 -10
  31. package/dist/src/modal-manager-mode.js +11 -11
  32. package/dist/src/modal-manager-mode.js.map +1 -1
  33. package/dist/src/modal-manager.d.ts +137 -112
  34. package/dist/src/modal-manager.js +247 -218
  35. package/dist/src/modal-manager.js.map +1 -1
  36. package/dist/src/modal-template.d.ts +41 -33
  37. package/dist/src/modal-template.js +335 -282
  38. package/dist/src/modal-template.js.map +1 -1
  39. package/dist/src/shoelace/active-elements.d.ts +15 -15
  40. package/dist/src/shoelace/active-elements.js +27 -27
  41. package/dist/src/shoelace/active-elements.js.map +1 -1
  42. package/dist/src/shoelace/modal.d.ts +24 -24
  43. package/dist/src/shoelace/modal.js +131 -131
  44. package/dist/src/shoelace/modal.js.map +1 -1
  45. package/dist/src/shoelace/tabbable.d.ts +9 -9
  46. package/dist/src/shoelace/tabbable.js +169 -169
  47. package/dist/src/shoelace/tabbable.js.map +1 -1
  48. package/dist/test/modal-config.test.d.ts +1 -1
  49. package/dist/test/modal-config.test.js +69 -61
  50. package/dist/test/modal-config.test.js.map +1 -1
  51. package/dist/test/modal-manager.test.d.ts +1 -1
  52. package/dist/test/modal-manager.test.js +274 -252
  53. package/dist/test/modal-manager.test.js.map +1 -1
  54. package/dist/test/modal-template.test.d.ts +1 -1
  55. package/dist/test/modal-template.test.js +178 -106
  56. package/dist/test/modal-template.test.js.map +1 -1
  57. package/dist/vite.config.d.ts +2 -2
  58. package/dist/vite.config.js +22 -22
  59. package/dist/vite.config.js.map +1 -1
  60. package/docs/assets/css/main.css +2678 -2678
  61. package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
  62. package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
  63. package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
  64. package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
  65. package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
  66. package/docs/globals.html +150 -150
  67. package/docs/index.html +252 -252
  68. package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
  69. package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
  70. package/docs/modules/_index_.html +208 -208
  71. package/docs/modules/_src_modal_config_.html +146 -146
  72. package/docs/modules/_src_modal_manager_.html +146 -146
  73. package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
  74. package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
  75. package/docs/modules/_src_modal_manager_interface_.html +146 -146
  76. package/docs/modules/_src_modal_manager_mode_.html +146 -146
  77. package/docs/modules/_src_modal_template_.html +146 -146
  78. package/docs/modules/_test_modal_config_test_.html +106 -106
  79. package/docs/modules/_test_modal_manager_test_.html +106 -106
  80. package/docs/modules/_test_modal_template_test_.html +106 -106
  81. package/index.html +300 -282
  82. package/index.ts +7 -7
  83. package/karma.conf.js +24 -24
  84. package/package.json +85 -85
  85. package/renovate.json +7 -7
  86. package/src/assets/arrow-left-icon.ts +15 -0
  87. package/src/assets/ia-logo-icon.ts +30 -30
  88. package/src/modal-config.ts +133 -117
  89. package/src/modal-manager-host-bridge-interface.ts +13 -13
  90. package/src/modal-manager-host-bridge.ts +82 -82
  91. package/src/modal-manager-interface.ts +30 -28
  92. package/src/modal-manager-mode.ts +10 -10
  93. package/src/modal-manager.ts +303 -258
  94. package/src/modal-template.ts +343 -287
  95. package/src/shoelace/LICENSE.md +6 -6
  96. package/src/shoelace/active-elements.ts +33 -33
  97. package/src/shoelace/modal.ts +166 -166
  98. package/src/shoelace/tabbable.ts +223 -223
  99. package/test/modal-config.test.ts +77 -69
  100. package/test/modal-manager.test.ts +347 -319
  101. package/test/modal-template.test.ts +206 -124
  102. package/tsconfig.json +21 -21
  103. package/vite.config.ts +23 -23
@@ -1,253 +1,275 @@
1
- import { __awaiter } from "tslib";
2
- import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';
3
- import { html } from 'lit';
4
- import '../src/modal-manager';
5
- import { ModalConfig } from '../src/modal-config';
6
- import { ModalManagerMode } from '../src/modal-manager-mode';
7
- import { getTabbableElements } from '../src/shoelace/tabbable';
8
- describe('Modal Manager', () => {
9
- it('defaults to closed', () => __awaiter(void 0, void 0, void 0, function* () {
10
- const el = (yield fixture(html `
11
- <modal-manager></modal-manager>
12
- `));
13
- expect(el.mode).to.equal('closed');
14
- }));
15
- it('can be closed by calling closeModal', () => __awaiter(void 0, void 0, void 0, function* () {
16
- const el = (yield fixture(html `
17
- <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
18
- `));
19
- el.customModalContent = 'foo';
20
- yield elementUpdated(el);
21
- expect(el.customModalContent).to.equal('foo');
22
- el.closeModal();
23
- yield elementUpdated(el);
24
- expect(el.mode).to.equal('closed');
25
- expect(el.customModalContent).to.equal(undefined);
26
- }));
27
- it('can be closed by clicking on the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
28
- var _a;
29
- const el = (yield fixture(html `
30
- <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
31
- `));
32
- const backdrop = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.backdrop');
33
- const clickEvent = new MouseEvent('click');
34
- backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
35
- yield elementUpdated(el);
36
- expect(el.mode).to.equal('closed');
37
- }));
38
- it('emits a modeChanged event when opening', () => __awaiter(void 0, void 0, void 0, function* () {
39
- const el = (yield fixture(html `
40
- <modal-manager></modal-manager>
41
- `));
42
- const config = new ModalConfig();
43
- setTimeout(() => {
44
- el.showModal({ config });
45
- });
46
- const response = yield oneEvent(el, 'modeChanged', false);
47
- expect(response.detail.mode).to.equal(ModalManagerMode.Open);
48
- }));
49
- it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
50
- const el = (yield fixture(html `
51
- <modal-manager></modal-manager>
52
- `));
53
- const config = new ModalConfig();
54
- el.showModal({ config });
55
- yield elementUpdated(el);
56
- setTimeout(() => {
57
- el.closeModal();
58
- });
59
- const response = yield oneEvent(el, 'modeChanged', false);
60
- expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
61
- }));
62
- it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {
63
- const el = (yield fixture(html `
64
- <modal-manager></modal-manager>
65
- `));
66
- const config = new ModalConfig();
67
- el.showModal({ config });
68
- yield elementUpdated(el);
69
- expect(el.mode).to.equal(ModalManagerMode.Open);
70
- }));
71
- it('sets the --containerHeight CSS property when the window resizes', () => __awaiter(void 0, void 0, void 0, function* () {
72
- const el = (yield fixture(html `
73
- <modal-manager></modal-manager>
74
- `));
75
- const config = new ModalConfig();
76
- el.showModal({ config });
77
- yield elementUpdated(el);
78
- const event = new Event('resize');
79
- const propBefore = el.style.getPropertyValue('--containerHeight');
80
- expect(propBefore).to.equal('');
81
- window.dispatchEvent(event);
82
- yield elementUpdated(el);
83
- const propAfter = el.style.getPropertyValue('--containerHeight');
84
- expect(propAfter).to.not.equal('');
85
- }));
86
- it('calls the userClosedModalCallback when the user taps the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
87
- var _b;
88
- const el = (yield fixture(html `
89
- <modal-manager></modal-manager>
90
- `));
91
- const config = new ModalConfig();
92
- let callbackCalled = false;
93
- const callback = () => {
94
- callbackCalled = true;
95
- };
96
- el.showModal({
97
- config,
98
- userClosedModalCallback: callback,
99
- });
100
- yield elementUpdated(el);
101
- const backdrop = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.backdrop');
102
- const clickEvent = new MouseEvent('click');
103
- backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
104
- yield elementUpdated(el);
105
- expect(callbackCalled).to.equal(true);
106
- }));
107
- it('does not call the userClosedModalCallback when the modal just closes', () => __awaiter(void 0, void 0, void 0, function* () {
108
- const el = (yield fixture(html `
109
- <modal-manager></modal-manager>
110
- `));
111
- const config = new ModalConfig();
112
- let callbackCalled = false;
113
- const callback = () => {
114
- callbackCalled = true;
115
- };
116
- el.showModal({
117
- config,
118
- userClosedModalCallback: callback,
119
- });
120
- yield elementUpdated(el);
121
- el.closeModal();
122
- yield elementUpdated(el);
123
- expect(callbackCalled).to.equal(false);
124
- }));
125
- it('mode is set to closed when close button is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
126
- var _c, _d;
127
- const el = (yield fixture(html `
128
- <modal-manager></modal-manager>
129
- `));
130
- const config = new ModalConfig();
131
- el.showModal({ config });
132
- yield elementUpdated(el);
133
- expect(el.mode).to.equal('open');
134
- const modal = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('modal-template');
135
- const closeButton = (_d = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.close-button');
136
- const clickEvent = new MouseEvent('click');
137
- closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(clickEvent);
138
- yield elementUpdated(el);
139
- expect(el.mode).to.equal('closed');
140
- }));
141
- it('mode is set to closed when close button gets spacebar pressed', () => __awaiter(void 0, void 0, void 0, function* () {
142
- var _e, _f;
143
- const el = (yield fixture(html `
144
- <modal-manager></modal-manager>
145
- `));
146
- const config = new ModalConfig();
147
- el.showModal({ config });
148
- yield elementUpdated(el);
149
- expect(el.mode).to.equal('open');
150
- const modal = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('modal-template');
151
- const closeButton = (_f = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('.close-button');
152
- // Close with keyboard
153
- const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });
154
- closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(spacebarEvent);
155
- yield elementUpdated(el);
156
- expect(el.mode).to.equal('closed');
157
- }));
158
- it('mode remains open when close button gets non-button keypress', () => __awaiter(void 0, void 0, void 0, function* () {
159
- var _g, _h;
160
- const el = (yield fixture(html `
161
- <modal-manager></modal-manager>
162
- `));
163
- const config = new ModalConfig();
164
- el.showModal({ config });
165
- yield elementUpdated(el);
166
- expect(el.mode).to.equal('open');
167
- const modal = (_g = el.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('modal-template');
168
- const closeButton = (_h = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('.close-button');
169
- // Close with keyboard
170
- const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });
171
- closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(keyboardEvent);
172
- yield elementUpdated(el);
173
- expect(el.mode).to.equal('open');
174
- }));
175
- it('allows the user to close by clicking on the backdrop if configured to', () => __awaiter(void 0, void 0, void 0, function* () {
176
- var _j;
177
- const el = (yield fixture(html `
178
- <modal-manager></modal-manager>
179
- `));
180
- const config = new ModalConfig();
181
- config.closeOnBackdropClick = true;
182
- el.showModal({ config });
183
- yield elementUpdated(el);
184
- const backdrop = (_j = el.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.backdrop');
185
- const clickEvent = new MouseEvent('click');
186
- backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
187
- yield elementUpdated(el);
188
- expect(el.mode).to.equal('closed');
189
- }));
190
- it("doesn't allow the user to close by clicking on the backdrop if configured to", () => __awaiter(void 0, void 0, void 0, function* () {
191
- var _k;
192
- const el = (yield fixture(html `
193
- <modal-manager></modal-manager>
194
- `));
195
- const config = new ModalConfig();
196
- config.closeOnBackdropClick = false;
197
- el.showModal({ config });
198
- yield elementUpdated(el);
199
- const backdrop = (_k = el.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('.backdrop');
200
- const clickEvent = new MouseEvent('click');
201
- backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
202
- yield elementUpdated(el);
203
- expect(el.getMode()).to.equal('open');
204
- }));
205
- it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
206
- var _l;
207
- const el = (yield fixture(html `
208
- <modal-manager></modal-manager>
209
- `));
210
- const config = new ModalConfig();
211
- config.showHeaderLogo = false;
212
- el.showModal({ config });
213
- yield elementUpdated(el);
214
- const logoIcon = (_l = el.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('.logo-icon');
215
- expect(logoIcon).to.not.exist;
216
- }));
217
- it('should trap Tab key', () => __awaiter(void 0, void 0, void 0, function* () {
218
- var _m, _o, _p;
219
- const el = (yield fixture(html `
220
- <modal-manager></modal-manager>
221
- `));
222
- const config = new ModalConfig();
223
- el.showModal({ config });
224
- yield elementUpdated(el);
225
- expect(el.mode).to.equal('open');
226
- // Tab once to focus
227
- const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
228
- document.dispatchEvent(tabEvent);
229
- yield elementUpdated(el);
230
- // Should be only one tabbable element
231
- const modal = (_m = el.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector('modal-template');
232
- const tabbableElements = getTabbableElements(modal);
233
- expect(tabbableElements === null || tabbableElements === void 0 ? void 0 : tabbableElements.length).to.equal(1);
234
- const closeButton = (_o = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _o === void 0 ? void 0 : _o.querySelector('.close-button');
235
- const activeElement = (_p = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _p === void 0 ? void 0 : _p.activeElement;
236
- expect(activeElement).to.equal(closeButton);
237
- // Tab again
238
- el.dispatchEvent(tabEvent);
239
- yield elementUpdated(el);
240
- // Should be only one tabbable element
241
- expect(activeElement).to.equal(closeButton);
242
- // Shift + Tab
243
- const shiftTabEvent = new KeyboardEvent('keydown', {
244
- key: 'Tab',
245
- shiftKey: true,
246
- });
247
- document.dispatchEvent(shiftTabEvent);
248
- yield elementUpdated(el);
249
- // Should be only one tabbable element
250
- expect(activeElement).to.equal(closeButton);
251
- }));
252
- });
1
+ import { __awaiter } from "tslib";
2
+ import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';
3
+ import { html } from 'lit';
4
+ import '../src/modal-manager';
5
+ import { ModalConfig } from '../src/modal-config';
6
+ import { ModalManagerMode } from '../src/modal-manager-mode';
7
+ import { getTabbableElements } from '../src/shoelace/tabbable';
8
+ describe('Modal Manager', () => {
9
+ it('defaults to closed', () => __awaiter(void 0, void 0, void 0, function* () {
10
+ const el = (yield fixture(html `
11
+ <modal-manager></modal-manager>
12
+ `));
13
+ expect(el.mode).to.equal('closed');
14
+ }));
15
+ it('can be closed by calling closeModal', () => __awaiter(void 0, void 0, void 0, function* () {
16
+ const el = (yield fixture(html `
17
+ <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
18
+ `));
19
+ el.customModalContent = 'foo';
20
+ yield elementUpdated(el);
21
+ expect(el.customModalContent).to.equal('foo');
22
+ el.closeModal();
23
+ yield elementUpdated(el);
24
+ expect(el.mode).to.equal('closed');
25
+ expect(el.customModalContent).to.equal(undefined);
26
+ }));
27
+ it('can be closed by clicking on the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
28
+ var _a;
29
+ const el = (yield fixture(html `
30
+ <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
31
+ `));
32
+ const backdrop = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.backdrop');
33
+ const clickEvent = new MouseEvent('click');
34
+ backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
35
+ yield elementUpdated(el);
36
+ expect(el.mode).to.equal('closed');
37
+ }));
38
+ it('emits a modeChanged event when opening', () => __awaiter(void 0, void 0, void 0, function* () {
39
+ const el = (yield fixture(html `
40
+ <modal-manager></modal-manager>
41
+ `));
42
+ const config = new ModalConfig();
43
+ setTimeout(() => {
44
+ el.showModal({ config });
45
+ });
46
+ const response = yield oneEvent(el, 'modeChanged', false);
47
+ expect(response.detail.mode).to.equal(ModalManagerMode.Open);
48
+ }));
49
+ it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
50
+ const el = (yield fixture(html `
51
+ <modal-manager></modal-manager>
52
+ `));
53
+ const config = new ModalConfig();
54
+ el.showModal({ config });
55
+ yield elementUpdated(el);
56
+ setTimeout(() => {
57
+ el.closeModal();
58
+ });
59
+ const response = yield oneEvent(el, 'modeChanged', false);
60
+ expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
61
+ }));
62
+ it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {
63
+ const el = (yield fixture(html `
64
+ <modal-manager></modal-manager>
65
+ `));
66
+ const config = new ModalConfig();
67
+ el.showModal({ config });
68
+ yield elementUpdated(el);
69
+ expect(el.mode).to.equal(ModalManagerMode.Open);
70
+ }));
71
+ it('sets the --containerHeight CSS property when the window resizes', () => __awaiter(void 0, void 0, void 0, function* () {
72
+ const el = (yield fixture(html `
73
+ <modal-manager></modal-manager>
74
+ `));
75
+ const config = new ModalConfig();
76
+ el.showModal({ config });
77
+ yield elementUpdated(el);
78
+ const event = new Event('resize');
79
+ const propBefore = el.style.getPropertyValue('--containerHeight');
80
+ expect(propBefore).to.equal('');
81
+ window.dispatchEvent(event);
82
+ yield elementUpdated(el);
83
+ const propAfter = el.style.getPropertyValue('--containerHeight');
84
+ expect(propAfter).to.not.equal('');
85
+ }));
86
+ it('calls the userClosedModalCallback when the user taps the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
87
+ var _b;
88
+ const el = (yield fixture(html `
89
+ <modal-manager></modal-manager>
90
+ `));
91
+ const config = new ModalConfig();
92
+ let callbackCalled = false;
93
+ const callback = () => {
94
+ callbackCalled = true;
95
+ };
96
+ el.showModal({
97
+ config,
98
+ userClosedModalCallback: callback,
99
+ });
100
+ yield elementUpdated(el);
101
+ const backdrop = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.backdrop');
102
+ const clickEvent = new MouseEvent('click');
103
+ backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
104
+ yield elementUpdated(el);
105
+ expect(callbackCalled).to.equal(true);
106
+ }));
107
+ it('does not call the userClosedModalCallback when the modal just closes', () => __awaiter(void 0, void 0, void 0, function* () {
108
+ const el = (yield fixture(html `
109
+ <modal-manager></modal-manager>
110
+ `));
111
+ const config = new ModalConfig();
112
+ let callbackCalled = false;
113
+ const callback = () => {
114
+ callbackCalled = true;
115
+ };
116
+ el.showModal({
117
+ config,
118
+ userClosedModalCallback: callback,
119
+ });
120
+ yield elementUpdated(el);
121
+ el.closeModal();
122
+ yield elementUpdated(el);
123
+ expect(callbackCalled).to.equal(false);
124
+ }));
125
+ it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', () => __awaiter(void 0, void 0, void 0, function* () {
126
+ var _c;
127
+ const el = (yield fixture(html `
128
+ <modal-manager></modal-manager>
129
+ `));
130
+ const config = new ModalConfig();
131
+ config.showLeftNavButton = true;
132
+ let callbackCalled = false;
133
+ const callback = () => {
134
+ callbackCalled = true;
135
+ };
136
+ el.showModal({
137
+ config,
138
+ userPressedLeftNavButtonCallback: callback,
139
+ });
140
+ yield elementUpdated(el);
141
+ const modalTemplate = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('modal-template');
142
+ expect(modalTemplate).to.exist;
143
+ modalTemplate === null || modalTemplate === void 0 ? void 0 : modalTemplate.dispatchEvent(new Event('leftNavButtonPressed'));
144
+ yield elementUpdated(el);
145
+ expect(callbackCalled).to.equal(true);
146
+ }));
147
+ it('mode is set to closed when close button is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
148
+ var _d, _e;
149
+ const el = (yield fixture(html `
150
+ <modal-manager></modal-manager>
151
+ `));
152
+ const config = new ModalConfig();
153
+ el.showModal({ config });
154
+ yield elementUpdated(el);
155
+ expect(el.mode).to.equal('open');
156
+ const modal = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('modal-template');
157
+ const closeButton = (_e = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.close-button');
158
+ const clickEvent = new MouseEvent('click');
159
+ closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(clickEvent);
160
+ yield elementUpdated(el);
161
+ expect(el.mode).to.equal('closed');
162
+ }));
163
+ it('mode is set to closed when close button gets spacebar pressed', () => __awaiter(void 0, void 0, void 0, function* () {
164
+ var _f, _g;
165
+ const el = (yield fixture(html `
166
+ <modal-manager></modal-manager>
167
+ `));
168
+ const config = new ModalConfig();
169
+ el.showModal({ config });
170
+ yield elementUpdated(el);
171
+ expect(el.mode).to.equal('open');
172
+ const modal = (_f = el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('modal-template');
173
+ const closeButton = (_g = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('.close-button');
174
+ // Close with keyboard
175
+ const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });
176
+ closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(spacebarEvent);
177
+ yield elementUpdated(el);
178
+ expect(el.mode).to.equal('closed');
179
+ }));
180
+ it('mode remains open when close button gets non-button keypress', () => __awaiter(void 0, void 0, void 0, function* () {
181
+ var _h, _j;
182
+ const el = (yield fixture(html `
183
+ <modal-manager></modal-manager>
184
+ `));
185
+ const config = new ModalConfig();
186
+ el.showModal({ config });
187
+ yield elementUpdated(el);
188
+ expect(el.mode).to.equal('open');
189
+ const modal = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('modal-template');
190
+ const closeButton = (_j = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.close-button');
191
+ // Close with keyboard
192
+ const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });
193
+ closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(keyboardEvent);
194
+ yield elementUpdated(el);
195
+ expect(el.mode).to.equal('open');
196
+ }));
197
+ it('allows the user to close by clicking on the backdrop if configured to', () => __awaiter(void 0, void 0, void 0, function* () {
198
+ var _k;
199
+ const el = (yield fixture(html `
200
+ <modal-manager></modal-manager>
201
+ `));
202
+ const config = new ModalConfig();
203
+ config.closeOnBackdropClick = true;
204
+ el.showModal({ config });
205
+ yield elementUpdated(el);
206
+ const backdrop = (_k = el.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('.backdrop');
207
+ const clickEvent = new MouseEvent('click');
208
+ backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
209
+ yield elementUpdated(el);
210
+ expect(el.mode).to.equal('closed');
211
+ }));
212
+ it("doesn't allow the user to close by clicking on the backdrop if configured to", () => __awaiter(void 0, void 0, void 0, function* () {
213
+ var _l;
214
+ const el = (yield fixture(html `
215
+ <modal-manager></modal-manager>
216
+ `));
217
+ const config = new ModalConfig();
218
+ config.closeOnBackdropClick = false;
219
+ el.showModal({ config });
220
+ yield elementUpdated(el);
221
+ const backdrop = (_l = el.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('.backdrop');
222
+ const clickEvent = new MouseEvent('click');
223
+ backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
224
+ yield elementUpdated(el);
225
+ expect(el.getMode()).to.equal('open');
226
+ }));
227
+ it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
228
+ var _m;
229
+ const el = (yield fixture(html `
230
+ <modal-manager></modal-manager>
231
+ `));
232
+ const config = new ModalConfig();
233
+ config.showHeaderLogo = false;
234
+ el.showModal({ config });
235
+ yield elementUpdated(el);
236
+ const logoIcon = (_m = el.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector('.logo-icon');
237
+ expect(logoIcon).to.not.exist;
238
+ }));
239
+ it('should trap Tab key', () => __awaiter(void 0, void 0, void 0, function* () {
240
+ var _o, _p, _q;
241
+ const el = (yield fixture(html `
242
+ <modal-manager></modal-manager>
243
+ `));
244
+ const config = new ModalConfig();
245
+ el.showModal({ config });
246
+ yield elementUpdated(el);
247
+ expect(el.mode).to.equal('open');
248
+ // Tab once to focus
249
+ const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
250
+ document.dispatchEvent(tabEvent);
251
+ yield elementUpdated(el);
252
+ // Should be only one tabbable element
253
+ const modal = (_o = el.shadowRoot) === null || _o === void 0 ? void 0 : _o.querySelector('modal-template');
254
+ const tabbableElements = getTabbableElements(modal);
255
+ expect(tabbableElements === null || tabbableElements === void 0 ? void 0 : tabbableElements.length).to.equal(1);
256
+ const closeButton = (_p = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _p === void 0 ? void 0 : _p.querySelector('.close-button');
257
+ const activeElement = (_q = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _q === void 0 ? void 0 : _q.activeElement;
258
+ expect(activeElement).to.equal(closeButton);
259
+ // Tab again
260
+ el.dispatchEvent(tabEvent);
261
+ yield elementUpdated(el);
262
+ // Should be only one tabbable element
263
+ expect(activeElement).to.equal(closeButton);
264
+ // Shift + Tab
265
+ const shiftTabEvent = new KeyboardEvent('keydown', {
266
+ key: 'Tab',
267
+ shiftKey: true,
268
+ });
269
+ document.dispatchEvent(shiftTabEvent);
270
+ yield elementUpdated(el);
271
+ // Should be only one tabbable element
272
+ expect(activeElement).to.equal(closeButton);
273
+ }));
274
+ });
253
275
  //# sourceMappingURL=modal-manager.test.js.map