npm - @internetarchive/modal-manager - Versions diffs - 2.0.2 → 2.0.4-alpha-webdev7960.0 - Mend

@internetarchive/modal-manager 2.0.2 → 2.0.4-alpha-webdev7960.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/.editorconfig +29 -29
package/.eslintrc.js +14 -14
package/.github/workflows/ci.yml +30 -30
package/.github/workflows/gh-pages-main.yml +42 -42
package/.github/workflows/pr-preview.yml +40 -40
package/LICENSE +661 -661
package/README.md +139 -139
package/custom-elements.json +170 -170
package/dist/index.d.ts +7 -7
package/dist/index.js +5 -5
package/dist/index.js.map +1 -1
package/dist/src/assets/arrow-left-icon.d.ts +2 -0
package/dist/src/assets/arrow-left-icon.js +15 -0
package/dist/src/assets/arrow-left-icon.js.map +1 -0
package/dist/src/assets/ia-logo-icon.d.ts +2 -2
package/dist/src/assets/ia-logo-icon.js +29 -29
package/dist/src/assets/ia-logo-icon.js.map +1 -1
package/dist/src/modal-config.d.ts +104 -92
package/dist/src/modal-config.js +24 -22
package/dist/src/modal-config.js.map +1 -1
package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
package/dist/src/modal-manager-host-bridge-interface.js +1 -1
package/dist/src/modal-manager-host-bridge-interface.js.map +1 -1
package/dist/src/modal-manager-host-bridge.d.ts +34 -34
package/dist/src/modal-manager-host-bridge.js +62 -62
package/dist/src/modal-manager-host-bridge.js.map +1 -1
package/dist/src/modal-manager-interface.d.ts +27 -25
package/dist/src/modal-manager-interface.js +1 -1
package/dist/src/modal-manager-interface.js.map +1 -1
package/dist/src/modal-manager-mode.d.ts +10 -10
package/dist/src/modal-manager-mode.js +11 -11
package/dist/src/modal-manager-mode.js.map +1 -1
package/dist/src/modal-manager.d.ts +137 -112
package/dist/src/modal-manager.js +247 -218
package/dist/src/modal-manager.js.map +1 -1
package/dist/src/modal-template.d.ts +41 -33
package/dist/src/modal-template.js +335 -282
package/dist/src/modal-template.js.map +1 -1
package/dist/src/shoelace/active-elements.d.ts +15 -15
package/dist/src/shoelace/active-elements.js +27 -27
package/dist/src/shoelace/active-elements.js.map +1 -1
package/dist/src/shoelace/modal.d.ts +24 -24
package/dist/src/shoelace/modal.js +131 -131
package/dist/src/shoelace/modal.js.map +1 -1
package/dist/src/shoelace/tabbable.d.ts +9 -9
package/dist/src/shoelace/tabbable.js +169 -169
package/dist/src/shoelace/tabbable.js.map +1 -1
package/dist/test/modal-config.test.d.ts +1 -1
package/dist/test/modal-config.test.js +69 -61
package/dist/test/modal-config.test.js.map +1 -1
package/dist/test/modal-manager.test.d.ts +1 -1
package/dist/test/modal-manager.test.js +274 -252
package/dist/test/modal-manager.test.js.map +1 -1
package/dist/test/modal-template.test.d.ts +1 -1
package/dist/test/modal-template.test.js +178 -106
package/dist/test/modal-template.test.js.map +1 -1
package/dist/vite.config.d.ts +2 -2
package/dist/vite.config.js +22 -22
package/dist/vite.config.js.map +1 -1
package/docs/assets/css/main.css +2678 -2678
package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
package/docs/globals.html +150 -150
package/docs/index.html +252 -252
package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
package/docs/modules/_index_.html +208 -208
package/docs/modules/_src_modal_config_.html +146 -146
package/docs/modules/_src_modal_manager_.html +146 -146
package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
package/docs/modules/_src_modal_manager_interface_.html +146 -146
package/docs/modules/_src_modal_manager_mode_.html +146 -146
package/docs/modules/_src_modal_template_.html +146 -146
package/docs/modules/_test_modal_config_test_.html +106 -106
package/docs/modules/_test_modal_manager_test_.html +106 -106
package/docs/modules/_test_modal_template_test_.html +106 -106
package/index.html +300 -282
package/index.ts +7 -7
package/karma.conf.js +24 -24
package/package.json +85 -85
package/renovate.json +7 -7
package/src/assets/arrow-left-icon.ts +15 -0
package/src/assets/ia-logo-icon.ts +30 -30
package/src/modal-config.ts +133 -117
package/src/modal-manager-host-bridge-interface.ts +13 -13
package/src/modal-manager-host-bridge.ts +82 -82
package/src/modal-manager-interface.ts +30 -28
package/src/modal-manager-mode.ts +10 -10
package/src/modal-manager.ts +303 -258
package/src/modal-template.ts +343 -287
package/src/shoelace/LICENSE.md +6 -6
package/src/shoelace/active-elements.ts +33 -33
package/src/shoelace/modal.ts +166 -166
package/src/shoelace/tabbable.ts +223 -223
package/test/modal-config.test.ts +77 -69
package/test/modal-manager.test.ts +347 -319
package/test/modal-template.test.ts +206 -124
package/tsconfig.json +21 -21
package/vite.config.ts +23 -23

package/index.html CHANGED Viewed

@@ -1,282 +1,300 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    html {
-      font-size: 10px;
-    }
-    body {
-      margin: 0;
-      padding: 75px 10px 0 10px;
-      font-family: Arial, Helvetica, sans-serif;
-    }
-    body.modal-manager-open {
-      overflow: hidden;
-    }
-    modal-manager {
-      display: none;
-      --modalTitleLineHeight: 4.5rem;
-    }
-    modal-manager[mode='open'] {
-      display: block;
-    }
-    #demo {
-      margin: 0;
-      padding: 0;
-    }
-    .actions {
-      position: fixed;
-      background-color: rgba(255, 255, 255, 0.9);
-      border: 1px solid black;
-      padding: 10px;
-      top: 10px;
-      left: 10px;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo">
-  </div>
-  <script type="module">
-    import { html, render } from 'lit';
-    import './dist/index.js';
-    import { ModalConfig } from './dist/index.js';
-    /* eslint-disable @typescript-eslint/explicit-function-return-type */
-    render(
-      html`
-        <modal-manager>
-          <div slot="slot-content-demo">
-            <p>Slotted Content</p>
-          </div>
-        </modal-manager>
-        <div class="actions">
-          <button @click=${showModal}>Modal</button>
-          <button @click=${showAllFeaturesModal}>All Features</button>
-          <button @click=${showErrorModal}>Error Modal</button>
-          <button @click=${showCustomContentModal}>Custom Content Modal</button>
-          <button @click=${showSlottedContentModal}>Slotted Content Modal</button>
-          <button @click=${showProcessingModal}>Processing Modal</button>
-          <button @click=${showCompleteModal}>Processing Complete Modal</button>
-          <button @click=${showUserClosedModalCallbackModal}>Modal Closed Callback</button>
-          <button @click=${showModalUserCannotClose}>Unclosable Modal</button>
-          <button @click=${showModalUserCannotClickBackdrop}>Unclickable Backdrop</button>
-          <button @click=${showOverflowModal}>Text-heavy Modal</button>
-          <button @click=${showModalWithoutLogo}>Modal Without Logo</button>
-        </div>
-        <h3>Some Content</h3>
-        <img src="./assets/images/200x200.jpg" style="float:right" />
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor scelerisque quam, sit amet porta tortor consectetur non. Cras sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.</p>
-        <p>In laoreet scelerisque tortor, at convallis nisl efficitur vehicula. Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in lacus fermentum tristique. In porttitor malesuada sapien non posuere. Phasellus mollis mauris ultrices est consectetur, id pulvinar magna suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam cursus posuere ultricies.</p>
-        <p>Maecenas porta ac nulla sed vestibulum. Suspendisse aliquam fermentum mi, id luctus tortor aliquet gravida. Maecenas sed tincidunt quam. Mauris cursus ante sit amet enim egestas, vitae pellentesque metus hendrerit. Sed quis tortor id dui mollis blandit quis ac nunc. Suspendisse tincidunt nisl quis nunc tincidunt, et finibus ipsum elementum. Maecenas congue, neque eget volutpat pulvinar, augue nisl interdum elit, et porta mi augue ut sapien.</p>
-        <p>Fusce vel imperdiet justo. Aenean sollicitudin blandit nunc. Cras vitae orci id lorem condimentum tempor. Aliquam ac lectus sed mi suscipit sollicitudin at convallis nisl. Sed semper elementum sagittis. Nam fermentum nulla velit, non tempor massa fermentum non. Duis id ante eget elit gravida semper ac quis ligula. Duis vel libero ligula. Curabitur tempor sed velit nec egestas. Vivamus sit amet volutpat purus. Integer imperdiet mattis erat, vitae dignissim odio accumsan quis. Fusce bibendum lectus quis est molestie, eget scelerisque elit interdum. Etiam imperdiet a leo vitae ultricies. Etiam pretium quam eget sem mollis, quis elementum libero vulputate. Praesent aliquet dictum augue a luctus.</p>
-        <p>Maecenas vulputate iaculis mauris nec lobortis. Sed nibh ante, vehicula nec varius et, condimentum in massa. Curabitur a turpis porta, auctor magna in, iaculis ante. Suspendisse potenti. Donec massa orci, sollicitudin in nulla ut, fringilla dignissim elit. Suspendisse porttitor lorem nec sem volutpat ullamcorper. Curabitur blandit est tristique velit pharetra rhoncus. Aliquam vitae mauris ex.</p>
-      `,
-      document.querySelector('#demo')
-    );
-    const modalManager = document.querySelector('modal-manager');
-    function showModal() {
-      const config = new ModalConfig();
-      config.headline = 'Success';
-      config.message = 'Thank you for your support!';
-      modalManager.showModal({
-        config
-      });
-    }
-    function showErrorModal() {
-      const config = new ModalConfig();
-      config.headline = 'Error'
-      config.message = 'An error occurred while processing your donation.';
-      config.headerColor = '#691916';
-      config.bodyColor = '#fff';
-      modalManager.showModal({
-        config
-      });
-    }
-    function showBillAlert() {
-      alert('Bill <3 You');
-    }
-    function buttonPress() {
-      alert('You pressed a button.');
-    }
-    function showAllFeaturesModal() {
-      const config = new ModalConfig();
-      config.title = html`Donation Received`;
-      config.subtitle = html`Thanks a bunch!`;
-      config.headline = html`A Headline that catches attention and might spill over to multiple lines!`;
-      config.message = html`A long informative message for your users that let them know about something`;
-      config.headerColor = 'purple';
-      config.showProcessingIndicator = true;
-      config.processingImageMode = 'done';
-      const someContent = html`
-        <div style="text-align: center; margin-top: 10px;">
-          <button @click=${buttonPress}>I'm A Button To Press</button>
-        </div>
-      `;
-      modalManager.showModal({
-        config,
-        customModalContent: someContent
-      });
-    }
-    function showCustomContentModal() {
-      const config = new ModalConfig();
-      config.title = 'Custom Content';
-      config.headline = html`<span class="sr-only">Also support screen-reader only</span>`;
-      const someContent = html`
-        <style>a:focus {
-         outline: 2px solid blue;
-        }
-        </style>
-        Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
-        <span class="sr-only">Also support screen-reader only</span>
-        <div style="text-align: center">
-          <a href="https://www.billmurraystory.com/" style="display: block;">Bill Murray Stories</a>
-          <img src="./assets/images/100x100.jpg" @click=${showBillAlert} />
-        </div>
-      `;
-      modalManager.showModal({
-        config,
-        customModalContent: someContent
-      });
-    }
-    function showSlottedContentModal() {
-      const config = new ModalConfig();
-      config.title = 'Slotted Content';
-      const someContent = html`
-        Can slot content from the top-level:
-        <slot name="slot-content-demo"></slot>
-      `;
-      modalManager.showModal({
-        config,
-        customModalContent: someContent
-      });
-    }
-    function showOverflowModal() {
-      const config = new ModalConfig();
-      config.title = html`Lorem Ipsum`;
-      config.subtitle = html`Subtitle`;
-      config.headline = html`Everything Important`;
-      config.message = html`
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor scelerisque quam, sit amet porta tortor consectetur non. Cras sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.</p>
-      <p>In laoreet scelerisque tortor, at convallis nisl efficitur vehicula. Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in lacus fermentum tristique. In porttitor malesuada sapien non posuere. Phasellus mollis mauris ultrices est consectetur, id pulvinar magna suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam cursus posuere ultricies.</p>
-      `;
-      config.headerColor = '#36A483';
-      modalManager.showModal({
-        config
-      });
-    }
-    function showModalWithoutLogo() {
-      const config = new ModalConfig();
-      config.headline = 'Success';
-      config.title = html`Donation Received`;
-      config.message = 'Thank you for your support!';
-      config.headerColor = '#194880';
-      config.showHeaderLogo = false;
-      modalManager.showModal({
-        config
-      });
-    }
-    function showCompleteModal() {
-      const config = new ModalConfig();
-      config.showProcessingIndicator = true;
-      config.processingImageMode = 'complete';
-      modalManager.showModal({
-        config
-      });
-    }
-    function showProcessingModal() {
-      const config = new ModalConfig();
-      config.headerColor = '#497fbf';
-      config.showProcessingIndicator = true;
-      config.processingImageMode = 'processing';
-      config.showCloseButton = false;
-      config.closeOnBackdropClick = false;
-      modalManager.showModal({
-        config
-      });
-      setTimeout(showCompleteModal, 1500);
-    }
-    function showUserClosedModalCallbackModal() {
-      const config = new ModalConfig();
-      config.message = 'When you close this modal another will open.'
-      modalManager.showModal({
-        config,
-        userClosedModalCallback: () => {
-          const config = new ModalConfig();
-          config.message = 'I\'m another modal';
-          config.headerColor = '#497fbf';
-          modalManager.showModal({ config });
-        }
-      });
-    }
-    function showModalUserCannotClose() {
-      const config = new ModalConfig();
-      config.message = 'User cannot close this. Will close automatically in 2 seconds.';
-      config.showCloseButton = false;
-      config.closeOnBackdropClick = false;
-      modalManager.showModal({
-        config
-      });
-      setTimeout(modalManager.closeModal.bind(modalManager), 2000);
-    }
-    function showModalUserCannotClickBackdrop() {
-      const config = new ModalConfig();
-      config.message = 'Clicking on the backdrop will not close this.';
-      config.showCloseButton = true;
-      config.closeOnBackdropClick = false;
-      modalManager.showModal({
-        config
-      });
-    }
-  </script>
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    html {
+      font-size: 10px;
+    }
+    body {
+      margin: 0;
+      padding: 75px 10px 0 10px;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+    modal-manager {
+      display: none;
+      --modalTitleLineHeight: 4.5rem;
+    }
+    modal-manager[mode='open'] {
+      display: block;
+    }
+    #demo {
+      margin: 0;
+      padding: 0;
+    }
+    .actions {
+      position: fixed;
+      background-color: rgba(255, 255, 255, 0.9);
+      border: 1px solid black;
+      padding: 10px;
+      top: 10px;
+      left: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo">
+  </div>
+  <script type="module">
+    import { html, render } from 'lit';
+    import './dist/index.js';
+    import { ModalConfig } from './dist/index.js';
+    /* eslint-disable @typescript-eslint/explicit-function-return-type */
+    render(
+      html`
+        <modal-manager>
+          <div slot="slot-content-demo">
+            <p>Slotted Content</p>
+          </div>
+        </modal-manager>
+        <div class="actions">
+          <button @click=${showModal}>Modal</button>
+          <button @click=${showAllFeaturesModal}>All Features</button>
+          <button @click=${showErrorModal}>Error Modal</button>
+          <button @click=${showCustomContentModal}>Custom Content Modal</button>
+          <button @click=${showSlottedContentModal}>Slotted Content Modal</button>
+          <button @click=${showProcessingModal}>Processing Modal</button>
+          <button @click=${showCompleteModal}>Processing Complete Modal</button>
+          <button @click=${showUserClosedModalCallbackModal}>Modal Closed Callback</button>
+          <button @click=${showModalUserCannotClose}>Unclosable Modal</button>
+          <button @click=${showModalUserCannotClickBackdrop}>Unclickable Backdrop</button>
+          <button @click=${showOverflowModal}>Text-heavy Modal</button>
+          <button @click=${showModalWithoutLogo}>Modal Without Logo</button>
+          <button @click=${showModalWithLeftNavButton}>Modal With Left Nav Button</button>
+        </div>
+        <h3>Some Content</h3>
+        <img src="./assets/images/200x200.jpg" style="float:right" />
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor scelerisque quam, sit amet porta tortor consectetur non. Cras sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.</p>
+        <p>In laoreet scelerisque tortor, at convallis nisl efficitur vehicula. Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in lacus fermentum tristique. In porttitor malesuada sapien non posuere. Phasellus mollis mauris ultrices est consectetur, id pulvinar magna suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam cursus posuere ultricies.</p>
+        <p>Maecenas porta ac nulla sed vestibulum. Suspendisse aliquam fermentum mi, id luctus tortor aliquet gravida. Maecenas sed tincidunt quam. Mauris cursus ante sit amet enim egestas, vitae pellentesque metus hendrerit. Sed quis tortor id dui mollis blandit quis ac nunc. Suspendisse tincidunt nisl quis nunc tincidunt, et finibus ipsum elementum. Maecenas congue, neque eget volutpat pulvinar, augue nisl interdum elit, et porta mi augue ut sapien.</p>
+        <p>Fusce vel imperdiet justo. Aenean sollicitudin blandit nunc. Cras vitae orci id lorem condimentum tempor. Aliquam ac lectus sed mi suscipit sollicitudin at convallis nisl. Sed semper elementum sagittis. Nam fermentum nulla velit, non tempor massa fermentum non. Duis id ante eget elit gravida semper ac quis ligula. Duis vel libero ligula. Curabitur tempor sed velit nec egestas. Vivamus sit amet volutpat purus. Integer imperdiet mattis erat, vitae dignissim odio accumsan quis. Fusce bibendum lectus quis est molestie, eget scelerisque elit interdum. Etiam imperdiet a leo vitae ultricies. Etiam pretium quam eget sem mollis, quis elementum libero vulputate. Praesent aliquet dictum augue a luctus.</p>
+        <p>Maecenas vulputate iaculis mauris nec lobortis. Sed nibh ante, vehicula nec varius et, condimentum in massa. Curabitur a turpis porta, auctor magna in, iaculis ante. Suspendisse potenti. Donec massa orci, sollicitudin in nulla ut, fringilla dignissim elit. Suspendisse porttitor lorem nec sem volutpat ullamcorper. Curabitur blandit est tristique velit pharetra rhoncus. Aliquam vitae mauris ex.</p>
+      `,
+      document.querySelector('#demo')
+    );
+    const modalManager = document.querySelector('modal-manager');
+    function showModal() {
+      const config = new ModalConfig();
+      config.headline = 'Success';
+      config.message = 'Thank you for your support!';
+      modalManager.showModal({
+        config
+      });
+    }
+    function showErrorModal() {
+      const config = new ModalConfig();
+      config.headline = 'Error'
+      config.message = 'An error occurred while processing your donation.';
+      config.headerColor = '#691916';
+      config.bodyColor = '#fff';
+      modalManager.showModal({
+        config
+      });
+    }
+    function showBillAlert() {
+      alert('Bill <3 You');
+    }
+    function buttonPress() {
+      alert('You pressed a button.');
+    }
+    function showAllFeaturesModal() {
+      const config = new ModalConfig();
+      config.title = html`Donation Received`;
+      config.subtitle = html`Thanks a bunch!`;
+      config.headline = html`A Headline that catches attention and might spill over to multiple lines!`;
+      config.message = html`A long informative message for your users that let them know about something`;
+      config.headerColor = 'purple';
+      config.showProcessingIndicator = true;
+      config.processingImageMode = 'done';
+      const someContent = html`
+        <div style="text-align: center; margin-top: 10px;">
+          <button @click=${buttonPress}>I'm A Button To Press</button>
+        </div>
+      `;
+      modalManager.showModal({
+        config,
+        customModalContent: someContent
+      });
+    }
+    function showCustomContentModal() {
+      const config = new ModalConfig();
+      config.title = 'Custom Content';
+      config.headline = html`<span class="sr-only">Also support screen-reader only</span>`;
+      const someContent = html`
+        <style>a:focus {
+         outline: 2px solid blue;
+        }
+        </style>
+        Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
+        <span class="sr-only">Also support screen-reader only</span>
+        <div style="text-align: center">
+          <a href="https://www.billmurraystory.com/" style="display: block;">Bill Murray Stories</a>
+          <img src="./assets/images/100x100.jpg" @click=${showBillAlert} />
+        </div>
+      `;
+      modalManager.showModal({
+        config,
+        customModalContent: someContent
+      });
+    }
+    function showSlottedContentModal() {
+      const config = new ModalConfig();
+      config.title = 'Slotted Content';
+      const someContent = html`
+        Can slot content from the top-level:
+        <slot name="slot-content-demo"></slot>
+      `;
+      modalManager.showModal({
+        config,
+        customModalContent: someContent
+      });
+    }
+    function showOverflowModal() {
+      const config = new ModalConfig();
+      config.title = html`Lorem Ipsum`;
+      config.subtitle = html`Subtitle`;
+      config.headline = html`Everything Important`;
+      config.message = html`
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor scelerisque quam, sit amet porta tortor consectetur non. Cras sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.</p>
+      <p>In laoreet scelerisque tortor, at convallis nisl efficitur vehicula. Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in lacus fermentum tristique. In porttitor malesuada sapien non posuere. Phasellus mollis mauris ultrices est consectetur, id pulvinar magna suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam cursus posuere ultricies.</p>
+      `;
+      config.headerColor = '#36A483';
+      modalManager.showModal({
+        config
+      });
+    }
+    function showModalWithoutLogo() {
+      const config = new ModalConfig();
+      config.headline = 'Success';
+      config.title = html`Donation Received`;
+      config.message = 'Thank you for your support!';
+      config.headerColor = '#194880';
+      config.showHeaderLogo = false;
+      modalManager.showModal({
+        config
+      });
+    }
+    function showCompleteModal() {
+      const config = new ModalConfig();
+      config.showProcessingIndicator = true;
+      config.processingImageMode = 'complete';
+      modalManager.showModal({
+        config
+      });
+    }
+    function showProcessingModal() {
+      const config = new ModalConfig();
+      config.headerColor = '#497fbf';
+      config.showProcessingIndicator = true;
+      config.processingImageMode = 'processing';
+      config.showCloseButton = false;
+      config.closeOnBackdropClick = false;
+      modalManager.showModal({
+        config
+      });
+      setTimeout(showCompleteModal, 1500);
+    }
+    function showUserClosedModalCallbackModal() {
+      const config = new ModalConfig();
+      config.message = 'When you close this modal another will open.'
+      modalManager.showModal({
+        config,
+        userClosedModalCallback: () => {
+          const config = new ModalConfig();
+          config.message = 'I\'m another modal';
+          config.headerColor = '#497fbf';
+          modalManager.showModal({ config });
+        }
+      });
+    }
+    function showModalUserCannotClose() {
+      const config = new ModalConfig();
+      config.message = 'User cannot close this. Will close automatically in 2 seconds.';
+      config.showCloseButton = false;
+      config.closeOnBackdropClick = false;
+      modalManager.showModal({
+        config
+      });
+      setTimeout(modalManager.closeModal.bind(modalManager), 2000);
+    }
+    function showModalWithLeftNavButton() {
+      const config = new ModalConfig();
+      config.message = 'This modal has a left nav button.';
+      config.showLeftNavButton = true;
+      config.leftNavButtonText = 'Back';
+      modalManager.showModal({
+        config,
+        userPressedLeftNavButtonCallback: () => {
+          const config = new ModalConfig();
+          config.message = 'I\'m the previous modal (or anything else you want to do here)';
+          config.headerColor = '#497fbf';
+          modalManager.showModal({ config });
+        }
+      });
+    }
+    function showModalUserCannotClickBackdrop() {
+      const config = new ModalConfig();
+      config.message = 'Clicking on the backdrop will not close this.';
+      config.showCloseButton = true;
+      config.closeOnBackdropClick = false;
+      modalManager.showModal({
+        config
+      });
+    }
+  </script>
+</body>
+</html>

package/index.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-export { ModalConfig } from './src/modal-config';
-export { ModalManager } from './src/modal-manager';
-export { ModalManagerMode } from './src/modal-manager-mode';
-export { ModalManagerInterface } from './src/modal-manager-interface';
-export { ModalManagerHostBridge } from './src/modal-manager-host-bridge';
-export { ModalManagerHostBridgeInterface } from './src/modal-manager-host-bridge-interface';
-export { ModalTemplate } from './src/modal-template';
+export { ModalConfig } from './src/modal-config';
+export { ModalManager } from './src/modal-manager';
+export { ModalManagerMode } from './src/modal-manager-mode';
+export { ModalManagerInterface } from './src/modal-manager-interface';
+export { ModalManagerHostBridge } from './src/modal-manager-host-bridge';
+export { ModalManagerHostBridgeInterface } from './src/modal-manager-host-bridge-interface';
+export { ModalTemplate } from './src/modal-template';