@internetarchive/modal-manager 0.2.12 → 0.3.0

package/package.json

@@ -1,82 +1,85 @@
-{
-  "name": "@internetarchive/modal-manager",
-  "version": "0.2.12",
-  "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",
-    "start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index demo/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\""
-  },
-  "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.4",
-    "@internetarchive/icon-close": "^1.3.2",
-    "@internetarchive/icon-ia-logo": "^1.3.2",
-    "@internetarchive/icon-user": "^1.3.2",
-    "lit": "^2.2.2",
-    "throttle-debounce": "^5.0.0"
-  },
-  "devDependencies": {
-    "@open-wc/eslint-config": "^2.0.0",
-    "@open-wc/testing": "^3.0.3",
-    "@open-wc/testing-karma": "^3.0.0",
-    "@types/mocha": "^9.0.0",
-    "@types/node": "13.11.1",
-    "@types/throttle-debounce": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
-    "concurrently": "^5.1.0",
-    "deepmerge": "^3.2.0",
-    "es-dev-server": "^1.23.0",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "husky": "^1.0.0",
-    "lint-staged": "^8.0.0",
-    "lit-html": "^2.0.2",
-    "madge": "^4.0.1",
-    "prettier": "^2.0.4",
-    "tslib": "^1.11.0",
-    "typedoc": "^0.17.8",
-    "typescript": "^3.9.7"
-  },
-  "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": "0.3.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\""
+  },
+  "dependencies": {
+    "@internetarchive/ia-activity-indicator": "^0.0.4",
+    "@internetarchive/icon-close": "^1.3.2",
+    "@internetarchive/icon-ia-logo": "^1.3.2",
+    "@internetarchive/icon-user": "^1.3.2",
+    "lit": "^2.2.2",
+    "throttle-debounce": "^5.0.0"
+  },
+  "devDependencies": {
+    "@open-wc/eslint-config": "^2.0.0",
+    "@open-wc/testing": "^3.0.3",
+    "@open-wc/testing-karma": "^3.0.0",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^20.8.4",
+    "@types/throttle-debounce": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.20.0",
+    "@typescript-eslint/parser": "^2.20.0",
+    "concurrently": "^5.1.0",
+    "deepmerge": "^3.2.0",
+    "es-dev-server": "^1.23.0",
+    "eslint": "^6.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "husky": "^7.0.0",
+    "lint-staged": "^14.0.1",
+    "lit-html": "^2.0.2",
+    "madge": "^4.0.1",
+    "prettier": "^2.0.4",
+    "rimraf": "^5.0.5",
+    "tslib": "^1.11.0",
+    "typedoc": "^0.17.8",
+    "typescript": "^4.4.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

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

package/src/modal-config.ts

@@ -1,117 +1,117 @@
-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: string;
-
-  /**
-   * Show the close button
-   *
-   * @memberof ModalConfig
-   */
-  showCloseButton: boolean;
-
-  /**
-   * 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?: string;
-    showCloseButton?: boolean;
-    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 ?? '#f5f5f7';
-    this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
-    this.processingImageMode = options?.processingImageMode ?? 'complete';
-    this.showCloseButton = options?.showCloseButton ?? true;
-    this.showHeaderLogo = options?.showHeaderLogo ?? true;
-    this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;
-  }
-}
+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: string;
+
+  /**
+   * Show the close button
+   *
+   * @memberof ModalConfig
+   */
+  showCloseButton: boolean;
+
+  /**
+   * 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?: string;
+    showCloseButton?: boolean;
+    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 ?? '#f5f5f7';
+    this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
+    this.processingImageMode = options?.processingImageMode ?? 'complete';
+    this.showCloseButton = options?.showCloseButton ?? true;
+    this.showHeaderLogo = options?.showHeaderLogo ?? true;
+    this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;
+  }
+}

package/src/modal-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;
+}

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

@@ -1,82 +1,82 @@
-import { throttle } from 'throttle-debounce';
-
-import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
-import { ModalManagerInterface } from './modal-manager-interface';
-import { ModalManagerMode } from './modal-manager-mode';
-
-/**
- * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
- * host that sets up environment-specific changes when the modal opens and closes.
- *
- * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
- * and adds a `resize` listener to fix a Safari shadow root issue.
- *
- * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
- * them into the `ModalManager` if this one does not work for their environment.
- *
- * @export
- * @class ModalManagerHostBridge
- * @implements {ModalManagerHostBridgeInterface}
- */
-export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
-  private modalManager: ModalManagerInterface;
-
-  constructor(modalManager: ModalManagerInterface) {
-    this.modalManager = modalManager;
-  }
-
-  /**
-   * Handle the mode change
-   *
-   * @private
-   * @memberof ModalManager
-   */
-  handleModeChange(mode: ModalManagerMode): void {
-    switch (mode) {
-      case ModalManagerMode.Open:
-        this.startResizeListener();
-        this.stopDocumentScroll();
-        break;
-      case ModalManagerMode.Closed:
-        this.stopResizeListener();
-        this.resumeDocumentScroll();
-        break;
-    }
-  }
-
-  private windowResizeThrottler: throttle<() => void> = throttle(
-    100,
-    this.updateModalContainerHeight,
-    { noLeading: false, noTrailing: false }
-  ).bind(this);
-
-  // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
-  // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
-  // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
-  // this correctly.
-  // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
-  // Also note that the value has to change on each update for Safari to do the update,
-  // ie. you can't just set a static value.
-  private updateModalContainerHeight(): void {
-    this.modalManager.style.setProperty(
-      '--containerHeight',
-      `${window.innerHeight}px`
-    );
-  }
-
-  private stopDocumentScroll(): void {
-    document.body.classList.add('modal-manager-open');
-  }
-
-  private resumeDocumentScroll(): void {
-    document.body.classList.remove('modal-manager-open');
-  }
-
-  private startResizeListener(): void {
-    window.addEventListener('resize', this.windowResizeThrottler);
-  }
-
-  private stopResizeListener(): void {
-    window.removeEventListener('resize', this.windowResizeThrottler);
-  }
-}
+import { throttle } from 'throttle-debounce';
+
+import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
+import { ModalManagerInterface } from './modal-manager-interface';
+import { ModalManagerMode } from './modal-manager-mode';
+
+/**
+ * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
+ * host that sets up environment-specific changes when the modal opens and closes.
+ *
+ * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
+ * and adds a `resize` listener to fix a Safari shadow root issue.
+ *
+ * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
+ * them into the `ModalManager` if this one does not work for their environment.
+ *
+ * @export
+ * @class ModalManagerHostBridge
+ * @implements {ModalManagerHostBridgeInterface}
+ */
+export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
+  private modalManager: ModalManagerInterface;
+
+  constructor(modalManager: ModalManagerInterface) {
+    this.modalManager = modalManager;
+  }
+
+  /**
+   * Handle the mode change
+   *
+   * @private
+   * @memberof ModalManager
+   */
+  handleModeChange(mode: ModalManagerMode): void {
+    switch (mode) {
+      case ModalManagerMode.Open:
+        this.startResizeListener();
+        this.stopDocumentScroll();
+        break;
+      case ModalManagerMode.Closed:
+        this.stopResizeListener();
+        this.resumeDocumentScroll();
+        break;
+    }
+  }
+
+  private windowResizeThrottler: throttle<() => void> = throttle(
+    100,
+    this.updateModalContainerHeight,
+    { noLeading: false, noTrailing: false }
+  ).bind(this);
+
+  // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
+  // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
+  // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
+  // this correctly.
+  // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
+  // Also note that the value has to change on each update for Safari to do the update,
+  // ie. you can't just set a static value.
+  private updateModalContainerHeight(): void {
+    this.modalManager.style.setProperty(
+      '--containerHeight',
+      `${window.innerHeight}px`
+    );
+  }
+
+  private stopDocumentScroll(): void {
+    document.body.classList.add('modal-manager-open');
+  }
+
+  private resumeDocumentScroll(): void {
+    document.body.classList.remove('modal-manager-open');
+  }
+
+  private startResizeListener(): void {
+    window.addEventListener('resize', this.windowResizeThrottler);
+  }
+
+  private stopResizeListener(): void {
+    window.removeEventListener('resize', this.windowResizeThrottler);
+  }
+}

package/src/modal-manager-interface.ts

@@ -1,28 +1,28 @@
-import { LitElement, TemplateResult } from 'lit';
-import { ModalConfig } from './modal-config';
-import { ModalManagerMode } from './modal-manager-mode';
-
-export interface ModalManagerInterface extends LitElement {
-  /**
-   * Get the current modal mode.
-   */
-  getMode(): ModalManagerMode;
-
-  /**
-   * Show a modal from a given ModalConfig
-   *
-   * @param config ModalConfig
-   * @param customModalContent TemplateResult | undefined
-   * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
-   */
-  showModal(options: {
-    config: ModalConfig;
-    customModalContent?: TemplateResult;
-    userClosedModalCallback?: () => void;
-  }): Promise<void>;
-
-  /**
-   * Close the currently open modal
-   */
-  closeModal(): void;
-}
+import { LitElement, TemplateResult } from 'lit';
+import { ModalConfig } from './modal-config';
+import { ModalManagerMode } from './modal-manager-mode';
+
+export interface ModalManagerInterface extends LitElement {
+  /**
+   * Get the current modal mode.
+   */
+  getMode(): ModalManagerMode;
+
+  /**
+   * Show a modal from a given ModalConfig
+   *
+   * @param config ModalConfig
+   * @param customModalContent TemplateResult | undefined
+   * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
+   */
+  showModal(options: {
+    config: ModalConfig;
+    customModalContent?: TemplateResult;
+    userClosedModalCallback?: () => void;
+  }): Promise<void>;
+
+  /**
+   * Close the currently open modal
+   */
+  closeModal(): void;
+}