@internetarchive/modal-manager 2.0.4 → 2.0.5-webdev-8155.1

package/dist/demo/app-root.js

@@ -0,0 +1,338 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { ModalConfig } from '../src/modal-config';
+import '../src/modal-manager';
+let AppRoot = class AppRoot extends LitElement {
+    render() {
+        return html `
+      <modal-manager>
+        <div slot="slot-content-demo">
+          <p>Slotted Content</p>
+        </div>
+      </modal-manager>
+
+      <div class="actions">
+        <button @click=${this.showModal}>Modal</button>
+        <button @click=${this.showAllFeaturesModal}>All Features</button>
+        <button @click=${this.showErrorModal}>Error Modal</button>
+        <button @click=${this.showCustomContentModal}>
+          Custom Content Modal
+        </button>
+        <button @click=${this.showSlottedContentModal}>
+          Slotted Content Modal
+        </button>
+        <button @click=${this.showProcessingModal}>Processing Modal</button>
+        <button @click=${this.showCompleteModal}>
+          Processing Complete Modal
+        </button>
+        <button @click=${this.showUserClosedModalCallbackModal}>
+          Modal Closed Callback
+        </button>
+        <button @click=${this.showModalUserCannotClose}>
+          Unclosable Modal
+        </button>
+        <button @click=${this.showModalUserCannotClickBackdrop}>
+          Unclickable Backdrop
+        </button>
+        <button @click=${this.showOverflowModal}>Text-heavy Modal</button>
+        <button @click=${this.showModalWithoutLogo}>Modal Without Logo</button>
+        <button @click=${this.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>
+    `;
+    }
+    showModal() {
+        const config = new ModalConfig();
+        config.headline = 'Success';
+        config.message = '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.headerColor = '#691916';
+        config.bodyColor = '#fff';
+        this.modalManager.showModal({
+            config,
+        });
+    }
+    showBillAlert() {
+        alert('Bill <3 You');
+    }
+    buttonPress() {
+        alert('You pressed a button.');
+    }
+    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 = 'complete';
+        const someContent = html `
+      <div style="text-align: center; margin-top: 10px;">
+        <button @click=${this.buttonPress}>I'm A Button To Press</button>
+      </div>
+    `;
+        this.modalManager.showModal({
+            config,
+            customModalContent: someContent,
+        });
+    }
+    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=${this.showBillAlert} />
+      </div>
+    `;
+        this.modalManager.showModal({
+            config,
+            customModalContent: someContent,
+        });
+    }
+    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>
+    `;
+        this.modalManager.showModal({
+            config,
+            customModalContent: someContent,
+        });
+    }
+    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';
+        this.modalManager.showModal({
+            config,
+        });
+    }
+    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;
+        this.modalManager.showModal({
+            config,
+        });
+    }
+    showCompleteModal() {
+        const config = new ModalConfig();
+        config.showProcessingIndicator = true;
+        config.processingImageMode = 'complete';
+        this.modalManager.showModal({
+            config,
+        });
+    }
+    showProcessingModal() {
+        const config = new ModalConfig();
+        config.headerColor = '#497fbf';
+        config.showProcessingIndicator = true;
+        config.processingImageMode = 'processing';
+        config.showCloseButton = false;
+        config.closeOnBackdropClick = false;
+        this.modalManager.showModal({
+            config,
+        });
+        setTimeout(this.showCompleteModal.bind(this), 1500);
+    }
+    showUserClosedModalCallbackModal() {
+        const config = new ModalConfig();
+        config.message = 'When you close this modal another will open.';
+        this.modalManager.showModal({
+            config,
+            userClosedModalCallback: () => {
+                const config = new ModalConfig();
+                config.message = "I'm another modal";
+                config.headerColor = '#497fbf';
+                this.modalManager.showModal({ config });
+            },
+        });
+    }
+    showModalUserCannotClose() {
+        const config = new ModalConfig();
+        config.message =
+            'User cannot close this. Will close automatically in 2 seconds.';
+        config.showCloseButton = false;
+        config.closeOnBackdropClick = false;
+        this.modalManager.showModal({
+            config,
+        });
+        setTimeout(this.modalManager.closeModal.bind(this.modalManager), 2000);
+    }
+    showModalWithLeftNavButton() {
+        const config = new ModalConfig();
+        config.message = '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.headerColor = '#497fbf';
+                this.modalManager.showModal({ config });
+            },
+        });
+    }
+    showModalUserCannotClickBackdrop() {
+        const config = new ModalConfig();
+        config.message = 'Clicking on the backdrop will not close this.';
+        config.showCloseButton = true;
+        config.closeOnBackdropClick = false;
+        this.modalManager.showModal({
+            config,
+        });
+    }
+    static get styles() {
+        return css `
+      modal-manager {
+        display: none;
+        --modalTitleLineHeight: 4.5rem;
+      }
+
+      modal-manager[mode='open'] {
+        display: block;
+      }
+
+      .actions {
+        position: fixed;
+        background-color: rgba(255, 255, 255, 0.9);
+        border: 1px solid black;
+        padding: 10px;
+        top: 10px;
+        left: 10px;
+      }
+    `;
+    }
+};
+__decorate([
+    query('modal-manager')
+], AppRoot.prototype, "modalManager", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
+//# sourceMappingURL=app-root.js.map

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

@@ -0,0 +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"]}

package/dist/index.d.ts

@@ -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';

package/dist/index.js

@@ -1,6 +1,6 @@
-export { ModalConfig } from './src/modal-config';
-export { ModalManager } from './src/modal-manager';
-export { ModalManagerMode } from './src/modal-manager-mode';
-export { ModalManagerHostBridge } from './src/modal-manager-host-bridge';
-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 { ModalManagerHostBridge } from './src/modal-manager-host-bridge';
+export { ModalTemplate } from './src/modal-template';
 //# sourceMappingURL=index.js.map

package/dist/src/assets/arrow-left-icon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<1>;
-export default _default;
+declare const _default: import("lit").TemplateResult<1>;
+export default _default;

package/dist/src/assets/arrow-left-icon.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'lit';
 export default html `
   <svg
     viewBox="0 0 100 100"
@@ -11,5 +11,5 @@ export default html `
       d="m20.1116715 50.0035012-.1116715-.1085359 43.1159942-46.61088155c2.401537-2.18938917 4.6902018-3.28408375 6.8659943-3.28408375s4.1642651.63837733 5.9654178 1.91513199c1.8011528 1.27675467 3.1520173 2.97248092 4.0525937 5.08717877l-39.4020173 42.99768924 39.4020173 42.9976892c-.9005764 2.1146979-2.2514409 3.8104241-4.0525937 5.0871788-1.8011527 1.2767547-3.7896253 1.915132-5.9654178 1.915132-2.1013449 0-4.3900096-1.0573489-6.8659943-3.1720468l-43.1159942-46.7194174z"
     />
   </svg>
-`;
+`;
 //# sourceMappingURL=arrow-left-icon.js.map

package/dist/src/assets/ia-logo-icon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<1>;
-export default _default;
+declare const _default: import("lit").TemplateResult<1>;
+export default _default;

package/dist/src/assets/ia-logo-icon.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'lit';
 export default html `
   <svg
     class="ia-logo"
@@ -26,5 +26,5 @@ export default html `
       </g>
     </g>
   </svg>
-`;
+`;
 //# sourceMappingURL=ia-logo-icon.js.map

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

@@ -1,104 +1,104 @@
-import { TemplateResult } from 'lit';
-/**
- * Configuration to show a modal
- *
- * @export
- * @class ModalConfig
- */
-export declare class ModalConfig {
-    /**
-     * The title that shows in the header
-     *
-     * @type {(TemplateResult | undefined)}
-     * @memberof ModalConfig
-     */
-    title?: TemplateResult;
-    /**
-     * The subtitle shown in the header under the title
-     *
-     * @type {(TemplateResult | undefined)}
-     * @memberof ModalConfig
-     */
-    subtitle?: TemplateResult;
-    /**
-     * The headline shown at the top of the content section
-     *
-     * @type {(TemplateResult | undefined)}
-     * @memberof ModalConfig
-     */
-    headline?: TemplateResult;
-    /**
-     * The text shown below the headline in the content section
-     *
-     * @type {(TemplateResult | undefined)}
-     * @memberof ModalConfig
-     */
-    message?: TemplateResult;
-    /**
-     * The background color of the header
-     *
-     * @memberof ModalConfig
-     */
-    headerColor: string;
-    /**
-     * The background color of the body
-     *
-     * @memberof ModalConfig
-     */
-    bodyColor: string;
-    /**
-     * Show or hide the processing indicator
-     *
-     * @memberof ModalConfig
-     */
-    showProcessingIndicator: boolean;
-    /**
-     * Set the processing image mode, currently `processing` or `complete`
-     *
-     * @memberof ModalConfig
-     */
-    processingImageMode: 'processing' | 'complete';
-    /**
-     * Show the close button
-     *
-     * @memberof ModalConfig
-     */
-    showCloseButton: boolean;
-    /**
-     * Show the left nav button
-     *
-     * @memberof ModalConfig
-     */
-    showLeftNavButton: boolean;
-    /**
-     * Left nav button text
-     */
-    leftNavButtonText: string;
-    /**
-     * Show the close button
-     *
-     * @memberof ModalConfig
-     */
-    showHeaderLogo: boolean;
-    /**
-     * Close the modal if the user taps on the background
-     *
-     * @memberof ModalConfig
-     */
-    closeOnBackdropClick: boolean;
-    constructor(options?: {
-        title?: TemplateResult;
-        subtitle?: TemplateResult;
-        headline?: TemplateResult;
-        message?: TemplateResult;
-        headerColor?: string;
-        bodyColor?: string;
-        showProcessingIndicator?: boolean;
-        processingImageMode?: 'processing' | 'complete';
-        showCloseButton?: boolean;
-        showLeftNavButton?: boolean;
-        leftNavButtonText?: string;
-        showHeaderLogo?: boolean;
-        closeOnBackdropClick?: boolean;
-    });
-}
+import type { TemplateResult } from 'lit';
+/**
+ * Configuration to show a modal
+ *
+ * @export
+ * @class ModalConfig
+ */
+export declare class ModalConfig {
+    /**
+     * The title that shows in the header
+     *
+     * @type {(TemplateResult | string | undefined)}
+     * @memberof ModalConfig
+     */
+    title?: TemplateResult | string;
+    /**
+     * The subtitle shown in the header under the title
+     *
+     * @type {(TemplateResult | string | undefined)}
+     * @memberof ModalConfig
+     */
+    subtitle?: TemplateResult | string;
+    /**
+     * The headline shown at the top of the content section
+     *
+     * @type {(TemplateResult | string | undefined)}
+     * @memberof ModalConfig
+     */
+    headline?: TemplateResult | string;
+    /**
+     * The text shown below the headline in the content section
+     *
+     * @type {(TemplateResult | string | undefined)}
+     * @memberof ModalConfig
+     */
+    message?: TemplateResult | string;
+    /**
+     * The background color of the header
+     *
+     * @memberof ModalConfig
+     */
+    headerColor: string;
+    /**
+     * The background color of the body
+     *
+     * @memberof ModalConfig
+     */
+    bodyColor: string;
+    /**
+     * Show or hide the processing indicator
+     *
+     * @memberof ModalConfig
+     */
+    showProcessingIndicator: boolean;
+    /**
+     * Set the processing image mode
+     *
+     * @memberof ModalConfig
+     */
+    processingImageMode: 'processing' | 'complete';
+    /**
+     * Show the close button
+     *
+     * @memberof ModalConfig
+     */
+    showCloseButton: boolean;
+    /**
+     * Show the left nav button
+     *
+     * @memberof ModalConfig
+     */
+    showLeftNavButton: boolean;
+    /**
+     * Left nav button text
+     */
+    leftNavButtonText: string;
+    /**
+     * Show the close button
+     *
+     * @memberof ModalConfig
+     */
+    showHeaderLogo: boolean;
+    /**
+     * Close the modal if the user taps on the background
+     *
+     * @memberof ModalConfig
+     */
+    closeOnBackdropClick: boolean;
+    constructor(options?: {
+        title?: TemplateResult | string;
+        subtitle?: TemplateResult | string;
+        headline?: TemplateResult | string;
+        message?: TemplateResult | string;
+        headerColor?: string;
+        bodyColor?: string;
+        showProcessingIndicator?: boolean;
+        processingImageMode?: 'processing' | 'complete';
+        showCloseButton?: boolean;
+        showLeftNavButton?: boolean;
+        leftNavButtonText?: string;
+        showHeaderLogo?: boolean;
+        closeOnBackdropClick?: boolean;
+    });
+}