web-ui-pack/baseModal.js

Web package with UI elements

import WUPBaseElement from "./baseElement";
import { parseMsTime } from "./helpers/styleHelpers";
import { WUPcssScrollSmall } from "./styles";
var OpenCases;
(function (OpenCases) {
    OpenCases[OpenCases["onManualCall"] = 0] = "onManualCall";
})(OpenCases || (OpenCases = {}));
var CloseCases;
(function (CloseCases) {
    CloseCases[CloseCases["onManualCall"] = 0] = "onManualCall";
})(CloseCases || (CloseCases = {}));
export default class WUPBaseModal extends WUPBaseElement {
    static get $styleRoot() {
        return `:root {
        --modal-anim-t: 400ms;
      }`;
    }
    static get $style() {
        return `${super.$style}
      :host {
        --modal-anim: var(--modal-anim-t) cubic-bezier(0, 0, 0.2, 1) 0ms;
        z-index: 8000;
        display: none;
        opacity: 0;
        position: fixed!important;
        border-radius: var(--border-radius);
        padding: var(--base-margin);
        box-sizing: border-box;
        white-space: pre-line;
        overflow: auto;
        overflow: overlay;
      }
      :host[open] { display: block; }
      :host[show] { opacity: 1; }
      ${WUPcssScrollSmall(":host")}
      @media not all and (prefers-reduced-motion) {
        :host {
          transition: opacity var(--modal-anim), transform var(--modal-anim);
        }
      }`;
    }
    #isOpened = false;
    get $isOpened() {
        return this.#isOpened;
    }
    #isOpening;
    get $isOpening() {
        return this.#isOpening === true;
    }
    get $isClosed() {
        return !this.#isOpened && !this.#isClosing;
    }
    #isClosing;
    get $isClosing() {
        return this.#isClosing === true;
    }
    $onWillOpen;
    $onOpen;
    $onWillClose;
    $onClose;
    _whenOpen;
    $open() {
        if (this.$isReady) {
            try {
                return this.goOpen(0, null);
            }
            catch (err) {
                return Promise.reject(err);
            }
        }
        return new Promise((res, rej) => {
            setTimeout(() => {
                if (!this.$isReady) {
                    rej(new Error(`${this.tagName}. Impossible to show: not appended to document`));
                }
                else {
                    this.goOpen(0, null).then(res);
                }
            }, 1);
        });
    }
    _whenClose;
    $close() {
        return this.goClose(0, null);
    }
    gotReady() {
        super.gotReady();
        this._willFocus && clearTimeout(this._willFocus);
        delete this._willFocus;
    }
    get animTime() {
        return parseMsTime(getComputedStyle(this).transitionDuration);
    }
    goOpen(openCase, ev) {
        if (this._whenOpen) {
            return this._whenOpen;
        }
        const e = this.fireEvent("$willOpen", { cancelable: true, bubbles: true, detail: { openCase } });
        if (e.defaultPrevented) {
            return Promise.resolve(false);
        }
        this._whenClose = undefined;
        this.#isClosing = undefined;
        this.#isOpened = true;
        this.#isOpening = true;
        this.setAttribute("open", "");
        this.gotOpen(openCase, ev);
        setTimeout(() => {
            this.scroll({ left: 0, top: 0, behavior: "instant" });
            this.setAttribute("show", "");
        });
        this._whenOpen = new Promise((res) => {
            setTimeout(() => {
                if (!this._whenOpen) {
                    res(false);
                    return;
                }
                this.#isOpening = undefined;
                res(true);
                setTimeout(() => this.fireEvent("$open", { cancelable: false, bubbles: true }));
            }, this.animTime);
        });
        return this._whenOpen;
    }
    goClose(closeCase, ev, immediately) {
        if (this._whenClose) {
            return this._whenClose;
        }
        if (!this._whenOpen) {
            return Promise.resolve(true);
        }
        const e = this.fireEvent("$willClose", { cancelable: true, bubbles: true, detail: { closeCase } });
        if (e.defaultPrevented) {
            return Promise.resolve(false);
        }
        this._whenOpen = undefined;
        this.#isOpening = undefined;
        this.#isClosing = true;
        this.removeAttribute("show");
        this.gotClose(closeCase, ev, immediately);
        this._whenClose = new Promise((res) => {
            setTimeout(() => {
                if (!this._whenClose) {
                    res(false);
                    return;
                }
                this.resetState();
                res(true);
                setTimeout(() => this.fireEvent("$close", { cancelable: false, bubbles: true }));
            }, immediately ? 0 : this.animTime);
        });
        return this._whenClose;
    }
    focus() {
        if (!this.$isOpened) {
            return false;
        }
        return super.focus();
    }
    resetState() {
        this.removeAttribute("open");
        this.#isOpened = false;
        this.#isClosing = undefined;
        this.#isOpening = undefined;
        this._whenClose = undefined;
        this._whenOpen = undefined;
    }
    disposeEvents() {
        super.dispose();
    }
    dispose() {
        this.resetState();
        super.dispose();
    }
}