@internetarchive/modal-manager 2.0.5-webdev-8155.6 → 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 (7) hide show
  1. package/demo/app-root.ts +16 -16
  2. package/dist/demo/app-root.js +16 -16
  3. package/dist/demo/app-root.js.map +1 -1
  4. package/dist/src/modal-config.d.ts +12 -12
  5. package/dist/src/modal-config.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/modal-config.ts +12 -12
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.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/modal-config.d.ts CHANGED
@@ -9,31 +9,31 @@ export declare class ModalConfig {
9
9
  /**
10
10
  * The title that shows in the header
11
11
  *
12
- * @type {(TemplateResult | string | undefined)}
12
+ * @type {(TemplateResult | undefined)}
13
13
  * @memberof ModalConfig
14
14
  */
15
- title?: TemplateResult | string;
15
+ title?: TemplateResult;
16
16
  /**
17
17
  * The subtitle shown in the header under the title
18
18
  *
19
- * @type {(TemplateResult | string | undefined)}
19
+ * @type {(TemplateResult | undefined)}
20
20
  * @memberof ModalConfig
21
21
  */
22
- subtitle?: TemplateResult | string;
22
+ subtitle?: TemplateResult;
23
23
  /**
24
24
  * The headline shown at the top of the content section
25
25
  *
26
- * @type {(TemplateResult | string | undefined)}
26
+ * @type {(TemplateResult | undefined)}
27
27
  * @memberof ModalConfig
28
28
  */
29
- headline?: TemplateResult | string;
29
+ headline?: TemplateResult;
30
30
  /**
31
31
  * The text shown below the headline in the content section
32
32
  *
33
- * @type {(TemplateResult | string | undefined)}
33
+ * @type {(TemplateResult | undefined)}
34
34
  * @memberof ModalConfig
35
35
  */
36
- message?: TemplateResult | 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?: TemplateResult | string;
91
- subtitle?: TemplateResult | string;
92
- headline?: TemplateResult | string;
93
- message?: TemplateResult | 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 { 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 | string | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult | string;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult | string;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult | string;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult | 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?: TemplateResult | string;\n subtitle?: TemplateResult | string;\n headline?: TemplateResult | string;\n message?: TemplateResult | 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/modal-manager",
3
- "version": "2.0.5-webdev-8155.6",
3
+ "version": "2.0.5-webdev-8155.8",
4
4
  "description": "A Modal Manager Web Component",
5
5
  "repository": {
6
6
  "type": "git",
package/src/modal-config.ts CHANGED
@@ -10,34 +10,34 @@ export class ModalConfig {
10
10
  /**
11
11
  * The title that shows in the header
12
12
  *
13
- * @type {(TemplateResult | string | undefined)}
13
+ * @type {(TemplateResult | undefined)}
14
14
  * @memberof ModalConfig
15
15
  */
16
- title?: TemplateResult | string;
16
+ title?: TemplateResult;
17
17
 
18
18
  /**
19
19
  * The subtitle shown in the header under the title
20
20
  *
21
- * @type {(TemplateResult | string | undefined)}
21
+ * @type {(TemplateResult | undefined)}
22
22
  * @memberof ModalConfig
23
23
  */
24
- subtitle?: TemplateResult | string;
24
+ subtitle?: TemplateResult;
25
25
 
26
26
  /**
27
27
  * The headline shown at the top of the content section
28
28
  *
29
- * @type {(TemplateResult | string | undefined)}
29
+ * @type {(TemplateResult | undefined)}
30
30
  * @memberof ModalConfig
31
31
  */
32
- headline?: TemplateResult | string;
32
+ headline?: TemplateResult;
33
33
 
34
34
  /**
35
35
  * The text shown below the headline in the content section
36
36
  *
37
- * @type {(TemplateResult | string | undefined)}
37
+ * @type {(TemplateResult | undefined)}
38
38
  * @memberof ModalConfig
39
39
  */
40
- message?: TemplateResult | 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?: TemplateResult | string;
105
- subtitle?: TemplateResult | string;
106
- headline?: TemplateResult | string;
107
- message?: TemplateResult | 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;