@internetarchive/modal-manager 2.0.1 → 2.0.3

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

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

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

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+export default html `
+  <svg
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="#fff"
+    title="Left arrow icon"
+    alt="Left arrow icon"
+  >
+    <path
+      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/arrow-left-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-left-icon.js","sourceRoot":"","sources":["../../../src/assets/arrow-left-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,eAAe,IAAI,CAAA;;;;;;;;;;;;CAYlB,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport default html`\n  <svg\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"#fff\"\n    title=\"Left arrow icon\"\n    alt=\"Left arrow icon\"\n  >\n    <path\n      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\"\n    />\n  </svg>\n`;\n"]}

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

@@ -64,6 +64,16 @@ export declare class ModalConfig {
      * @memberof ModalConfig
      */
     showCloseButton: boolean;
+    /**
+     * Show the left nav button
+     *
+     * @memberof ModalConfig
+     */
+    showLeftNavButton: boolean;
+    /**
+     * Left nav button text
+     */
+    leftNavButtonText: string;
     /**
      * Show the close button
      *
@@ -86,6 +96,8 @@ export declare class ModalConfig {
         showProcessingIndicator?: boolean;
         processingImageMode?: 'processing' | 'complete';
         showCloseButton?: boolean;
+        showLeftNavButton?: boolean;
+        leftNavButtonText?: string;
         showHeaderLogo?: boolean;
         closeOnBackdropClick?: boolean;
     });

package/dist/src/modal-config.js

@@ -6,18 +6,20 @@
  */
 export class ModalConfig {
     constructor(options) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         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.bodyColor = (_b = options === null || options === void 0 ? void 0 : options.bodyColor) !== null && _b !== void 0 ? _b : '#f5f5f7';
+        this.bodyColor = (_b = options === null || options === void 0 ? void 0 : options.bodyColor) !== null && _b !== void 0 ? _b : '#fbfbfd';
         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;
+        this.showLeftNavButton = (_f = options === null || options === void 0 ? void 0 : options.showLeftNavButton) !== null && _f !== void 0 ? _f : false;
+        this.leftNavButtonText = (_g = options === null || options === void 0 ? void 0 : options.leftNavButtonText) !== null && _g !== void 0 ? _g : '';
+        this.showHeaderLogo = (_h = options === null || options === void 0 ? void 0 : options.showHeaderLogo) !== null && _h !== void 0 ? _h : true;
+        this.closeOnBackdropClick = (_j = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _j !== void 0 ? _j : 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;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,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,MAAA,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: 'processing' | 'complete';\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?: 'processing' | 'complete';\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"]}
+{"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IA8FtB,YAAY,OAcX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,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,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,iBAAiB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,mCAAI,KAAK,CAAC;QAC7D,IAAI,CAAC,iBAAiB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,mCAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,MAAA,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: 'processing' | 'complete';\n\n  /**\n   * Show the close button\n   *\n   * @memberof ModalConfig\n   */\n  showCloseButton: boolean;\n\n  /**\n   * Show the left nav button\n   *\n   * @memberof ModalConfig\n   */\n  showLeftNavButton: boolean;\n\n  /**\n   * Left nav button text\n   */\n  leftNavButtonText: string;\n\n  /**\n   * Show the close button\n   *\n   * @memberof ModalConfig\n   */\n  showHeaderLogo: boolean;\n\n  /**\n   * Close the modal if the user taps on the background\n   *\n   * @memberof ModalConfig\n   */\n  closeOnBackdropClick: boolean;\n\n  constructor(options?: {\n    title?: TemplateResult;\n    subtitle?: TemplateResult;\n    headline?: TemplateResult;\n    message?: TemplateResult;\n    headerColor?: string;\n    bodyColor?: string;\n    showProcessingIndicator?: boolean;\n    processingImageMode?: 'processing' | 'complete';\n    showCloseButton?: boolean;\n    showLeftNavButton?: boolean;\n    leftNavButtonText?: string;\n    showHeaderLogo?: boolean;\n    closeOnBackdropClick?: boolean;\n  }) {\n    this.title = options?.title;\n    this.subtitle = options?.subtitle;\n    this.headline = options?.headline;\n    this.message = options?.message;\n\n    this.headerColor = options?.headerColor ?? '#55A183';\n    this.bodyColor = options?.bodyColor ?? '#fbfbfd';\n    this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n    this.processingImageMode = options?.processingImageMode ?? 'complete';\n    this.showCloseButton = options?.showCloseButton ?? true;\n    this.showLeftNavButton = options?.showLeftNavButton ?? false;\n    this.leftNavButtonText = options?.leftNavButtonText ?? '';\n    this.showHeaderLogo = options?.showHeaderLogo ?? true;\n    this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n  }\n}\n"]}

package/dist/src/modal-manager-interface.d.ts

@@ -12,11 +12,13 @@ export interface ModalManagerInterface extends LitElement {
      * @param config ModalConfig
      * @param customModalContent TemplateResult | undefined
      * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
+     * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
      */
     showModal(options: {
         config: ModalConfig;
         customModalContent?: TemplateResult;
         userClosedModalCallback?: () => void;
+        userPressedLeftNavButtonCallback?: () => void;
     }): Promise<void>;
     /**
      * Close the currently open modal

package/dist/src/modal-manager-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-manager-interface.js","sourceRoot":"","sources":["../../src/modal-manager-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement, TemplateResult } from 'lit';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerMode } from './modal-manager-mode';\n\nexport interface ModalManagerInterface extends LitElement {\n  /**\n   * Get the current modal mode.\n   */\n  getMode(): ModalManagerMode;\n\n  /**\n   * Show a modal from a given ModalConfig\n   *\n   * @param config ModalConfig\n   * @param customModalContent TemplateResult | undefined\n   * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed\n   */\n  showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n  }): Promise<void>;\n\n  /**\n   * Close the currently open modal\n   */\n  closeModal(): void;\n}\n"]}
+{"version":3,"file":"modal-manager-interface.js","sourceRoot":"","sources":["../../src/modal-manager-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement, TemplateResult } from 'lit';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerMode } from './modal-manager-mode';\n\nexport interface ModalManagerInterface extends LitElement {\n  /**\n   * Get the current modal mode.\n   */\n  getMode(): ModalManagerMode;\n\n  /**\n   * Show a modal from a given ModalConfig\n   *\n   * @param config ModalConfig\n   * @param customModalContent TemplateResult | undefined\n   * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed\n   * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed\n   */\n  showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n    userPressedLeftNavButtonCallback?: () => void;\n  }): Promise<void>;\n\n  /**\n   * Close the currently open modal\n   */\n  closeModal(): void;\n}\n"]}

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

@@ -40,7 +40,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
      * @type {ModalTemplate}
      * @memberof ModalManager
      */
-    private modalTemplate;
+    private modalTemplate?;
     modal: Modal;
     firstUpdated(): Promise<void>;
     disconnectedCallback(): void;
@@ -64,6 +64,13 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
      * @memberof ModalManager
      */
     private userClosedModalCallback?;
+    /**
+     * A callback if the user presses the left nav button
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private userPressedLeftNavButtonCallback?;
     /**
      * Call the userClosedModalCallback and reset it if it exists
      *
@@ -71,11 +78,19 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
      * @memberof ModalManager
      */
     private callUserClosedModalCallback;
+    /**
+     * Call the user pressed left nav button callback and reset it if it exists
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private callUserPressedLeftNavButtonCallback;
     /** @inheritdoc */
     showModal(options: {
         config: ModalConfig;
         customModalContent?: TemplateResult;
         userClosedModalCallback?: () => void;
+        userPressedLeftNavButtonCallback?: () => void;
     }): Promise<void>;
     /** @inheritdoc */
     updated(changed: PropertyValues): void;

package/dist/src/modal-manager.js

@@ -64,6 +64,7 @@ let ModalManager = class ModalManager extends LitElement {
         <div class="backdrop" @click=${this.backdropClicked}></div>
         <modal-template
           @closeButtonPressed=${this.closeButtonPressed}
+          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}
           tabindex="-1"
         >
           ${this.customModalContent}
@@ -79,7 +80,8 @@ let ModalManager = class ModalManager extends LitElement {
     closeModal() {
         this.mode = ModalManagerMode.Closed;
         this.customModalContent = undefined;
-        this.modalTemplate.config = new ModalConfig();
+        if (this.modalTemplate)
+            this.modalTemplate.config = new ModalConfig();
         this.modal.deactivate();
     }
     /**
@@ -97,16 +99,33 @@ let ModalManager = class ModalManager extends LitElement {
         if (callback)
             callback();
     }
+    /**
+     * Call the user pressed left nav button callback and reset it if it exists
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    callUserPressedLeftNavButtonCallback() {
+        // avoids an infinite showModal() loop, as above
+        const callback = this.userPressedLeftNavButtonCallback;
+        this.userPressedLeftNavButtonCallback = undefined;
+        if (callback)
+            callback();
+    }
     /** @inheritdoc */
     showModal(options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.closeOnBackdropClick = options.config.closeOnBackdropClick;
             this.userClosedModalCallback = options.userClosedModalCallback;
-            this.modalTemplate.config = options.config;
+            this.userPressedLeftNavButtonCallback =
+                options.userPressedLeftNavButtonCallback;
             this.customModalContent = options.customModalContent;
             this.mode = ModalManagerMode.Open;
-            yield this.modalTemplate.updateComplete;
-            this.modalTemplate.focus();
+            if (this.modalTemplate) {
+                this.modalTemplate.config = options.config;
+                yield this.modalTemplate.updateComplete;
+                this.modalTemplate.focus();
+            }
             this.modal.activate();
         });
     }

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

@@ -1 +1 @@
-{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  CSSResult,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n  /**\n   * The current mode of the ModalManager\n   *\n   * Current options are `modal` or `closed`\n   *\n   * @type {ModalManagerMode}\n   * @memberof ModalManager\n   */\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\n    ModalManagerMode.Closed;\n\n  /**\n   * Custom content to display in the modal's content slot\n   *\n   * @type {(TemplateResult | undefined)}\n   * @memberof ModalManager\n   */\n  @property({ type: Object }) customModalContent?: TemplateResult;\n\n  /**\n   * This hostBridge handles environmental-specific interactions such as adding classes\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\n   *\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n   * `ModalManagerHostBridgeInterface`\n   *\n   * @type {ModalManagerHostBridgeInterface}\n   * @memberof ModalManager\n   */\n  @property({ type: Object })\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n    this\n  );\n\n  /**\n   * Reference to the ModalTemplate DOM element\n   *\n   * @private\n   * @type {ModalTemplate}\n   * @memberof ModalManager\n   */\n  @query('modal-template') private modalTemplate!: ModalTemplate;\n\n  // Imported tab handling from shoelace\n  public modal = new Modal(this);\n\n  async firstUpdated(): Promise<void> {\n    // Give the browser a chance to paint\n    // eslint-disable-next-line no-promise-executor-return\n    await new Promise(r => setTimeout(r, 0));\n\n    if (this.closeOnBackdropClick) {\n      this.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.backdropClicked();\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.modal.deactivate();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n        <modal-template\n          @closeButtonPressed=${this.closeButtonPressed}\n          tabindex=\"-1\"\n        >\n          ${this.customModalContent}\n        </modal-template>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  getMode(): ModalManagerMode {\n    return this.mode;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.mode = ModalManagerMode.Closed;\n    this.customModalContent = undefined;\n    this.modalTemplate.config = new ModalConfig();\n    this.modal.deactivate();\n  }\n\n  /**\n   * Whether the modal should close if the user taps on the backdrop\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeOnBackdropClick = true;\n\n  /**\n   * A callback if the user closes the modal\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userClosedModalCallback?: () => void;\n\n  /**\n   * Call the userClosedModalCallback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserClosedModalCallback(): void {\n    // we assign the callback to a temp var and undefine it before calling it\n    // otherwise, we run into the potential for an infinite loop if the\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n    const callback = this.userClosedModalCallback;\n    this.userClosedModalCallback = undefined;\n    if (callback) callback();\n  }\n\n  /** @inheritdoc */\n  async showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n  }): Promise<void> {\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n    this.userClosedModalCallback = options.userClosedModalCallback;\n    this.modalTemplate.config = options.config;\n    this.customModalContent = options.customModalContent;\n    this.mode = ModalManagerMode.Open;\n    await this.modalTemplate.updateComplete;\n    this.modalTemplate.focus();\n    this.modal.activate();\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    /* istanbul ignore else */\n    if (changed.has('mode')) {\n      this.handleModeChange();\n    }\n  }\n\n  /**\n   * Called when the backdrop is clicked\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private backdropClicked(): void {\n    if (this.closeOnBackdropClick) {\n      this.closeModal();\n      this.callUserClosedModalCallback();\n    }\n  }\n\n  /**\n   * Handle the mode change\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private handleModeChange(): void {\n    this.hostBridge.handleModeChange(this.mode);\n    this.emitModeChangeEvent();\n  }\n\n  /**\n   * Emit a modeChange event\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private emitModeChangeEvent(): void {\n    const event = new CustomEvent('modeChanged', {\n      detail: { mode: this.mode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Called when the modal close button is pressed. Closes the modal.\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeButtonPressed(): void {\n    this.closeModal();\n    this.callUserClosedModalCallback();\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n    const modalWidth = css`var(--modalWidth, 32rem)`;\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n    const modalZindex = css`var(--modalZindex, 2000)`;\n\n    return css`\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n\n      .backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        background-color: ${modalBackdropColor};\n        width: 100%;\n        height: 100%;\n        z-index: ${modalBackdropZindex};\n      }\n\n      modal-template {\n        outline: 0;\n        position: fixed;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, 0);\n        z-index: ${modalZindex};\n        width: ${modalWidth};\n        max-width: ${modalMaxWidth};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,GAAG,GAIJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,MAAM,kBAAkB,CAAC;AAErC,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAGrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACL;;;;;;;WAOG;QACwC,SAAI,GAC7C,gBAAgB,CAAC,MAAM,CAAC;QAU1B;;;;;;;;;WASG;QAEH,eAAU,GAAoC,IAAI,sBAAsB,CACtE,IAAI,CACL,CAAC;QAWF,sCAAsC;QAC/B,UAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;QAkD/B;;;;;WAKG;QACK,yBAAoB,GAAG,IAAI,CAAC;IAgKtC,CAAC;IAtNO,YAAY;;YAChB,qCAAqC;YACrC,sDAAsD;YACtD,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YAEzC,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBACpD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;wBACtB,IAAI,CAAC,eAAe,EAAE,CAAC;qBACxB;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC;KAAA;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,eAAe;;gCAE3B,IAAI,CAAC,kBAAkB;kCACrB,IAAI,CAAC,oCAAoC;;;YAG/D,IAAI,CAAC,kBAAkB;;;KAG9B,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,OAAO;QACL,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,kBAAkB;IAClB,UAAU;QACR,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;QACpC,IAAI,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACtE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IA0BD;;;;;OAKG;IACK,2BAA2B;QACjC,yEAAyE;QACzE,mEAAmE;QACnE,yFAAyF;QACzF,MAAM,QAAQ,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAC9C,IAAI,CAAC,uBAAuB,GAAG,SAAS,CAAC;QACzC,IAAI,QAAQ;YAAE,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IACK,oCAAoC;QAC1C,gDAAgD;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,gCAAgC,CAAC;QACvD,IAAI,CAAC,gCAAgC,GAAG,SAAS,CAAC;QAClD,IAAI,QAAQ;YAAE,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED,kBAAkB;IACZ,SAAS,CAAC,OAKf;;YACC,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,MAAM,CAAC,oBAAoB,CAAC;YAChE,IAAI,CAAC,uBAAuB,GAAG,OAAO,CAAC,uBAAuB,CAAC;YAC/D,IAAI,CAAC,gCAAgC;gBACnC,OAAO,CAAC,gCAAgC,CAAC;YAC3C,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,CAAC;YACrD,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC;YAClC,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;gBAC3C,MAAM,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC;gBACxC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAC5B;YACD,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACxB,CAAC;KAAA;IAED,kBAAkB;IAClB,OAAO,CAAC,OAAuB;QAC7B,0BAA0B;QAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;IACH,CAAC;IAED;;;;;OAKG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;IACH,CAAC;IAED;;;;;OAKG;IACK,gBAAgB;QACtB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACK,mBAAmB;QACzB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;;;;OAKG;IACK,kBAAkB;QACxB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,kBAAkB,GAAG,GAAG,CAAA,kDAAkD,CAAC;QACjF,MAAM,mBAAmB,GAAG,GAAG,CAAA,kCAAkC,CAAC;QAElE,MAAM,UAAU,GAAG,GAAG,CAAA,0BAA0B,CAAC;QACjD,MAAM,aAAa,GAAG,GAAG,CAAA,2BAA2B,CAAC;QACrD,MAAM,WAAW,GAAG,GAAG,CAAA,0BAA0B,CAAC;QAElD,OAAO,GAAG,CAAA;;;;;;;;;;4BAUc,kBAAkB;;;mBAG3B,mBAAmB;;;;;;;;;mBASnB,WAAW;iBACb,UAAU;qBACN,aAAa;;KAE7B,CAAC;IACJ,CAAC;CACF,CAAA;AA5P4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAChB;AAQE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqC;AAahE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAGzB;AASuB;IAAxB,KAAK,CAAC,gBAAgB,CAAC;mDAAuC;AA1CpD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAqQxB;SArQY,YAAY","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  CSSResult,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n  /**\n   * The current mode of the ModalManager\n   *\n   * Current options are `modal` or `closed`\n   *\n   * @type {ModalManagerMode}\n   * @memberof ModalManager\n   */\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\n    ModalManagerMode.Closed;\n\n  /**\n   * Custom content to display in the modal's content slot\n   *\n   * @type {(TemplateResult | undefined)}\n   * @memberof ModalManager\n   */\n  @property({ type: Object }) customModalContent?: TemplateResult;\n\n  /**\n   * This hostBridge handles environmental-specific interactions such as adding classes\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\n   *\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n   * `ModalManagerHostBridgeInterface`\n   *\n   * @type {ModalManagerHostBridgeInterface}\n   * @memberof ModalManager\n   */\n  @property({ type: Object })\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n    this\n  );\n\n  /**\n   * Reference to the ModalTemplate DOM element\n   *\n   * @private\n   * @type {ModalTemplate}\n   * @memberof ModalManager\n   */\n  @query('modal-template') private modalTemplate?: ModalTemplate;\n\n  // Imported tab handling from shoelace\n  public modal = new Modal(this);\n\n  async firstUpdated(): Promise<void> {\n    // Give the browser a chance to paint\n    // eslint-disable-next-line no-promise-executor-return\n    await new Promise(r => setTimeout(r, 0));\n\n    if (this.closeOnBackdropClick) {\n      this.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.backdropClicked();\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.modal.deactivate();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n        <modal-template\n          @closeButtonPressed=${this.closeButtonPressed}\n          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n          tabindex=\"-1\"\n        >\n          ${this.customModalContent}\n        </modal-template>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  getMode(): ModalManagerMode {\n    return this.mode;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.mode = ModalManagerMode.Closed;\n    this.customModalContent = undefined;\n    if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n    this.modal.deactivate();\n  }\n\n  /**\n   * Whether the modal should close if the user taps on the backdrop\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeOnBackdropClick = true;\n\n  /**\n   * A callback if the user closes the modal\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userClosedModalCallback?: () => void;\n\n  /**\n   * A callback if the user presses the left nav button\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userPressedLeftNavButtonCallback?: () => void;\n\n  /**\n   * Call the userClosedModalCallback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserClosedModalCallback(): void {\n    // we assign the callback to a temp var and undefine it before calling it\n    // otherwise, we run into the potential for an infinite loop if the\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n    const callback = this.userClosedModalCallback;\n    this.userClosedModalCallback = undefined;\n    if (callback) callback();\n  }\n\n  /**\n   * Call the user pressed left nav button callback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserPressedLeftNavButtonCallback(): void {\n    // avoids an infinite showModal() loop, as above\n    const callback = this.userPressedLeftNavButtonCallback;\n    this.userPressedLeftNavButtonCallback = undefined;\n    if (callback) callback();\n  }\n\n  /** @inheritdoc */\n  async showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n    userPressedLeftNavButtonCallback?: () => void;\n  }): Promise<void> {\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n    this.userClosedModalCallback = options.userClosedModalCallback;\n    this.userPressedLeftNavButtonCallback =\n      options.userPressedLeftNavButtonCallback;\n    this.customModalContent = options.customModalContent;\n    this.mode = ModalManagerMode.Open;\n    if (this.modalTemplate) {\n      this.modalTemplate.config = options.config;\n      await this.modalTemplate.updateComplete;\n      this.modalTemplate.focus();\n    }\n    this.modal.activate();\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    /* istanbul ignore else */\n    if (changed.has('mode')) {\n      this.handleModeChange();\n    }\n  }\n\n  /**\n   * Called when the backdrop is clicked\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private backdropClicked(): void {\n    if (this.closeOnBackdropClick) {\n      this.closeModal();\n      this.callUserClosedModalCallback();\n    }\n  }\n\n  /**\n   * Handle the mode change\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private handleModeChange(): void {\n    this.hostBridge.handleModeChange(this.mode);\n    this.emitModeChangeEvent();\n  }\n\n  /**\n   * Emit a modeChange event\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private emitModeChangeEvent(): void {\n    const event = new CustomEvent('modeChanged', {\n      detail: { mode: this.mode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Called when the modal close button is pressed. Closes the modal.\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeButtonPressed(): void {\n    this.closeModal();\n    this.callUserClosedModalCallback();\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n    const modalWidth = css`var(--modalWidth, 32rem)`;\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n    const modalZindex = css`var(--modalZindex, 2000)`;\n\n    return css`\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n\n      .backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        background-color: ${modalBackdropColor};\n        width: 100%;\n        height: 100%;\n        z-index: ${modalBackdropZindex};\n      }\n\n      modal-template {\n        outline: 0;\n        position: fixed;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, 0);\n        z-index: ${modalZindex};\n        width: ${modalWidth};\n        max-width: ${modalMaxWidth};\n      }\n    `;\n  }\n}\n"]}

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

@@ -19,6 +19,13 @@ export declare class ModalTemplate extends LitElement {
      * @memberof ModalTemplate
      */
     private handleCloseButton;
+    /**
+     * Dispatch the `leftNavButtonPressed` event to the consumer
+     *
+     * @private
+     * @memberof ModalTemplate
+     */
+    private handleLeftNavButtonPressed;
     /**
      * The close button template
      *
@@ -28,6 +35,7 @@ export declare class ModalTemplate extends LitElement {
      * @memberof ModalTemplate
      */
     private get closeButtonTemplate();
+    private get leftNavButtonTemplate();
     /** @inheritdoc */
     static get styles(): CSSResult;
 }

package/dist/src/modal-template.js

@@ -5,6 +5,7 @@ import '@internetarchive/ia-activity-indicator';
 import '@internetarchive/icon-close';
 import { ModalConfig } from './modal-config';
 import IALogoIcon from './assets/ia-logo-icon';
+import arrowLeftIcon from './assets/arrow-left-icon';
 let ModalTemplate = class ModalTemplate extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,6 +23,9 @@ let ModalTemplate = class ModalTemplate extends LitElement {
       <div class="modal-wrapper">
         <div class="modal-container">
           <header style="background-color: ${this.config.headerColor}">
+            ${this.config.showLeftNavButton
+            ? this.leftNavButtonTemplate
+            : nothing}
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
             ${this.config.showHeaderLogo
             ? html `<div class="logo-icon">${IALogoIcon}</div>`
@@ -79,6 +83,22 @@ let ModalTemplate = class ModalTemplate extends LitElement {
         const event = new Event('closeButtonPressed');
         this.dispatchEvent(event);
     }
+    /**
+     * Dispatch the `leftNavButtonPressed` event to the consumer
+     *
+     * @private
+     * @memberof ModalTemplate
+     */
+    handleLeftNavButtonPressed(e) {
+        e.preventDefault();
+        if (e.type === 'keydown' &&
+            e.key !== ' ' &&
+            e.key !== 'Enter') {
+            return;
+        }
+        const event = new Event('leftNavButtonPressed');
+        this.dispatchEvent(event);
+    }
     /**
      * The close button template
      *
@@ -99,6 +119,17 @@ let ModalTemplate = class ModalTemplate extends LitElement {
       </button>
     `;
     }
+    get leftNavButtonTemplate() {
+        var _a;
+        return html `<button
+      type="button"
+      class="back-button"
+      @click=${this.handleLeftNavButtonPressed}
+      @keydown=${this.handleLeftNavButtonPressed}
+    >
+      ${arrowLeftIcon} ${(_a = this.config.leftNavButtonText) !== null && _a !== void 0 ? _a : ''}
+    </button> `;
+    }
     /** @inheritdoc */
     static get styles() {
         const modalLogoSize = css `var(--modalLogoSize, 6.5rem)`;
@@ -174,7 +205,7 @@ let ModalTemplate = class ModalTemplate extends LitElement {
       }
 
       .modal-body {
-        background-color: #f5f5f7;
+        background-color: #fbfbfd;
         border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});
         border: ${modalBorder};
         border-top: 0;
@@ -249,6 +280,28 @@ let ModalTemplate = class ModalTemplate extends LitElement {
           0 4px 4px 0 rgba(0, 0, 0, 0.08);
       }
 
+      .back-button {
+        position: absolute;
+        left: 1.2rem;
+        top: 1.2rem;
+        height: 2rem;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: white;
+        font-family: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .back-button svg {
+        height: 1.5rem;
+      }
+
       .sr-only {
         position: absolute;
         width: 1px;

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

@@ -1 +1 @@
-{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,OAAO,EAAE,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,wCAAwC,CAAC;AAChD,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAGxC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL;;;;;WAKG;QACyB,WAAM,GAAgB,IAAI,WAAW,EAAE,CAAC;IA6QtE,CAAC;IA3QC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;6CAG8B,IAAI,CAAC,MAAM,CAAC,WAAW;cACtD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;cAC3D,IAAI,CAAC,MAAM,CAAC,cAAc;YAC1B,CAAC,CAAC,IAAI,CAAA,0BAA0B,UAAU,QAAQ;YAClD,CAAC,CAAC,OAAO;cACT,IAAI,CAAC,MAAM,CAAC,KAAK;YACjB,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,MAAM,CAAC,KAAK,OAAO;YACnD,CAAC,CAAC,EAAE;cACJ,IAAI,CAAC,MAAM,CAAC,QAAQ;YACpB,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,OAAO;YACzD,CAAC,CAAC,EAAE;;;;uCAIqB,IAAI,CAAC,MAAM,CAAC,SAAS;;;;yCAInB,IAAI,CAAC,MAAM,CAAC,uBAAuB;YAC1D,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,QAAQ;;;0BAGF,IAAI,CAAC,MAAM,CAAC,mBAAmB;;;gBAGzC,IAAI,CAAC,MAAM,CAAC,QAAQ;YACpB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,MAAM,CAAC,QAAQ,QAAQ;YAC3D,CAAC,CAAC,EAAE;gBACJ,IAAI,CAAC,MAAM,CAAC,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,MAAM,CAAC,OAAO,OAAO;YACvD,CAAC,CAAC,EAAE;;;;;;;;;KASf,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACK,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IACE,CAAC,CAAC,IAAI,KAAK,SAAS;YACnB,CAAmB,CAAC,GAAG,KAAK,GAAG;YAC/B,CAAmB,CAAC,GAAG,KAAK,OAAO,EACpC;YACA,OAAO;SACR;QACD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,iBAAiB;mBACpB,IAAI,CAAC,iBAAiB;;;;KAIpC,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,aAAa,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAExD,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,MAAM,iBAAiB,GAAG,GAAG,CAAA,gCAAgC,CAAC;QAC9D,MAAM,WAAW,GAAG,GAAG,CAAA,qCAAqC,CAAC;QAC7D,uFAAuF;QACvF,yCAAyC;QACzC,MAAM,oBAAoB,GAAG,GAAG,CAAA,kCAAkC,CAAC;QACnE,MAAM,iBAAiB,GAAG,GAAG,CAAA,6BAA6B,CAAC;QAC3D,MAAM,2BAA2B,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEhF,MAAM,kBAAkB,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAChE,MAAM,YAAY,GAAG,GAAG,CAAA,+BAA+B,CAAC;QAExD,MAAM,aAAa,GAAG,GAAG,CAAA,mCAAmC,CAAC;QAC7D,MAAM,gBAAgB,GAAG,GAAG,CAAA,sCAAsC,CAAC;QACnE,MAAM,gBAAgB,GAAG,GAAG,CAAA,sCAAsC,CAAC;QACnE,MAAM,eAAe,GAAG,GAAG,CAAA,qCAAqC,CAAC;QAEjE,MAAM,eAAe,GAAG,GAAG,CAAA,qCAAqC,CAAC;QACjE,MAAM,kBAAkB,GAAG,GAAG,CAAA,wCAAwC,CAAC;QACvE,MAAM,kBAAkB,GAAG,GAAG,CAAA,wCAAwC,CAAC;QACvE,MAAM,iBAAiB,GAAG,GAAG,CAAA,uCAAuC,CAAC;QAErE,OAAO,GAAG,CAAA;;;iBAGG,mBAAmB;kBAClB,mBAAmB;;;;;;;;;;;;;;;;yBAgBZ,iBAAiB;;sBAEpB,iBAAiB;;;;;;;8BAOT,iBAAiB,UAAU,iBAAiB;kBACxD,WAAW;;;0BAGH,2BAA2B;;;;;;qBAMhC,aAAa;;uBAEX,eAAe;;;;;;;;qBAQjB,gBAAgB;uBACd,kBAAkB;;;;;kCAKP,iBAAiB,UAAU,iBAAiB;kBAC5D,WAAW;;+BAEE,kBAAkB,MAAM,YAAY;;;;;;;;8CAQrB,oBAAoB;;4BAEtC,YAAY;;;;qBAInB,gBAAgB;;;uBAGd,kBAAkB;;;;;;;;qBAQpB,eAAe;uBACb,iBAAiB;;;;;;;;iBAQvB,aAAa;kBACZ,aAAa;;;;;;;;;sBAST,aAAa;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+C/B,CAAC;IACJ,CAAC;CACF,CAAA;AA7Q6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAyC;AAPzD,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoRzB;SApRY,aAAa","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\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\">${IALogoIcon}</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(e: Event): void {\n    e.preventDefault();\n    if (\n      e.type === 'keydown' &&\n      (e as KeyboardEvent).key !== ' ' &&\n      (e as KeyboardEvent).key !== 'Enter'\n    ) {\n      return;\n    }\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        @click=${this.handleCloseButton}\n        @keydown=${this.handleCloseButton}\n      >\n        <ia-icon-close></ia-icon-close>\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"]}
+{"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';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\nimport arrowLeftIcon from './assets/arrow-left-icon';\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.showLeftNavButton\n              ? this.leftNavButtonTemplate\n              : nothing}\n            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n            ${this.config.showHeaderLogo\n              ? html`<div class=\"logo-icon\">${IALogoIcon}</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(e: Event): void {\n    e.preventDefault();\n    if (\n      e.type === 'keydown' &&\n      (e as KeyboardEvent).key !== ' ' &&\n      (e as KeyboardEvent).key !== 'Enter'\n    ) {\n      return;\n    }\n    const event = new Event('closeButtonPressed');\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Dispatch the `leftNavButtonPressed` event to the consumer\n   *\n   * @private\n   * @memberof ModalTemplate\n   */\n  private handleLeftNavButtonPressed(e: Event): void {\n    e.preventDefault();\n    if (\n      e.type === 'keydown' &&\n      (e as KeyboardEvent).key !== ' ' &&\n      (e as KeyboardEvent).key !== 'Enter'\n    ) {\n      return;\n    }\n    const event = new Event('leftNavButtonPressed');\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        @click=${this.handleCloseButton}\n        @keydown=${this.handleCloseButton}\n      >\n        <ia-icon-close></ia-icon-close>\n      </button>\n    `;\n  }\n\n  private get leftNavButtonTemplate(): TemplateResult {\n    return html`<button\n      type=\"button\"\n      class=\"back-button\"\n      @click=${this.handleLeftNavButtonPressed}\n      @keydown=${this.handleLeftNavButtonPressed}\n    >\n      ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}\n    </button> `;\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: #fbfbfd;\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      .back-button {\n        position: absolute;\n        left: 1.2rem;\n        top: 1.2rem;\n        height: 2rem;\n        background-color: transparent;\n        outline: none;\n        border: none;\n        padding: 0;\n        cursor: pointer;\n        color: white;\n        font-family: inherit;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 0.5rem;\n      }\n\n      .back-button svg {\n        height: 1.5rem;\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.js

@@ -20,6 +20,8 @@ describe('Modal Config', () => {
         const showProcessingIndicator = true;
         const processingImageMode = 'processing';
         const showCloseButton = false;
+        const showLeftNavButton = false;
+        const leftNavButtonText = 'Previous';
         const showHeaderLogo = false;
         const closeOnBackdropClick = false;
         const config = new ModalConfig({
@@ -31,6 +33,8 @@ describe('Modal Config', () => {
             showProcessingIndicator: showProcessingIndicator,
             processingImageMode: processingImageMode,
             showCloseButton: showCloseButton,
+            showLeftNavButton: showLeftNavButton,
+            leftNavButtonText: leftNavButtonText,
             showHeaderLogo: showHeaderLogo,
             closeOnBackdropClick: closeOnBackdropClick,
         });
@@ -42,6 +46,8 @@ describe('Modal Config', () => {
         expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
         expect(config.processingImageMode).to.equal(processingImageMode);
         expect(config.showCloseButton).to.equal(showCloseButton);
+        expect(config.showLeftNavButton).to.equal(showLeftNavButton);
+        expect(config.leftNavButtonText).to.equal(leftNavButtonText);
         expect(config.showHeaderLogo).to.equal(showHeaderLogo);
         expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
     }));
@@ -55,6 +61,8 @@ describe('Modal Config', () => {
         expect(config.showProcessingIndicator).to.equal(false);
         expect(config.processingImageMode).to.equal('complete');
         expect(config.showCloseButton).to.equal(true);
+        expect(config.showLeftNavButton).to.equal(false);
+        expect(config.leftNavButtonText).to.equal('');
         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 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"]}
+{"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 showLeftNavButton = false;\n    const leftNavButtonText = 'Previous';\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      showLeftNavButton: showLeftNavButton,\n      leftNavButtonText: leftNavButtonText,\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.showLeftNavButton).to.equal(showLeftNavButton);\n    expect(config.leftNavButtonText).to.equal(leftNavButtonText);\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.showLeftNavButton).to.equal(false);\n    expect(config.leftNavButtonText).to.equal('');\n    expect(config.showHeaderLogo).to.equal(true);\n    expect(config.closeOnBackdropClick).to.equal(true);\n  });\n});\n"]}