@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.0

package/karma.conf.js

@@ -1,24 +1,24 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const { createDefaultConfig } = require('@open-wc/testing-karma');
-const merge = require('deepmerge');
-
-module.exports = config => {
-  config.set(
-    merge(createDefaultConfig(config), {
-      files: [
-        // runs all files ending with .test in the test folder,
-        // can be overwritten by passing a --grep flag. examples:
-        //
-        // npm run test -- --grep test/foo/bar.test.js
-        // npm run test -- --grep test/bar/*
-        { pattern: config.grep ? config.grep : 'dist/**/test/**/*.test.js', type: 'module' },
-      ],
-
-      esm: {
-        nodeResolve: true,
-      },
-      // you can overwrite/extend the config further
-    }),
-  );
-  return config;
-};
+/* eslint-disable import/no-extraneous-dependencies */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+module.exports = config => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      files: [
+        // runs all files ending with .test in the test folder,
+        // can be overwritten by passing a --grep flag. examples:
+        //
+        // npm run test -- --grep test/foo/bar.test.js
+        // npm run test -- --grep test/bar/*
+        { pattern: config.grep ? config.grep : 'dist/**/test/**/*.test.js', type: 'module' },
+      ],
+
+      esm: {
+        nodeResolve: true,
+      },
+      // you can overwrite/extend the config further
+    }),
+  );
+  return config;
+};

package/package.json

@@ -1,85 +1,85 @@
-{
-  "name": "@internetarchive/modal-manager",
-  "version": "2.0.3",
-  "description": "A Modal Manager Web Component",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/internetarchive/iaux-modal-manager.git"
-  },
-  "license": "AGPL-3.0-only",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "prepare": "npm run build && husky install",
-    "prepare:ghpages": "rimraf ghpages && npm run prepare && vite build && cp -R assets/images ghpages/assets/images",
-    "start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index index.html --node-resolve --open --watch --preserve-symlinks\"",
-    "docs": "typedoc",
-    "build": "tsc",
-    "tsc:watch": "tsc --watch",
-    "lint:eslint": "eslint --ext .ts . --ignore-path .gitignore",
-    "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore",
-    "lint:prettier": "prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "lint": "npm run lint:eslint && npm run lint:prettier",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "circular": "madge --circular .",
-    "test": "tsc && npm run lint && npm run circular && karma start --coverage",
-    "test:watch": "concurrently --kill-others --names tsc,karma \"npm run tsc:watch\" \"karma start --auto-watch=true --single-run=false\"",
-    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
-  },
-  "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/icon-close": "^1.3.4",
-    "@internetarchive/icon-ia-logo": "^1.3.4",
-    "@internetarchive/icon-user": "^1.3.4",
-    "lit": "^2.8.0",
-    "throttle-debounce": "^5.0.0"
-  },
-  "devDependencies": {
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^4.0.0",
-    "@open-wc/testing-karma": "^3.0.0",
-    "@types/mocha": "^10.0.0",
-    "@types/node": "^20.8.4",
-    "@types/throttle-debounce": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "concurrently": "^8.0.0",
-    "deepmerge": "^4.0.0",
-    "es-dev-server": "^2.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^6.11.0",
-    "husky": "^9.0.0",
-    "lint-staged": "^14.0.1",
-    "madge": "^6.0.0",
-    "prettier": "^2.7.1",
-    "rimraf": "^5.0.5",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.25.0",
-    "typescript": "^4.7.4",
-    "vite": "^4.4.11"
-  },
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config",
-      "eslint-config-prettier"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix",
-      "prettier --write",
-      "git add"
-    ]
-  }
-}
+{
+  "name": "@internetarchive/modal-manager",
+  "version": "2.0.4-alpha-webdev7960.0",
+  "description": "A Modal Manager Web Component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/internetarchive/iaux-modal-manager.git"
+  },
+  "license": "AGPL-3.0-only",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "npm run build && husky install",
+    "prepare:ghpages": "rimraf ghpages && npm run prepare && vite build && cp -R assets/images ghpages/assets/images",
+    "start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index index.html --node-resolve --open --watch --preserve-symlinks\"",
+    "docs": "typedoc",
+    "build": "tsc",
+    "tsc:watch": "tsc --watch",
+    "lint:eslint": "eslint --ext .ts . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "circular": "madge --circular .",
+    "test": "tsc && npm run lint && npm run circular && karma start --coverage",
+    "test:watch": "concurrently --kill-others --names tsc,karma \"npm run tsc:watch\" \"karma start --auto-watch=true --single-run=false\"",
+    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
+  },
+  "dependencies": {
+    "@internetarchive/ia-activity-indicator": "^0.0.6",
+    "@internetarchive/icon-close": "^1.3.4",
+    "@internetarchive/icon-ia-logo": "^1.3.4",
+    "@internetarchive/icon-user": "^1.3.4",
+    "lit": "^2.8.0",
+    "throttle-debounce": "^5.0.0"
+  },
+  "devDependencies": {
+    "@open-wc/eslint-config": "^9.2.2",
+    "@open-wc/testing": "^4.0.0",
+    "@open-wc/testing-karma": "^3.0.0",
+    "@types/mocha": "^10.0.0",
+    "@types/node": "^20.8.4",
+    "@types/throttle-debounce": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "concurrently": "^8.0.0",
+    "deepmerge": "^4.0.0",
+    "es-dev-server": "^2.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^6.11.0",
+    "husky": "^9.0.0",
+    "lint-staged": "^14.0.1",
+    "madge": "^6.0.0",
+    "prettier": "^2.7.1",
+    "rimraf": "^5.0.5",
+    "tslib": "^2.4.0",
+    "typedoc": "^0.25.0",
+    "typescript": "^4.7.4",
+    "vite": "^4.4.11"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
+}

package/renovate.json

@@ -1,7 +1,7 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    ":preserveSemverRanges"
-  ]
-}
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}

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

@@ -1,15 +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>
-`;
+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>
+`;

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

@@ -1,30 +1,30 @@
-import { html } from 'lit';
-
-export default html`
-  <svg
-    class="ia-logo"
-    viewBox="0 0 27 30"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby="logoTitleID logoDescID"
-  >
-    <title id="logoTitleID">Internet Archive logo</title>
-    <desc id="logoDescID">
-      A line drawing of the Internet Archive headquarters building façade.
-    </desc>
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <mask id="mask-2" class="fill-color">
-        <path
-          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
-          id="path-1"
-        ></path>
-      </mask>
-      <use class="fill-color" xlink:href="#path-1"></use>
-      <g mask="url(#mask-2)" class="fill-color">
-        <path
-          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
-          id="swatch"
-        ></path>
-      </g>
-    </g>
-  </svg>
-`;
+import { html } from 'lit';
+
+export default html`
+  <svg
+    class="ia-logo"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" class="fill-color">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use class="fill-color" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" class="fill-color">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/modal-config.ts

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

package/src/modal-manager-host-bridge-interface.ts

@@ -1,13 +1,13 @@
-import { ModalManagerMode } from './modal-manager-mode';
-
-/**
- * The ModalManagerHostBridgeInterface is a delegate interface for
- * the host to implement environment-specific changes when the modal
- * is open or closed.
- *
- * A default implementation is provided, but can be overridden if
- * it does not work for the environment.
- */
-export interface ModalManagerHostBridgeInterface {
-  handleModeChange(mode: ModalManagerMode): void;
-}
+import { ModalManagerMode } from './modal-manager-mode';
+
+/**
+ * The ModalManagerHostBridgeInterface is a delegate interface for
+ * the host to implement environment-specific changes when the modal
+ * is open or closed.
+ *
+ * A default implementation is provided, but can be overridden if
+ * it does not work for the environment.
+ */
+export interface ModalManagerHostBridgeInterface {
+  handleModeChange(mode: ModalManagerMode): void;
+}