@internetarchive/modal-manager 0.2.8 → 0.2.9-alpha.2

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

@@ -1,108 +1,108 @@
-import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
-import './modal-template';
-import { ModalConfig } from './modal-config';
-import { ModalManagerInterface } from './modal-manager-interface';
-import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
-import { ModalManagerMode } from './modal-manager-mode';
-export declare class ModalManager extends LitElement implements ModalManagerInterface {
-    /**
-     * The current mode of the ModalManager
-     *
-     * Current options are `modal` or `closed`
-     *
-     * @type {ModalManagerMode}
-     * @memberof ModalManager
-     */
-    mode: ModalManagerMode;
-    /**
-     * Custom content to display in the modal's content slot
-     *
-     * @type {(TemplateResult | undefined)}
-     * @memberof ModalManager
-     */
-    customModalContent?: TemplateResult;
-    /**
-     * Thie hostBridge handles environmental-specific interactions such as adding classes
-     * to the body tag or event listeners needed to support the modal manager in the host environment.
-     *
-     * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
-     * `ModalManagerHostBridgeInterface`
-     *
-     * @type {ModalManagerHostBridgeInterface}
-     * @memberof ModalManager
-     */
-    hostBridge: ModalManagerHostBridgeInterface;
-    /**
-     * Reference to the ModalTemplate DOM element
-     *
-     * @private
-     * @type {ModalTemplate}
-     * @memberof ModalManager
-     */
-    private modalTemplate;
-    /** @inheritdoc */
-    render(): TemplateResult;
-    /** @inheritdoc */
-    getMode(): ModalManagerMode;
-    /** @inheritdoc */
-    closeModal(): void;
-    /**
-     * Whether the modal should close if the user taps on the backdrop
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private closeOnBackdropClick;
-    /**
-     * A callback if the user closes the modal
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private userClosedModalCallback?;
-    /**
-     * Call the userClosedModalCallback and reset it if it exists
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private callUserClosedModalCallback;
-    /** @inheritdoc */
-    showModal(options: {
-        config: ModalConfig;
-        customModalContent?: TemplateResult;
-        userClosedModalCallback?: () => void;
-    }): Promise<void>;
-    /** @inheritdoc */
-    updated(changed: PropertyValues): void;
-    /**
-     * Called when the backdrop is clicked
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private backdropClicked;
-    /**
-     * Handle the mode change
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private handleModeChange;
-    /**
-     * Emit a modeChange event
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private emitModeChangeEvent;
-    /**
-     * Called when the modal close button is pressed. Closes the modal.
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    private closeButtonPressed;
-    /** @inheritdoc */
-    static get styles(): CSSResult;
-}
+import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
+import './modal-template';
+import { ModalConfig } from './modal-config';
+import { ModalManagerInterface } from './modal-manager-interface';
+import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
+import { ModalManagerMode } from './modal-manager-mode';
+export declare class ModalManager extends LitElement implements ModalManagerInterface {
+    /**
+     * The current mode of the ModalManager
+     *
+     * Current options are `modal` or `closed`
+     *
+     * @type {ModalManagerMode}
+     * @memberof ModalManager
+     */
+    mode: ModalManagerMode;
+    /**
+     * Custom content to display in the modal's content slot
+     *
+     * @type {(TemplateResult | undefined)}
+     * @memberof ModalManager
+     */
+    customModalContent?: TemplateResult;
+    /**
+     * Thie hostBridge handles environmental-specific interactions such as adding classes
+     * to the body tag or event listeners needed to support the modal manager in the host environment.
+     *
+     * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
+     * `ModalManagerHostBridgeInterface`
+     *
+     * @type {ModalManagerHostBridgeInterface}
+     * @memberof ModalManager
+     */
+    hostBridge: ModalManagerHostBridgeInterface;
+    /**
+     * Reference to the ModalTemplate DOM element
+     *
+     * @private
+     * @type {ModalTemplate}
+     * @memberof ModalManager
+     */
+    private modalTemplate;
+    /** @inheritdoc */
+    render(): TemplateResult;
+    /** @inheritdoc */
+    getMode(): ModalManagerMode;
+    /** @inheritdoc */
+    closeModal(): void;
+    /**
+     * Whether the modal should close if the user taps on the backdrop
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private closeOnBackdropClick;
+    /**
+     * A callback if the user closes the modal
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private userClosedModalCallback?;
+    /**
+     * Call the userClosedModalCallback and reset it if it exists
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private callUserClosedModalCallback;
+    /** @inheritdoc */
+    showModal(options: {
+        config: ModalConfig;
+        customModalContent?: TemplateResult;
+        userClosedModalCallback?: () => void;
+    }): Promise<void>;
+    /** @inheritdoc */
+    updated(changed: PropertyValues): void;
+    /**
+     * Called when the backdrop is clicked
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private backdropClicked;
+    /**
+     * Handle the mode change
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private handleModeChange;
+    /**
+     * Emit a modeChange event
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private emitModeChangeEvent;
+    /**
+     * Called when the modal close button is pressed. Closes the modal.
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    private closeButtonPressed;
+    /** @inheritdoc */
+    static get styles(): CSSResult;
+}

package/dist/src/modal-manager.js

@@ -1,190 +1,190 @@
-import { __awaiter, __decorate } from "tslib";
-import { LitElement, html, css, } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
-import './modal-template';
-import { ModalManagerHostBridge } from './modal-manager-host-bridge';
-import { ModalManagerMode } from './modal-manager-mode';
-let ModalManager = class ModalManager extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The current mode of the ModalManager
-         *
-         * Current options are `modal` or `closed`
-         *
-         * @type {ModalManagerMode}
-         * @memberof ModalManager
-         */
-        this.mode = ModalManagerMode.Closed;
-        /**
-         * Thie hostBridge handles environmental-specific interactions such as adding classes
-         * to the body tag or event listeners needed to support the modal manager in the host environment.
-         *
-         * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
-         * `ModalManagerHostBridgeInterface`
-         *
-         * @type {ModalManagerHostBridgeInterface}
-         * @memberof ModalManager
-         */
-        this.hostBridge = new ModalManagerHostBridge(this);
-        /**
-         * Whether the modal should close if the user taps on the backdrop
-         *
-         * @private
-         * @memberof ModalManager
-         */
-        this.closeOnBackdropClick = true;
-    }
-    /** @inheritdoc */
-    render() {
-        return html `
-      <div class="container">
-        <div class="backdrop" @click=${this.backdropClicked}></div>
-        <modal-template
-          @closeButtonPressed=${this.closeButtonPressed}
-          tabindex="0"
-        >
-          ${this.customModalContent}
-        </modal-template>
-      </div>
-    `;
-    }
-    /** @inheritdoc */
-    getMode() {
-        return this.mode;
-    }
-    /** @inheritdoc */
-    closeModal() {
-        this.mode = ModalManagerMode.Closed;
-    }
-    /**
-     * Call the userClosedModalCallback and reset it if it exists
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    callUserClosedModalCallback() {
-        // we assign the callback to a temp var and undefine it before calling it
-        // otherwise, we run into the potential for an infinite loop if the
-        // callback triggers another `showModal()`, which would execute `userClosedModalCallback`
-        const callback = this.userClosedModalCallback;
-        this.userClosedModalCallback = 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.customModalContent = options.customModalContent;
-            this.mode = ModalManagerMode.Open;
-            yield this.modalTemplate.updateComplete;
-            this.modalTemplate.focus();
-        });
-    }
-    /** @inheritdoc */
-    updated(changed) {
-        /* istanbul ignore else */
-        if (changed.has('mode')) {
-            this.handleModeChange();
-        }
-    }
-    /**
-     * Called when the backdrop is clicked
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    backdropClicked() {
-        if (this.closeOnBackdropClick) {
-            this.closeModal();
-            this.callUserClosedModalCallback();
-        }
-    }
-    /**
-     * Handle the mode change
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    handleModeChange() {
-        this.hostBridge.handleModeChange(this.mode);
-        this.emitModeChangeEvent();
-    }
-    /**
-     * Emit a modeChange event
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    emitModeChangeEvent() {
-        const event = new CustomEvent('modeChanged', {
-            detail: { mode: this.mode },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Called when the modal close button is pressed. Closes the modal.
-     *
-     * @private
-     * @memberof ModalManager
-     */
-    closeButtonPressed() {
-        this.closeModal();
-        this.callUserClosedModalCallback();
-    }
-    /** @inheritdoc */
-    static get styles() {
-        const modalBackdropColor = css `var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;
-        const modalBackdropZindex = css `var(--modalBackdropZindex, 1000)`;
-        const modalWidth = css `var(--modalWidth, 32rem)`;
-        const modalMaxWidth = css `var(--modalMaxWidth, 95%)`;
-        const modalZindex = css `var(--modalZindex, 2000)`;
-        return css `
-      .container {
-        width: 100%;
-        height: 100%;
-      }
-
-      .backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        background-color: ${modalBackdropColor};
-        width: 100%;
-        height: 100%;
-        z-index: ${modalBackdropZindex};
-      }
-
-      modal-template {
-        outline: 0;
-        position: fixed;
-        top: 0;
-        left: 50%;
-        transform: translate(-50%, 0);
-        z-index: ${modalZindex};
-        width: ${modalWidth};
-        max-width: ${modalMaxWidth};
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String, reflect: true })
-], ModalManager.prototype, "mode", void 0);
-__decorate([
-    property({ type: Object })
-], ModalManager.prototype, "customModalContent", void 0);
-__decorate([
-    property({ type: Object })
-], ModalManager.prototype, "hostBridge", void 0);
-__decorate([
-    query('modal-template')
-], ModalManager.prototype, "modalTemplate", void 0);
-ModalManager = __decorate([
-    customElement('modal-manager')
-], ModalManager);
-export { ModalManager };
+import { __awaiter, __decorate } from "tslib";
+import { LitElement, html, css, } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import './modal-template';
+import { ModalManagerHostBridge } from './modal-manager-host-bridge';
+import { ModalManagerMode } from './modal-manager-mode';
+let ModalManager = class ModalManager extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The current mode of the ModalManager
+         *
+         * Current options are `modal` or `closed`
+         *
+         * @type {ModalManagerMode}
+         * @memberof ModalManager
+         */
+        this.mode = ModalManagerMode.Closed;
+        /**
+         * Thie hostBridge handles environmental-specific interactions such as adding classes
+         * to the body tag or event listeners needed to support the modal manager in the host environment.
+         *
+         * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
+         * `ModalManagerHostBridgeInterface`
+         *
+         * @type {ModalManagerHostBridgeInterface}
+         * @memberof ModalManager
+         */
+        this.hostBridge = new ModalManagerHostBridge(this);
+        /**
+         * Whether the modal should close if the user taps on the backdrop
+         *
+         * @private
+         * @memberof ModalManager
+         */
+        this.closeOnBackdropClick = true;
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      <div class="container">
+        <div class="backdrop" @click=${this.backdropClicked}></div>
+        <modal-template
+          @closeButtonPressed=${this.closeButtonPressed}
+          tabindex="0"
+        >
+          ${this.customModalContent}
+        </modal-template>
+      </div>
+    `;
+    }
+    /** @inheritdoc */
+    getMode() {
+        return this.mode;
+    }
+    /** @inheritdoc */
+    closeModal() {
+        this.mode = ModalManagerMode.Closed;
+    }
+    /**
+     * Call the userClosedModalCallback and reset it if it exists
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    callUserClosedModalCallback() {
+        // we assign the callback to a temp var and undefine it before calling it
+        // otherwise, we run into the potential for an infinite loop if the
+        // callback triggers another `showModal()`, which would execute `userClosedModalCallback`
+        const callback = this.userClosedModalCallback;
+        this.userClosedModalCallback = 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.customModalContent = options.customModalContent;
+            this.mode = ModalManagerMode.Open;
+            yield this.modalTemplate.updateComplete;
+            this.modalTemplate.focus();
+        });
+    }
+    /** @inheritdoc */
+    updated(changed) {
+        /* istanbul ignore else */
+        if (changed.has('mode')) {
+            this.handleModeChange();
+        }
+    }
+    /**
+     * Called when the backdrop is clicked
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    backdropClicked() {
+        if (this.closeOnBackdropClick) {
+            this.closeModal();
+            this.callUserClosedModalCallback();
+        }
+    }
+    /**
+     * Handle the mode change
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    handleModeChange() {
+        this.hostBridge.handleModeChange(this.mode);
+        this.emitModeChangeEvent();
+    }
+    /**
+     * Emit a modeChange event
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    emitModeChangeEvent() {
+        const event = new CustomEvent('modeChanged', {
+            detail: { mode: this.mode },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Called when the modal close button is pressed. Closes the modal.
+     *
+     * @private
+     * @memberof ModalManager
+     */
+    closeButtonPressed() {
+        this.closeModal();
+        this.callUserClosedModalCallback();
+    }
+    /** @inheritdoc */
+    static get styles() {
+        const modalBackdropColor = css `var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;
+        const modalBackdropZindex = css `var(--modalBackdropZindex, 1000)`;
+        const modalWidth = css `var(--modalWidth, 32rem)`;
+        const modalMaxWidth = css `var(--modalMaxWidth, 95%)`;
+        const modalZindex = css `var(--modalZindex, 2000)`;
+        return css `
+      .container {
+        width: 100%;
+        height: 100%;
+      }
+
+      .backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: ${modalBackdropColor};
+        width: 100%;
+        height: 100%;
+        z-index: ${modalBackdropZindex};
+      }
+
+      modal-template {
+        outline: 0;
+        position: fixed;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+        z-index: ${modalZindex};
+        width: ${modalWidth};
+        max-width: ${modalMaxWidth};
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], ModalManager.prototype, "mode", void 0);
+__decorate([
+    property({ type: Object })
+], ModalManager.prototype, "customModalContent", void 0);
+__decorate([
+    property({ type: Object })
+], ModalManager.prototype, "hostBridge", void 0);
+__decorate([
+    query('modal-template')
+], ModalManager.prototype, "modalTemplate", void 0);
+ModalManager = __decorate([
+    customElement('modal-manager')
+], ModalManager);
+export { ModalManager };
 //# sourceMappingURL=modal-manager.js.map

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-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   * Thie 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  /** @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=\"0\"\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  }\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  }\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":"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","sourcesContent":["import {\r\n  LitElement,\r\n  html,\r\n  css,\r\n  CSSResult,\r\n  TemplateResult,\r\n  PropertyValues,\r\n} from 'lit';\r\nimport { property, customElement, query } from 'lit/decorators.js';\r\n\r\nimport './modal-template';\r\nimport { ModalTemplate } from './modal-template';\r\nimport { ModalConfig } from './modal-config';\r\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\r\nimport { ModalManagerInterface } from './modal-manager-interface';\r\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\r\nimport { ModalManagerMode } from './modal-manager-mode';\r\n\r\n@customElement('modal-manager')\r\nexport class ModalManager extends LitElement implements ModalManagerInterface {\r\n  /**\r\n   * The current mode of the ModalManager\r\n   *\r\n   * Current options are `modal` or `closed`\r\n   *\r\n   * @type {ModalManagerMode}\r\n   * @memberof ModalManager\r\n   */\r\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\r\n    ModalManagerMode.Closed;\r\n\r\n  /**\r\n   * Custom content to display in the modal's content slot\r\n   *\r\n   * @type {(TemplateResult | undefined)}\r\n   * @memberof ModalManager\r\n   */\r\n  @property({ type: Object }) customModalContent?: TemplateResult;\r\n\r\n  /**\r\n   * Thie hostBridge handles environmental-specific interactions such as adding classes\r\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\r\n   *\r\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\r\n   * `ModalManagerHostBridgeInterface`\r\n   *\r\n   * @type {ModalManagerHostBridgeInterface}\r\n   * @memberof ModalManager\r\n   */\r\n  @property({ type: Object })\r\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\r\n    this\r\n  );\r\n\r\n  /**\r\n   * Reference to the ModalTemplate DOM element\r\n   *\r\n   * @private\r\n   * @type {ModalTemplate}\r\n   * @memberof ModalManager\r\n   */\r\n  @query('modal-template') private modalTemplate!: ModalTemplate;\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"container\">\r\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\r\n        <modal-template\r\n          @closeButtonPressed=${this.closeButtonPressed}\r\n          tabindex=\"0\"\r\n        >\r\n          ${this.customModalContent}\r\n        </modal-template>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getMode(): ModalManagerMode {\r\n    return this.mode;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  closeModal(): void {\r\n    this.mode = ModalManagerMode.Closed;\r\n  }\r\n\r\n  /**\r\n   * Whether the modal should close if the user taps on the backdrop\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private closeOnBackdropClick = true;\r\n\r\n  /**\r\n   * A callback if the user closes the modal\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private userClosedModalCallback?: () => void;\r\n\r\n  /**\r\n   * Call the userClosedModalCallback and reset it if it exists\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private callUserClosedModalCallback(): void {\r\n    // we assign the callback to a temp var and undefine it before calling it\r\n    // otherwise, we run into the potential for an infinite loop if the\r\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\r\n    const callback = this.userClosedModalCallback;\r\n    this.userClosedModalCallback = undefined;\r\n    if (callback) callback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  async showModal(options: {\r\n    config: ModalConfig;\r\n    customModalContent?: TemplateResult;\r\n    userClosedModalCallback?: () => void;\r\n  }): Promise<void> {\r\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\r\n    this.userClosedModalCallback = options.userClosedModalCallback;\r\n    this.modalTemplate.config = options.config;\r\n    this.customModalContent = options.customModalContent;\r\n    this.mode = ModalManagerMode.Open;\r\n    await this.modalTemplate.updateComplete;\r\n    this.modalTemplate.focus();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  updated(changed: PropertyValues): void {\r\n    /* istanbul ignore else */\r\n    if (changed.has('mode')) {\r\n      this.handleModeChange();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Called when the backdrop is clicked\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private backdropClicked(): void {\r\n    if (this.closeOnBackdropClick) {\r\n      this.closeModal();\r\n      this.callUserClosedModalCallback();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle the mode change\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private handleModeChange(): void {\r\n    this.hostBridge.handleModeChange(this.mode);\r\n    this.emitModeChangeEvent();\r\n  }\r\n\r\n  /**\r\n   * Emit a modeChange event\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private emitModeChangeEvent(): void {\r\n    const event = new CustomEvent('modeChanged', {\r\n      detail: { mode: this.mode },\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * Called when the modal close button is pressed. Closes the modal.\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private closeButtonPressed(): void {\r\n    this.closeModal();\r\n    this.callUserClosedModalCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\r\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\r\n\r\n    const modalWidth = css`var(--modalWidth, 32rem)`;\r\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\r\n    const modalZindex = css`var(--modalZindex, 2000)`;\r\n\r\n    return css`\r\n      .container {\r\n        width: 100%;\r\n        height: 100%;\r\n      }\r\n\r\n      .backdrop {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        background-color: ${modalBackdropColor};\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: ${modalBackdropZindex};\r\n      }\r\n\r\n      modal-template {\r\n        outline: 0;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 50%;\r\n        transform: translate(-50%, 0);\r\n        z-index: ${modalZindex};\r\n        width: ${modalWidth};\r\n        max-width: ${modalMaxWidth};\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}