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

package/dist/src/modal-manager.js

@@ -1,235 +1,248 @@
-import { __awaiter, __decorate } from "tslib";
-import { LitElement, html, css, } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
-import Modal from './shoelace/modal';
-import './modal-template';
-import { ModalConfig } from './modal-config';
-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;
-        /**
-         * This 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);
-        // Imported tab handling from shoelace
-        this.modal = new Modal(this);
-        /**
-         * Whether the modal should close if the user taps on the backdrop
-         *
-         * @private
-         * @memberof ModalManager
-         */
-        this.closeOnBackdropClick = true;
-    }
-    firstUpdated() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Give the browser a chance to paint
-            // eslint-disable-next-line no-promise-executor-return
-            yield new Promise(r => setTimeout(r, 0));
-            if (this.closeOnBackdropClick) {
-                this.addEventListener('keydown', (e) => {
-                    if (e.key === 'Escape') {
-                        this.backdropClicked();
-                    }
-                });
-            }
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.modal.deactivate();
-    }
-    /** @inheritdoc */
-    render() {
-        return html `
-      <div class="container">
-        <div class="backdrop" @click=${this.backdropClicked}></div>
-        <modal-template
-          @closeButtonPressed=${this.closeButtonPressed}
-          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}
-          tabindex="-1"
-        >
-          ${this.customModalContent}
-        </modal-template>
-      </div>
-    `;
-    }
-    /** @inheritdoc */
-    getMode() {
-        return this.mode;
-    }
-    /** @inheritdoc */
-    closeModal() {
-        this.mode = ModalManagerMode.Closed;
-        this.customModalContent = undefined;
-        if (this.modalTemplate)
-            this.modalTemplate.config = new ModalConfig();
-        this.modal.deactivate();
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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.userPressedLeftNavButtonCallback =
-                options.userPressedLeftNavButtonCallback;
-            this.customModalContent = options.customModalContent;
-            this.mode = ModalManagerMode.Open;
-            if (this.modalTemplate) {
-                this.modalTemplate.config = options.config;
-                yield this.modalTemplate.updateComplete;
-                this.modalTemplate.focus();
-            }
-            this.modal.activate();
-        });
-    }
-    /** @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 from './shoelace/modal';
+import { getDeepestActiveElement } from './shoelace/active-elements';
+import './modal-template';
+import { ModalConfig } from './modal-config';
+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;
+        /**
+         * This 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);
+        // Imported tab handling from shoelace
+        this.modal = new Modal(this);
+        /**
+         * Whether the modal should close if the user taps on the backdrop
+         *
+         * @private
+         * @memberof ModalManager
+         */
+        this.closeOnBackdropClick = true;
+    }
+    firstUpdated() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Give the browser a chance to paint
+            // eslint-disable-next-line no-promise-executor-return
+            yield new Promise(r => setTimeout(r, 0));
+            if (this.closeOnBackdropClick) {
+                this.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        this.backdropClicked();
+                    }
+                });
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.modal.deactivate();
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      <div class="container">
+        <div class="backdrop" @click=${this.backdropClicked}></div>
+        <modal-template
+          @closeButtonPressed=${this.closeButtonPressed}
+          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}
+          tabindex="-1"
+        >
+          ${this.customModalContent}
+        </modal-template>
+      </div>
+    `;
+    }
+    /** @inheritdoc */
+    getMode() {
+        return this.mode;
+    }
+    /** @inheritdoc */
+    closeModal() {
+        var _a, _b;
+        this.mode = ModalManagerMode.Closed;
+        this.customModalContent = undefined;
+        if (this.modalTemplate)
+            this.modalTemplate.config = new ModalConfig();
+        this.modal.deactivate();
+        // Return focus to the triggering element, if possible
+        (_b = (_a = this.triggeringElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.triggeringElement = undefined;
+    }
+    /**
+     * 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();
+    }
+    /**
+     * 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.captureTriggeringElement();
+            this.closeOnBackdropClick = options.config.closeOnBackdropClick;
+            this.userClosedModalCallback = options.userClosedModalCallback;
+            this.userPressedLeftNavButtonCallback =
+                options.userPressedLeftNavButtonCallback;
+            this.customModalContent = options.customModalContent;
+            this.mode = ModalManagerMode.Open;
+            if (this.modalTemplate) {
+                this.modalTemplate.config = options.config;
+                yield this.modalTemplate.updateComplete;
+                this.modalTemplate.focus();
+            }
+            this.modal.activate();
+        });
+    }
+    /**
+     * Sets the triggering element to the one that is currently focused, as deep
+     * within Shadow DOM as possible.
+     */
+    captureTriggeringElement() {
+        this.triggeringElement = getDeepestActiveElement();
+    }
+    /** @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":";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"]}
+{"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 from './shoelace/modal';\r\nimport { getDeepestActiveElement } from './shoelace/active-elements';\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   * This 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  // Imported tab handling from shoelace\r\n  public modal = new Modal(this);\r\n\r\n  async firstUpdated(): Promise<void> {\r\n    // Give the browser a chance to paint\r\n    // eslint-disable-next-line no-promise-executor-return\r\n    await new Promise(r => setTimeout(r, 0));\r\n\r\n    if (this.closeOnBackdropClick) {\r\n      this.addEventListener('keydown', (e: KeyboardEvent) => {\r\n        if (e.key === 'Escape') {\r\n          this.backdropClicked();\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this.modal.deactivate();\r\n  }\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          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\r\n          tabindex=\"-1\"\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    this.customModalContent = undefined;\r\n    if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\r\n    this.modal.deactivate();\r\n    \r\n    // Return focus to the triggering element, if possible\r\n    (this.triggeringElement as HTMLElement)?.focus?.();\r\n    this.triggeringElement = undefined;\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   * The element that had focus when the modal was opened, so that we can return focus\r\n   * to it after the modal closes.\r\n   */\r\n  private triggeringElement?: Element;\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   * A callback if the user presses the left nav button\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private userPressedLeftNavButtonCallback?: () => 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  /**\r\n   * Call the user pressed left nav button callback and reset it if it exists\r\n   *\r\n   * @private\r\n   * @memberof ModalManager\r\n   */\r\n  private callUserPressedLeftNavButtonCallback(): void {\r\n    // avoids an infinite showModal() loop, as above\r\n    const callback = this.userPressedLeftNavButtonCallback;\r\n    this.userPressedLeftNavButtonCallback = 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    userPressedLeftNavButtonCallback?: () => void;\r\n  }): Promise<void> {\r\n    this.captureTriggeringElement();\r\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\r\n    this.userClosedModalCallback = options.userClosedModalCallback;\r\n    this.userPressedLeftNavButtonCallback =\r\n      options.userPressedLeftNavButtonCallback;\r\n    this.customModalContent = options.customModalContent;\r\n    this.mode = ModalManagerMode.Open;\r\n    if (this.modalTemplate) {\r\n      this.modalTemplate.config = options.config;\r\n      await this.modalTemplate.updateComplete;\r\n      this.modalTemplate.focus();\r\n    }\r\n    this.modal.activate();\r\n  }\r\n\r\n  /**\r\n   * Sets the triggering element to the one that is currently focused, as deep\r\n   * within Shadow DOM as possible.\r\n   */\r\n  private captureTriggeringElement(): void {\r\n    this.triggeringElement = getDeepestActiveElement();\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"]}

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

@@ -1,41 +1,41 @@
-import { LitElement, CSSResult, TemplateResult } from 'lit';
-import '@internetarchive/ia-activity-indicator';
-import '@internetarchive/icon-close';
-import { ModalConfig } from './modal-config';
-export declare class ModalTemplate extends LitElement {
-    /**
-     * The ModalConfig that displayed the template
-     *
-     * @type {ModalConfig}
-     * @memberof ModalTemplate
-     */
-    config: ModalConfig;
-    /** @inheritdoc */
-    render(): TemplateResult;
-    /**
-     * Dispatch the `closeButtonPressed` event to the consumer
-     *
-     * @private
-     * @memberof ModalTemplate
-     */
-    private handleCloseButton;
-    /**
-     * Dispatch the `leftNavButtonPressed` event to the consumer
-     *
-     * @private
-     * @memberof ModalTemplate
-     */
-    private handleLeftNavButtonPressed;
-    /**
-     * The close button template
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof ModalTemplate
-     */
-    private get closeButtonTemplate();
-    private get leftNavButtonTemplate();
-    /** @inheritdoc */
-    static get styles(): CSSResult;
-}
+import { LitElement, CSSResult, TemplateResult } from 'lit';
+import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/icon-close';
+import { ModalConfig } from './modal-config';
+export declare class ModalTemplate extends LitElement {
+    /**
+     * The ModalConfig that displayed the template
+     *
+     * @type {ModalConfig}
+     * @memberof ModalTemplate
+     */
+    config: ModalConfig;
+    /** @inheritdoc */
+    render(): TemplateResult;
+    /**
+     * Dispatch the `closeButtonPressed` event to the consumer
+     *
+     * @private
+     * @memberof ModalTemplate
+     */
+    private handleCloseButton;
+    /**
+     * Dispatch the `leftNavButtonPressed` event to the consumer
+     *
+     * @private
+     * @memberof ModalTemplate
+     */
+    private handleLeftNavButtonPressed;
+    /**
+     * The close button template
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof ModalTemplate
+     */
+    private get closeButtonTemplate();
+    private get leftNavButtonTemplate();
+    /** @inheritdoc */
+    static get styles(): CSSResult;
+}