@internetarchive/modal-manager 0.2.3 → 0.2.5

package/demo/index.html

@@ -21,6 +21,7 @@
 
     modal-manager {
       display: none;
+      --modalTitleLineHeight: 4.5rem;
     }
 
     modal-manager[mode='open'] {
@@ -73,6 +74,7 @@
           <button @click=${showModalUserCannotClose}>Unclosable Modal</button>
           <button @click=${showModalUserCannotClickBackdrop}>Unclickable Backdrop</button>
           <button @click=${showOverflowModal}>Text-heavy Modal</button>
+          <button @click=${showModalWithoutLogo}>Modal Without Logo</button>
         </div>
 
         <h3>Some Content</h3>
@@ -109,6 +111,7 @@
       config.headline = 'Error'
       config.message = 'An error occurred while processing your donation.';
       config.headerColor = '#691916';
+      config.bodyColor = '#fff';
 
       modalManager.showModal({
         config
@@ -197,6 +200,18 @@
       });
     }
 
+    function showModalWithoutLogo() {
+      const config = new ModalConfig();
+      config.headline = 'Success';
+      config.title = html`Donation Received`;
+      config.message = 'Thank you for your support!';
+      config.headerColor = '#194880';
+      config.showHeaderLogo = false;
+      modalManager.showModal({
+        config
+      });
+    }
+
     function showCompleteModal() {
       const config = new ModalConfig();
       config.showProcessingIndicator = true;

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

@@ -35,11 +35,17 @@ export declare class ModalConfig {
      */
     message?: TemplateResult;
     /**
-     * The color of the header
+     * 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
      *
@@ -58,6 +64,12 @@ export declare class ModalConfig {
      * @memberof ModalConfig
      */
     showCloseButton: boolean;
+    /**
+     * Show the close button
+     *
+     * @memberof ModalConfig
+     */
+    showHeaderLogo: boolean;
     /**
      * Close the modal if the user taps on the background
      *
@@ -70,9 +82,11 @@ export declare class ModalConfig {
         headline?: TemplateResult;
         message?: TemplateResult;
         headerColor?: string;
+        bodyColor?: string;
         showProcessingIndicator?: boolean;
         processingImageMode?: string;
         showCloseButton?: boolean;
+        showHeaderLogo?: boolean;
         closeOnBackdropClick?: boolean;
     });
 }

package/dist/src/modal-config.js

@@ -6,16 +6,18 @@
  */
 export class ModalConfig {
     constructor(options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.title = options === null || options === void 0 ? void 0 : options.title;
         this.subtitle = options === null || options === void 0 ? void 0 : options.subtitle;
         this.headline = options === null || options === void 0 ? void 0 : options.headline;
         this.message = options === null || options === void 0 ? void 0 : options.message;
         this.headerColor = (_a = options === null || options === void 0 ? void 0 : options.headerColor) !== null && _a !== void 0 ? _a : '#55A183';
-        this.showProcessingIndicator = (_b = options === null || options === void 0 ? void 0 : options.showProcessingIndicator) !== null && _b !== void 0 ? _b : false;
-        this.processingImageMode = (_c = options === null || options === void 0 ? void 0 : options.processingImageMode) !== null && _c !== void 0 ? _c : 'complete';
-        this.showCloseButton = (_d = options === null || options === void 0 ? void 0 : options.showCloseButton) !== null && _d !== void 0 ? _d : true;
-        this.closeOnBackdropClick = (_e = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _e !== void 0 ? _e : true;
+        this.bodyColor = (_b = options === null || options === void 0 ? void 0 : options.bodyColor) !== null && _b !== void 0 ? _b : '#f5f5f7';
+        this.showProcessingIndicator = (_c = options === null || options === void 0 ? void 0 : options.showProcessingIndicator) !== null && _c !== void 0 ? _c : false;
+        this.processingImageMode = (_d = options === null || options === void 0 ? void 0 : options.processingImageMode) !== null && _d !== void 0 ? _d : 'complete';
+        this.showCloseButton = (_e = options === null || options === void 0 ? void 0 : options.showCloseButton) !== null && _e !== void 0 ? _e : true;
+        this.showHeaderLogo = (_f = options === null || options === void 0 ? void 0 : options.showHeaderLogo) !== null && _f !== void 0 ? _f : true;
+        this.closeOnBackdropClick = (_g = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _g !== void 0 ? _g : true;
     }
 }
 //# sourceMappingURL=modal-config.js.map

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;IAoEtB,YAAY,OAUX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,uBAAuB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,oBAAoB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import { 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 color of the header\n   *\n   * @memberof ModalConfig\n   */\n  headerColor: 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, currently `processing` or `complete`\n   *\n   * @memberof ModalConfig\n   */\n  processingImageMode: string;\n\n  /**\n   * Show the close button\n   *\n   * @memberof ModalConfig\n   */\n  showCloseButton: 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    showProcessingIndicator?: boolean;\n    processingImageMode?: string;\n    showCloseButton?: 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.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n    this.processingImageMode = options?.processingImageMode ?? 'complete';\n    this.showCloseButton = options?.showCloseButton ?? 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;IAkFtB,YAAY,OAYX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,cAAc,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import { 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, currently `processing` or `complete`\n   *\n   * @memberof ModalConfig\n   */\n  processingImageMode: string;\n\n  /**\n   * Show the close button\n   *\n   * @memberof ModalConfig\n   */\n  showCloseButton: boolean;\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?: string;\n    showCloseButton?: boolean;\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 ?? '#f5f5f7';\n    this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n    this.processingImageMode = options?.processingImageMode ?? 'complete';\n    this.showCloseButton = options?.showCloseButton ?? true;\n    this.showHeaderLogo = options?.showHeaderLogo ?? true;\n    this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n  }\n}\n"]}

package/dist/src/modal-template.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import closeIcon from '@internetarchive/icon-close';
@@ -23,9 +23,9 @@ let ModalTemplate = class ModalTemplate extends LitElement {
         <div class="modal-container">
           <header style="background-color: ${this.config.headerColor}">
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
-            <div class="logo-icon">
-              ${iaLogo}
-            </div>
+            ${this.config.showHeaderLogo
+            ? html `<div class="logo-icon">${iaLogo}</div>`
+            : nothing}
             ${this.config.title
             ? html `<h1 class="title">${this.config.title}</h1>`
             : ''}
@@ -33,7 +33,10 @@ let ModalTemplate = class ModalTemplate extends LitElement {
             ? html `<h2 class="subtitle">${this.config.subtitle}</h2>`
             : ''}
           </header>
-          <section class="modal-body">
+          <section
+            class="modal-body"
+            style="background-color: ${this.config.bodyColor}"
+          >
             <div class="content">
               <div
                 class="processing-logo ${this.config.showProcessingIndicator
@@ -44,7 +47,6 @@ let ModalTemplate = class ModalTemplate extends LitElement {
                   .mode=${this.config.processingImageMode}
                 ></ia-activity-indicator>
               </div>
-
               ${this.config.headline
             ? html ` <h1 class="headline">${this.config.headline}</h1> `
             : ''}

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 } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport closeIcon from '@internetarchive/icon-close';\nimport iaLogo from '@internetarchive/icon-ia-logo';\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            <div class=\"logo-icon\">\n              ${iaLogo}\n            </div>\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 class=\"modal-body\">\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\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  }\n}\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';\nimport iaLogo from '@internetarchive/icon-ia-logo';\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\">${iaLogo}</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  }\n}\n"]}

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

@@ -20,6 +20,7 @@ describe('Modal Config', () => {
         const showProcessingIndicator = true;
         const processingImageMode = 'processing';
         const showCloseButton = false;
+        const showHeaderLogo = false;
         const closeOnBackdropClick = false;
         const config = new ModalConfig({
             title: title,
@@ -30,6 +31,7 @@ describe('Modal Config', () => {
             showProcessingIndicator: showProcessingIndicator,
             processingImageMode: processingImageMode,
             showCloseButton: showCloseButton,
+            showHeaderLogo: showHeaderLogo,
             closeOnBackdropClick: closeOnBackdropClick,
         });
         expect(config.title).to.equal(title);
@@ -40,6 +42,7 @@ describe('Modal Config', () => {
         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* () {
@@ -52,6 +55,7 @@ describe('Modal Config', () => {
         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);
     }));
 });

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';\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 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      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.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.closeOnBackdropClick).to.equal(true);\n  });\n});\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.js

@@ -185,5 +185,17 @@ describe('Modal Manager', () => {
         yield elementUpdated(el);
         expect(el.getMode()).to.equal('open');
     }));
+    it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _j;
+        const el = (yield fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        config.showHeaderLogo = false;
+        el.showModal({ config });
+        yield elementUpdated(el);
+        const logoIcon = (_j = el.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.logo-icon');
+        expect(logoIcon).to.not.exist;
+    }));
 });
 //# sourceMappingURL=modal-manager.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\ndescribe('Modal Manager', () => {\n  it('defaults to closed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('can be closed by calling closeModal', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    el.closeModal();\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('can be closed by clicking on the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n\n    backdrop?.dispatchEvent(clickEvent);\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('emits a modeChanged event when opening', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n\n    setTimeout(() => {\n      el.showModal({ config });\n    });\n    const response = await oneEvent(el, 'modeChanged');\n    expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('emits a modeChanged event when closing', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    setTimeout(() => {\n      el.closeModal();\n    });\n    const response = await oneEvent(el, 'modeChanged');\n    expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n  });\n\n  it('can show a modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    expect(el.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('sets the --containerHeight CSS property when the window resizes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    const event = new Event('resize');\n    const propBefore = el.style.getPropertyValue('--containerHeight');\n    expect(propBefore).to.equal('');\n    window.dispatchEvent(event);\n    await elementUpdated(el);\n    const propAfter = el.style.getPropertyValue('--containerHeight');\n    expect(propAfter).to.not.equal('');\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('does not call the userClosedModalCallback when the modal just closes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n    el.closeModal();\n    await elementUpdated(el);\n    expect(callbackCalled).to.equal(false);\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('mode is set to closed when close button is pressed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('open');\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('allows the user to close by clicking on the backdrop if configured to', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = true;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it(\"dont't allow the user to close by clicking on the backdrop if configured to\", async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.getMode()).to.equal('open');\n  });\n});\n"]}
+{"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\ndescribe('Modal Manager', () => {\n  it('defaults to closed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('can be closed by calling closeModal', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    el.closeModal();\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('can be closed by clicking on the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n\n    backdrop?.dispatchEvent(clickEvent);\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('emits a modeChanged event when opening', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n\n    setTimeout(() => {\n      el.showModal({ config });\n    });\n    const response = await oneEvent(el, 'modeChanged');\n    expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('emits a modeChanged event when closing', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    setTimeout(() => {\n      el.closeModal();\n    });\n    const response = await oneEvent(el, 'modeChanged');\n    expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n  });\n\n  it('can show a modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    expect(el.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('sets the --containerHeight CSS property when the window resizes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    const event = new Event('resize');\n    const propBefore = el.style.getPropertyValue('--containerHeight');\n    expect(propBefore).to.equal('');\n    window.dispatchEvent(event);\n    await elementUpdated(el);\n    const propAfter = el.style.getPropertyValue('--containerHeight');\n    expect(propAfter).to.not.equal('');\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('does not call the userClosedModalCallback when the modal just closes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n    el.closeModal();\n    await elementUpdated(el);\n    expect(callbackCalled).to.equal(false);\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('mode is set to closed when close button is pressed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('open');\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('allows the user to close by clicking on the backdrop if configured to', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = true;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it(\"dont't allow the user to close by clicking on the backdrop if configured to\", async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.getMode()).to.equal('open');\n  });\n\n  it('ia logo should not visible on modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.showHeaderLogo = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n    expect(logoIcon).to.not.exist;\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/modal-manager",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A Modal Manager Web Component",
   "repository": {
     "type": "git",

package/src/modal-config.ts

@@ -40,12 +40,19 @@ export class ModalConfig {
   message?: TemplateResult;
 
   /**
-   * The color of the header
+   * 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
    *
@@ -67,6 +74,13 @@ export class ModalConfig {
    */
   showCloseButton: boolean;
 
+  /**
+   * Show the close button
+   *
+   * @memberof ModalConfig
+   */
+  showHeaderLogo: boolean;
+
   /**
    * Close the modal if the user taps on the background
    *
@@ -80,9 +94,11 @@ export class ModalConfig {
     headline?: TemplateResult;
     message?: TemplateResult;
     headerColor?: string;
+    bodyColor?: string;
     showProcessingIndicator?: boolean;
     processingImageMode?: string;
     showCloseButton?: boolean;
+    showHeaderLogo?: boolean;
     closeOnBackdropClick?: boolean;
   }) {
     this.title = options?.title;
@@ -91,9 +107,11 @@ export class ModalConfig {
     this.message = options?.message;
 
     this.headerColor = options?.headerColor ?? '#55A183';
+    this.bodyColor = options?.bodyColor ?? '#f5f5f7';
     this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
     this.processingImageMode = options?.processingImageMode ?? 'complete';
     this.showCloseButton = options?.showCloseButton ?? true;
+    this.showHeaderLogo = options?.showHeaderLogo ?? true;
     this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;
   }
 }

package/src/modal-template.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';
+import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
@@ -24,9 +24,9 @@ export class ModalTemplate extends LitElement {
         <div class="modal-container">
           <header style="background-color: ${this.config.headerColor}">
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
-            <div class="logo-icon">
-              ${iaLogo}
-            </div>
+            ${this.config.showHeaderLogo
+              ? html`<div class="logo-icon">${iaLogo}</div>`
+              : nothing}
             ${this.config.title
               ? html`<h1 class="title">${this.config.title}</h1>`
               : ''}
@@ -34,7 +34,10 @@ export class ModalTemplate extends LitElement {
               ? html`<h2 class="subtitle">${this.config.subtitle}</h2>`
               : ''}
           </header>
-          <section class="modal-body">
+          <section
+            class="modal-body"
+            style="background-color: ${this.config.bodyColor}"
+          >
             <div class="content">
               <div
                 class="processing-logo ${this.config.showProcessingIndicator
@@ -45,7 +48,6 @@ export class ModalTemplate extends LitElement {
                   .mode=${this.config.processingImageMode}
                 ></ia-activity-indicator>
               </div>
-
               ${this.config.headline
                 ? html` <h1 class="headline">${this.config.headline}</h1> `
                 : ''}

package/test/modal-config.test.ts

@@ -24,6 +24,7 @@ describe('Modal Config', () => {
     const showProcessingIndicator = true;
     const processingImageMode = 'processing';
     const showCloseButton = false;
+    const showHeaderLogo = false;
     const closeOnBackdropClick = false;
 
     const config = new ModalConfig({
@@ -35,6 +36,7 @@ describe('Modal Config', () => {
       showProcessingIndicator: showProcessingIndicator,
       processingImageMode: processingImageMode,
       showCloseButton: showCloseButton,
+      showHeaderLogo: showHeaderLogo,
       closeOnBackdropClick: closeOnBackdropClick,
     });
 
@@ -47,6 +49,7 @@ describe('Modal Config', () => {
     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);
   });
 
@@ -60,6 +63,7 @@ describe('Modal Config', () => {
     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);
   });
 });

package/test/modal-manager.test.ts

@@ -228,4 +228,18 @@ describe('Modal Manager', () => {
 
     expect(el.getMode()).to.equal('open');
   });
+
+  it('ia logo should not visible on modal', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManagerInterface;
+
+    const config = new ModalConfig();
+    config.showHeaderLogo = false;
+    el.showModal({ config });
+    await elementUpdated(el);
+
+    const logoIcon = el.shadowRoot?.querySelector('.logo-icon');
+    expect(logoIcon).to.not.exist;
+  });
 });