@internetarchive/modal-manager 2.0.5-webdev-8155.4 → 2.0.5-webdev-8155.8

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 (19) hide show
  1. package/demo/app-root.ts +16 -16
  2. package/dist/demo/app-root.d.ts +1 -1
  3. package/dist/demo/app-root.js +16 -16
  4. package/dist/demo/app-root.js.map +1 -1
  5. package/dist/src/assets/arrow-left-icon.d.ts +1 -1
  6. package/dist/src/assets/ia-logo-icon.d.ts +1 -1
  7. package/dist/src/modal-config.d.ts +13 -13
  8. package/dist/src/modal-config.js.map +1 -1
  9. package/dist/src/modal-manager.d.ts +5 -5
  10. package/dist/src/modal-manager.js.map +1 -1
  11. package/dist/src/modal-template.d.ts +3 -3
  12. package/dist/src/modal-template.js +2 -2
  13. package/dist/src/modal-template.js.map +1 -1
  14. package/dist/test/modal-manager.test.js.map +1 -1
  15. package/package.json +2 -2
  16. package/src/modal-config.ts +13 -13
  17. package/src/modal-manager.ts +5 -5
  18. package/src/modal-template.ts +5 -12
  19. package/test/modal-manager.test.ts +2 -2
package/demo/app-root.ts CHANGED
@@ -113,8 +113,8 @@ export class AppRoot extends LitElement {
113
113
 
114
114
  showModal() {
115
115
  const config = new ModalConfig();
116
- config.headline = 'Success';
117
- config.message = 'Thank you for your support!';
116
+ config.headline = html`Success`;
117
+ config.message = html`Thank you for your support!`;
118
118
 
119
119
  this.modalManager.showModal({
120
120
  config,
@@ -123,8 +123,8 @@ export class AppRoot extends LitElement {
123
123
 
124
124
  showErrorModal() {
125
125
  const config = new ModalConfig();
126
- config.headline = 'Error';
127
- config.message = 'An error occurred while processing your donation.';
126
+ config.headline = html`Error`;
127
+ config.message = html`An error occurred while processing your donation.`;
128
128
  config.headerColor = '#691916';
129
129
  config.bodyColor = '#fff';
130
130
 
@@ -167,7 +167,7 @@ export class AppRoot extends LitElement {
167
167
 
168
168
  showCustomContentModal() {
169
169
  const config = new ModalConfig();
170
- config.title = 'Custom Content';
170
+ config.title = html`Custom Content`;
171
171
  config.headline = html`<span class="sr-only"
172
172
  >Also support screen-reader only</span
173
173
  >`;
@@ -197,7 +197,7 @@ export class AppRoot extends LitElement {
197
197
 
198
198
  showSlottedContentModal() {
199
199
  const config = new ModalConfig();
200
- config.title = 'Slotted Content';
200
+ config.title = html`Slotted Content`;
201
201
 
202
202
  const someContent = html`
203
203
  Can slot content from the top-level:
@@ -253,9 +253,9 @@ export class AppRoot extends LitElement {
253
253
 
254
254
  showModalWithoutLogo() {
255
255
  const config = new ModalConfig();
256
- config.headline = 'Success';
256
+ config.headline = html`Success`;
257
257
  config.title = html`Donation Received`;
258
- config.message = 'Thank you for your support!';
258
+ config.message = html`Thank you for your support!`;
259
259
  config.headerColor = '#194880';
260
260
  config.showHeaderLogo = false;
261
261
  this.modalManager.showModal({
@@ -288,13 +288,13 @@ export class AppRoot extends LitElement {
288
288
 
289
289
  showUserClosedModalCallbackModal() {
290
290
  const config = new ModalConfig();
291
- config.message = 'When you close this modal another will open.';
291
+ config.message = html`When you close this modal another will open.`;
292
292
 
293
293
  this.modalManager.showModal({
294
294
  config,
295
295
  userClosedModalCallback: () => {
296
296
  const config = new ModalConfig();
297
- config.message = "I'm another modal";
297
+ config.message = html`I'm another modal`;
298
298
  config.headerColor = '#497fbf';
299
299
  this.modalManager.showModal({ config });
300
300
  },
@@ -303,8 +303,8 @@ export class AppRoot extends LitElement {
303
303
 
304
304
  showModalUserCannotClose() {
305
305
  const config = new ModalConfig();
306
- config.message =
307
- 'User cannot close this. Will close automatically in 2 seconds.';
306
+ config.message = html`User cannot close this. Will close automatically in 2
307
+ seconds.`;
308
308
  config.showCloseButton = false;
309
309
  config.closeOnBackdropClick = false;
310
310
  this.modalManager.showModal({
@@ -316,7 +316,7 @@ export class AppRoot extends LitElement {
316
316
 
317
317
  showModalWithLeftNavButton() {
318
318
  const config = new ModalConfig();
319
- config.message = 'This modal has a left nav button.';
319
+ config.message = html`This modal has a left nav button.`;
320
320
  config.showLeftNavButton = true;
321
321
  config.leftNavButtonText = 'Back';
322
322
 
@@ -324,8 +324,8 @@ export class AppRoot extends LitElement {
324
324
  config,
325
325
  userPressedLeftNavButtonCallback: () => {
326
326
  const config = new ModalConfig();
327
- config.message =
328
- "I'm the previous modal (or anything else you want to do here)";
327
+ config.message = html`I'm the previous modal (or anything else you want
328
+ to do here)`;
329
329
  config.headerColor = '#497fbf';
330
330
  this.modalManager.showModal({ config });
331
331
  },
@@ -334,7 +334,7 @@ export class AppRoot extends LitElement {
334
334
 
335
335
  showModalUserCannotClickBackdrop() {
336
336
  const config = new ModalConfig();
337
- config.message = 'Clicking on the backdrop will not close this.';
337
+ config.message = html`Clicking on the backdrop will not close this.`;
338
338
  config.showCloseButton = true;
339
339
  config.closeOnBackdropClick = false;
340
340
  this.modalManager.showModal({
package/dist/demo/app-root.d.ts CHANGED
@@ -2,7 +2,7 @@ import { LitElement, type CSSResultGroup } from 'lit';
2
2
  import '../src/modal-manager';
3
3
  export declare class AppRoot extends LitElement {
4
4
  private modalManager;
5
- protected render(): import("lit").TemplateResult<1>;
5
+ protected render(): import("lit-html").TemplateResult<1>;
6
6
  showModal(): void;
7
7
  showErrorModal(): void;
8
8
  showBillAlert(): void;
package/dist/demo/app-root.js CHANGED
@@ -107,16 +107,16 @@ let AppRoot = class AppRoot extends LitElement {
107
107
  }
108
108
  showModal() {
109
109
  const config = new ModalConfig();
110
- config.headline = 'Success';
111
- config.message = 'Thank you for your support!';
110
+ config.headline = html `Success`;
111
+ config.message = html `Thank you for your support!`;
112
112
  this.modalManager.showModal({
113
113
  config,
114
114
  });
115
115
  }
116
116
  showErrorModal() {
117
117
  const config = new ModalConfig();
118
- config.headline = 'Error';
119
- config.message = 'An error occurred while processing your donation.';
118
+ config.headline = html `Error`;
119
+ config.message = html `An error occurred while processing your donation.`;
120
120
  config.headerColor = '#691916';
121
121
  config.bodyColor = '#fff';
122
122
  this.modalManager.showModal({
@@ -152,7 +152,7 @@ let AppRoot = class AppRoot extends LitElement {
152
152
  }
153
153
  showCustomContentModal() {
154
154
  const config = new ModalConfig();
155
- config.title = 'Custom Content';
155
+ config.title = html `Custom Content`;
156
156
  config.headline = html `<span class="sr-only"
157
157
  >Also support screen-reader only</span
158
158
  >`;
@@ -179,7 +179,7 @@ let AppRoot = class AppRoot extends LitElement {
179
179
  }
180
180
  showSlottedContentModal() {
181
181
  const config = new ModalConfig();
182
- config.title = 'Slotted Content';
182
+ config.title = html `Slotted Content`;
183
183
  const someContent = html `
184
184
  Can slot content from the top-level:
185
185
  <slot name="slot-content-demo"></slot>
@@ -228,9 +228,9 @@ let AppRoot = class AppRoot extends LitElement {
228
228
  }
229
229
  showModalWithoutLogo() {
230
230
  const config = new ModalConfig();
231
- config.headline = 'Success';
231
+ config.headline = html `Success`;
232
232
  config.title = html `Donation Received`;
233
- config.message = 'Thank you for your support!';
233
+ config.message = html `Thank you for your support!`;
234
234
  config.headerColor = '#194880';
235
235
  config.showHeaderLogo = false;
236
236
  this.modalManager.showModal({
@@ -259,12 +259,12 @@ let AppRoot = class AppRoot extends LitElement {
259
259
  }
260
260
  showUserClosedModalCallbackModal() {
261
261
  const config = new ModalConfig();
262
- config.message = 'When you close this modal another will open.';
262
+ config.message = html `When you close this modal another will open.`;
263
263
  this.modalManager.showModal({
264
264
  config,
265
265
  userClosedModalCallback: () => {
266
266
  const config = new ModalConfig();
267
- config.message = "I'm another modal";
267
+ config.message = html `I'm another modal`;
268
268
  config.headerColor = '#497fbf';
269
269
  this.modalManager.showModal({ config });
270
270
  },
@@ -272,8 +272,8 @@ let AppRoot = class AppRoot extends LitElement {
272
272
  }
273
273
  showModalUserCannotClose() {
274
274
  const config = new ModalConfig();
275
- config.message =
276
- 'User cannot close this. Will close automatically in 2 seconds.';
275
+ config.message = html `User cannot close this. Will close automatically in 2
276
+ seconds.`;
277
277
  config.showCloseButton = false;
278
278
  config.closeOnBackdropClick = false;
279
279
  this.modalManager.showModal({
@@ -283,15 +283,15 @@ let AppRoot = class AppRoot extends LitElement {
283
283
  }
284
284
  showModalWithLeftNavButton() {
285
285
  const config = new ModalConfig();
286
- config.message = 'This modal has a left nav button.';
286
+ config.message = html `This modal has a left nav button.`;
287
287
  config.showLeftNavButton = true;
288
288
  config.leftNavButtonText = 'Back';
289
289
  this.modalManager.showModal({
290
290
  config,
291
291
  userPressedLeftNavButtonCallback: () => {
292
292
  const config = new ModalConfig();
293
- config.message =
294
- "I'm the previous modal (or anything else you want to do here)";
293
+ config.message = html `I'm the previous modal (or anything else you want
294
+ to do here)`;
295
295
  config.headerColor = '#497fbf';
296
296
  this.modalManager.showModal({ config });
297
297
  },
@@ -299,7 +299,7 @@ let AppRoot = class AppRoot extends LitElement {
299
299
  }
300
300
  showModalUserCannotClickBackdrop() {
301
301
  const config = new ModalConfig();
302
- config.message = 'Clicking on the backdrop will not close this.';
302
+ config.message = html `Clicking on the backdrop will not close this.`;
303
303
  config.showCloseButton = true;
304
304
  config.closeOnBackdropClick = false;
305
305
  this.modalManager.showModal({
package/dist/demo/app-root.js.map CHANGED
@@ -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 = 'Success';\n config.message = '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 = 'Error';\n config.message = '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 = '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 = '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 = 'Success';\n config.title = html`Donation Received`;\n config.message = '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 = '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 = \"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 =\n 'User cannot close this. Will close automatically in 2 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 = '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 =\n \"I'm the previous modal (or anything else you want 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 = '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 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"]}
package/dist/src/assets/arrow-left-icon.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("lit").TemplateResult<1>;
1
+ declare const _default: import("lit-html").TemplateResult<1>;
2
2
  export default _default;
package/dist/src/assets/ia-logo-icon.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("lit").TemplateResult<1>;
1
+ declare const _default: import("lit-html").TemplateResult<1>;
2
2
  export default _default;
package/dist/src/modal-config.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { HTMLTemplateResult } from 'lit';
1
+ import type { TemplateResult } from 'lit';
2
2
  /**
3
3
  * Configuration to show a modal
4
4
  *
@@ -9,31 +9,31 @@ export declare class ModalConfig {
9
9
  /**
10
10
  * The title that shows in the header
11
11
  *
12
- * @type {(HTMLTemplateResult | string | undefined)}
12
+ * @type {(TemplateResult | undefined)}
13
13
  * @memberof ModalConfig
14
14
  */
15
- title?: HTMLTemplateResult | string;
15
+ title?: TemplateResult;
16
16
  /**
17
17
  * The subtitle shown in the header under the title
18
18
  *
19
- * @type {(HTMLTemplateResult | string | undefined)}
19
+ * @type {(TemplateResult | undefined)}
20
20
  * @memberof ModalConfig
21
21
  */
22
- subtitle?: HTMLTemplateResult | string;
22
+ subtitle?: TemplateResult;
23
23
  /**
24
24
  * The headline shown at the top of the content section
25
25
  *
26
- * @type {(HTMLTemplateResult | string | undefined)}
26
+ * @type {(TemplateResult | undefined)}
27
27
  * @memberof ModalConfig
28
28
  */
29
- headline?: HTMLTemplateResult | string;
29
+ headline?: TemplateResult;
30
30
  /**
31
31
  * The text shown below the headline in the content section
32
32
  *
33
- * @type {(HTMLTemplateResult | string | undefined)}
33
+ * @type {(TemplateResult | undefined)}
34
34
  * @memberof ModalConfig
35
35
  */
36
- message?: HTMLTemplateResult | string;
36
+ message?: TemplateResult;
37
37
  /**
38
38
  * The background color of the header
39
39
  *
@@ -87,10 +87,10 @@ export declare class ModalConfig {
87
87
  */
88
88
  closeOnBackdropClick: boolean;
89
89
  constructor(options?: {
90
- title?: HTMLTemplateResult | string;
91
- subtitle?: HTMLTemplateResult | string;
92
- headline?: HTMLTemplateResult | string;
93
- message?: HTMLTemplateResult | string;
90
+ title?: TemplateResult;
91
+ subtitle?: TemplateResult;
92
+ headline?: TemplateResult;
93
+ message?: TemplateResult;
94
94
  headerColor?: string;
95
95
  bodyColor?: string;
96
96
  showProcessingIndicator?: boolean;
package/dist/src/modal-config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IA8FtB,YAAY,OAcX;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,OAAO,EAAE,uBAAuB,IAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,OAAO,EAAE,mBAAmB,IAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,OAAO,EAAE,eAAe,IAAI,IAAI,CAAC;QACxD,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,KAAK,CAAC;QAC7D,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,OAAO,EAAE,cAAc,IAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,OAAO,EAAE,oBAAoB,IAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import type { HTMLTemplateResult } from 'lit';\n\n/**\n * Configuration to show a modal\n *\n * @export\n * @class ModalConfig\n */\nexport class ModalConfig {\n /**\n * The title that shows in the header\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n title?: HTMLTemplateResult | string;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: HTMLTemplateResult | string;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n headline?: HTMLTemplateResult | string;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n message?: HTMLTemplateResult | string;\n\n /**\n * The background color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: string;\n\n /**\n * The background color of the body\n *\n * @memberof ModalConfig\n */\n bodyColor: string;\n\n /**\n * Show or hide the processing indicator\n *\n * @memberof ModalConfig\n */\n showProcessingIndicator: boolean;\n\n /**\n * Set the processing image mode\n *\n * @memberof ModalConfig\n */\n processingImageMode: 'processing' | 'complete';\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: boolean;\n\n /**\n * Show the left nav button\n *\n * @memberof ModalConfig\n */\n showLeftNavButton: boolean;\n\n /**\n * Left nav button text\n */\n leftNavButtonText: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showHeaderLogo: boolean;\n\n /**\n * Close the modal if the user taps on the background\n *\n * @memberof ModalConfig\n */\n closeOnBackdropClick: boolean;\n\n constructor(options?: {\n title?: HTMLTemplateResult | string;\n subtitle?: HTMLTemplateResult | string;\n headline?: HTMLTemplateResult | string;\n message?: HTMLTemplateResult | string;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: 'processing' | 'complete';\n showCloseButton?: boolean;\n showLeftNavButton?: boolean;\n leftNavButtonText?: string;\n showHeaderLogo?: boolean;\n closeOnBackdropClick?: boolean;\n }) {\n this.title = options?.title;\n this.subtitle = options?.subtitle;\n this.headline = options?.headline;\n this.message = options?.message;\n\n this.headerColor = options?.headerColor ?? '#55A183';\n this.bodyColor = options?.bodyColor ?? '#fbfbfd';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.showLeftNavButton = options?.showLeftNavButton ?? false;\n this.leftNavButtonText = options?.leftNavButtonText ?? '';\n this.showHeaderLogo = options?.showHeaderLogo ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
1
+ {"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IA8FtB,YAAY,OAcX;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,OAAO,EAAE,uBAAuB,IAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,OAAO,EAAE,mBAAmB,IAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,OAAO,EAAE,eAAe,IAAI,IAAI,CAAC;QACxD,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,KAAK,CAAC;QAC7D,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,OAAO,EAAE,cAAc,IAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,OAAO,EAAE,oBAAoB,IAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit';\n\n/**\n * Configuration to show a modal\n *\n * @export\n * @class ModalConfig\n */\nexport class ModalConfig {\n /**\n * The title that shows in the header\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult;\n\n /**\n * The background color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: string;\n\n /**\n * The background color of the body\n *\n * @memberof ModalConfig\n */\n bodyColor: string;\n\n /**\n * Show or hide the processing indicator\n *\n * @memberof ModalConfig\n */\n showProcessingIndicator: boolean;\n\n /**\n * Set the processing image mode\n *\n * @memberof ModalConfig\n */\n processingImageMode: 'processing' | 'complete';\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: boolean;\n\n /**\n * Show the left nav button\n *\n * @memberof ModalConfig\n */\n showLeftNavButton: boolean;\n\n /**\n * Left nav button text\n */\n leftNavButtonText: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showHeaderLogo: boolean;\n\n /**\n * Close the modal if the user taps on the background\n *\n * @memberof ModalConfig\n */\n closeOnBackdropClick: boolean;\n\n constructor(options?: {\n title?: TemplateResult;\n subtitle?: TemplateResult;\n headline?: TemplateResult;\n message?: TemplateResult;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: 'processing' | 'complete';\n showCloseButton?: boolean;\n showLeftNavButton?: boolean;\n leftNavButtonText?: string;\n showHeaderLogo?: boolean;\n closeOnBackdropClick?: boolean;\n }) {\n this.title = options?.title;\n this.subtitle = options?.subtitle;\n this.headline = options?.headline;\n this.message = options?.message;\n\n this.headerColor = options?.headerColor ?? '#55A183';\n this.bodyColor = options?.bodyColor ?? '#fbfbfd';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.showLeftNavButton = options?.showLeftNavButton ?? false;\n this.leftNavButtonText = options?.leftNavButtonText ?? '';\n this.showHeaderLogo = options?.showHeaderLogo ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
package/dist/src/modal-manager.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, CSSResult, HTMLTemplateResult, PropertyValues } from 'lit';
1
+ import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
2
2
  import Modal from './shoelace/modal';
3
3
  import './modal-template';
4
4
  import { ModalConfig } from './modal-config';
@@ -18,10 +18,10 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
18
18
  /**
19
19
  * Custom content to display in the modal's content slot
20
20
  *
21
- * @type {(HTMLTemplateResult | undefined)}
21
+ * @type {(TemplateResult | undefined)}
22
22
  * @memberof ModalManager
23
23
  */
24
- customModalContent?: HTMLTemplateResult;
24
+ customModalContent?: TemplateResult;
25
25
  /**
26
26
  * This hostBridge handles environmental-specific interactions such as adding classes
27
27
  * to the body tag or event listeners needed to support the modal manager in the host environment.
@@ -45,7 +45,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
45
45
  firstUpdated(): Promise<void>;
46
46
  disconnectedCallback(): void;
47
47
  /** @inheritdoc */
48
- render(): HTMLTemplateResult;
48
+ render(): TemplateResult;
49
49
  /** @inheritdoc */
50
50
  getMode(): ModalManagerMode;
51
51
  /** @inheritdoc */
@@ -93,7 +93,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
93
93
  /** @inheritdoc */
94
94
  showModal(options: {
95
95
  config: ModalConfig;
96
- customModalContent?: HTMLTemplateResult;
96
+ customModalContent?: TemplateResult;
97
97
  userClosedModalCallback?: () => void;
98
98
  userPressedLeftNavButtonCallback?: () => void;
99
99
  }): Promise<void>;
package/dist/src/modal-manager.js.map CHANGED
@@ -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 HTMLTemplateResult,\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 {(HTMLTemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: HTMLTemplateResult;\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(): HTMLTemplateResult {\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?: HTMLTemplateResult;\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":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,GAAG,GAIJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAGrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACL;;;;;;;WAOG;QACwC,SAAI,GAC7C,gBAAgB,CAAC,MAAM,CAAC;QAU1B;;;;;;;;;WASG;QAEH,eAAU,GAAoC,IAAI,sBAAsB,CACtE,IAAI,CACL,CAAC;QAWF,sCAAsC;QAC/B,UAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;QAsD/B;;;;;WAKG;QACK,yBAAoB,GAAG,IAAI,CAAC;IAiLtC,CAAC;IA3OC,KAAK,CAAC,YAAY;QAChB,qCAAqC;QAErC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gBACpD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;oBACvB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,eAAe;;gCAE3B,IAAI,CAAC,kBAAkB;kCACrB,IAAI,CAAC,oCAAoC;;;YAG/D,IAAI,CAAC,kBAAkB;;;KAG9B,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,OAAO;QACL,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,kBAAkB;IAClB,UAAU;QACR,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;QACpC,IAAI,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACtE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAExB,sDAAsD;QACrD,IAAI,CAAC,iBAAiC,EAAE,KAAK,EAAE,EAAE,CAAC;QACnD,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;IACrC,CAAC;IAgCD;;;;;OAKG;IACK,2BAA2B;QACjC,yEAAyE;QACzE,mEAAmE;QACnE,yFAAyF;QACzF,MAAM,QAAQ,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAC9C,IAAI,CAAC,uBAAuB,GAAG,SAAS,CAAC;QACzC,IAAI,QAAQ;YAAE,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IACK,oCAAoC;QAC1C,gDAAgD;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,gCAAgC,CAAC;QACvD,IAAI,CAAC,gCAAgC,GAAG,SAAS,CAAC;QAClD,IAAI,QAAQ;YAAE,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED,kBAAkB;IAClB,KAAK,CAAC,SAAS,CAAC,OAKf;QACC,kFAAkF;QAClF,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,MAAM;YAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAExE,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,MAAM,CAAC,oBAAoB,CAAC;QAChE,IAAI,CAAC,uBAAuB,GAAG,OAAO,CAAC,uBAAuB,CAAC;QAC/D,IAAI,CAAC,gCAAgC;YACnC,OAAO,CAAC,gCAAgC,CAAC;QAC3C,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,CAAC;QACrD,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC;QAClC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;YAC3C,MAAM,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC;YACxC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACK,qBAAqB;QAC3B,IAAI,CAAC,iBAAiB,GAAG,uBAAuB,EAAE,CAAC;IACrD,CAAC;IAED,kBAAkB;IAClB,OAAO,CAAC,OAAuB;QAC7B,0BAA0B;QAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,gBAAgB;QACtB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACK,mBAAmB;QACzB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;;;;OAKG;IACK,kBAAkB;QACxB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,kBAAkB,GAAG,GAAG,CAAA,kDAAkD,CAAC;QACjF,MAAM,mBAAmB,GAAG,GAAG,CAAA,kCAAkC,CAAC;QAElE,MAAM,UAAU,GAAG,GAAG,CAAA,0BAA0B,CAAC;QACjD,MAAM,aAAa,GAAG,GAAG,CAAA,2BAA2B,CAAC;QACrD,MAAM,WAAW,GAAG,GAAG,CAAA,0BAA0B,CAAC;QAElD,OAAO,GAAG,CAAA;;;;;;;;;;4BAUc,kBAAkB;;;mBAG3B,mBAAmB;;;;;;;;;mBASnB,WAAW;iBACb,UAAU;qBACN,aAAa;;KAE7B,CAAC;IACJ,CAAC;CACF,CAAA;AAjR4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAChB;AAQE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqC;AAahE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAGzB;AAS+B;IAAhC,KAAK,CAAC,gBAAgB,CAAC;mDAAuC;AA1CpD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA0RxB","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"]}
package/dist/src/modal-template.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, CSSResult, HTMLTemplateResult } from 'lit';
1
+ import { LitElement, CSSResult, TemplateResult } from 'lit';
2
2
  import '@internetarchive/ia-activity-indicator';
3
3
  import '@internetarchive/icon-close';
4
4
  import { ModalConfig } from './modal-config';
@@ -11,7 +11,7 @@ export declare class ModalTemplate extends LitElement {
11
11
  */
12
12
  config: ModalConfig;
13
13
  /** @inheritdoc */
14
- render(): HTMLTemplateResult;
14
+ render(): TemplateResult;
15
15
  /**
16
16
  * Dispatch the `closeButtonPressed` event to the consumer
17
17
  *
@@ -31,7 +31,7 @@ export declare class ModalTemplate extends LitElement {
31
31
  *
32
32
  * @readonly
33
33
  * @private
34
- * @type {HTMLTemplateResult}
34
+ * @type {TemplateResult}
35
35
  * @memberof ModalTemplate
36
36
  */
37
37
  private get closeButtonTemplate();
package/dist/src/modal-template.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import { LitElement, html, css, nothing, } from 'lit';
2
+ import { LitElement, html, css, nothing } from 'lit';
3
3
  import { property, customElement } from 'lit/decorators.js';
4
4
  import '@internetarchive/ia-activity-indicator';
5
5
  import '@internetarchive/icon-close';
@@ -104,7 +104,7 @@ let ModalTemplate = class ModalTemplate extends LitElement {
104
104
  *
105
105
  * @readonly
106
106
  * @private
107
- * @type {HTMLTemplateResult}
107
+ * @type {TemplateResult}
108
108
  * @memberof ModalTemplate
109
109
  */
110
110
  get closeButtonTemplate() {
package/dist/src/modal-template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n HTMLTemplateResult,\n nothing,\n} from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\nimport arrowLeftIcon from './assets/arrow-left-icon';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n /**\n * The ModalConfig that displayed the template\n *\n * @type {ModalConfig}\n * @memberof ModalTemplate\n */\n @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n /** @inheritdoc */\n render(): HTMLTemplateResult {\n return html`\n <div class=\"modal-wrapper\">\n <div class=\"modal-container\">\n <header style=\"background-color: ${this.config.headerColor}\">\n ${this.config.showLeftNavButton\n ? this.leftNavButtonTemplate\n : nothing}\n ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\n : nothing}\n ${this.config.title\n ? html`<h1 class=\"title\">${this.config.title}</h1>`\n : ''}\n ${this.config.subtitle\n ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n : ''}\n </header>\n <section\n class=\"modal-body\"\n style=\"background-color: ${this.config.bodyColor}\"\n >\n <div class=\"content\">\n <div\n class=\"processing-logo ${this.config.showProcessingIndicator\n ? ''\n : 'hidden'}\"\n >\n <ia-activity-indicator\n .mode=${this.config.processingImageMode}\n ></ia-activity-indicator>\n </div>\n ${this.config.headline\n ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n : ''}\n ${this.config.message\n ? html` <p class=\"message\">${this.config.message}</p> `\n : ''}\n\n <div class=\"slot-container\">\n <slot> </slot>\n </div>\n </div>\n </section>\n </div>\n </div>\n `;\n }\n\n /**\n * Dispatch the `closeButtonPressed` event to the consumer\n *\n * @private\n * @memberof ModalTemplate\n */\n private handleCloseButton(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('closeButtonPressed');\n this.dispatchEvent(event);\n }\n\n /**\n * Dispatch the `leftNavButtonPressed` event to the consumer\n *\n * @private\n * @memberof ModalTemplate\n */\n private handleLeftNavButtonPressed(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('leftNavButtonPressed');\n this.dispatchEvent(event);\n }\n\n /**\n * The close button template\n *\n * @readonly\n * @private\n * @type {HTMLTemplateResult}\n * @memberof ModalTemplate\n */\n private get closeButtonTemplate(): HTMLTemplateResult {\n return html`\n <button\n type=\"button\"\n class=\"close-button\"\n @click=${this.handleCloseButton}\n @keydown=${this.handleCloseButton}\n >\n <ia-icon-close></ia-icon-close>\n </button>\n `;\n }\n\n private get leftNavButtonTemplate(): HTMLTemplateResult {\n return html`<button\n type=\"button\"\n class=\"back-button\"\n @click=${this.handleLeftNavButtonPressed}\n @keydown=${this.handleLeftNavButtonPressed}\n >\n ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}\n </button> `;\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n const modalBorder = css`var(--modalBorder, 2px solid black)`;\n // if the content of the modal is too big to fit on screen, this sets the bottom margin\n // it's not exact, but a close estimation\n const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n return css`\n .processing-logo {\n margin: auto;\n width: ${processingImageSize};\n height: ${processingImageSize};\n }\n\n .processing-logo.hidden {\n height: 1rem;\n }\n\n .processing-logo.hidden ia-activity-indicator {\n display: none;\n }\n\n .modal-wrapper {\n outline: none;\n }\n\n .modal-container {\n border-radius: ${modalCornerRadius};\n width: 100%;\n margin-top: ${modalTopMarginCss};\n }\n\n header {\n position: relative;\n background-color: #36a483;\n color: white;\n border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n border: ${modalBorder};\n border-bottom: 0;\n text-align: center;\n padding-bottom: ${modalHeaderBottomPaddingCss};\n }\n\n .title {\n margin: 0;\n padding: 0;\n font-size: ${titleFontSize};\n font-weight: bold;\n line-height: ${titleLineHeight};\n }\n\n .subtitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n padding-top: 0;\n font-size: ${subtitleFontSize};\n line-height: ${subtitleLineHeight};\n }\n\n .modal-body {\n background-color: #fbfbfd;\n border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n border: ${modalBorder};\n border-top: 0;\n padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n color: #333;\n margin-bottom: 2.5rem;\n min-height: 5rem;\n }\n\n .content {\n overflow-y: auto;\n max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n min-height: 5rem;\n padding: 0 0 calc(${scrollOffset}) 0;\n }\n\n .headline {\n font-size: ${headlineFontSize};\n font-weight: bold;\n text-align: center;\n line-height: ${headlineLineHeight};\n margin: 0;\n padding: 0;\n }\n\n .message {\n margin: 1rem 0 0 0;\n text-align: center;\n font-size: ${messageFontSize};\n line-height: ${messageLineHeight};\n }\n\n .logo-icon {\n border-radius: 100%;\n border: 3px solid #fff;\n box-shadow:\n 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n width: ${modalLogoSize};\n height: ${modalLogoSize};\n margin: -2.9rem auto 0.5rem auto;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .logo-icon svg {\n width: calc(${modalLogoSize} * 0.65);\n height: calc(${modalLogoSize} * 0.65);\n }\n\n .logo-icon svg .fill-color {\n fill: white;\n }\n\n .logo-icon svg .stroke-color {\n stroke: red;\n }\n\n .close-button {\n position: absolute;\n right: 1.2rem;\n top: 1.2rem;\n width: 2rem;\n height: 2rem;\n border-radius: 100%;\n border: 0;\n padding: 0;\n cursor: pointer;\n background-color: white;\n box-shadow:\n 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 4px 4px 0 rgba(0, 0, 0, 0.08);\n }\n\n .back-button {\n position: absolute;\n left: 1.2rem;\n top: 1.2rem;\n height: 2rem;\n background-color: transparent;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: white;\n font-family: inherit;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0.5rem;\n }\n\n .back-button svg {\n height: 1.5rem;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n slot::slotted(.sr-only) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\nimport arrowLeftIcon from './assets/arrow-left-icon';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n /**\n * The ModalConfig that displayed the template\n *\n * @type {ModalConfig}\n * @memberof ModalTemplate\n */\n @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"modal-wrapper\">\n <div class=\"modal-container\">\n <header style=\"background-color: ${this.config.headerColor}\">\n ${this.config.showLeftNavButton\n ? this.leftNavButtonTemplate\n : nothing}\n ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\n : nothing}\n ${this.config.title\n ? html`<h1 class=\"title\">${this.config.title}</h1>`\n : ''}\n ${this.config.subtitle\n ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n : ''}\n </header>\n <section\n class=\"modal-body\"\n style=\"background-color: ${this.config.bodyColor}\"\n >\n <div class=\"content\">\n <div\n class=\"processing-logo ${this.config.showProcessingIndicator\n ? ''\n : 'hidden'}\"\n >\n <ia-activity-indicator\n .mode=${this.config.processingImageMode}\n ></ia-activity-indicator>\n </div>\n ${this.config.headline\n ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n : ''}\n ${this.config.message\n ? html` <p class=\"message\">${this.config.message}</p> `\n : ''}\n\n <div class=\"slot-container\">\n <slot> </slot>\n </div>\n </div>\n </section>\n </div>\n </div>\n `;\n }\n\n /**\n * Dispatch the `closeButtonPressed` event to the consumer\n *\n * @private\n * @memberof ModalTemplate\n */\n private handleCloseButton(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('closeButtonPressed');\n this.dispatchEvent(event);\n }\n\n /**\n * Dispatch the `leftNavButtonPressed` event to the consumer\n *\n * @private\n * @memberof ModalTemplate\n */\n private handleLeftNavButtonPressed(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('leftNavButtonPressed');\n this.dispatchEvent(event);\n }\n\n /**\n * The close button template\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ModalTemplate\n */\n private get closeButtonTemplate(): TemplateResult {\n return html`\n <button\n type=\"button\"\n class=\"close-button\"\n @click=${this.handleCloseButton}\n @keydown=${this.handleCloseButton}\n >\n <ia-icon-close></ia-icon-close>\n </button>\n `;\n }\n\n private get leftNavButtonTemplate(): TemplateResult {\n return html`<button\n type=\"button\"\n class=\"back-button\"\n @click=${this.handleLeftNavButtonPressed}\n @keydown=${this.handleLeftNavButtonPressed}\n >\n ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}\n </button> `;\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n const modalBorder = css`var(--modalBorder, 2px solid black)`;\n // if the content of the modal is too big to fit on screen, this sets the bottom margin\n // it's not exact, but a close estimation\n const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n return css`\n .processing-logo {\n margin: auto;\n width: ${processingImageSize};\n height: ${processingImageSize};\n }\n\n .processing-logo.hidden {\n height: 1rem;\n }\n\n .processing-logo.hidden ia-activity-indicator {\n display: none;\n }\n\n .modal-wrapper {\n outline: none;\n }\n\n .modal-container {\n border-radius: ${modalCornerRadius};\n width: 100%;\n margin-top: ${modalTopMarginCss};\n }\n\n header {\n position: relative;\n background-color: #36a483;\n color: white;\n border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n border: ${modalBorder};\n border-bottom: 0;\n text-align: center;\n padding-bottom: ${modalHeaderBottomPaddingCss};\n }\n\n .title {\n margin: 0;\n padding: 0;\n font-size: ${titleFontSize};\n font-weight: bold;\n line-height: ${titleLineHeight};\n }\n\n .subtitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n padding-top: 0;\n font-size: ${subtitleFontSize};\n line-height: ${subtitleLineHeight};\n }\n\n .modal-body {\n background-color: #fbfbfd;\n border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n border: ${modalBorder};\n border-top: 0;\n padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n color: #333;\n margin-bottom: 2.5rem;\n min-height: 5rem;\n }\n\n .content {\n overflow-y: auto;\n max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n min-height: 5rem;\n padding: 0 0 calc(${scrollOffset}) 0;\n }\n\n .headline {\n font-size: ${headlineFontSize};\n font-weight: bold;\n text-align: center;\n line-height: ${headlineLineHeight};\n margin: 0;\n padding: 0;\n }\n\n .message {\n margin: 1rem 0 0 0;\n text-align: center;\n font-size: ${messageFontSize};\n line-height: ${messageLineHeight};\n }\n\n .logo-icon {\n border-radius: 100%;\n border: 3px solid #fff;\n box-shadow:\n 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n width: ${modalLogoSize};\n height: ${modalLogoSize};\n margin: -2.9rem auto 0.5rem auto;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .logo-icon svg {\n width: calc(${modalLogoSize} * 0.65);\n height: calc(${modalLogoSize} * 0.65);\n }\n\n .logo-icon svg .fill-color {\n fill: white;\n }\n\n .logo-icon svg .stroke-color {\n stroke: red;\n }\n\n .close-button {\n position: absolute;\n right: 1.2rem;\n top: 1.2rem;\n width: 2rem;\n height: 2rem;\n border-radius: 100%;\n border: 0;\n padding: 0;\n cursor: pointer;\n background-color: white;\n box-shadow:\n 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 4px 4px 0 rgba(0, 0, 0, 0.08);\n }\n\n .back-button {\n position: absolute;\n left: 1.2rem;\n top: 1.2rem;\n height: 2rem;\n background-color: transparent;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: white;\n font-family: inherit;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0.5rem;\n }\n\n .back-button svg {\n height: 1.5rem;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n slot::slotted(.sr-only) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}
package/dist/test/modal-manager.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n fixture,\n oneEvent,\n elementUpdated,\n nextFrame,\n fixtureCleanup,\n} from '@open-wc/testing-helpers';\nimport { describe, test, expect, afterEach } from 'vitest';\nimport { HTMLTemplateResult, html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\nimport { getTabbableElements } from '../src/shoelace/tabbable';\n\ndescribe('Modal Manager', () => {\n afterEach(() => {\n fixtureCleanup();\n });\n\n test('defaults to closed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n expect(el.mode).to.equal('closed');\n });\n\n test('can be closed by calling closeModal', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n el.customModalContent = 'foo' as unknown as HTMLTemplateResult;\n await elementUpdated(el);\n\n expect(el.customModalContent).to.equal('foo');\n el.closeModal();\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n expect(el.customModalContent).to.equal(undefined);\n });\n\n test('can be closed by clicking on the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n\n backdrop?.dispatchEvent(clickEvent);\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('emits a modeChanged event when opening', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n\n setTimeout(() => {\n el.showModal({ config });\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('emits a modeChanged event when closing', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n await el.showModal({ config });\n await elementUpdated(el);\n await nextFrame();\n\n setTimeout(() => {\n el.closeModal();\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n });\n\n test('can show a modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n expect(el.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('sets the --containerHeight CSS property when the window resizes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n const event = new Event('resize');\n const propBefore = el.style.getPropertyValue('--containerHeight');\n expect(propBefore).to.equal('');\n window.dispatchEvent(event);\n await elementUpdated(el);\n const propAfter = el.style.getPropertyValue('--containerHeight');\n expect(propAfter).to.not.equal('');\n });\n\n test('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('does not call the userClosedModalCallback when the modal just closes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n el.closeModal();\n await elementUpdated(el);\n expect(callbackCalled).to.equal(false);\n });\n\n test('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.showLeftNavButton = true;\n\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userPressedLeftNavButtonCallback: callback,\n });\n await elementUpdated(el);\n\n const modalTemplate = el.shadowRoot?.querySelector('modal-template');\n expect(modalTemplate).to.exist;\n\n modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('mode is set to closed when close button is pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n const clickEvent = new MouseEvent('click');\n closeButton?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode is set to closed when close button gets spacebar pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });\n closeButton?.dispatchEvent(spacebarEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode remains open when close button gets non-button keypress', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });\n closeButton?.dispatchEvent(keyboardEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n });\n\n test('allows the user to close by clicking on the backdrop if configured to', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = true;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test(\"doesn't allow the user to close by clicking on the backdrop if configured to\", async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.getMode()).to.equal('open');\n });\n\n test('ia logo should not visible on modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.showHeaderLogo = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n expect(logoIcon).to.not.exist;\n });\n\n test('should trap Tab key', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n // Tab once to focus\n const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });\n document.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n const modal = el.shadowRoot?.querySelector('modal-template') as HTMLElement;\n const tabbableElements = getTabbableElements(modal);\n expect(tabbableElements?.length).to.equal(1);\n\n const closeButton = modal?.shadowRoot?.querySelector(\n '.close-button',\n ) as HTMLElement;\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Tab again\n el.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Shift + Tab\n const shiftTabEvent = new KeyboardEvent('keydown', {\n key: 'Tab',\n shiftKey: true,\n });\n document.dispatchEvent(shiftTabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n });\n\n test('returns keyboard focus to the triggering element on close', async () => {\n const config = new ModalConfig();\n const el = (await fixture(html`\n <div>\n <button>Another button</button>\n <button\n id=\"open-modal-btn\"\n @click=${() => {\n const modal = el.querySelector('modal-manager') as ModalManager;\n modal.showModal({ config });\n }}\n >\n Open modal\n </button>\n <modal-manager></modal-manager>\n </div>\n `)) as HTMLDivElement;\n\n const openBtn = el.querySelector('#open-modal-btn') as HTMLButtonElement;\n const modal = el.querySelector('modal-manager') as ModalManager;\n\n // Focus is initially on the Open button\n openBtn.focus();\n expect(document.activeElement).to.equal(openBtn);\n\n // Focus enters the modal when it is opened\n openBtn.click();\n await nextFrame();\n expect(document.activeElement).to.equal(modal);\n\n // With the modal already open, simulate showing different content.\n // This step is to ensure that even if showModal is called multiple times, we still\n // maintain the originally-focused element (subsequent calls do not overwrite it).\n modal.showModal({ config: new ModalConfig() });\n await nextFrame();\n\n // Focus returns to the Open button when the modal closes\n modal.closeModal();\n await modal.updateComplete;\n expect(document.activeElement).to.equal(openBtn);\n });\n});\n"]}
1
+ {"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n fixture,\n oneEvent,\n elementUpdated,\n nextFrame,\n fixtureCleanup,\n} from '@open-wc/testing-helpers';\nimport { describe, test, expect, afterEach } from 'vitest';\nimport { TemplateResult, html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\nimport { getTabbableElements } from '../src/shoelace/tabbable';\n\ndescribe('Modal Manager', () => {\n afterEach(() => {\n fixtureCleanup();\n });\n\n test('defaults to closed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n expect(el.mode).to.equal('closed');\n });\n\n test('can be closed by calling closeModal', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n el.customModalContent = 'foo' as unknown as TemplateResult;\n await elementUpdated(el);\n\n expect(el.customModalContent).to.equal('foo');\n el.closeModal();\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n expect(el.customModalContent).to.equal(undefined);\n });\n\n test('can be closed by clicking on the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n\n backdrop?.dispatchEvent(clickEvent);\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('emits a modeChanged event when opening', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n\n setTimeout(() => {\n el.showModal({ config });\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('emits a modeChanged event when closing', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n await el.showModal({ config });\n await elementUpdated(el);\n await nextFrame();\n\n setTimeout(() => {\n el.closeModal();\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n });\n\n test('can show a modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n expect(el.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('sets the --containerHeight CSS property when the window resizes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n const event = new Event('resize');\n const propBefore = el.style.getPropertyValue('--containerHeight');\n expect(propBefore).to.equal('');\n window.dispatchEvent(event);\n await elementUpdated(el);\n const propAfter = el.style.getPropertyValue('--containerHeight');\n expect(propAfter).to.not.equal('');\n });\n\n test('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('does not call the userClosedModalCallback when the modal just closes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n el.closeModal();\n await elementUpdated(el);\n expect(callbackCalled).to.equal(false);\n });\n\n test('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.showLeftNavButton = true;\n\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userPressedLeftNavButtonCallback: callback,\n });\n await elementUpdated(el);\n\n const modalTemplate = el.shadowRoot?.querySelector('modal-template');\n expect(modalTemplate).to.exist;\n\n modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('mode is set to closed when close button is pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n const clickEvent = new MouseEvent('click');\n closeButton?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode is set to closed when close button gets spacebar pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });\n closeButton?.dispatchEvent(spacebarEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode remains open when close button gets non-button keypress', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });\n closeButton?.dispatchEvent(keyboardEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n });\n\n test('allows the user to close by clicking on the backdrop if configured to', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = true;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test(\"doesn't allow the user to close by clicking on the backdrop if configured to\", async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.getMode()).to.equal('open');\n });\n\n test('ia logo should not visible on modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.showHeaderLogo = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n expect(logoIcon).to.not.exist;\n });\n\n test('should trap Tab key', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n // Tab once to focus\n const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });\n document.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n const modal = el.shadowRoot?.querySelector('modal-template') as HTMLElement;\n const tabbableElements = getTabbableElements(modal);\n expect(tabbableElements?.length).to.equal(1);\n\n const closeButton = modal?.shadowRoot?.querySelector(\n '.close-button',\n ) as HTMLElement;\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Tab again\n el.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Shift + Tab\n const shiftTabEvent = new KeyboardEvent('keydown', {\n key: 'Tab',\n shiftKey: true,\n });\n document.dispatchEvent(shiftTabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n });\n\n test('returns keyboard focus to the triggering element on close', async () => {\n const config = new ModalConfig();\n const el = (await fixture(html`\n <div>\n <button>Another button</button>\n <button\n id=\"open-modal-btn\"\n @click=${() => {\n const modal = el.querySelector('modal-manager') as ModalManager;\n modal.showModal({ config });\n }}\n >\n Open modal\n </button>\n <modal-manager></modal-manager>\n </div>\n `)) as HTMLDivElement;\n\n const openBtn = el.querySelector('#open-modal-btn') as HTMLButtonElement;\n const modal = el.querySelector('modal-manager') as ModalManager;\n\n // Focus is initially on the Open button\n openBtn.focus();\n expect(document.activeElement).to.equal(openBtn);\n\n // Focus enters the modal when it is opened\n openBtn.click();\n await nextFrame();\n expect(document.activeElement).to.equal(modal);\n\n // With the modal already open, simulate showing different content.\n // This step is to ensure that even if showModal is called multiple times, we still\n // maintain the originally-focused element (subsequent calls do not overwrite it).\n modal.showModal({ config: new ModalConfig() });\n await nextFrame();\n\n // Focus returns to the Open button when the modal closes\n modal.closeModal();\n await modal.updateComplete;\n expect(document.activeElement).to.equal(openBtn);\n });\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/modal-manager",
3
- "version": "2.0.5-webdev-8155.4",
3
+ "version": "2.0.5-webdev-8155.8",
4
4
  "description": "A Modal Manager Web Component",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
28
  "@internetarchive/ia-activity-indicator": "^0.0.6",
29
29
  "@internetarchive/icon-close": "^1.4.0",
30
30
  "@internetarchive/icon-user": "^1.4.0",
31
- "lit": "^2.8.0",
31
+ "lit": "^2.7.0 || ^3.0.0",
32
32
  "throttle-debounce": "^5.0.2"
33
33
  },
34
34
  "devDependencies": {
package/src/modal-config.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { HTMLTemplateResult } from 'lit';
1
+ import type { TemplateResult } from 'lit';
2
2
 
3
3
  /**
4
4
  * Configuration to show a modal
@@ -10,34 +10,34 @@ export class ModalConfig {
10
10
  /**
11
11
  * The title that shows in the header
12
12
  *
13
- * @type {(HTMLTemplateResult | string | undefined)}
13
+ * @type {(TemplateResult | undefined)}
14
14
  * @memberof ModalConfig
15
15
  */
16
- title?: HTMLTemplateResult | string;
16
+ title?: TemplateResult;
17
17
 
18
18
  /**
19
19
  * The subtitle shown in the header under the title
20
20
  *
21
- * @type {(HTMLTemplateResult | string | undefined)}
21
+ * @type {(TemplateResult | undefined)}
22
22
  * @memberof ModalConfig
23
23
  */
24
- subtitle?: HTMLTemplateResult | string;
24
+ subtitle?: TemplateResult;
25
25
 
26
26
  /**
27
27
  * The headline shown at the top of the content section
28
28
  *
29
- * @type {(HTMLTemplateResult | string | undefined)}
29
+ * @type {(TemplateResult | undefined)}
30
30
  * @memberof ModalConfig
31
31
  */
32
- headline?: HTMLTemplateResult | string;
32
+ headline?: TemplateResult;
33
33
 
34
34
  /**
35
35
  * The text shown below the headline in the content section
36
36
  *
37
- * @type {(HTMLTemplateResult | string | undefined)}
37
+ * @type {(TemplateResult | undefined)}
38
38
  * @memberof ModalConfig
39
39
  */
40
- message?: HTMLTemplateResult | string;
40
+ message?: TemplateResult;
41
41
 
42
42
  /**
43
43
  * The background color of the header
@@ -101,10 +101,10 @@ export class ModalConfig {
101
101
  closeOnBackdropClick: boolean;
102
102
 
103
103
  constructor(options?: {
104
- title?: HTMLTemplateResult | string;
105
- subtitle?: HTMLTemplateResult | string;
106
- headline?: HTMLTemplateResult | string;
107
- message?: HTMLTemplateResult | string;
104
+ title?: TemplateResult;
105
+ subtitle?: TemplateResult;
106
+ headline?: TemplateResult;
107
+ message?: TemplateResult;
108
108
  headerColor?: string;
109
109
  bodyColor?: string;
110
110
  showProcessingIndicator?: boolean;
package/src/modal-manager.ts CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  html,
4
4
  css,
5
5
  CSSResult,
6
- HTMLTemplateResult,
6
+ TemplateResult,
7
7
  PropertyValues,
8
8
  } from 'lit';
9
9
  import { property, customElement, query } from 'lit/decorators.js';
@@ -35,10 +35,10 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
35
35
  /**
36
36
  * Custom content to display in the modal's content slot
37
37
  *
38
- * @type {(HTMLTemplateResult | undefined)}
38
+ * @type {(TemplateResult | undefined)}
39
39
  * @memberof ModalManager
40
40
  */
41
- @property({ type: Object }) customModalContent?: HTMLTemplateResult;
41
+ @property({ type: Object }) customModalContent?: TemplateResult;
42
42
 
43
43
  /**
44
44
  * This hostBridge handles environmental-specific interactions such as adding classes
@@ -87,7 +87,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
87
87
  }
88
88
 
89
89
  /** @inheritdoc */
90
- render(): HTMLTemplateResult {
90
+ render(): TemplateResult {
91
91
  return html`
92
92
  <div class="container">
93
93
  <div class="backdrop" @click=${this.backdropClicked}></div>
@@ -180,7 +180,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
180
180
  /** @inheritdoc */
181
181
  async showModal(options: {
182
182
  config: ModalConfig;
183
- customModalContent?: HTMLTemplateResult;
183
+ customModalContent?: TemplateResult;
184
184
  userClosedModalCallback?: () => void;
185
185
  userPressedLeftNavButtonCallback?: () => void;
186
186
  }): Promise<void> {
package/src/modal-template.ts CHANGED
@@ -1,11 +1,4 @@
1
- import {
2
- LitElement,
3
- html,
4
- css,
5
- CSSResult,
6
- HTMLTemplateResult,
7
- nothing,
8
- } from 'lit';
1
+ import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';
9
2
  import { property, customElement } from 'lit/decorators.js';
10
3
 
11
4
  import '@internetarchive/ia-activity-indicator';
@@ -26,7 +19,7 @@ export class ModalTemplate extends LitElement {
26
19
  @property({ type: Object }) config: ModalConfig = new ModalConfig();
27
20
 
28
21
  /** @inheritdoc */
29
- render(): HTMLTemplateResult {
22
+ render(): TemplateResult {
30
23
  return html`
31
24
  <div class="modal-wrapper">
32
25
  <div class="modal-container">
@@ -119,10 +112,10 @@ export class ModalTemplate extends LitElement {
119
112
  *
120
113
  * @readonly
121
114
  * @private
122
- * @type {HTMLTemplateResult}
115
+ * @type {TemplateResult}
123
116
  * @memberof ModalTemplate
124
117
  */
125
- private get closeButtonTemplate(): HTMLTemplateResult {
118
+ private get closeButtonTemplate(): TemplateResult {
126
119
  return html`
127
120
  <button
128
121
  type="button"
@@ -135,7 +128,7 @@ export class ModalTemplate extends LitElement {
135
128
  `;
136
129
  }
137
130
 
138
- private get leftNavButtonTemplate(): HTMLTemplateResult {
131
+ private get leftNavButtonTemplate(): TemplateResult {
139
132
  return html`<button
140
133
  type="button"
141
134
  class="back-button"
package/test/modal-manager.test.ts CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  fixtureCleanup,
7
7
  } from '@open-wc/testing-helpers';
8
8
  import { describe, test, expect, afterEach } from 'vitest';
9
- import { HTMLTemplateResult, html } from 'lit';
9
+ import { TemplateResult, html } from 'lit';
10
10
 
11
11
  import '../src/modal-manager';
12
12
  import { ModalConfig } from '../src/modal-config';
@@ -34,7 +34,7 @@ describe('Modal Manager', () => {
34
34
  <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
35
35
  `)) as ModalManager;
36
36
 
37
- el.customModalContent = 'foo' as unknown as HTMLTemplateResult;
37
+ el.customModalContent = 'foo' as unknown as TemplateResult;
38
38
  await elementUpdated(el);
39
39
 
40
40
  expect(el.customModalContent).to.equal('foo');