@internetarchive/modal-manager 0.2.12 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\r\nimport { property, customElement } from 'lit/decorators.js';\r\n\r\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\r\nimport closeIcon from '@internetarchive/icon-close/index.js';\r\nimport iaIcon from '@internetarchive/icon-ia-logo/index.js';\r\n\r\nimport { ModalConfig } from './modal-config';\r\n\r\n@customElement('modal-template')\r\nexport class ModalTemplate extends LitElement {\r\n  /**\r\n   * The ModalConfig that displayed the template\r\n   *\r\n   * @type {ModalConfig}\r\n   * @memberof ModalTemplate\r\n   */\r\n  @property({ type: Object }) config: ModalConfig = new ModalConfig();\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"modal-wrapper\">\r\n        <div class=\"modal-container\">\r\n          <header style=\"background-color: ${this.config.headerColor}\">\r\n            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\r\n            ${this.config.showHeaderLogo\r\n              ? html`<div class=\"logo-icon\">${iaIcon}</div>`\r\n              : nothing}\r\n            ${this.config.title\r\n              ? html`<h1 class=\"title\">${this.config.title}</h1>`\r\n              : ''}\r\n            ${this.config.subtitle\r\n              ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\r\n              : ''}\r\n          </header>\r\n          <section\r\n            class=\"modal-body\"\r\n            style=\"background-color: ${this.config.bodyColor}\"\r\n          >\r\n            <div class=\"content\">\r\n              <div\r\n                class=\"processing-logo ${this.config.showProcessingIndicator\r\n                  ? ''\r\n                  : 'hidden'}\"\r\n              >\r\n                <ia-activity-indicator\r\n                  .mode=${this.config.processingImageMode}\r\n                ></ia-activity-indicator>\r\n              </div>\r\n              ${this.config.headline\r\n                ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\r\n                : ''}\r\n              ${this.config.message\r\n                ? html` <p class=\"message\">${this.config.message}</p> `\r\n                : ''}\r\n\r\n              <div class=\"slot-container\">\r\n                <slot> </slot>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Dispatch the `closeButtonPressed` event to the consumer\r\n   *\r\n   * @private\r\n   * @memberof ModalTemplate\r\n   */\r\n  private handleCloseButton(): void {\r\n    const event = new Event('closeButtonPressed');\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * The close button template\r\n   *\r\n   * @readonly\r\n   * @private\r\n   * @type {TemplateResult}\r\n   * @memberof ModalTemplate\r\n   */\r\n  private get closeButtonTemplate(): TemplateResult {\r\n    return html`\r\n      <button\r\n        type=\"button\"\r\n        class=\"close-button\"\r\n        tabindex=\"0\"\r\n        @click=${this.handleCloseButton}\r\n      >\r\n        ${closeIcon}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\r\n\r\n    const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\r\n\r\n    const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\r\n    const modalBorder = css`var(--modalBorder, 2px solid black)`;\r\n    // if the content of the modal is too big to fit on screen, this sets the bottom margin\r\n    // it's not exact, but a close estimation\r\n    const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\r\n    const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\r\n    const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\r\n\r\n    const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\r\n    const scrollOffset = css`var(--modalScrollOffset, 5px)`;\r\n\r\n    const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\r\n    const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\r\n    const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\r\n    const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\r\n\r\n    const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\r\n    const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\r\n    const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\r\n    const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\r\n\r\n    return css`\r\n      .processing-logo {\r\n        margin: auto;\r\n        width: ${processingImageSize};\r\n        height: ${processingImageSize};\r\n      }\r\n\r\n      .processing-logo.hidden {\r\n        height: 1rem;\r\n      }\r\n\r\n      .processing-logo.hidden ia-activity-indicator {\r\n        display: none;\r\n      }\r\n\r\n      .modal-wrapper {\r\n        outline: none;\r\n      }\r\n\r\n      .modal-container {\r\n        border-radius: ${modalCornerRadius};\r\n        width: 100%;\r\n        margin-top: ${modalTopMarginCss};\r\n      }\r\n\r\n      header {\r\n        position: relative;\r\n        background-color: #36a483;\r\n        color: white;\r\n        border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\r\n        border: ${modalBorder};\r\n        border-bottom: 0;\r\n        text-align: center;\r\n        padding-bottom: ${modalHeaderBottomPaddingCss};\r\n      }\r\n\r\n      .title {\r\n        margin: 0;\r\n        padding: 0;\r\n        font-size: ${titleFontSize};\r\n        font-weight: bold;\r\n        line-height: ${titleLineHeight};\r\n      }\r\n\r\n      .subtitle {\r\n        margin: 0;\r\n        padding: 0;\r\n        font-weight: normal;\r\n        padding-top: 0;\r\n        font-size: ${subtitleFontSize};\r\n        line-height: ${subtitleLineHeight};\r\n      }\r\n\r\n      .modal-body {\r\n        background-color: #f5f5f7;\r\n        border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\r\n        border: ${modalBorder};\r\n        border-top: 0;\r\n        padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\r\n        color: #333;\r\n        margin-bottom: 2.5rem;\r\n        min-height: 5rem;\r\n      }\r\n\r\n      .content {\r\n        overflow-y: auto;\r\n        max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\r\n        min-height: 5rem;\r\n        padding: 0 0 calc(${scrollOffset}) 0;\r\n      }\r\n\r\n      .headline {\r\n        font-size: ${headlineFontSize};\r\n        font-weight: bold;\r\n        text-align: center;\r\n        line-height: ${headlineLineHeight};\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n\r\n      .message {\r\n        margin: 1rem 0 0 0;\r\n        text-align: center;\r\n        font-size: ${messageFontSize};\r\n        line-height: ${messageLineHeight};\r\n      }\r\n\r\n      .logo-icon {\r\n        border-radius: 100%;\r\n        border: 3px solid #fff;\r\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\r\n          0 2px 2px 0 rgba(0, 0, 0, 0.08);\r\n        width: ${modalLogoSize};\r\n        height: ${modalLogoSize};\r\n        margin: -2.9rem auto 0.5rem auto;\r\n        background-color: black;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n      }\r\n\r\n      .logo-icon svg {\r\n        width: calc(${modalLogoSize} * 0.65);\r\n        height: calc(${modalLogoSize} * 0.65);\r\n      }\r\n\r\n      .logo-icon svg .fill-color {\r\n        fill: white;\r\n      }\r\n\r\n      .logo-icon svg .stroke-color {\r\n        stroke: red;\r\n      }\r\n\r\n      .close-button {\r\n        position: absolute;\r\n        right: 1.2rem;\r\n        top: 1.2rem;\r\n        width: 2rem;\r\n        height: 2rem;\r\n        border-radius: 100%;\r\n        border: 0;\r\n        padding: 0;\r\n        cursor: pointer;\r\n        background-color: white;\r\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\r\n          0 4px 4px 0 rgba(0, 0, 0, 0.08);\r\n      }\r\n\r\n      .sr-only {\r\n        position: absolute;\r\n        width: 1px;\r\n        height: 1px;\r\n        padding: 0;\r\n        margin: -1px;\r\n        overflow: hidden;\r\n        clip: rect(0, 0, 0, 0);\r\n        border: 0;\r\n      }\r\n\r\n      slot::slotted(.sr-only) {\r\n        position: absolute;\r\n        width: 1px;\r\n        height: 1px;\r\n        padding: 0;\r\n        margin: -1px;\r\n        overflow: hidden;\r\n        clip: rect(0, 0, 0, 0);\r\n        border: 0;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport closeIcon from '@internetarchive/icon-close/index.js';\nimport iaIcon from '@internetarchive/icon-ia-logo/index.js';\n\nimport { ModalConfig } from './modal-config';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n  /**\n   * The ModalConfig that displayed the template\n   *\n   * @type {ModalConfig}\n   * @memberof ModalTemplate\n   */\n  @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"modal-wrapper\">\n        <div class=\"modal-container\">\n          <header style=\"background-color: ${this.config.headerColor}\">\n            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n            ${this.config.showHeaderLogo\n              ? html`<div class=\"logo-icon\">${iaIcon}</div>`\n              : nothing}\n            ${this.config.title\n              ? html`<h1 class=\"title\">${this.config.title}</h1>`\n              : ''}\n            ${this.config.subtitle\n              ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n              : ''}\n          </header>\n          <section\n            class=\"modal-body\"\n            style=\"background-color: ${this.config.bodyColor}\"\n          >\n            <div class=\"content\">\n              <div\n                class=\"processing-logo ${this.config.showProcessingIndicator\n                  ? ''\n                  : 'hidden'}\"\n              >\n                <ia-activity-indicator\n                  .mode=${this.config.processingImageMode}\n                ></ia-activity-indicator>\n              </div>\n              ${this.config.headline\n                ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n                : ''}\n              ${this.config.message\n                ? html` <p class=\"message\">${this.config.message}</p> `\n                : ''}\n\n              <div class=\"slot-container\">\n                <slot> </slot>\n              </div>\n            </div>\n          </section>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Dispatch the `closeButtonPressed` event to the consumer\n   *\n   * @private\n   * @memberof ModalTemplate\n   */\n  private handleCloseButton(): void {\n    const event = new Event('closeButtonPressed');\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * The close button template\n   *\n   * @readonly\n   * @private\n   * @type {TemplateResult}\n   * @memberof ModalTemplate\n   */\n  private get closeButtonTemplate(): TemplateResult {\n    return html`\n      <button\n        type=\"button\"\n        class=\"close-button\"\n        tabindex=\"0\"\n        @click=${this.handleCloseButton}\n      >\n        ${closeIcon}\n      </button>\n    `;\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n    const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n    const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n    const modalBorder = css`var(--modalBorder, 2px solid black)`;\n    // if the content of the modal is too big to fit on screen, this sets the bottom margin\n    // it's not exact, but a close estimation\n    const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n    const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n    const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n    const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n    const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n    const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n    const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n    const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n    const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n    const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n    const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n    const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n    const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n    return css`\n      .processing-logo {\n        margin: auto;\n        width: ${processingImageSize};\n        height: ${processingImageSize};\n      }\n\n      .processing-logo.hidden {\n        height: 1rem;\n      }\n\n      .processing-logo.hidden ia-activity-indicator {\n        display: none;\n      }\n\n      .modal-wrapper {\n        outline: none;\n      }\n\n      .modal-container {\n        border-radius: ${modalCornerRadius};\n        width: 100%;\n        margin-top: ${modalTopMarginCss};\n      }\n\n      header {\n        position: relative;\n        background-color: #36a483;\n        color: white;\n        border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n        border: ${modalBorder};\n        border-bottom: 0;\n        text-align: center;\n        padding-bottom: ${modalHeaderBottomPaddingCss};\n      }\n\n      .title {\n        margin: 0;\n        padding: 0;\n        font-size: ${titleFontSize};\n        font-weight: bold;\n        line-height: ${titleLineHeight};\n      }\n\n      .subtitle {\n        margin: 0;\n        padding: 0;\n        font-weight: normal;\n        padding-top: 0;\n        font-size: ${subtitleFontSize};\n        line-height: ${subtitleLineHeight};\n      }\n\n      .modal-body {\n        background-color: #f5f5f7;\n        border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n        border: ${modalBorder};\n        border-top: 0;\n        padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n        color: #333;\n        margin-bottom: 2.5rem;\n        min-height: 5rem;\n      }\n\n      .content {\n        overflow-y: auto;\n        max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n        min-height: 5rem;\n        padding: 0 0 calc(${scrollOffset}) 0;\n      }\n\n      .headline {\n        font-size: ${headlineFontSize};\n        font-weight: bold;\n        text-align: center;\n        line-height: ${headlineLineHeight};\n        margin: 0;\n        padding: 0;\n      }\n\n      .message {\n        margin: 1rem 0 0 0;\n        text-align: center;\n        font-size: ${messageFontSize};\n        line-height: ${messageLineHeight};\n      }\n\n      .logo-icon {\n        border-radius: 100%;\n        border: 3px solid #fff;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n          0 2px 2px 0 rgba(0, 0, 0, 0.08);\n        width: ${modalLogoSize};\n        height: ${modalLogoSize};\n        margin: -2.9rem auto 0.5rem auto;\n        background-color: black;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .logo-icon svg {\n        width: calc(${modalLogoSize} * 0.65);\n        height: calc(${modalLogoSize} * 0.65);\n      }\n\n      .logo-icon svg .fill-color {\n        fill: white;\n      }\n\n      .logo-icon svg .stroke-color {\n        stroke: red;\n      }\n\n      .close-button {\n        position: absolute;\n        right: 1.2rem;\n        top: 1.2rem;\n        width: 2rem;\n        height: 2rem;\n        border-radius: 100%;\n        border: 0;\n        padding: 0;\n        cursor: pointer;\n        background-color: white;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n          0 4px 4px 0 rgba(0, 0, 0, 0.08);\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      slot::slotted(.sr-only) {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,62 +1,62 @@
-import { __awaiter } from "tslib";
-import { expect } from '@open-wc/testing';
-import { html } from 'lit';
-import { ModalConfig } from '../src/modal-config';
-describe('Modal Config', () => {
-    it('can be instantiated properly', () => __awaiter(void 0, void 0, void 0, function* () {
-        const config = new ModalConfig();
-        const title = html `Foo`;
-        config.title = title;
-        config.headerColor = 'green';
-        expect(config.title).to.equal(title);
-        expect(config.headerColor).to.equal('green');
-    }));
-    it('can be instantiated properly with constructor', () => __awaiter(void 0, void 0, void 0, function* () {
-        const title = html `Foo`;
-        const subtitle = html `Bar`;
-        const headline = html `Baz`;
-        const message = html `Boop`;
-        const headerColor = 'blue';
-        const showProcessingIndicator = true;
-        const processingImageMode = 'processing';
-        const showCloseButton = false;
-        const showHeaderLogo = false;
-        const closeOnBackdropClick = false;
-        const config = new ModalConfig({
-            title: title,
-            subtitle: subtitle,
-            headline: headline,
-            message: message,
-            headerColor: headerColor,
-            showProcessingIndicator: showProcessingIndicator,
-            processingImageMode: processingImageMode,
-            showCloseButton: showCloseButton,
-            showHeaderLogo: showHeaderLogo,
-            closeOnBackdropClick: closeOnBackdropClick,
-        });
-        expect(config.title).to.equal(title);
-        expect(config.subtitle).to.equal(subtitle);
-        expect(config.headline).to.equal(headline);
-        expect(config.message).to.equal(message);
-        expect(config.headerColor).to.equal(headerColor);
-        expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
-        expect(config.processingImageMode).to.equal(processingImageMode);
-        expect(config.showCloseButton).to.equal(showCloseButton);
-        expect(config.showHeaderLogo).to.equal(showHeaderLogo);
-        expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
-    }));
-    it('instantiates properly with defaults', () => __awaiter(void 0, void 0, void 0, function* () {
-        const config = new ModalConfig();
-        expect(config.title).to.equal(undefined);
-        expect(config.subtitle).to.equal(undefined);
-        expect(config.headline).to.equal(undefined);
-        expect(config.message).to.equal(undefined);
-        expect(config.headerColor).to.equal('#55A183');
-        expect(config.showProcessingIndicator).to.equal(false);
-        expect(config.processingImageMode).to.equal('complete');
-        expect(config.showCloseButton).to.equal(true);
-        expect(config.showHeaderLogo).to.equal(true);
-        expect(config.closeOnBackdropClick).to.equal(true);
-    }));
-});
+import { __awaiter } from "tslib";
+import { expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { ModalConfig } from '../src/modal-config';
+describe('Modal Config', () => {
+    it('can be instantiated properly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const config = new ModalConfig();
+        const title = html `Foo`;
+        config.title = title;
+        config.headerColor = 'green';
+        expect(config.title).to.equal(title);
+        expect(config.headerColor).to.equal('green');
+    }));
+    it('can be instantiated properly with constructor', () => __awaiter(void 0, void 0, void 0, function* () {
+        const title = html `Foo`;
+        const subtitle = html `Bar`;
+        const headline = html `Baz`;
+        const message = html `Boop`;
+        const headerColor = 'blue';
+        const showProcessingIndicator = true;
+        const processingImageMode = 'processing';
+        const showCloseButton = false;
+        const showHeaderLogo = false;
+        const closeOnBackdropClick = false;
+        const config = new ModalConfig({
+            title: title,
+            subtitle: subtitle,
+            headline: headline,
+            message: message,
+            headerColor: headerColor,
+            showProcessingIndicator: showProcessingIndicator,
+            processingImageMode: processingImageMode,
+            showCloseButton: showCloseButton,
+            showHeaderLogo: showHeaderLogo,
+            closeOnBackdropClick: closeOnBackdropClick,
+        });
+        expect(config.title).to.equal(title);
+        expect(config.subtitle).to.equal(subtitle);
+        expect(config.headline).to.equal(headline);
+        expect(config.message).to.equal(message);
+        expect(config.headerColor).to.equal(headerColor);
+        expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
+        expect(config.processingImageMode).to.equal(processingImageMode);
+        expect(config.showCloseButton).to.equal(showCloseButton);
+        expect(config.showHeaderLogo).to.equal(showHeaderLogo);
+        expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
+    }));
+    it('instantiates properly with defaults', () => __awaiter(void 0, void 0, void 0, function* () {
+        const config = new ModalConfig();
+        expect(config.title).to.equal(undefined);
+        expect(config.subtitle).to.equal(undefined);
+        expect(config.headline).to.equal(undefined);
+        expect(config.message).to.equal(undefined);
+        expect(config.headerColor).to.equal('#55A183');
+        expect(config.showProcessingIndicator).to.equal(false);
+        expect(config.processingImageMode).to.equal('complete');
+        expect(config.showCloseButton).to.equal(true);
+        expect(config.showHeaderLogo).to.equal(true);
+        expect(config.closeOnBackdropClick).to.equal(true);
+    }));
+});
 //# sourceMappingURL=modal-config.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-config.test.js","sourceRoot":"","sources":["../../test/modal-config.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\r\nimport { html } from 'lit';\r\n\r\nimport { ModalConfig } from '../src/modal-config';\r\n\r\ndescribe('Modal Config', () => {\r\n  it('can be instantiated properly', async () => {\r\n    const config = new ModalConfig();\r\n    const title = html`Foo`;\r\n    config.title = title;\r\n    config.headerColor = 'green';\r\n\r\n    expect(config.title).to.equal(title);\r\n    expect(config.headerColor).to.equal('green');\r\n  });\r\n\r\n  it('can be instantiated properly with constructor', async () => {\r\n    const title = html`Foo`;\r\n    const subtitle = html`Bar`;\r\n    const headline = html`Baz`;\r\n    const message = html`Boop`;\r\n\r\n    const headerColor = 'blue';\r\n    const showProcessingIndicator = true;\r\n    const processingImageMode = 'processing';\r\n    const showCloseButton = false;\r\n    const showHeaderLogo = false;\r\n    const closeOnBackdropClick = false;\r\n\r\n    const config = new ModalConfig({\r\n      title: title,\r\n      subtitle: subtitle,\r\n      headline: headline,\r\n      message: message,\r\n      headerColor: headerColor,\r\n      showProcessingIndicator: showProcessingIndicator,\r\n      processingImageMode: processingImageMode,\r\n      showCloseButton: showCloseButton,\r\n      showHeaderLogo: showHeaderLogo,\r\n      closeOnBackdropClick: closeOnBackdropClick,\r\n    });\r\n\r\n    expect(config.title).to.equal(title);\r\n    expect(config.subtitle).to.equal(subtitle);\r\n    expect(config.headline).to.equal(headline);\r\n    expect(config.message).to.equal(message);\r\n\r\n    expect(config.headerColor).to.equal(headerColor);\r\n    expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);\r\n    expect(config.processingImageMode).to.equal(processingImageMode);\r\n    expect(config.showCloseButton).to.equal(showCloseButton);\r\n    expect(config.showHeaderLogo).to.equal(showHeaderLogo);\r\n    expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);\r\n  });\r\n\r\n  it('instantiates properly with defaults', async () => {\r\n    const config = new ModalConfig();\r\n    expect(config.title).to.equal(undefined);\r\n    expect(config.subtitle).to.equal(undefined);\r\n    expect(config.headline).to.equal(undefined);\r\n    expect(config.message).to.equal(undefined);\r\n    expect(config.headerColor).to.equal('#55A183');\r\n    expect(config.showProcessingIndicator).to.equal(false);\r\n    expect(config.processingImageMode).to.equal('complete');\r\n    expect(config.showCloseButton).to.equal(true);\r\n    expect(config.showHeaderLogo).to.equal(true);\r\n    expect(config.closeOnBackdropClick).to.equal(true);\r\n  });\r\n});\r\n"]}
+{"version":3,"file":"modal-config.test.js","sourceRoot":"","sources":["../../test/modal-config.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport { ModalConfig } from '../src/modal-config';\n\ndescribe('Modal Config', () => {\n  it('can be instantiated properly', async () => {\n    const config = new ModalConfig();\n    const title = html`Foo`;\n    config.title = title;\n    config.headerColor = 'green';\n\n    expect(config.title).to.equal(title);\n    expect(config.headerColor).to.equal('green');\n  });\n\n  it('can be instantiated properly with constructor', async () => {\n    const title = html`Foo`;\n    const subtitle = html`Bar`;\n    const headline = html`Baz`;\n    const message = html`Boop`;\n\n    const headerColor = 'blue';\n    const showProcessingIndicator = true;\n    const processingImageMode = 'processing';\n    const showCloseButton = false;\n    const showHeaderLogo = false;\n    const closeOnBackdropClick = false;\n\n    const config = new ModalConfig({\n      title: title,\n      subtitle: subtitle,\n      headline: headline,\n      message: message,\n      headerColor: headerColor,\n      showProcessingIndicator: showProcessingIndicator,\n      processingImageMode: processingImageMode,\n      showCloseButton: showCloseButton,\n      showHeaderLogo: showHeaderLogo,\n      closeOnBackdropClick: closeOnBackdropClick,\n    });\n\n    expect(config.title).to.equal(title);\n    expect(config.subtitle).to.equal(subtitle);\n    expect(config.headline).to.equal(headline);\n    expect(config.message).to.equal(message);\n\n    expect(config.headerColor).to.equal(headerColor);\n    expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);\n    expect(config.processingImageMode).to.equal(processingImageMode);\n    expect(config.showCloseButton).to.equal(showCloseButton);\n    expect(config.showHeaderLogo).to.equal(showHeaderLogo);\n    expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);\n  });\n\n  it('instantiates properly with defaults', async () => {\n    const config = new ModalConfig();\n    expect(config.title).to.equal(undefined);\n    expect(config.subtitle).to.equal(undefined);\n    expect(config.headline).to.equal(undefined);\n    expect(config.message).to.equal(undefined);\n    expect(config.headerColor).to.equal('#55A183');\n    expect(config.showProcessingIndicator).to.equal(false);\n    expect(config.processingImageMode).to.equal('complete');\n    expect(config.showCloseButton).to.equal(true);\n    expect(config.showHeaderLogo).to.equal(true);\n    expect(config.closeOnBackdropClick).to.equal(true);\n  });\n});\n"]}

package/dist/test/modal-manager.test.d.ts

@@ -1 +1 @@
-import '../src/modal-manager';
+import '../src/modal-manager';