@internetarchive/modal-manager 2.0.5-webdev-8155.6 → 2.0.5-webdev-8155.9

package/.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
       run: npm run test
 
     - name: Upload Codecov reports
-      uses: codecov/codecov-action@main
+      uses: codecov/codecov-action@v5
       with:
         fail_ci_if_error: true
         token: ${{ secrets.CODECOV_TOKEN }}
@@ -35,6 +35,6 @@ jobs:
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:
-        name: playwright-report
+        name: coverage-report
         path: coverage/
         retention-days: 30

package/.vscode/extensions.json

@@ -5,6 +5,7 @@
     "bierner.lit-html",
     "bashmish.es6-string-css",
     "runem.lit-plugin",
-    "ryanluker.vscode-coverage-gutters"
+    "ryanluker.vscode-coverage-gutters",
+    "vitest.explorer"
   ]
 }

package/demo/app-root.ts

@@ -111,20 +111,20 @@ export class AppRoot extends LitElement {
     `;
   }
 
-  showModal() {
+  private showModal() {
     const config = new ModalConfig();
-    config.headline = 'Success';
-    config.message = 'Thank you for your support!';
+    config.headline = html`Success`;
+    config.message = html`Thank you for your support!`;
 
     this.modalManager.showModal({
       config,
     });
   }
 
-  showErrorModal() {
+  private showErrorModal() {
     const config = new ModalConfig();
-    config.headline = 'Error';
-    config.message = 'An error occurred while processing your donation.';
+    config.headline = html`Error`;
+    config.message = html`An error occurred while processing your donation.`;
     config.headerColor = '#691916';
     config.bodyColor = '#fff';
 
@@ -133,15 +133,15 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showBillAlert() {
+  private showBillAlert() {
     alert('Bill <3 You');
   }
 
-  buttonPress() {
+  private buttonPress() {
     alert('You pressed a button.');
   }
 
-  showAllFeaturesModal() {
+  private showAllFeaturesModal() {
     const config = new ModalConfig();
     config.title = html`Donation Received`;
     config.subtitle = html`Thanks a bunch!`;
@@ -165,9 +165,9 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showCustomContentModal() {
+  private showCustomContentModal() {
     const config = new ModalConfig();
-    config.title = 'Custom Content';
+    config.title = html`Custom Content`;
     config.headline = html`<span class="sr-only"
       >Also support screen-reader only</span
     >`;
@@ -195,9 +195,9 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showSlottedContentModal() {
+  private showSlottedContentModal() {
     const config = new ModalConfig();
-    config.title = 'Slotted Content';
+    config.title = html`Slotted Content`;
 
     const someContent = html`
       Can slot content from the top-level:
@@ -210,7 +210,7 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showOverflowModal() {
+  private showOverflowModal() {
     const config = new ModalConfig();
 
     config.title = html`Lorem Ipsum`;
@@ -251,11 +251,11 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showModalWithoutLogo() {
+  private showModalWithoutLogo() {
     const config = new ModalConfig();
-    config.headline = 'Success';
+    config.headline = html`Success`;
     config.title = html`Donation Received`;
-    config.message = 'Thank you for your support!';
+    config.message = html`Thank you for your support!`;
     config.headerColor = '#194880';
     config.showHeaderLogo = false;
     this.modalManager.showModal({
@@ -263,7 +263,7 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showCompleteModal() {
+  private showCompleteModal() {
     const config = new ModalConfig();
     config.showProcessingIndicator = true;
     config.processingImageMode = 'complete';
@@ -272,7 +272,7 @@ export class AppRoot extends LitElement {
     });
   }
 
-  showProcessingModal() {
+  private showProcessingModal() {
     const config = new ModalConfig();
     config.headerColor = '#497fbf';
     config.showProcessingIndicator = true;
@@ -286,25 +286,25 @@ export class AppRoot extends LitElement {
     setTimeout(this.showCompleteModal.bind(this), 1500);
   }
 
-  showUserClosedModalCallbackModal() {
+  private showUserClosedModalCallbackModal() {
     const config = new ModalConfig();
-    config.message = 'When you close this modal another will open.';
+    config.message = html`When you close this modal another will open.`;
 
     this.modalManager.showModal({
       config,
       userClosedModalCallback: () => {
         const config = new ModalConfig();
-        config.message = "I'm another modal";
+        config.message = html`I'm another modal`;
         config.headerColor = '#497fbf';
         this.modalManager.showModal({ config });
       },
     });
   }
 
-  showModalUserCannotClose() {
+  private showModalUserCannotClose() {
     const config = new ModalConfig();
-    config.message =
-      'User cannot close this. Will close automatically in 2 seconds.';
+    config.message = html`User cannot close this. Will close automatically in 2
+    seconds.`;
     config.showCloseButton = false;
     config.closeOnBackdropClick = false;
     this.modalManager.showModal({
@@ -314,9 +314,9 @@ export class AppRoot extends LitElement {
     setTimeout(this.modalManager.closeModal.bind(this.modalManager), 2000);
   }
 
-  showModalWithLeftNavButton() {
+  private showModalWithLeftNavButton() {
     const config = new ModalConfig();
-    config.message = 'This modal has a left nav button.';
+    config.message = html`This modal has a left nav button.`;
     config.showLeftNavButton = true;
     config.leftNavButtonText = 'Back';
 
@@ -324,17 +324,17 @@ export class AppRoot extends LitElement {
       config,
       userPressedLeftNavButtonCallback: () => {
         const config = new ModalConfig();
-        config.message =
-          "I'm the previous modal (or anything else you want to do here)";
+        config.message = html`I'm the previous modal (or anything else you want
+        to do here)`;
         config.headerColor = '#497fbf';
         this.modalManager.showModal({ config });
       },
     });
   }
 
-  showModalUserCannotClickBackdrop() {
+  private showModalUserCannotClickBackdrop() {
     const config = new ModalConfig();
-    config.message = 'Clicking on the backdrop will not close this.';
+    config.message = html`Clicking on the backdrop will not close this.`;
     config.showCloseButton = true;
     config.closeOnBackdropClick = false;
     this.modalManager.showModal({

package/dist/demo/app-root.d.ts

@@ -3,20 +3,20 @@ import '../src/modal-manager';
 export declare class AppRoot extends LitElement {
     private modalManager;
     protected render(): import("lit-html").TemplateResult<1>;
-    showModal(): void;
-    showErrorModal(): void;
-    showBillAlert(): void;
-    buttonPress(): void;
-    showAllFeaturesModal(): void;
-    showCustomContentModal(): void;
-    showSlottedContentModal(): void;
-    showOverflowModal(): void;
-    showModalWithoutLogo(): void;
-    showCompleteModal(): void;
-    showProcessingModal(): void;
-    showUserClosedModalCallbackModal(): void;
-    showModalUserCannotClose(): void;
-    showModalWithLeftNavButton(): void;
-    showModalUserCannotClickBackdrop(): void;
+    private showModal;
+    private showErrorModal;
+    private showBillAlert;
+    private buttonPress;
+    private showAllFeaturesModal;
+    private showCustomContentModal;
+    private showSlottedContentModal;
+    private showOverflowModal;
+    private showModalWithoutLogo;
+    private showCompleteModal;
+    private showProcessingModal;
+    private showUserClosedModalCallbackModal;
+    private showModalUserCannotClose;
+    private showModalWithLeftNavButton;
+    private showModalUserCannotClickBackdrop;
     static get styles(): CSSResultGroup;
 }

package/dist/demo/app-root.js

@@ -107,16 +107,16 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showModal() {
         const config = new ModalConfig();
-        config.headline = 'Success';
-        config.message = 'Thank you for your support!';
+        config.headline = html `Success`;
+        config.message = html `Thank you for your support!`;
         this.modalManager.showModal({
             config,
         });
     }
     showErrorModal() {
         const config = new ModalConfig();
-        config.headline = 'Error';
-        config.message = 'An error occurred while processing your donation.';
+        config.headline = html `Error`;
+        config.message = html `An error occurred while processing your donation.`;
         config.headerColor = '#691916';
         config.bodyColor = '#fff';
         this.modalManager.showModal({
@@ -152,7 +152,7 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showCustomContentModal() {
         const config = new ModalConfig();
-        config.title = 'Custom Content';
+        config.title = html `Custom Content`;
         config.headline = html `<span class="sr-only"
       >Also support screen-reader only</span
     >`;
@@ -179,7 +179,7 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showSlottedContentModal() {
         const config = new ModalConfig();
-        config.title = 'Slotted Content';
+        config.title = html `Slotted Content`;
         const someContent = html `
       Can slot content from the top-level:
       <slot name="slot-content-demo"></slot>
@@ -228,9 +228,9 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showModalWithoutLogo() {
         const config = new ModalConfig();
-        config.headline = 'Success';
+        config.headline = html `Success`;
         config.title = html `Donation Received`;
-        config.message = 'Thank you for your support!';
+        config.message = html `Thank you for your support!`;
         config.headerColor = '#194880';
         config.showHeaderLogo = false;
         this.modalManager.showModal({
@@ -259,12 +259,12 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showUserClosedModalCallbackModal() {
         const config = new ModalConfig();
-        config.message = 'When you close this modal another will open.';
+        config.message = html `When you close this modal another will open.`;
         this.modalManager.showModal({
             config,
             userClosedModalCallback: () => {
                 const config = new ModalConfig();
-                config.message = "I'm another modal";
+                config.message = html `I'm another modal`;
                 config.headerColor = '#497fbf';
                 this.modalManager.showModal({ config });
             },
@@ -272,8 +272,8 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showModalUserCannotClose() {
         const config = new ModalConfig();
-        config.message =
-            'User cannot close this. Will close automatically in 2 seconds.';
+        config.message = html `User cannot close this. Will close automatically in 2
+    seconds.`;
         config.showCloseButton = false;
         config.closeOnBackdropClick = false;
         this.modalManager.showModal({
@@ -283,15 +283,15 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showModalWithLeftNavButton() {
         const config = new ModalConfig();
-        config.message = 'This modal has a left nav button.';
+        config.message = html `This modal has a left nav button.`;
         config.showLeftNavButton = true;
         config.leftNavButtonText = 'Back';
         this.modalManager.showModal({
             config,
             userPressedLeftNavButtonCallback: () => {
                 const config = new ModalConfig();
-                config.message =
-                    "I'm the previous modal (or anything else you want to do here)";
+                config.message = html `I'm the previous modal (or anything else you want
+        to do here)`;
                 config.headerColor = '#497fbf';
                 this.modalManager.showModal({ config });
             },
@@ -299,7 +299,7 @@ let AppRoot = class AppRoot extends LitElement {
     }
     showModalUserCannotClickBackdrop() {
         const config = new ModalConfig();
-        config.message = 'Clicking on the backdrop will not close this.';
+        config.message = html `Clicking on the backdrop will not close this.`;
         config.showCloseButton = true;
         config.closeOnBackdropClick = false;
         this.modalManager.showModal({

package/dist/demo/app-root.js.map

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

package/dist/src/modal-config.d.ts

@@ -9,31 +9,31 @@ export declare class ModalConfig {
     /**
      * The title that shows in the header
      *
-     * @type {(TemplateResult | string | undefined)}
+     * @type {(TemplateResult | undefined)}
      * @memberof ModalConfig
      */
-    title?: TemplateResult | string;
+    title?: TemplateResult;
     /**
      * The subtitle shown in the header under the title
      *
-     * @type {(TemplateResult | string | undefined)}
+     * @type {(TemplateResult | undefined)}
      * @memberof ModalConfig
      */
-    subtitle?: TemplateResult | string;
+    subtitle?: TemplateResult;
     /**
      * The headline shown at the top of the content section
      *
-     * @type {(TemplateResult | string | undefined)}
+     * @type {(TemplateResult | undefined)}
      * @memberof ModalConfig
      */
-    headline?: TemplateResult | string;
+    headline?: TemplateResult;
     /**
      * The text shown below the headline in the content section
      *
-     * @type {(TemplateResult | string | undefined)}
+     * @type {(TemplateResult | undefined)}
      * @memberof ModalConfig
      */
-    message?: TemplateResult | string;
+    message?: TemplateResult;
     /**
      * The background color of the header
      *
@@ -87,10 +87,10 @@ export declare class ModalConfig {
      */
     closeOnBackdropClick: boolean;
     constructor(options?: {
-        title?: TemplateResult | string;
-        subtitle?: TemplateResult | string;
-        headline?: TemplateResult | string;
-        message?: TemplateResult | string;
+        title?: TemplateResult;
+        subtitle?: TemplateResult;
+        headline?: TemplateResult;
+        message?: TemplateResult;
         headerColor?: string;
         bodyColor?: string;
         showProcessingIndicator?: boolean;

package/dist/src/modal-config.js.map

@@ -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"]}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  CSSResult,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\nimport { getDeepestActiveElement } from './shoelace/active-elements';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n  /**\n   * The current mode of the ModalManager\n   *\n   * Current options are `modal` or `closed`\n   *\n   * @type {ModalManagerMode}\n   * @memberof ModalManager\n   */\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\n    ModalManagerMode.Closed;\n\n  /**\n   * Custom content to display in the modal's content slot\n   *\n   * @type {(TemplateResult | undefined)}\n   * @memberof ModalManager\n   */\n  @property({ type: Object }) customModalContent?: TemplateResult;\n\n  /**\n   * This hostBridge handles environmental-specific interactions such as adding classes\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\n   *\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n   * `ModalManagerHostBridgeInterface`\n   *\n   * @type {ModalManagerHostBridgeInterface}\n   * @memberof ModalManager\n   */\n  @property({ type: Object })\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n    this,\n  );\n\n  /**\n   * Reference to the ModalTemplate DOM element\n   *\n   * @private\n   * @type {ModalTemplate}\n   * @memberof ModalManager\n   */\n  @query('modal-template') private modalTemplate?: ModalTemplate;\n\n  // Imported tab handling from shoelace\n  public modal = new Modal(this);\n\n  async firstUpdated(): Promise<void> {\n    // Give the browser a chance to paint\n\n    await new Promise((r) => setTimeout(r, 0));\n\n    if (this.closeOnBackdropClick) {\n      this.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.backdropClicked();\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.modal.deactivate();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n        <modal-template\n          @closeButtonPressed=${this.closeButtonPressed}\n          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n          tabindex=\"-1\"\n        >\n          ${this.customModalContent}\n        </modal-template>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  getMode(): ModalManagerMode {\n    return this.mode;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.mode = ModalManagerMode.Closed;\n    this.customModalContent = undefined;\n    if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n    this.modal.deactivate();\n\n    // Return focus to the triggering element, if possible\n    (this.triggeringElement as HTMLElement)?.focus?.();\n    this.triggeringElement = undefined;\n  }\n\n  /**\n   * Whether the modal should close if the user taps on the backdrop\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeOnBackdropClick = true;\n\n  /**\n   * The element that had focus when the modal was opened, so that we can return focus\n   * to it after the modal closes.\n   */\n  private triggeringElement?: Element;\n\n  /**\n   * A callback if the user closes the modal\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userClosedModalCallback?: () => void;\n\n  /**\n   * A callback if the user presses the left nav button\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userPressedLeftNavButtonCallback?: () => void;\n\n  /**\n   * Call the userClosedModalCallback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserClosedModalCallback(): void {\n    // we assign the callback to a temp var and undefine it before calling it\n    // otherwise, we run into the potential for an infinite loop if the\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n    const callback = this.userClosedModalCallback;\n    this.userClosedModalCallback = undefined;\n    if (callback) callback();\n  }\n\n  /**\n   * Call the user pressed left nav button callback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserPressedLeftNavButtonCallback(): void {\n    // avoids an infinite showModal() loop, as above\n    const callback = this.userPressedLeftNavButtonCallback;\n    this.userPressedLeftNavButtonCallback = undefined;\n    if (callback) callback();\n  }\n\n  /** @inheritdoc */\n  async showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n    userPressedLeftNavButtonCallback?: () => void;\n  }): Promise<void> {\n    // If the dialog is being opened, make note of what element was focused beforehand\n    if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();\n\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n    this.userClosedModalCallback = options.userClosedModalCallback;\n    this.userPressedLeftNavButtonCallback =\n      options.userPressedLeftNavButtonCallback;\n    this.customModalContent = options.customModalContent;\n    this.mode = ModalManagerMode.Open;\n    if (this.modalTemplate) {\n      this.modalTemplate.config = options.config;\n      await this.modalTemplate.updateComplete;\n      this.modalTemplate.focus();\n    }\n    this.modal.activate();\n  }\n\n  /**\n   * Sets the triggering element to the one that is currently focused, as deep\n   * within Shadow DOM as possible.\n   */\n  private captureFocusedElement(): void {\n    this.triggeringElement = getDeepestActiveElement();\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    /* istanbul ignore else */\n    if (changed.has('mode')) {\n      this.handleModeChange();\n    }\n  }\n\n  /**\n   * Called when the backdrop is clicked\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private backdropClicked(): void {\n    if (this.closeOnBackdropClick) {\n      this.closeModal();\n      this.callUserClosedModalCallback();\n    }\n  }\n\n  /**\n   * Handle the mode change\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private handleModeChange(): void {\n    this.hostBridge.handleModeChange(this.mode);\n    this.emitModeChangeEvent();\n  }\n\n  /**\n   * Emit a modeChange event\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private emitModeChangeEvent(): void {\n    const event = new CustomEvent('modeChanged', {\n      detail: { mode: this.mode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Called when the modal close button is pressed. Closes the modal.\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeButtonPressed(): void {\n    this.closeModal();\n    this.callUserClosedModalCallback();\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n    const modalWidth = css`var(--modalWidth, 32rem)`;\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n    const modalZindex = css`var(--modalZindex, 2000)`;\n\n    return css`\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n\n      .backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        background-color: ${modalBackdropColor};\n        width: 100%;\n        height: 100%;\n        z-index: ${modalBackdropZindex};\n      }\n\n      modal-template {\n        outline: 0;\n        position: fixed;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, 0);\n        z-index: ${modalZindex};\n        width: ${modalWidth};\n        max-width: ${modalMaxWidth};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  CSSResult,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\nimport { getDeepestActiveElement } from './shoelace/active-elements';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n  /**\n   * The current mode of the ModalManager\n   *\n   * Current options are `modal` or `closed`\n   *\n   * @type {ModalManagerMode}\n   * @memberof ModalManager\n   */\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\n    ModalManagerMode.Closed;\n\n  /**\n   * Custom content to display in the modal's content slot\n   *\n   * @type {(TemplateResult | undefined)}\n   * @memberof ModalManager\n   */\n  @property({ type: Object }) customModalContent?: TemplateResult;\n\n  /**\n   * This hostBridge handles environmental-specific interactions such as adding classes\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\n   *\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n   * `ModalManagerHostBridgeInterface`\n   *\n   * @type {ModalManagerHostBridgeInterface}\n   * @memberof ModalManager\n   */\n  @property({ type: Object })\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n    this,\n  );\n\n  /**\n   * Reference to the ModalTemplate DOM element\n   *\n   * @private\n   * @type {ModalTemplate}\n   * @memberof ModalManager\n   */\n  @query('modal-template') private modalTemplate?: ModalTemplate;\n\n  // Imported tab handling from shoelace\n  public modal = new Modal(this);\n\n  async firstUpdated(): Promise<void> {\n    // Give the browser a chance to paint\n    await new Promise((r) => setTimeout(r, 0));\n\n    if (this.closeOnBackdropClick) {\n      this.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.backdropClicked();\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.modal.deactivate();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n        <modal-template\n          @closeButtonPressed=${this.closeButtonPressed}\n          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n          tabindex=\"-1\"\n        >\n          ${this.customModalContent}\n        </modal-template>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  getMode(): ModalManagerMode {\n    return this.mode;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.mode = ModalManagerMode.Closed;\n    this.customModalContent = undefined;\n    if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n    this.modal.deactivate();\n\n    // Return focus to the triggering element, if possible\n    (this.triggeringElement as HTMLElement)?.focus?.();\n    this.triggeringElement = undefined;\n  }\n\n  /**\n   * Whether the modal should close if the user taps on the backdrop\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeOnBackdropClick = true;\n\n  /**\n   * The element that had focus when the modal was opened, so that we can return focus\n   * to it after the modal closes.\n   */\n  private triggeringElement?: Element;\n\n  /**\n   * A callback if the user closes the modal\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userClosedModalCallback?: () => void;\n\n  /**\n   * A callback if the user presses the left nav button\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userPressedLeftNavButtonCallback?: () => void;\n\n  /**\n   * Call the userClosedModalCallback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserClosedModalCallback(): void {\n    // we assign the callback to a temp var and undefine it before calling it\n    // otherwise, we run into the potential for an infinite loop if the\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n    const callback = this.userClosedModalCallback;\n    this.userClosedModalCallback = undefined;\n    if (callback) callback();\n  }\n\n  /**\n   * Call the user pressed left nav button callback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserPressedLeftNavButtonCallback(): void {\n    // avoids an infinite showModal() loop, as above\n    const callback = this.userPressedLeftNavButtonCallback;\n    this.userPressedLeftNavButtonCallback = undefined;\n    if (callback) callback();\n  }\n\n  /** @inheritdoc */\n  async showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n    userPressedLeftNavButtonCallback?: () => void;\n  }): Promise<void> {\n    // If the dialog is being opened, make note of what element was focused beforehand\n    if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();\n\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n    this.userClosedModalCallback = options.userClosedModalCallback;\n    this.userPressedLeftNavButtonCallback =\n      options.userPressedLeftNavButtonCallback;\n    this.customModalContent = options.customModalContent;\n    this.mode = ModalManagerMode.Open;\n    if (this.modalTemplate) {\n      this.modalTemplate.config = options.config;\n      await this.modalTemplate.updateComplete;\n      this.modalTemplate.focus();\n    }\n    this.modal.activate();\n  }\n\n  /**\n   * Sets the triggering element to the one that is currently focused, as deep\n   * within Shadow DOM as possible.\n   */\n  private captureFocusedElement(): void {\n    this.triggeringElement = getDeepestActiveElement();\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    /* istanbul ignore else */\n    if (changed.has('mode')) {\n      this.handleModeChange();\n    }\n  }\n\n  /**\n   * Called when the backdrop is clicked\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private backdropClicked(): void {\n    if (this.closeOnBackdropClick) {\n      this.closeModal();\n      this.callUserClosedModalCallback();\n    }\n  }\n\n  /**\n   * Handle the mode change\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private handleModeChange(): void {\n    this.hostBridge.handleModeChange(this.mode);\n    this.emitModeChangeEvent();\n  }\n\n  /**\n   * Emit a modeChange event\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private emitModeChangeEvent(): void {\n    const event = new CustomEvent('modeChanged', {\n      detail: { mode: this.mode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Called when the modal close button is pressed. Closes the modal.\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeButtonPressed(): void {\n    this.closeModal();\n    this.callUserClosedModalCallback();\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n    const modalWidth = css`var(--modalWidth, 32rem)`;\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n    const modalZindex = css`var(--modalZindex, 2000)`;\n\n    return css`\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n\n      .backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        background-color: ${modalBackdropColor};\n        width: 100%;\n        height: 100%;\n        z-index: ${modalBackdropZindex};\n      }\n\n      modal-template {\n        outline: 0;\n        position: fixed;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, 0);\n        z-index: ${modalZindex};\n        width: ${modalWidth};\n        max-width: ${modalMaxWidth};\n      }\n    `;\n  }\n}\n"]}

package/dist/test/modal-config.test.js

@@ -1,8 +1,8 @@
-import { describe, test, expect } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { html } from 'lit';
 import { ModalConfig } from '../src/modal-config';
 describe('Modal Config', () => {
-    test('can be instantiated properly', async () => {
+    it('can be instantiated properly', async () => {
         const config = new ModalConfig();
         const title = html `Foo`;
         config.title = title;
@@ -10,7 +10,7 @@ describe('Modal Config', () => {
         expect(config.title).to.equal(title);
         expect(config.headerColor).to.equal('green');
     });
-    test('can be instantiated properly with constructor', async () => {
+    it('can be instantiated properly with constructor', async () => {
         const title = html `Foo`;
         const subtitle = html `Bar`;
         const headline = html `Baz`;
@@ -50,7 +50,7 @@ describe('Modal Config', () => {
         expect(config.showHeaderLogo).to.equal(showHeaderLogo);
         expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
     });
-    test('instantiates properly with defaults', async () => {
+    it('instantiates properly with defaults', async () => {
         const config = new ModalConfig();
         expect(config.title).to.equal(undefined);
         expect(config.subtitle).to.equal(undefined);