@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.1

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 (73) 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/src/assets/arrow-left-icon.d.ts +2 -2
  12. package/dist/src/assets/arrow-left-icon.js +2 -2
  13. package/dist/src/assets/ia-logo-icon.d.ts +2 -2
  14. package/dist/src/assets/ia-logo-icon.js +2 -2
  15. package/dist/src/modal-config.d.ts +104 -104
  16. package/dist/src/modal-config.js +24 -24
  17. package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
  18. package/dist/src/modal-manager-host-bridge-interface.js +1 -1
  19. package/dist/src/modal-manager-host-bridge.d.ts +34 -34
  20. package/dist/src/modal-manager-host-bridge.js +62 -62
  21. package/dist/src/modal-manager-interface.d.ts +27 -27
  22. package/dist/src/modal-manager-interface.js +1 -1
  23. package/dist/src/modal-manager-mode.d.ts +10 -10
  24. package/dist/src/modal-manager-mode.js +11 -11
  25. package/dist/src/modal-manager.d.ts +137 -127
  26. package/dist/src/modal-manager.js +212 -197
  27. package/dist/src/modal-manager.js.map +1 -1
  28. package/dist/src/modal-template.d.ts +41 -41
  29. package/dist/src/modal-template.js +115 -115
  30. package/dist/src/shoelace/active-elements.d.ts +15 -15
  31. package/dist/src/shoelace/active-elements.js +27 -27
  32. package/dist/src/shoelace/modal.d.ts +24 -24
  33. package/dist/src/shoelace/modal.js +131 -131
  34. package/dist/src/shoelace/tabbable.d.ts +9 -9
  35. package/dist/src/shoelace/tabbable.js +169 -169
  36. package/dist/test/modal-config.test.d.ts +1 -1
  37. package/dist/test/modal-config.test.js +69 -69
  38. package/dist/test/modal-manager.test.d.ts +1 -1
  39. package/dist/test/modal-manager.test.js +275 -240
  40. package/dist/test/modal-manager.test.js.map +1 -1
  41. package/dist/test/modal-template.test.d.ts +1 -1
  42. package/dist/test/modal-template.test.js +156 -156
  43. package/dist/vite.config.d.ts +2 -2
  44. package/dist/vite.config.js +22 -22
  45. package/docs/assets/css/main.css +2678 -2678
  46. package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
  47. package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
  48. package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
  49. package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
  50. package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
  51. package/docs/globals.html +150 -150
  52. package/docs/index.html +252 -252
  53. package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
  54. package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
  55. package/docs/modules/_index_.html +208 -208
  56. package/docs/modules/_src_modal_config_.html +146 -146
  57. package/docs/modules/_src_modal_manager_.html +146 -146
  58. package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
  59. package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
  60. package/docs/modules/_src_modal_manager_interface_.html +146 -146
  61. package/docs/modules/_src_modal_manager_mode_.html +146 -146
  62. package/docs/modules/_src_modal_template_.html +146 -146
  63. package/docs/modules/_test_modal_config_test_.html +106 -106
  64. package/docs/modules/_test_modal_manager_test_.html +106 -106
  65. package/docs/modules/_test_modal_template_test_.html +106 -106
  66. package/index.html +300 -300
  67. package/karma.conf.js +24 -24
  68. package/package.json +85 -85
  69. package/renovate.json +7 -7
  70. package/src/modal-manager.ts +22 -0
  71. package/src/shoelace/LICENSE.md +6 -6
  72. package/test/modal-manager.test.ts +52 -6
  73. package/tsconfig.json +21 -21
@@ -1,64 +1,65 @@
1
- import { __awaiter, __decorate } from "tslib";
2
- import { LitElement, html, css, } from 'lit';
3
- import { property, customElement, query } from 'lit/decorators.js';
4
- import Modal from './shoelace/modal';
5
- import './modal-template';
6
- import { ModalConfig } from './modal-config';
7
- import { ModalManagerHostBridge } from './modal-manager-host-bridge';
8
- import { ModalManagerMode } from './modal-manager-mode';
9
- let ModalManager = class ModalManager extends LitElement {
10
- constructor() {
11
- super(...arguments);
12
- /**
13
- * The current mode of the ModalManager
14
- *
15
- * Current options are `modal` or `closed`
16
- *
17
- * @type {ModalManagerMode}
18
- * @memberof ModalManager
19
- */
20
- this.mode = ModalManagerMode.Closed;
21
- /**
22
- * This hostBridge handles environmental-specific interactions such as adding classes
23
- * to the body tag or event listeners needed to support the modal manager in the host environment.
24
- *
25
- * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
26
- * `ModalManagerHostBridgeInterface`
27
- *
28
- * @type {ModalManagerHostBridgeInterface}
29
- * @memberof ModalManager
30
- */
31
- this.hostBridge = new ModalManagerHostBridge(this);
32
- // Imported tab handling from shoelace
33
- this.modal = new Modal(this);
34
- /**
35
- * Whether the modal should close if the user taps on the backdrop
36
- *
37
- * @private
38
- * @memberof ModalManager
39
- */
40
- this.closeOnBackdropClick = true;
41
- }
42
- firstUpdated() {
43
- return __awaiter(this, void 0, void 0, function* () {
44
- // Give the browser a chance to paint
45
- // eslint-disable-next-line no-promise-executor-return
46
- yield new Promise(r => setTimeout(r, 0));
47
- if (this.closeOnBackdropClick) {
48
- this.addEventListener('keydown', (e) => {
49
- if (e.key === 'Escape') {
50
- this.backdropClicked();
51
- }
52
- });
53
- }
54
- });
55
- }
56
- disconnectedCallback() {
57
- super.disconnectedCallback();
58
- this.modal.deactivate();
59
- }
60
- /** @inheritdoc */
61
- render() {
1
+ import { __awaiter, __decorate } from "tslib";
2
+ import { LitElement, html, css, } from 'lit';
3
+ import { property, customElement, query } from 'lit/decorators.js';
4
+ import Modal from './shoelace/modal';
5
+ import { getDeepestActiveElement } from './shoelace/active-elements';
6
+ import './modal-template';
7
+ import { ModalConfig } from './modal-config';
8
+ import { ModalManagerHostBridge } from './modal-manager-host-bridge';
9
+ import { ModalManagerMode } from './modal-manager-mode';
10
+ let ModalManager = class ModalManager extends LitElement {
11
+ constructor() {
12
+ super(...arguments);
13
+ /**
14
+ * The current mode of the ModalManager
15
+ *
16
+ * Current options are `modal` or `closed`
17
+ *
18
+ * @type {ModalManagerMode}
19
+ * @memberof ModalManager
20
+ */
21
+ this.mode = ModalManagerMode.Closed;
22
+ /**
23
+ * This hostBridge handles environmental-specific interactions such as adding classes
24
+ * to the body tag or event listeners needed to support the modal manager in the host environment.
25
+ *
26
+ * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
27
+ * `ModalManagerHostBridgeInterface`
28
+ *
29
+ * @type {ModalManagerHostBridgeInterface}
30
+ * @memberof ModalManager
31
+ */
32
+ this.hostBridge = new ModalManagerHostBridge(this);
33
+ // Imported tab handling from shoelace
34
+ this.modal = new Modal(this);
35
+ /**
36
+ * Whether the modal should close if the user taps on the backdrop
37
+ *
38
+ * @private
39
+ * @memberof ModalManager
40
+ */
41
+ this.closeOnBackdropClick = true;
42
+ }
43
+ firstUpdated() {
44
+ return __awaiter(this, void 0, void 0, function* () {
45
+ // Give the browser a chance to paint
46
+ // eslint-disable-next-line no-promise-executor-return
47
+ yield new Promise(r => setTimeout(r, 0));
48
+ if (this.closeOnBackdropClick) {
49
+ this.addEventListener('keydown', (e) => {
50
+ if (e.key === 'Escape') {
51
+ this.backdropClicked();
52
+ }
53
+ });
54
+ }
55
+ });
56
+ }
57
+ disconnectedCallback() {
58
+ super.disconnectedCallback();
59
+ this.modal.deactivate();
60
+ }
61
+ /** @inheritdoc */
62
+ render() {
62
63
  return html `
63
64
  <div class="container">
64
65
  <div class="backdrop" @click=${this.backdropClicked}></div>
@@ -70,123 +71,137 @@ let ModalManager = class ModalManager extends LitElement {
70
71
  ${this.customModalContent}
71
72
  </modal-template>
72
73
  </div>
73
- `;
74
- }
75
- /** @inheritdoc */
76
- getMode() {
77
- return this.mode;
78
- }
79
- /** @inheritdoc */
80
- closeModal() {
81
- this.mode = ModalManagerMode.Closed;
82
- this.customModalContent = undefined;
83
- if (this.modalTemplate)
84
- this.modalTemplate.config = new ModalConfig();
85
- this.modal.deactivate();
86
- }
87
- /**
88
- * Call the userClosedModalCallback and reset it if it exists
89
- *
90
- * @private
91
- * @memberof ModalManager
92
- */
93
- callUserClosedModalCallback() {
94
- // we assign the callback to a temp var and undefine it before calling it
95
- // otherwise, we run into the potential for an infinite loop if the
96
- // callback triggers another `showModal()`, which would execute `userClosedModalCallback`
97
- const callback = this.userClosedModalCallback;
98
- this.userClosedModalCallback = undefined;
99
- if (callback)
100
- callback();
101
- }
102
- /**
103
- * Call the user pressed left nav button callback and reset it if it exists
104
- *
105
- * @private
106
- * @memberof ModalManager
107
- */
108
- callUserPressedLeftNavButtonCallback() {
109
- // avoids an infinite showModal() loop, as above
110
- const callback = this.userPressedLeftNavButtonCallback;
111
- this.userPressedLeftNavButtonCallback = undefined;
112
- if (callback)
113
- callback();
114
- }
115
- /** @inheritdoc */
116
- showModal(options) {
117
- return __awaiter(this, void 0, void 0, function* () {
118
- this.closeOnBackdropClick = options.config.closeOnBackdropClick;
119
- this.userClosedModalCallback = options.userClosedModalCallback;
120
- this.userPressedLeftNavButtonCallback =
121
- options.userPressedLeftNavButtonCallback;
122
- this.customModalContent = options.customModalContent;
123
- this.mode = ModalManagerMode.Open;
124
- if (this.modalTemplate) {
125
- this.modalTemplate.config = options.config;
126
- yield this.modalTemplate.updateComplete;
127
- this.modalTemplate.focus();
128
- }
129
- this.modal.activate();
130
- });
131
- }
132
- /** @inheritdoc */
133
- updated(changed) {
134
- /* istanbul ignore else */
135
- if (changed.has('mode')) {
136
- this.handleModeChange();
137
- }
138
- }
139
- /**
140
- * Called when the backdrop is clicked
141
- *
142
- * @private
143
- * @memberof ModalManager
144
- */
145
- backdropClicked() {
146
- if (this.closeOnBackdropClick) {
147
- this.closeModal();
148
- this.callUserClosedModalCallback();
149
- }
150
- }
151
- /**
152
- * Handle the mode change
153
- *
154
- * @private
155
- * @memberof ModalManager
156
- */
157
- handleModeChange() {
158
- this.hostBridge.handleModeChange(this.mode);
159
- this.emitModeChangeEvent();
160
- }
161
- /**
162
- * Emit a modeChange event
163
- *
164
- * @private
165
- * @memberof ModalManager
166
- */
167
- emitModeChangeEvent() {
168
- const event = new CustomEvent('modeChanged', {
169
- detail: { mode: this.mode },
170
- });
171
- this.dispatchEvent(event);
172
- }
173
- /**
174
- * Called when the modal close button is pressed. Closes the modal.
175
- *
176
- * @private
177
- * @memberof ModalManager
178
- */
179
- closeButtonPressed() {
180
- this.closeModal();
181
- this.callUserClosedModalCallback();
182
- }
183
- /** @inheritdoc */
184
- static get styles() {
185
- const modalBackdropColor = css `var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;
186
- const modalBackdropZindex = css `var(--modalBackdropZindex, 1000)`;
187
- const modalWidth = css `var(--modalWidth, 32rem)`;
188
- const modalMaxWidth = css `var(--modalMaxWidth, 95%)`;
189
- const modalZindex = css `var(--modalZindex, 2000)`;
74
+ `;
75
+ }
76
+ /** @inheritdoc */
77
+ getMode() {
78
+ return this.mode;
79
+ }
80
+ /** @inheritdoc */
81
+ closeModal() {
82
+ var _a, _b;
83
+ this.mode = ModalManagerMode.Closed;
84
+ this.customModalContent = undefined;
85
+ if (this.modalTemplate)
86
+ this.modalTemplate.config = new ModalConfig();
87
+ this.modal.deactivate();
88
+ // Return focus to the triggering element, if possible
89
+ (_b = (_a = this.triggeringElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
90
+ this.triggeringElement = undefined;
91
+ }
92
+ /**
93
+ * Call the userClosedModalCallback and reset it if it exists
94
+ *
95
+ * @private
96
+ * @memberof ModalManager
97
+ */
98
+ callUserClosedModalCallback() {
99
+ // we assign the callback to a temp var and undefine it before calling it
100
+ // otherwise, we run into the potential for an infinite loop if the
101
+ // callback triggers another `showModal()`, which would execute `userClosedModalCallback`
102
+ const callback = this.userClosedModalCallback;
103
+ this.userClosedModalCallback = undefined;
104
+ if (callback)
105
+ callback();
106
+ }
107
+ /**
108
+ * Call the user pressed left nav button callback and reset it if it exists
109
+ *
110
+ * @private
111
+ * @memberof ModalManager
112
+ */
113
+ callUserPressedLeftNavButtonCallback() {
114
+ // avoids an infinite showModal() loop, as above
115
+ const callback = this.userPressedLeftNavButtonCallback;
116
+ this.userPressedLeftNavButtonCallback = undefined;
117
+ if (callback)
118
+ callback();
119
+ }
120
+ /** @inheritdoc */
121
+ showModal(options) {
122
+ return __awaiter(this, void 0, void 0, function* () {
123
+ // If the dialog is being opened, make note of what element was focused beforehand
124
+ if (this.mode === ModalManagerMode.Closed)
125
+ this.captureFocusedElement();
126
+ this.closeOnBackdropClick = options.config.closeOnBackdropClick;
127
+ this.userClosedModalCallback = options.userClosedModalCallback;
128
+ this.userPressedLeftNavButtonCallback =
129
+ options.userPressedLeftNavButtonCallback;
130
+ this.customModalContent = options.customModalContent;
131
+ this.mode = ModalManagerMode.Open;
132
+ if (this.modalTemplate) {
133
+ this.modalTemplate.config = options.config;
134
+ yield this.modalTemplate.updateComplete;
135
+ this.modalTemplate.focus();
136
+ }
137
+ this.modal.activate();
138
+ });
139
+ }
140
+ /**
141
+ * Sets the triggering element to the one that is currently focused, as deep
142
+ * within Shadow DOM as possible.
143
+ */
144
+ captureFocusedElement() {
145
+ this.triggeringElement = getDeepestActiveElement();
146
+ }
147
+ /** @inheritdoc */
148
+ updated(changed) {
149
+ /* istanbul ignore else */
150
+ if (changed.has('mode')) {
151
+ this.handleModeChange();
152
+ }
153
+ }
154
+ /**
155
+ * Called when the backdrop is clicked
156
+ *
157
+ * @private
158
+ * @memberof ModalManager
159
+ */
160
+ backdropClicked() {
161
+ if (this.closeOnBackdropClick) {
162
+ this.closeModal();
163
+ this.callUserClosedModalCallback();
164
+ }
165
+ }
166
+ /**
167
+ * Handle the mode change
168
+ *
169
+ * @private
170
+ * @memberof ModalManager
171
+ */
172
+ handleModeChange() {
173
+ this.hostBridge.handleModeChange(this.mode);
174
+ this.emitModeChangeEvent();
175
+ }
176
+ /**
177
+ * Emit a modeChange event
178
+ *
179
+ * @private
180
+ * @memberof ModalManager
181
+ */
182
+ emitModeChangeEvent() {
183
+ const event = new CustomEvent('modeChanged', {
184
+ detail: { mode: this.mode },
185
+ });
186
+ this.dispatchEvent(event);
187
+ }
188
+ /**
189
+ * Called when the modal close button is pressed. Closes the modal.
190
+ *
191
+ * @private
192
+ * @memberof ModalManager
193
+ */
194
+ closeButtonPressed() {
195
+ this.closeModal();
196
+ this.callUserClosedModalCallback();
197
+ }
198
+ /** @inheritdoc */
199
+ static get styles() {
200
+ const modalBackdropColor = css `var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;
201
+ const modalBackdropZindex = css `var(--modalBackdropZindex, 1000)`;
202
+ const modalWidth = css `var(--modalWidth, 32rem)`;
203
+ const modalMaxWidth = css `var(--modalMaxWidth, 95%)`;
204
+ const modalZindex = css `var(--modalZindex, 2000)`;
190
205
  return css `
191
206
  .container {
192
207
  width: 100%;
@@ -213,23 +228,23 @@ let ModalManager = class ModalManager extends LitElement {
213
228
  width: ${modalWidth};
214
229
  max-width: ${modalMaxWidth};
215
230
  }
216
- `;
217
- }
218
- };
219
- __decorate([
220
- property({ type: String, reflect: true })
221
- ], ModalManager.prototype, "mode", void 0);
222
- __decorate([
223
- property({ type: Object })
224
- ], ModalManager.prototype, "customModalContent", void 0);
225
- __decorate([
226
- property({ type: Object })
227
- ], ModalManager.prototype, "hostBridge", void 0);
228
- __decorate([
229
- query('modal-template')
230
- ], ModalManager.prototype, "modalTemplate", void 0);
231
- ModalManager = __decorate([
232
- customElement('modal-manager')
233
- ], ModalManager);
234
- export { ModalManager };
231
+ `;
232
+ }
233
+ };
234
+ __decorate([
235
+ property({ type: String, reflect: true })
236
+ ], ModalManager.prototype, "mode", void 0);
237
+ __decorate([
238
+ property({ type: Object })
239
+ ], ModalManager.prototype, "customModalContent", void 0);
240
+ __decorate([
241
+ property({ type: Object })
242
+ ], ModalManager.prototype, "hostBridge", void 0);
243
+ __decorate([
244
+ query('modal-template')
245
+ ], ModalManager.prototype, "modalTemplate", void 0);
246
+ ModalManager = __decorate([
247
+ customElement('modal-manager')
248
+ ], ModalManager);
249
+ export { ModalManager };
235
250
  //# sourceMappingURL=modal-manager.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n /**\n * The current mode of the ModalManager\n *\n * Current options are `modal` or `closed`\n *\n * @type {ModalManagerMode}\n * @memberof ModalManager\n */\n @property({ type: String, reflect: true }) mode: ModalManagerMode =\n ModalManagerMode.Closed;\n\n /**\n * Custom content to display in the modal's content slot\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: TemplateResult;\n\n /**\n * This hostBridge handles environmental-specific interactions such as adding classes\n * to the body tag or event listeners needed to support the modal manager in the host environment.\n *\n * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n * `ModalManagerHostBridgeInterface`\n *\n * @type {ModalManagerHostBridgeInterface}\n * @memberof ModalManager\n */\n @property({ type: Object })\n hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n this\n );\n\n /**\n * Reference to the ModalTemplate DOM element\n *\n * @private\n * @type {ModalTemplate}\n * @memberof ModalManager\n */\n @query('modal-template') private modalTemplate?: ModalTemplate;\n\n // Imported tab handling from shoelace\n public modal = new Modal(this);\n\n async firstUpdated(): Promise<void> {\n // Give the browser a chance to paint\n // eslint-disable-next-line no-promise-executor-return\n await new Promise(r => setTimeout(r, 0));\n\n if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n <modal-template\n @closeButtonPressed=${this.closeButtonPressed}\n @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n tabindex=\"-1\"\n >\n ${this.customModalContent}\n </modal-template>\n </div>\n `;\n }\n\n /** @inheritdoc */\n getMode(): ModalManagerMode {\n return this.mode;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.mode = ModalManagerMode.Closed;\n this.customModalContent = undefined;\n if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n this.modal.deactivate();\n }\n\n /**\n * Whether the modal should close if the user taps on the backdrop\n *\n * @private\n * @memberof ModalManager\n */\n private closeOnBackdropClick = true;\n\n /**\n * A callback if the user closes the modal\n *\n * @private\n * @memberof ModalManager\n */\n private userClosedModalCallback?: () => void;\n\n /**\n * A callback if the user presses the left nav button\n *\n * @private\n * @memberof ModalManager\n */\n private userPressedLeftNavButtonCallback?: () => void;\n\n /**\n * Call the userClosedModalCallback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserClosedModalCallback(): void {\n // we assign the callback to a temp var and undefine it before calling it\n // otherwise, we run into the potential for an infinite loop if the\n // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n const callback = this.userClosedModalCallback;\n this.userClosedModalCallback = undefined;\n if (callback) callback();\n }\n\n /**\n * Call the user pressed left nav button callback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserPressedLeftNavButtonCallback(): void {\n // avoids an infinite showModal() loop, as above\n const callback = this.userPressedLeftNavButtonCallback;\n this.userPressedLeftNavButtonCallback = undefined;\n if (callback) callback();\n }\n\n /** @inheritdoc */\n async showModal(options: {\n config: ModalConfig;\n customModalContent?: TemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void> {\n this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n this.userClosedModalCallback = options.userClosedModalCallback;\n this.userPressedLeftNavButtonCallback =\n options.userPressedLeftNavButtonCallback;\n this.customModalContent = options.customModalContent;\n this.mode = ModalManagerMode.Open;\n if (this.modalTemplate) {\n this.modalTemplate.config = options.config;\n await this.modalTemplate.updateComplete;\n this.modalTemplate.focus();\n }\n this.modal.activate();\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n /* istanbul ignore else */\n if (changed.has('mode')) {\n this.handleModeChange();\n }\n }\n\n /**\n * Called when the backdrop is clicked\n *\n * @private\n * @memberof ModalManager\n */\n private backdropClicked(): void {\n if (this.closeOnBackdropClick) {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n private handleModeChange(): void {\n this.hostBridge.handleModeChange(this.mode);\n this.emitModeChangeEvent();\n }\n\n /**\n * Emit a modeChange event\n *\n * @private\n * @memberof ModalManager\n */\n private emitModeChangeEvent(): void {\n const event = new CustomEvent('modeChanged', {\n detail: { mode: this.mode },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Called when the modal close button is pressed. Closes the modal.\n *\n * @private\n * @memberof ModalManager\n */\n private closeButtonPressed(): void {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n const modalWidth = css`var(--modalWidth, 32rem)`;\n const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n const modalZindex = css`var(--modalZindex, 2000)`;\n\n return css`\n .container {\n width: 100%;\n height: 100%;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n background-color: ${modalBackdropColor};\n width: 100%;\n height: 100%;\n z-index: ${modalBackdropZindex};\n }\n\n modal-template {\n outline: 0;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: ${modalZindex};\n width: ${modalWidth};\n max-width: ${modalMaxWidth};\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\nimport { getDeepestActiveElement } from './shoelace/active-elements';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n /**\n * The current mode of the ModalManager\n *\n * Current options are `modal` or `closed`\n *\n * @type {ModalManagerMode}\n * @memberof ModalManager\n */\n @property({ type: String, reflect: true }) mode: ModalManagerMode =\n ModalManagerMode.Closed;\n\n /**\n * Custom content to display in the modal's content slot\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: TemplateResult;\n\n /**\n * This hostBridge handles environmental-specific interactions such as adding classes\n * to the body tag or event listeners needed to support the modal manager in the host environment.\n *\n * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n * `ModalManagerHostBridgeInterface`\n *\n * @type {ModalManagerHostBridgeInterface}\n * @memberof ModalManager\n */\n @property({ type: Object })\n hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n this\n );\n\n /**\n * Reference to the ModalTemplate DOM element\n *\n * @private\n * @type {ModalTemplate}\n * @memberof ModalManager\n */\n @query('modal-template') private modalTemplate?: ModalTemplate;\n\n // Imported tab handling from shoelace\n public modal = new Modal(this);\n\n async firstUpdated(): Promise<void> {\n // Give the browser a chance to paint\n // eslint-disable-next-line no-promise-executor-return\n await new Promise(r => setTimeout(r, 0));\n\n if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n <modal-template\n @closeButtonPressed=${this.closeButtonPressed}\n @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n tabindex=\"-1\"\n >\n ${this.customModalContent}\n </modal-template>\n </div>\n `;\n }\n\n /** @inheritdoc */\n getMode(): ModalManagerMode {\n return this.mode;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.mode = ModalManagerMode.Closed;\n this.customModalContent = undefined;\n if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n this.modal.deactivate();\n\n // Return focus to the triggering element, if possible\n (this.triggeringElement as HTMLElement)?.focus?.();\n this.triggeringElement = undefined;\n }\n\n /**\n * Whether the modal should close if the user taps on the backdrop\n *\n * @private\n * @memberof ModalManager\n */\n private closeOnBackdropClick = true;\n\n /**\n * The element that had focus when the modal was opened, so that we can return focus\n * to it after the modal closes.\n */\n private triggeringElement?: Element;\n\n /**\n * A callback if the user closes the modal\n *\n * @private\n * @memberof ModalManager\n */\n private userClosedModalCallback?: () => void;\n\n /**\n * A callback if the user presses the left nav button\n *\n * @private\n * @memberof ModalManager\n */\n private userPressedLeftNavButtonCallback?: () => void;\n\n /**\n * Call the userClosedModalCallback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserClosedModalCallback(): void {\n // we assign the callback to a temp var and undefine it before calling it\n // otherwise, we run into the potential for an infinite loop if the\n // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n const callback = this.userClosedModalCallback;\n this.userClosedModalCallback = undefined;\n if (callback) callback();\n }\n\n /**\n * Call the user pressed left nav button callback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserPressedLeftNavButtonCallback(): void {\n // avoids an infinite showModal() loop, as above\n const callback = this.userPressedLeftNavButtonCallback;\n this.userPressedLeftNavButtonCallback = undefined;\n if (callback) callback();\n }\n\n /** @inheritdoc */\n async showModal(options: {\n config: ModalConfig;\n customModalContent?: TemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void> {\n // If the dialog is being opened, make note of what element was focused beforehand\n if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();\n\n this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n this.userClosedModalCallback = options.userClosedModalCallback;\n this.userPressedLeftNavButtonCallback =\n options.userPressedLeftNavButtonCallback;\n this.customModalContent = options.customModalContent;\n this.mode = ModalManagerMode.Open;\n if (this.modalTemplate) {\n this.modalTemplate.config = options.config;\n await this.modalTemplate.updateComplete;\n this.modalTemplate.focus();\n }\n this.modal.activate();\n }\n\n /**\n * Sets the triggering element to the one that is currently focused, as deep\n * within Shadow DOM as possible.\n */\n private captureFocusedElement(): void {\n this.triggeringElement = getDeepestActiveElement();\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n /* istanbul ignore else */\n if (changed.has('mode')) {\n this.handleModeChange();\n }\n }\n\n /**\n * Called when the backdrop is clicked\n *\n * @private\n * @memberof ModalManager\n */\n private backdropClicked(): void {\n if (this.closeOnBackdropClick) {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n private handleModeChange(): void {\n this.hostBridge.handleModeChange(this.mode);\n this.emitModeChangeEvent();\n }\n\n /**\n * Emit a modeChange event\n *\n * @private\n * @memberof ModalManager\n */\n private emitModeChangeEvent(): void {\n const event = new CustomEvent('modeChanged', {\n detail: { mode: this.mode },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Called when the modal close button is pressed. Closes the modal.\n *\n * @private\n * @memberof ModalManager\n */\n private closeButtonPressed(): void {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n const modalWidth = css`var(--modalWidth, 32rem)`;\n const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n const modalZindex = css`var(--modalZindex, 2000)`;\n\n return css`\n .container {\n width: 100%;\n height: 100%;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n background-color: ${modalBackdropColor};\n width: 100%;\n height: 100%;\n z-index: ${modalBackdropZindex};\n }\n\n modal-template {\n outline: 0;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: ${modalZindex};\n width: ${modalWidth};\n max-width: ${modalMaxWidth};\n }\n `;\n }\n}\n"]}
@@ -1,41 +1,41 @@
1
- import { LitElement, CSSResult, TemplateResult } from 'lit';
2
- import '@internetarchive/ia-activity-indicator';
3
- import '@internetarchive/icon-close';
4
- import { ModalConfig } from './modal-config';
5
- export declare class ModalTemplate extends LitElement {
6
- /**
7
- * The ModalConfig that displayed the template
8
- *
9
- * @type {ModalConfig}
10
- * @memberof ModalTemplate
11
- */
12
- config: ModalConfig;
13
- /** @inheritdoc */
14
- render(): TemplateResult;
15
- /**
16
- * Dispatch the `closeButtonPressed` event to the consumer
17
- *
18
- * @private
19
- * @memberof ModalTemplate
20
- */
21
- private handleCloseButton;
22
- /**
23
- * Dispatch the `leftNavButtonPressed` event to the consumer
24
- *
25
- * @private
26
- * @memberof ModalTemplate
27
- */
28
- private handleLeftNavButtonPressed;
29
- /**
30
- * The close button template
31
- *
32
- * @readonly
33
- * @private
34
- * @type {TemplateResult}
35
- * @memberof ModalTemplate
36
- */
37
- private get closeButtonTemplate();
38
- private get leftNavButtonTemplate();
39
- /** @inheritdoc */
40
- static get styles(): CSSResult;
41
- }
1
+ import { LitElement, CSSResult, TemplateResult } from 'lit';
2
+ import '@internetarchive/ia-activity-indicator';
3
+ import '@internetarchive/icon-close';
4
+ import { ModalConfig } from './modal-config';
5
+ export declare class ModalTemplate extends LitElement {
6
+ /**
7
+ * The ModalConfig that displayed the template
8
+ *
9
+ * @type {ModalConfig}
10
+ * @memberof ModalTemplate
11
+ */
12
+ config: ModalConfig;
13
+ /** @inheritdoc */
14
+ render(): TemplateResult;
15
+ /**
16
+ * Dispatch the `closeButtonPressed` event to the consumer
17
+ *
18
+ * @private
19
+ * @memberof ModalTemplate
20
+ */
21
+ private handleCloseButton;
22
+ /**
23
+ * Dispatch the `leftNavButtonPressed` event to the consumer
24
+ *
25
+ * @private
26
+ * @memberof ModalTemplate
27
+ */
28
+ private handleLeftNavButtonPressed;
29
+ /**
30
+ * The close button template
31
+ *
32
+ * @readonly
33
+ * @private
34
+ * @type {TemplateResult}
35
+ * @memberof ModalTemplate
36
+ */
37
+ private get closeButtonTemplate();
38
+ private get leftNavButtonTemplate();
39
+ /** @inheritdoc */
40
+ static get styles(): CSSResult;
41
+ }