@internetarchive/modal-manager 2.0.5-webdev-8155.8 → 2.0.5-webdev-8155.9
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/.github/workflows/ci.yml +2 -2
- package/.vscode/extensions.json +2 -1
- package/demo/app-root.ts +15 -15
- package/dist/demo/app-root.d.ts +15 -15
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/modal-manager.js.map +1 -1
- package/dist/test/modal-config.test.js +4 -4
- package/dist/test/modal-config.test.js.map +1 -1
- package/dist/test/modal-manager.test.js +19 -19
- package/dist/test/modal-manager.test.js.map +1 -1
- package/dist/test/modal-template.test.js +15 -15
- package/dist/test/modal-template.test.js.map +1 -1
- package/dist/vitest.config.ci.js +1 -1
- package/dist/vitest.config.ci.js.map +1 -1
- package/eslint.config.mjs +7 -27
- package/package.json +9 -10
- package/src/modal-manager.ts +0 -1
- package/test/modal-config.test.ts +4 -4
- package/test/modal-manager.test.ts +19 -19
- package/test/modal-template.test.ts +15 -15
- package/tsconfig.json +1 -1
- package/vitest.config.ci.ts +2 -2
- package/.vscode/tasks.json +0 -12
package/.github/workflows/ci.yml
CHANGED
|
@@ -26,7 +26,7 @@ jobs:
|
|
|
26
26
|
run: npm run test
|
|
27
27
|
|
|
28
28
|
- name: Upload Codecov reports
|
|
29
|
-
uses: codecov/codecov-action@
|
|
29
|
+
uses: codecov/codecov-action@v5
|
|
30
30
|
with:
|
|
31
31
|
fail_ci_if_error: true
|
|
32
32
|
token: ${{ secrets.CODECOV_TOKEN }}
|
|
@@ -35,6 +35,6 @@ jobs:
|
|
|
35
35
|
- uses: actions/upload-artifact@v4
|
|
36
36
|
if: ${{ !cancelled() }}
|
|
37
37
|
with:
|
|
38
|
-
name:
|
|
38
|
+
name: coverage-report
|
|
39
39
|
path: coverage/
|
|
40
40
|
retention-days: 30
|
package/.vscode/extensions.json
CHANGED
package/demo/app-root.ts
CHANGED
|
@@ -111,7 +111,7 @@ export class AppRoot extends LitElement {
|
|
|
111
111
|
`;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
showModal() {
|
|
114
|
+
private showModal() {
|
|
115
115
|
const config = new ModalConfig();
|
|
116
116
|
config.headline = html`Success`;
|
|
117
117
|
config.message = html`Thank you for your support!`;
|
|
@@ -121,7 +121,7 @@ export class AppRoot extends LitElement {
|
|
|
121
121
|
});
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
showErrorModal() {
|
|
124
|
+
private showErrorModal() {
|
|
125
125
|
const config = new ModalConfig();
|
|
126
126
|
config.headline = html`Error`;
|
|
127
127
|
config.message = html`An error occurred while processing your donation.`;
|
|
@@ -133,15 +133,15 @@ export class AppRoot extends LitElement {
|
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
showBillAlert() {
|
|
136
|
+
private showBillAlert() {
|
|
137
137
|
alert('Bill <3 You');
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
buttonPress() {
|
|
140
|
+
private buttonPress() {
|
|
141
141
|
alert('You pressed a button.');
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
showAllFeaturesModal() {
|
|
144
|
+
private showAllFeaturesModal() {
|
|
145
145
|
const config = new ModalConfig();
|
|
146
146
|
config.title = html`Donation Received`;
|
|
147
147
|
config.subtitle = html`Thanks a bunch!`;
|
|
@@ -165,7 +165,7 @@ export class AppRoot extends LitElement {
|
|
|
165
165
|
});
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
showCustomContentModal() {
|
|
168
|
+
private showCustomContentModal() {
|
|
169
169
|
const config = new ModalConfig();
|
|
170
170
|
config.title = html`Custom Content`;
|
|
171
171
|
config.headline = html`<span class="sr-only"
|
|
@@ -195,7 +195,7 @@ export class AppRoot extends LitElement {
|
|
|
195
195
|
});
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
showSlottedContentModal() {
|
|
198
|
+
private showSlottedContentModal() {
|
|
199
199
|
const config = new ModalConfig();
|
|
200
200
|
config.title = html`Slotted Content`;
|
|
201
201
|
|
|
@@ -210,7 +210,7 @@ export class AppRoot extends LitElement {
|
|
|
210
210
|
});
|
|
211
211
|
}
|
|
212
212
|
|
|
213
|
-
showOverflowModal() {
|
|
213
|
+
private showOverflowModal() {
|
|
214
214
|
const config = new ModalConfig();
|
|
215
215
|
|
|
216
216
|
config.title = html`Lorem Ipsum`;
|
|
@@ -251,7 +251,7 @@ export class AppRoot extends LitElement {
|
|
|
251
251
|
});
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
showModalWithoutLogo() {
|
|
254
|
+
private showModalWithoutLogo() {
|
|
255
255
|
const config = new ModalConfig();
|
|
256
256
|
config.headline = html`Success`;
|
|
257
257
|
config.title = html`Donation Received`;
|
|
@@ -263,7 +263,7 @@ export class AppRoot extends LitElement {
|
|
|
263
263
|
});
|
|
264
264
|
}
|
|
265
265
|
|
|
266
|
-
showCompleteModal() {
|
|
266
|
+
private showCompleteModal() {
|
|
267
267
|
const config = new ModalConfig();
|
|
268
268
|
config.showProcessingIndicator = true;
|
|
269
269
|
config.processingImageMode = 'complete';
|
|
@@ -272,7 +272,7 @@ export class AppRoot extends LitElement {
|
|
|
272
272
|
});
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
-
showProcessingModal() {
|
|
275
|
+
private showProcessingModal() {
|
|
276
276
|
const config = new ModalConfig();
|
|
277
277
|
config.headerColor = '#497fbf';
|
|
278
278
|
config.showProcessingIndicator = true;
|
|
@@ -286,7 +286,7 @@ export class AppRoot extends LitElement {
|
|
|
286
286
|
setTimeout(this.showCompleteModal.bind(this), 1500);
|
|
287
287
|
}
|
|
288
288
|
|
|
289
|
-
showUserClosedModalCallbackModal() {
|
|
289
|
+
private showUserClosedModalCallbackModal() {
|
|
290
290
|
const config = new ModalConfig();
|
|
291
291
|
config.message = html`When you close this modal another will open.`;
|
|
292
292
|
|
|
@@ -301,7 +301,7 @@ export class AppRoot extends LitElement {
|
|
|
301
301
|
});
|
|
302
302
|
}
|
|
303
303
|
|
|
304
|
-
showModalUserCannotClose() {
|
|
304
|
+
private showModalUserCannotClose() {
|
|
305
305
|
const config = new ModalConfig();
|
|
306
306
|
config.message = html`User cannot close this. Will close automatically in 2
|
|
307
307
|
seconds.`;
|
|
@@ -314,7 +314,7 @@ export class AppRoot extends LitElement {
|
|
|
314
314
|
setTimeout(this.modalManager.closeModal.bind(this.modalManager), 2000);
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
showModalWithLeftNavButton() {
|
|
317
|
+
private showModalWithLeftNavButton() {
|
|
318
318
|
const config = new ModalConfig();
|
|
319
319
|
config.message = html`This modal has a left nav button.`;
|
|
320
320
|
config.showLeftNavButton = true;
|
|
@@ -332,7 +332,7 @@ export class AppRoot extends LitElement {
|
|
|
332
332
|
});
|
|
333
333
|
}
|
|
334
334
|
|
|
335
|
-
showModalUserCannotClickBackdrop() {
|
|
335
|
+
private showModalUserCannotClickBackdrop() {
|
|
336
336
|
const config = new ModalConfig();
|
|
337
337
|
config.message = html`Clicking on the backdrop will not close this.`;
|
|
338
338
|
config.showCloseButton = true;
|
package/dist/demo/app-root.d.ts
CHANGED
|
@@ -3,20 +3,20 @@ import '../src/modal-manager';
|
|
|
3
3
|
export declare class AppRoot extends LitElement {
|
|
4
4
|
private modalManager;
|
|
5
5
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
6
|
-
showModal
|
|
7
|
-
showErrorModal
|
|
8
|
-
showBillAlert
|
|
9
|
-
buttonPress
|
|
10
|
-
showAllFeaturesModal
|
|
11
|
-
showCustomContentModal
|
|
12
|
-
showSlottedContentModal
|
|
13
|
-
showOverflowModal
|
|
14
|
-
showModalWithoutLogo
|
|
15
|
-
showCompleteModal
|
|
16
|
-
showProcessingModal
|
|
17
|
-
showUserClosedModalCallbackModal
|
|
18
|
-
showModalUserCannotClose
|
|
19
|
-
showModalWithLeftNavButton
|
|
20
|
-
showModalUserCannotClickBackdrop
|
|
6
|
+
private showModal;
|
|
7
|
+
private showErrorModal;
|
|
8
|
+
private showBillAlert;
|
|
9
|
+
private buttonPress;
|
|
10
|
+
private showAllFeaturesModal;
|
|
11
|
+
private showCustomContentModal;
|
|
12
|
+
private showSlottedContentModal;
|
|
13
|
+
private showOverflowModal;
|
|
14
|
+
private showModalWithoutLogo;
|
|
15
|
+
private showCompleteModal;
|
|
16
|
+
private showProcessingModal;
|
|
17
|
+
private showUserClosedModalCallbackModal;
|
|
18
|
+
private showModalUserCannotClose;
|
|
19
|
+
private showModalWithLeftNavButton;
|
|
20
|
+
private showModalUserCannotClickBackdrop;
|
|
21
21
|
static get styles(): CSSResultGroup;
|
|
22
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport '../src/modal-manager';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @query('modal-manager')\n private modalManager!: ModalManager;\n\n protected render() {\n return html`\n <modal-manager>\n <div slot=\"slot-content-demo\">\n <p>Slotted Content</p>\n </div>\n </modal-manager>\n\n <div class=\"actions\">\n <button @click=${this.showModal}>Modal</button>\n <button @click=${this.showAllFeaturesModal}>All Features</button>\n <button @click=${this.showErrorModal}>Error Modal</button>\n <button @click=${this.showCustomContentModal}>\n Custom Content Modal\n </button>\n <button @click=${this.showSlottedContentModal}>\n Slotted Content Modal\n </button>\n <button @click=${this.showProcessingModal}>Processing Modal</button>\n <button @click=${this.showCompleteModal}>\n Processing Complete Modal\n </button>\n <button @click=${this.showUserClosedModalCallbackModal}>\n Modal Closed Callback\n </button>\n <button @click=${this.showModalUserCannotClose}>\n Unclosable Modal\n </button>\n <button @click=${this.showModalUserCannotClickBackdrop}>\n Unclickable Backdrop\n </button>\n <button @click=${this.showOverflowModal}>Text-heavy Modal</button>\n <button @click=${this.showModalWithoutLogo}>Modal Without Logo</button>\n <button @click=${this.showModalWithLeftNavButton}>\n Modal With Left Nav Button\n </button>\n </div>\n\n <h3>Some Content</h3>\n\n <img src=\"./assets/images/200x200.jpg\" style=\"float:right\" />\n\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere\n sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac\n tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor\n scelerisque quam, sit amet porta tortor consectetur non. Cras\n sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis\n laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula\n aliquam. Pellentesque habitant morbi tristique senectus et netus et\n malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet\n volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.\n </p>\n\n <p>\n In laoreet scelerisque tortor, at convallis nisl efficitur vehicula.\n Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt\n erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat\n condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo\n feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in\n lacus fermentum tristique. In porttitor malesuada sapien non posuere.\n Phasellus mollis mauris ultrices est consectetur, id pulvinar magna\n suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula\n cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id\n maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam\n cursus posuere ultricies.\n </p>\n\n <p>\n Maecenas porta ac nulla sed vestibulum. Suspendisse aliquam fermentum\n mi, id luctus tortor aliquet gravida. Maecenas sed tincidunt quam.\n Mauris cursus ante sit amet enim egestas, vitae pellentesque metus\n hendrerit. Sed quis tortor id dui mollis blandit quis ac nunc.\n Suspendisse tincidunt nisl quis nunc tincidunt, et finibus ipsum\n elementum. Maecenas congue, neque eget volutpat pulvinar, augue nisl\n interdum elit, et porta mi augue ut sapien.\n </p>\n\n <p>\n Fusce vel imperdiet justo. Aenean sollicitudin blandit nunc. Cras vitae\n orci id lorem condimentum tempor. Aliquam ac lectus sed mi suscipit\n sollicitudin at convallis nisl. Sed semper elementum sagittis. Nam\n fermentum nulla velit, non tempor massa fermentum non. Duis id ante eget\n elit gravida semper ac quis ligula. Duis vel libero ligula. Curabitur\n tempor sed velit nec egestas. Vivamus sit amet volutpat purus. Integer\n imperdiet mattis erat, vitae dignissim odio accumsan quis. Fusce\n bibendum lectus quis est molestie, eget scelerisque elit interdum. Etiam\n imperdiet a leo vitae ultricies. Etiam pretium quam eget sem mollis,\n quis elementum libero vulputate. Praesent aliquet dictum augue a luctus.\n </p>\n\n <p>\n Maecenas vulputate iaculis mauris nec lobortis. Sed nibh ante, vehicula\n nec varius et, condimentum in massa. Curabitur a turpis porta, auctor\n magna in, iaculis ante. Suspendisse potenti. Donec massa orci,\n sollicitudin in nulla ut, fringilla dignissim elit. Suspendisse\n porttitor lorem nec sem volutpat ullamcorper. Curabitur blandit est\n tristique velit pharetra rhoncus. Aliquam vitae mauris ex.\n </p>\n `;\n }\n\n showModal() {\n const config = new ModalConfig();\n config.headline = html`Success`;\n config.message = html`Thank you for your support!`;\n\n this.modalManager.showModal({\n config,\n });\n }\n\n showErrorModal() {\n const config = new ModalConfig();\n config.headline = html`Error`;\n config.message = html`An error occurred while processing your donation.`;\n config.headerColor = '#691916';\n config.bodyColor = '#fff';\n\n this.modalManager.showModal({\n config,\n });\n }\n\n showBillAlert() {\n alert('Bill <3 You');\n }\n\n buttonPress() {\n alert('You pressed a button.');\n }\n\n showAllFeaturesModal() {\n const config = new ModalConfig();\n config.title = html`Donation Received`;\n config.subtitle = html`Thanks a bunch!`;\n config.headline = html`A Headline that catches attention and might spill\n over to multiple lines!`;\n config.message = html`A long informative message for your users that let\n them know about something`;\n config.headerColor = 'purple';\n config.showProcessingIndicator = true;\n config.processingImageMode = 'complete';\n\n const someContent = html`\n <div style=\"text-align: center; margin-top: 10px;\">\n <button @click=${this.buttonPress}>I'm A Button To Press</button>\n </div>\n `;\n\n this.modalManager.showModal({\n config,\n customModalContent: someContent,\n });\n }\n\n showCustomContentModal() {\n const config = new ModalConfig();\n config.title = html`Custom Content`;\n config.headline = html`<span class=\"sr-only\"\n >Also support screen-reader only</span\n >`;\n\n const someContent = html`\n <style>\n a:focus {\n outline: 2px solid blue;\n }\n </style>\n Can contain any markup, including web components. Event listeners also\n work. Try clicking on the picture.\n <span class=\"sr-only\">Also support screen-reader only</span>\n <div style=\"text-align: center\">\n <a href=\"https://www.billmurraystory.com/\" style=\"display: block;\"\n >Bill Murray Stories</a\n >\n <img src=\"./assets/images/100x100.jpg\" @click=${this.showBillAlert} />\n </div>\n `;\n\n this.modalManager.showModal({\n config,\n customModalContent: someContent,\n });\n }\n\n showSlottedContentModal() {\n const config = new ModalConfig();\n config.title = html`Slotted Content`;\n\n const someContent = html`\n Can slot content from the top-level:\n <slot name=\"slot-content-demo\"></slot>\n `;\n\n this.modalManager.showModal({\n config,\n customModalContent: someContent,\n });\n }\n\n showOverflowModal() {\n const config = new ModalConfig();\n\n config.title = html`Lorem Ipsum`;\n config.subtitle = html`Subtitle`;\n config.headline = html`Everything Important`;\n config.message = html`\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere\n sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac\n tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor\n scelerisque quam, sit amet porta tortor consectetur non. Cras\n sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis\n laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula\n aliquam. Pellentesque habitant morbi tristique senectus et netus et\n malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet\n volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.\n </p>\n\n <p>\n In laoreet scelerisque tortor, at convallis nisl efficitur vehicula.\n Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt\n erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat\n condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo\n feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in\n lacus fermentum tristique. In porttitor malesuada sapien non posuere.\n Phasellus mollis mauris ultrices est consectetur, id pulvinar magna\n suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula\n cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id\n maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam\n cursus posuere ultricies.\n </p>\n `;\n\n config.headerColor = '#36A483';\n\n this.modalManager.showModal({\n config,\n });\n }\n\n showModalWithoutLogo() {\n const config = new ModalConfig();\n config.headline = html`Success`;\n config.title = html`Donation Received`;\n config.message = html`Thank you for your support!`;\n config.headerColor = '#194880';\n config.showHeaderLogo = false;\n this.modalManager.showModal({\n config,\n });\n }\n\n showCompleteModal() {\n const config = new ModalConfig();\n config.showProcessingIndicator = true;\n config.processingImageMode = 'complete';\n this.modalManager.showModal({\n config,\n });\n }\n\n showProcessingModal() {\n const config = new ModalConfig();\n config.headerColor = '#497fbf';\n config.showProcessingIndicator = true;\n config.processingImageMode = 'processing';\n config.showCloseButton = false;\n config.closeOnBackdropClick = false;\n this.modalManager.showModal({\n config,\n });\n\n setTimeout(this.showCompleteModal.bind(this), 1500);\n }\n\n showUserClosedModalCallbackModal() {\n const config = new ModalConfig();\n config.message = html`When you close this modal another will open.`;\n\n this.modalManager.showModal({\n config,\n userClosedModalCallback: () => {\n const config = new ModalConfig();\n config.message = html`I'm another modal`;\n config.headerColor = '#497fbf';\n this.modalManager.showModal({ config });\n },\n });\n }\n\n showModalUserCannotClose() {\n const config = new ModalConfig();\n config.message = html`User cannot close this. Will close automatically in 2\n seconds.`;\n config.showCloseButton = false;\n config.closeOnBackdropClick = false;\n this.modalManager.showModal({\n config,\n });\n\n setTimeout(this.modalManager.closeModal.bind(this.modalManager), 2000);\n }\n\n showModalWithLeftNavButton() {\n const config = new ModalConfig();\n config.message = html`This modal has a left nav button.`;\n config.showLeftNavButton = true;\n config.leftNavButtonText = 'Back';\n\n this.modalManager.showModal({\n config,\n userPressedLeftNavButtonCallback: () => {\n const config = new ModalConfig();\n config.message = html`I'm the previous modal (or anything else you want\n to do here)`;\n config.headerColor = '#497fbf';\n this.modalManager.showModal({ config });\n },\n });\n }\n\n showModalUserCannotClickBackdrop() {\n const config = new ModalConfig();\n config.message = html`Clicking on the backdrop will not close this.`;\n config.showCloseButton = true;\n config.closeOnBackdropClick = false;\n this.modalManager.showModal({\n config,\n });\n }\n\n static get styles(): CSSResultGroup {\n return css`\n modal-manager {\n display: none;\n --modalTitleLineHeight: 4.5rem;\n }\n\n modal-manager[mode='open'] {\n display: block;\n }\n\n .actions {\n position: fixed;\n background-color: rgba(255, 255, 255, 0.9);\n border: 1px solid black;\n padding: 10px;\n top: 10px;\n left: 10px;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport '../src/modal-manager';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @query('modal-manager')\n private modalManager!: ModalManager;\n\n protected render() {\n return html`\n <modal-manager>\n <div slot=\"slot-content-demo\">\n <p>Slotted Content</p>\n </div>\n </modal-manager>\n\n <div class=\"actions\">\n <button @click=${this.showModal}>Modal</button>\n <button @click=${this.showAllFeaturesModal}>All Features</button>\n <button @click=${this.showErrorModal}>Error Modal</button>\n <button @click=${this.showCustomContentModal}>\n Custom Content Modal\n </button>\n <button @click=${this.showSlottedContentModal}>\n Slotted Content Modal\n </button>\n <button @click=${this.showProcessingModal}>Processing Modal</button>\n <button @click=${this.showCompleteModal}>\n Processing Complete Modal\n </button>\n <button @click=${this.showUserClosedModalCallbackModal}>\n Modal Closed Callback\n </button>\n <button @click=${this.showModalUserCannotClose}>\n Unclosable Modal\n </button>\n <button @click=${this.showModalUserCannotClickBackdrop}>\n Unclickable Backdrop\n </button>\n <button @click=${this.showOverflowModal}>Text-heavy Modal</button>\n <button @click=${this.showModalWithoutLogo}>Modal Without Logo</button>\n <button @click=${this.showModalWithLeftNavButton}>\n Modal With Left Nav Button\n </button>\n </div>\n\n <h3>Some Content</h3>\n\n <img src=\"./assets/images/200x200.jpg\" style=\"float:right\" />\n\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere\n sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac\n tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor\n scelerisque quam, sit amet porta tortor consectetur non. Cras\n sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis\n laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula\n aliquam. Pellentesque habitant morbi tristique senectus et netus et\n malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet\n volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.\n </p>\n\n <p>\n In laoreet scelerisque tortor, at convallis nisl efficitur vehicula.\n Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt\n erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat\n condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo\n feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in\n lacus fermentum tristique. In porttitor malesuada sapien non posuere.\n Phasellus mollis mauris ultrices est consectetur, id pulvinar magna\n suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula\n cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id\n maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam\n cursus posuere ultricies.\n </p>\n\n <p>\n Maecenas porta ac nulla sed vestibulum. Suspendisse aliquam fermentum\n mi, id luctus tortor aliquet gravida. Maecenas sed tincidunt quam.\n Mauris cursus ante sit amet enim egestas, vitae pellentesque metus\n hendrerit. Sed quis tortor id dui mollis blandit quis ac nunc.\n Suspendisse tincidunt nisl quis nunc tincidunt, et finibus ipsum\n elementum. Maecenas congue, neque eget volutpat pulvinar, augue nisl\n interdum elit, et porta mi augue ut sapien.\n </p>\n\n <p>\n Fusce vel imperdiet justo. Aenean sollicitudin blandit nunc. Cras vitae\n orci id lorem condimentum tempor. Aliquam ac lectus sed mi suscipit\n sollicitudin at convallis nisl. Sed semper elementum sagittis. Nam\n fermentum nulla velit, non tempor massa fermentum non. Duis id ante eget\n elit gravida semper ac quis ligula. Duis vel libero ligula. Curabitur\n tempor sed velit nec egestas. Vivamus sit amet volutpat purus. Integer\n imperdiet mattis erat, vitae dignissim odio accumsan quis. Fusce\n bibendum lectus quis est molestie, eget scelerisque elit interdum. Etiam\n imperdiet a leo vitae ultricies. Etiam pretium quam eget sem mollis,\n quis elementum libero vulputate. Praesent aliquet dictum augue a luctus.\n </p>\n\n <p>\n Maecenas vulputate iaculis mauris nec lobortis. Sed nibh ante, vehicula\n nec varius et, condimentum in massa. Curabitur a turpis porta, auctor\n magna in, iaculis ante. Suspendisse potenti. Donec massa orci,\n sollicitudin in nulla ut, fringilla dignissim elit. Suspendisse\n porttitor lorem nec sem volutpat ullamcorper. Curabitur blandit est\n tristique velit pharetra rhoncus. Aliquam vitae mauris ex.\n </p>\n `;\n }\n\n private showModal() {\n const config = new ModalConfig();\n config.headline = html`Success`;\n config.message = html`Thank you for your support!`;\n\n this.modalManager.showModal({\n config,\n });\n }\n\n private showErrorModal() {\n const config = new ModalConfig();\n config.headline = html`Error`;\n config.message = html`An error occurred while processing your donation.`;\n config.headerColor = '#691916';\n config.bodyColor = '#fff';\n\n this.modalManager.showModal({\n config,\n });\n }\n\n private showBillAlert() {\n alert('Bill <3 You');\n }\n\n private buttonPress() {\n alert('You pressed a button.');\n }\n\n private showAllFeaturesModal() {\n const config = new ModalConfig();\n config.title = html`Donation Received`;\n config.subtitle = html`Thanks a bunch!`;\n config.headline = html`A Headline that catches attention and might spill\n over to multiple lines!`;\n config.message = html`A long informative message for your users that let\n them know about something`;\n config.headerColor = 'purple';\n config.showProcessingIndicator = true;\n config.processingImageMode = 'complete';\n\n const someContent = html`\n <div style=\"text-align: center; margin-top: 10px;\">\n <button @click=${this.buttonPress}>I'm A Button To Press</button>\n </div>\n `;\n\n this.modalManager.showModal({\n config,\n customModalContent: someContent,\n });\n }\n\n private showCustomContentModal() {\n const config = new ModalConfig();\n config.title = html`Custom Content`;\n config.headline = html`<span class=\"sr-only\"\n >Also support screen-reader only</span\n >`;\n\n const someContent = html`\n <style>\n a:focus {\n outline: 2px solid blue;\n }\n </style>\n Can contain any markup, including web components. Event listeners also\n work. Try clicking on the picture.\n <span class=\"sr-only\">Also support screen-reader only</span>\n <div style=\"text-align: center\">\n <a href=\"https://www.billmurraystory.com/\" style=\"display: block;\"\n >Bill Murray Stories</a\n >\n <img src=\"./assets/images/100x100.jpg\" @click=${this.showBillAlert} />\n </div>\n `;\n\n this.modalManager.showModal({\n config,\n customModalContent: someContent,\n });\n }\n\n private showSlottedContentModal() {\n const config = new ModalConfig();\n config.title = html`Slotted Content`;\n\n const someContent = html`\n Can slot content from the top-level:\n <slot name=\"slot-content-demo\"></slot>\n `;\n\n this.modalManager.showModal({\n config,\n customModalContent: someContent,\n });\n }\n\n private showOverflowModal() {\n const config = new ModalConfig();\n\n config.title = html`Lorem Ipsum`;\n config.subtitle = html`Subtitle`;\n config.headline = html`Everything Important`;\n config.message = html`\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere\n sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac\n tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor\n scelerisque quam, sit amet porta tortor consectetur non. Cras\n sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis\n laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula\n aliquam. Pellentesque habitant morbi tristique senectus et netus et\n malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet\n volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.\n </p>\n\n <p>\n In laoreet scelerisque tortor, at convallis nisl efficitur vehicula.\n Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt\n erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat\n condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo\n feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in\n lacus fermentum tristique. In porttitor malesuada sapien non posuere.\n Phasellus mollis mauris ultrices est consectetur, id pulvinar magna\n suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula\n cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id\n maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam\n cursus posuere ultricies.\n </p>\n `;\n\n config.headerColor = '#36A483';\n\n this.modalManager.showModal({\n config,\n });\n }\n\n private showModalWithoutLogo() {\n const config = new ModalConfig();\n config.headline = html`Success`;\n config.title = html`Donation Received`;\n config.message = html`Thank you for your support!`;\n config.headerColor = '#194880';\n config.showHeaderLogo = false;\n this.modalManager.showModal({\n config,\n });\n }\n\n private showCompleteModal() {\n const config = new ModalConfig();\n config.showProcessingIndicator = true;\n config.processingImageMode = 'complete';\n this.modalManager.showModal({\n config,\n });\n }\n\n private showProcessingModal() {\n const config = new ModalConfig();\n config.headerColor = '#497fbf';\n config.showProcessingIndicator = true;\n config.processingImageMode = 'processing';\n config.showCloseButton = false;\n config.closeOnBackdropClick = false;\n this.modalManager.showModal({\n config,\n });\n\n setTimeout(this.showCompleteModal.bind(this), 1500);\n }\n\n private showUserClosedModalCallbackModal() {\n const config = new ModalConfig();\n config.message = html`When you close this modal another will open.`;\n\n this.modalManager.showModal({\n config,\n userClosedModalCallback: () => {\n const config = new ModalConfig();\n config.message = html`I'm another modal`;\n config.headerColor = '#497fbf';\n this.modalManager.showModal({ config });\n },\n });\n }\n\n private showModalUserCannotClose() {\n const config = new ModalConfig();\n config.message = html`User cannot close this. Will close automatically in 2\n seconds.`;\n config.showCloseButton = false;\n config.closeOnBackdropClick = false;\n this.modalManager.showModal({\n config,\n });\n\n setTimeout(this.modalManager.closeModal.bind(this.modalManager), 2000);\n }\n\n private showModalWithLeftNavButton() {\n const config = new ModalConfig();\n config.message = html`This modal has a left nav button.`;\n config.showLeftNavButton = true;\n config.leftNavButtonText = 'Back';\n\n this.modalManager.showModal({\n config,\n userPressedLeftNavButtonCallback: () => {\n const config = new ModalConfig();\n config.message = html`I'm the previous modal (or anything else you want\n to do here)`;\n config.headerColor = '#497fbf';\n this.modalManager.showModal({ config });\n },\n });\n }\n\n private showModalUserCannotClickBackdrop() {\n const config = new ModalConfig();\n config.message = html`Clicking on the backdrop will not close this.`;\n config.showCloseButton = true;\n config.closeOnBackdropClick = false;\n this.modalManager.showModal({\n config,\n });\n }\n\n static get styles(): CSSResultGroup {\n return css`\n modal-manager {\n display: none;\n --modalTitleLineHeight: 4.5rem;\n }\n\n modal-manager[mode='open'] {\n display: block;\n }\n\n .actions {\n position: fixed;\n background-color: rgba(255, 255, 255, 0.9);\n border: 1px solid black;\n padding: 10px;\n top: 10px;\n left: 10px;\n }\n `;\n }\n}\n"]}
|
|
@@ -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';\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\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
|
+
{"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 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,8 +1,8 @@
|
|
|
1
|
-
import { describe,
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { ModalConfig } from '../src/modal-config';
|
|
4
4
|
describe('Modal Config', () => {
|
|
5
|
-
|
|
5
|
+
it('can be instantiated properly', async () => {
|
|
6
6
|
const config = new ModalConfig();
|
|
7
7
|
const title = html `Foo`;
|
|
8
8
|
config.title = title;
|
|
@@ -10,7 +10,7 @@ describe('Modal Config', () => {
|
|
|
10
10
|
expect(config.title).to.equal(title);
|
|
11
11
|
expect(config.headerColor).to.equal('green');
|
|
12
12
|
});
|
|
13
|
-
|
|
13
|
+
it('can be instantiated properly with constructor', async () => {
|
|
14
14
|
const title = html `Foo`;
|
|
15
15
|
const subtitle = html `Bar`;
|
|
16
16
|
const headline = html `Baz`;
|
|
@@ -50,7 +50,7 @@ describe('Modal Config', () => {
|
|
|
50
50
|
expect(config.showHeaderLogo).to.equal(showHeaderLogo);
|
|
51
51
|
expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
|
|
52
52
|
});
|
|
53
|
-
|
|
53
|
+
it('instantiates properly with defaults', async () => {
|
|
54
54
|
const config = new ModalConfig();
|
|
55
55
|
expect(config.title).to.equal(undefined);
|
|
56
56
|
expect(config.subtitle).to.equal(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-config.test.js","sourceRoot":"","sources":["../../test/modal-config.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"modal-config.test.js","sourceRoot":"","sources":["../../test/modal-config.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { describe, it, expect } from 'vitest';\nimport { html } from 'lit';\n\nimport { ModalConfig } from '../src/modal-config';\n\ndescribe('Modal Config', () => {\n it('can be instantiated properly', async () => {\n const config = new ModalConfig();\n const title = html`Foo`;\n config.title = title;\n config.headerColor = 'green';\n\n expect(config.title).to.equal(title);\n expect(config.headerColor).to.equal('green');\n });\n\n it('can be instantiated properly with constructor', async () => {\n const title = html`Foo`;\n const subtitle = html`Bar`;\n const headline = html`Baz`;\n const message = html`Boop`;\n\n const headerColor = 'blue';\n const showProcessingIndicator = true;\n const processingImageMode = 'processing';\n const showCloseButton = false;\n const showLeftNavButton = false;\n const leftNavButtonText = 'Previous';\n const showHeaderLogo = false;\n const closeOnBackdropClick = false;\n\n const config = new ModalConfig({\n title: title,\n subtitle: subtitle,\n headline: headline,\n message: message,\n headerColor: headerColor,\n showProcessingIndicator: showProcessingIndicator,\n processingImageMode: processingImageMode,\n showCloseButton: showCloseButton,\n showLeftNavButton: showLeftNavButton,\n leftNavButtonText: leftNavButtonText,\n showHeaderLogo: showHeaderLogo,\n closeOnBackdropClick: closeOnBackdropClick,\n });\n\n expect(config.title).to.equal(title);\n expect(config.subtitle).to.equal(subtitle);\n expect(config.headline).to.equal(headline);\n expect(config.message).to.equal(message);\n\n expect(config.headerColor).to.equal(headerColor);\n expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);\n expect(config.processingImageMode).to.equal(processingImageMode);\n expect(config.showCloseButton).to.equal(showCloseButton);\n expect(config.showLeftNavButton).to.equal(showLeftNavButton);\n expect(config.leftNavButtonText).to.equal(leftNavButtonText);\n expect(config.showHeaderLogo).to.equal(showHeaderLogo);\n expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);\n });\n\n it('instantiates properly with defaults', async () => {\n const config = new ModalConfig();\n expect(config.title).to.equal(undefined);\n expect(config.subtitle).to.equal(undefined);\n expect(config.headline).to.equal(undefined);\n expect(config.message).to.equal(undefined);\n expect(config.headerColor).to.equal('#55A183');\n expect(config.showProcessingIndicator).to.equal(false);\n expect(config.processingImageMode).to.equal('complete');\n expect(config.showCloseButton).to.equal(true);\n expect(config.showLeftNavButton).to.equal(false);\n expect(config.leftNavButtonText).to.equal('');\n expect(config.showHeaderLogo).to.equal(true);\n expect(config.closeOnBackdropClick).to.equal(true);\n });\n});\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { fixture, oneEvent, elementUpdated, nextFrame, fixtureCleanup, } from '@open-wc/testing-helpers';
|
|
2
|
-
import { describe,
|
|
2
|
+
import { describe, it, expect, afterEach } from 'vitest';
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import '../src/modal-manager';
|
|
5
5
|
import { ModalConfig } from '../src/modal-config';
|
|
@@ -9,13 +9,13 @@ describe('Modal Manager', () => {
|
|
|
9
9
|
afterEach(() => {
|
|
10
10
|
fixtureCleanup();
|
|
11
11
|
});
|
|
12
|
-
|
|
12
|
+
it('defaults to closed', async () => {
|
|
13
13
|
const el = (await fixture(html `
|
|
14
14
|
<modal-manager></modal-manager>
|
|
15
15
|
`));
|
|
16
16
|
expect(el.mode).to.equal('closed');
|
|
17
17
|
});
|
|
18
|
-
|
|
18
|
+
it('can be closed by calling closeModal', async () => {
|
|
19
19
|
const el = (await fixture(html `
|
|
20
20
|
<modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
|
|
21
21
|
`));
|
|
@@ -27,7 +27,7 @@ describe('Modal Manager', () => {
|
|
|
27
27
|
expect(el.mode).to.equal('closed');
|
|
28
28
|
expect(el.customModalContent).to.equal(undefined);
|
|
29
29
|
});
|
|
30
|
-
|
|
30
|
+
it('can be closed by clicking on the backdrop', async () => {
|
|
31
31
|
const el = (await fixture(html `
|
|
32
32
|
<modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
|
|
33
33
|
`));
|
|
@@ -37,7 +37,7 @@ describe('Modal Manager', () => {
|
|
|
37
37
|
await elementUpdated(el);
|
|
38
38
|
expect(el.mode).to.equal('closed');
|
|
39
39
|
});
|
|
40
|
-
|
|
40
|
+
it('emits a modeChanged event when opening', async () => {
|
|
41
41
|
const el = (await fixture(html `
|
|
42
42
|
<modal-manager></modal-manager>
|
|
43
43
|
`));
|
|
@@ -48,7 +48,7 @@ describe('Modal Manager', () => {
|
|
|
48
48
|
const response = await oneEvent(el, 'modeChanged');
|
|
49
49
|
expect(response.detail.mode).to.equal(ModalManagerMode.Open);
|
|
50
50
|
});
|
|
51
|
-
|
|
51
|
+
it('emits a modeChanged event when closing', async () => {
|
|
52
52
|
const el = (await fixture(html `
|
|
53
53
|
<modal-manager></modal-manager>
|
|
54
54
|
`));
|
|
@@ -62,7 +62,7 @@ describe('Modal Manager', () => {
|
|
|
62
62
|
const response = await oneEvent(el, 'modeChanged');
|
|
63
63
|
expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
|
|
64
64
|
});
|
|
65
|
-
|
|
65
|
+
it('can show a modal', async () => {
|
|
66
66
|
const el = (await fixture(html `
|
|
67
67
|
<modal-manager></modal-manager>
|
|
68
68
|
`));
|
|
@@ -71,7 +71,7 @@ describe('Modal Manager', () => {
|
|
|
71
71
|
await elementUpdated(el);
|
|
72
72
|
expect(el.mode).to.equal(ModalManagerMode.Open);
|
|
73
73
|
});
|
|
74
|
-
|
|
74
|
+
it('sets the --containerHeight CSS property when the window resizes', async () => {
|
|
75
75
|
const el = (await fixture(html `
|
|
76
76
|
<modal-manager></modal-manager>
|
|
77
77
|
`));
|
|
@@ -86,7 +86,7 @@ describe('Modal Manager', () => {
|
|
|
86
86
|
const propAfter = el.style.getPropertyValue('--containerHeight');
|
|
87
87
|
expect(propAfter).to.not.equal('');
|
|
88
88
|
});
|
|
89
|
-
|
|
89
|
+
it('calls the userClosedModalCallback when the user taps the backdrop', async () => {
|
|
90
90
|
const el = (await fixture(html `
|
|
91
91
|
<modal-manager></modal-manager>
|
|
92
92
|
`));
|
|
@@ -106,7 +106,7 @@ describe('Modal Manager', () => {
|
|
|
106
106
|
await elementUpdated(el);
|
|
107
107
|
expect(callbackCalled).to.equal(true);
|
|
108
108
|
});
|
|
109
|
-
|
|
109
|
+
it('does not call the userClosedModalCallback when the modal just closes', async () => {
|
|
110
110
|
const el = (await fixture(html `
|
|
111
111
|
<modal-manager></modal-manager>
|
|
112
112
|
`));
|
|
@@ -124,7 +124,7 @@ describe('Modal Manager', () => {
|
|
|
124
124
|
await elementUpdated(el);
|
|
125
125
|
expect(callbackCalled).to.equal(false);
|
|
126
126
|
});
|
|
127
|
-
|
|
127
|
+
it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {
|
|
128
128
|
const el = (await fixture(html `
|
|
129
129
|
<modal-manager></modal-manager>
|
|
130
130
|
`));
|
|
@@ -145,7 +145,7 @@ describe('Modal Manager', () => {
|
|
|
145
145
|
await elementUpdated(el);
|
|
146
146
|
expect(callbackCalled).to.equal(true);
|
|
147
147
|
});
|
|
148
|
-
|
|
148
|
+
it('mode is set to closed when close button is pressed', async () => {
|
|
149
149
|
const el = (await fixture(html `
|
|
150
150
|
<modal-manager></modal-manager>
|
|
151
151
|
`));
|
|
@@ -160,7 +160,7 @@ describe('Modal Manager', () => {
|
|
|
160
160
|
await elementUpdated(el);
|
|
161
161
|
expect(el.mode).to.equal('closed');
|
|
162
162
|
});
|
|
163
|
-
|
|
163
|
+
it('mode is set to closed when close button gets spacebar pressed', async () => {
|
|
164
164
|
const el = (await fixture(html `
|
|
165
165
|
<modal-manager></modal-manager>
|
|
166
166
|
`));
|
|
@@ -176,7 +176,7 @@ describe('Modal Manager', () => {
|
|
|
176
176
|
await elementUpdated(el);
|
|
177
177
|
expect(el.mode).to.equal('closed');
|
|
178
178
|
});
|
|
179
|
-
|
|
179
|
+
it('mode remains open when close button gets non-button keypress', async () => {
|
|
180
180
|
const el = (await fixture(html `
|
|
181
181
|
<modal-manager></modal-manager>
|
|
182
182
|
`));
|
|
@@ -192,7 +192,7 @@ describe('Modal Manager', () => {
|
|
|
192
192
|
await elementUpdated(el);
|
|
193
193
|
expect(el.mode).to.equal('open');
|
|
194
194
|
});
|
|
195
|
-
|
|
195
|
+
it('allows the user to close by clicking on the backdrop if configured to', async () => {
|
|
196
196
|
const el = (await fixture(html `
|
|
197
197
|
<modal-manager></modal-manager>
|
|
198
198
|
`));
|
|
@@ -206,7 +206,7 @@ describe('Modal Manager', () => {
|
|
|
206
206
|
await elementUpdated(el);
|
|
207
207
|
expect(el.mode).to.equal('closed');
|
|
208
208
|
});
|
|
209
|
-
|
|
209
|
+
it("doesn't allow the user to close by clicking on the backdrop if configured to", async () => {
|
|
210
210
|
const el = (await fixture(html `
|
|
211
211
|
<modal-manager></modal-manager>
|
|
212
212
|
`));
|
|
@@ -220,7 +220,7 @@ describe('Modal Manager', () => {
|
|
|
220
220
|
await elementUpdated(el);
|
|
221
221
|
expect(el.getMode()).to.equal('open');
|
|
222
222
|
});
|
|
223
|
-
|
|
223
|
+
it('ia logo should not visible on modal', async () => {
|
|
224
224
|
const el = (await fixture(html `
|
|
225
225
|
<modal-manager></modal-manager>
|
|
226
226
|
`));
|
|
@@ -231,7 +231,7 @@ describe('Modal Manager', () => {
|
|
|
231
231
|
const logoIcon = el.shadowRoot?.querySelector('.logo-icon');
|
|
232
232
|
expect(logoIcon).to.not.exist;
|
|
233
233
|
});
|
|
234
|
-
|
|
234
|
+
it('should trap Tab key', async () => {
|
|
235
235
|
const el = (await fixture(html `
|
|
236
236
|
<modal-manager></modal-manager>
|
|
237
237
|
`));
|
|
@@ -267,7 +267,7 @@ describe('Modal Manager', () => {
|
|
|
267
267
|
// Should be only one tabbable element
|
|
268
268
|
expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
|
|
269
269
|
});
|
|
270
|
-
|
|
270
|
+
it('returns keyboard focus to the triggering element on close', async () => {
|
|
271
271
|
const config = new ModalConfig();
|
|
272
272
|
const el = (await fixture(html `
|
|
273
273
|
<div>
|