@web-atoms/core 2.6.21 → 2.6.25

package/dist-esm/web/services/PopupService.js

@@ -5,522 +5,556 @@ import XNode from "../../core/XNode.js";
 import { AtomControl } from "../controls/AtomControl.js";
 import { LastTarget } from "./LastTarget.js";
 import NotificationPopup from "./NotificationPopup.js";
-import "./PopupService.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./PopupService.global.css"));
 import PopupWindowA, { ConfirmPopup } from "./PopupWindow.js";
 export var NotifyType;
 (function (NotifyType) {
-    NotifyType["Information"] = "info";
-    NotifyType["Warning"] = "warn";
-    NotifyType["Error"] = "error";
+  NotifyType["Information"] = "info";
+  NotifyType["Warning"] = "warn";
+  NotifyType["Error"] = "error";
 })(NotifyType || (NotifyType = {}));
 export const PopupWindow = PopupWindowA;
-document.body.addEventListener("click", (e) => {
-    if (e.target.offsetParent) {
-        PopupService.lastTarget = e.target;
-    }
+document.body.addEventListener("click", e => {
+  if (e.target.offsetParent) {
+    PopupService.lastTarget = e.target;
+  }
 });
 const popupCss = "web-atoms-popup-local";
 export class PopupControl extends AtomControl {
-    static showControl(opener, { onClick = "close", ...options } = {}) {
-        let openerElement = options?.parentElement;
-        let app;
-        if (opener instanceof AtomControl) {
-            openerElement ??= opener.element;
-            app = opener.app;
-        }
-        else {
-            openerElement ??= opener;
-            let start = opener;
-            while (!start.atomControl) {
-                start = start.parentElement;
-            }
-            if (!start) {
-                return Promise.reject("Could not create popup as target is not attached");
-            }
-            app = start.atomControl.app;
-        }
-        const popup = new this(app);
-        if (onClick === "close") {
-            popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.close(), 10));
+  static showControl(opener, {
+    onClick = "close",
+    ...options
+  } = {}) {
+    let openerElement = options?.parentElement;
+    let app;
+    if (opener instanceof AtomControl) {
+      openerElement ??= opener.element;
+      app = opener.app;
+    } else {
+      openerElement ??= opener;
+      let start = opener;
+      while (!start.atomControl) {
+        start = start.parentElement;
+      }
+      if (!start) {
+        return Promise.reject("Could not create popup as target is not attached");
+      }
+      app = start.atomControl.app;
+    }
+    const popup = new this(app);
+    if (onClick === "close") {
+      popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.close(), 10));
+    } else if (onClick === "cancel") {
+      popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.cancel(), 10));
+    }
+    const p = PopupService.show(openerElement, popup.element, options);
+    return new Promise((resolve, reject) => {
+      let resolved = false;
+      popup.close = r => {
+        if (resolved) {
+          return;
         }
-        else if (onClick === "cancel") {
-            popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.cancel(), 10));
+        resolved = true;
+        PopupService.lastTarget = openerElement;
+        resolve(r);
+        p.dispose();
+      };
+      popup.cancel = e => {
+        if (resolved) {
+          return;
         }
-        const p = PopupService.show(openerElement, popup.element, options);
-        return new Promise(((resolve, reject) => {
-            let resolved = false;
-            popup.close = (r) => {
-                if (resolved) {
-                    return;
-                }
-                resolved = true;
-                PopupService.lastTarget = openerElement;
-                resolve(r);
-                p.dispose();
-            };
-            popup.cancel = (e) => {
-                if (resolved) {
-                    return;
-                }
-                resolved = true;
-                PopupService.lastTarget = openerElement;
-                reject(e);
-                p.dispose();
-            };
-        }));
-    }
+        resolved = true;
+        PopupService.lastTarget = openerElement;
+        reject(e);
+        p.dispose();
+      };
+    });
+  }
 }
 function findHostAndPosition(opener) {
-    let root = opener;
-    const body = document.body;
-    let rect = opener.getBoundingClientRect();
-    const offset = {
-        x: rect.left,
-        y: rect.top,
-        handler: null,
-        root
-    };
-    do {
-        root = root.parentElement;
-        if (root === body) {
-            break;
-        }
-        if (root.parentElement.classList.contains("page-host")) {
-            break;
-        }
-        if (root.classList.contains("popup-host")) {
-            break;
-        }
-        if (root.getAttribute("data-pop-up-host") === "yes") {
-            break;
-        }
-    } while (true);
-    rect = root.getBoundingClientRect();
-    offset.x -= rect.x;
-    offset.y -= rect.y;
-    offset.root = root;
-    return offset;
+  let root = opener;
+  const body = document.body;
+  let rect = opener.getBoundingClientRect();
+  const offset = {
+    x: rect.left,
+    y: rect.top,
+    handler: null,
+    root
+  };
+  do {
+    root = root.parentElement;
+    if (root === body) {
+      break;
+    }
+    if (root.parentElement.classList.contains("page-host")) {
+      break;
+    }
+    if (root.classList.contains("popup-host")) {
+      break;
+    }
+    if (root.getAttribute("data-pop-up-host") === "yes") {
+      break;
+    }
+  } while (true);
+  rect = root.getBoundingClientRect();
+  offset.x -= rect.x;
+  offset.y -= rect.y;
+  offset.root = root;
+  return offset;
 }
 function findHost(opener, offset) {
-    let host = opener.offsetParent;
-    while (host) {
-        const current = host;
-        if (host === document.body) {
-            return host;
-        }
-        if (host.classList.contains("popup-host")) {
-            return host;
-        }
-        if (host.dataset.popUpHost === "yes") {
-            return host;
-        }
-        const parent = (host.offsetParent ?? host.parentElement);
-        host = parent;
-        if (host.classList.contains("page-host")) {
-            host = current;
-            return host;
-        }
-        if (!host) {
-            continue;
-        }
-        if (!offset) {
-            continue;
-        }
-        offset.x += host.offsetLeft;
-        offset.y += host.offsetTop - (parent?.scrollTop ?? 0);
+  let host = opener.offsetParent;
+  while (host) {
+    const current = host;
+    if (host === document.body) {
+      return host;
     }
-    return host ?? document.body;
+    if (host.classList.contains("popup-host")) {
+      return host;
+    }
+    if (host.dataset.popUpHost === "yes") {
+      return host;
+    }
+    const parent = host.offsetParent ?? host.parentElement;
+    host = parent;
+    if (host.classList.contains("page-host")) {
+      host = current;
+      return host;
+    }
+    if (!host) {
+      continue;
+    }
+    if (!offset) {
+      continue;
+    }
+    offset.x += host.offsetLeft;
+    offset.y += host.offsetTop - (parent?.scrollTop ?? 0);
+  }
+  return host ?? document.body;
 }
-export const disableContain = (ce) => {
-    const containNoneList = [];
-    while (ce) {
-        const style = window.getComputedStyle(ce);
-        const isNotNone = style.contain !== "none";
-        if (isNotNone) {
-            ce.setAttribute("data-force-contain", "none");
-            containNoneList.push(ce);
-        }
-        ce = ce.parentElement;
+export const disableContain = ce => {
+  const containNoneList = [];
+  while (ce) {
+    const style = window.getComputedStyle(ce);
+    const isNotNone = style.contain !== "none";
+    if (isNotNone) {
+      ce.setAttribute("data-force-contain", "none");
+      containNoneList.push(ce);
     }
-    return () => {
-        for (const iterator of containNoneList) {
-            iterator.removeAttribute("data-force-contain");
-        }
-    };
+    ce = ce.parentElement;
+  }
+  return () => {
+    for (const iterator of containNoneList) {
+      iterator.removeAttribute("data-force-contain");
+    }
+  };
 };
 function closeHandler(host, opener, container, close) {
-    let handler = null;
-    handler = (e) => {
-        if (container?.element) {
-            const ce = new CustomEvent("outsideClick", { detail: e, cancelable: true, bubbles: true });
-            container.element.dispatchEvent(ce);
-            if (ce.defaultPrevented) {
-                return;
-            }
-        }
-        let start = e.target;
-        if (e.defaultPrevented) {
-            return;
-        }
-        while (start) {
-            if (start === host) {
-                break;
-            }
-            if (start === opener) {
-                return;
-            }
-            if (start === container.element) {
-                return;
-            }
-            start = start.parentElement;
-        }
-        close();
-        e.preventDefault();
-        e.stopImmediatePropagation?.();
-    };
-    document.body.addEventListener("click", handler, true);
-    container.registerDisposable(() => document.body.removeEventListener("click", handler, true));
-    const onBack = (e) => {
-        e.preventDefault();
-        e.stopImmediatePropagation?.();
-        e.stopPropagation();
-        close();
-    };
-    window.addEventListener("backButton", onBack, true);
-    container.registerDisposable(() => window.removeEventListener("backButton", onBack, true));
-    setTimeout(() => {
-        container.registerDisposable(disableContain(container.element));
-    }, 10);
+  let handler = null;
+  handler = e => {
+    if (container?.element) {
+      const ce = new CustomEvent("outsideClick", {
+        detail: e,
+        cancelable: true,
+        bubbles: true
+      });
+      container.element.dispatchEvent(ce);
+      if (ce.defaultPrevented) {
+        return;
+      }
+    }
+    let start = e.target;
+    if (e.defaultPrevented) {
+      return;
+    }
+    while (start) {
+      if (start === host) {
+        break;
+      }
+      if (start === opener) {
+        return;
+      }
+      if (start === container.element) {
+        return;
+      }
+      start = start.parentElement;
+    }
+    close();
+    e.preventDefault();
+    e.stopImmediatePropagation?.();
+  };
+  document.body.addEventListener("click", handler, true);
+  container.registerDisposable(() => document.body.removeEventListener("click", handler, true));
+  const onBack = e => {
+    e.preventDefault();
+    e.stopImmediatePropagation?.();
+    e.stopPropagation();
+    close();
+  };
+  window.addEventListener("backButton", onBack, true);
+  container.registerDisposable(() => window.removeEventListener("backButton", onBack, true));
+  setTimeout(() => {
+    container.registerDisposable(disableContain(container.element));
+  }, 10);
 }
 let popupId = 1001;
 export default class PopupService {
-    static get lastTarget() {
-        return LastTarget.target;
-    }
-    static set lastTarget(v) {
-        LastTarget.target = v;
-    }
-    static async alert({ message, detail, title = "Alert", yesLabel = "Ok" }) {
-        try {
-            const isMsgXNode = message instanceof XNode;
-            const isDetailXNode = detail && detail instanceof XNode;
-            if (isMsgXNode) {
-                (message.attributes ??= {})["data-element"] = "message";
-            }
-            if (isDetailXNode) {
-                (detail.attributes ??= {})["data-element"] = "details";
-            }
-            const popup = class extends ConfirmPopup {
-                create() {
-                    this.render(XNode.create("div", null,
-                        isMsgXNode ? message : XNode.create("div", { "data-element": "message", text: message }),
-                        detail && (isDetailXNode ? detail : XNode.create("details", { "data-element": "details" },
-                            XNode.create("pre", { text: detail })))));
-                }
-            };
-            return await popup.showModal({
-                parameters: {
-                    message,
-                    detail,
-                    yesLabel,
-                    noLabel: ""
-                },
-                title
-            });
-        }
-        catch (e) {
-            if (CancelToken.isCancelled(e)) {
-                return false;
-            }
-            throw e;
+  static get lastTarget() {
+    return LastTarget.target;
+  }
+  static set lastTarget(v) {
+    LastTarget.target = v;
+  }
+  static async alert({
+    message,
+    detail,
+    title = "Alert",
+    yesLabel = "Ok"
+  }) {
+    try {
+      const isMsgXNode = message instanceof XNode;
+      const isDetailXNode = detail && detail instanceof XNode;
+      if (isMsgXNode) {
+        (message.attributes ??= {})["data-element"] = "message";
+      }
+      if (isDetailXNode) {
+        (detail.attributes ??= {})["data-element"] = "details";
+      }
+      const popup = class extends ConfirmPopup {
+        create() {
+          this.render(XNode.create("div", null, isMsgXNode ? message : XNode.create("div", {
+            "data-element": "message",
+            text: message
+          }), detail && (isDetailXNode ? detail : XNode.create("details", {
+            "data-element": "details"
+          }, XNode.create("pre", {
+            text: detail
+          })))));
         }
+      };
+      return await popup.showModal({
+        parameters: {
+          message,
+          detail,
+          yesLabel,
+          noLabel: ""
+        },
+        title
+      });
+    } catch (e) {
+      if (CancelToken.isCancelled(e)) {
+        return false;
+      }
+      throw e;
     }
-    static async confirm({ message, title = "Confirm", yesLabel = "Yes", noLabel = "No", cancelLabel = null }) {
-        try {
-            const popup = class extends ConfirmPopup {
-                create() {
-                    this.render(XNode.create("div", null, message instanceof XNode ? message : XNode.create("div", { text: message })));
-                }
-            };
-            return await popup.showModal({
-                parameters: {
-                    message,
-                    yesLabel,
-                    noLabel,
-                    cancelLabel
-                },
-                title
-            });
-        }
-        catch (e) {
-            if (CancelToken.isCancelled(e)) {
-                return false;
-            }
-            throw e;
+  }
+  static async confirm({
+    message,
+    title = "Confirm",
+    yesLabel = "Yes",
+    noLabel = "No",
+    cancelLabel = null
+  }) {
+    try {
+      const popup = class extends ConfirmPopup {
+        create() {
+          this.render(XNode.create("div", null, message instanceof XNode ? message : XNode.create("div", {
+            text: message
+          })));
         }
+      };
+      return await popup.showModal({
+        parameters: {
+          message,
+          yesLabel,
+          noLabel,
+          cancelLabel
+        },
+        title
+      });
+    } catch (e) {
+      if (CancelToken.isCancelled(e)) {
+        return false;
+      }
+      throw e;
     }
-    static showWindow(opener, popupClass, popupOptions) {
-        return new Promise((resolve, reject) => {
-            const activeElement = document.activeElement;
-            const previousTarget = opener;
-            const parent = AtomControl.from(opener);
-            const control = new (popupClass)(parent.app, document.createElement("div"));
-            const vm = getOwnInheritedProperty(control, "viewModel")
-                ?? ("parameters" in control ? control.parameters ??= {} : control);
-            let element = control.element;
-            element.style.zIndex = `${popupId++}`;
-            let resolved = false;
-            const close = (r) => {
-                setTimeout(() => {
-                    if (!resolved) {
-                        resolved = true;
-                        setTimeout(resolve, 1, r);
-                        if (control.element) {
-                            control.element.remove();
-                            control.dispose();
-                        }
-                        element?.remove();
-                        element = undefined;
-                        PopupService.lastTarget = previousTarget;
-                        try {
-                            activeElement?.focus();
-                        }
-                        catch (error) {
-                            console.error(error);
-                        }
-                    }
-                }, 1);
-            };
-            const cancel = (r) => {
-                setTimeout(() => {
-                    if (!resolved) {
-                        resolved = true;
-                        setTimeout(reject, 1, r ?? "cancelled");
-                        if (control.element) {
-                            control.element.remove();
-                            control.dispose();
-                        }
-                        element?.remove();
-                        element = undefined;
-                        PopupService.lastTarget = previousTarget;
-                        try {
-                            activeElement?.focus();
-                        }
-                        catch (error) {
-                            console.error(error);
-                        }
-                    }
-                }, 1);
-            };
-            let isModal = false;
-            if (popupOptions) {
-                const { width, height, minHeight, maxHeight, minWidth, maxWidth, maximize, title, parameters, cancelToken, modal } = popupOptions;
-                if (title) {
-                    vm.title = title;
-                }
-                let widthSet = false;
-                let heightSet = false;
-                if (maximize) {
-                    element.setAttribute("data-maximize", "true");
-                    widthSet = heightSet = true;
-                }
-                else {
-                    if (width) {
-                        element.style.width = typeof width === "number" ? width + "px" : width;
-                        widthSet = true;
-                    }
-                    if (height) {
-                        element.style.height = typeof height === "number" ? height + "px" : height;
-                        heightSet = true;
-                    }
-                    if (minWidth) {
-                        element.style.minWidth = typeof minWidth === "number" ? minWidth + "px" : minWidth;
-                        widthSet = true;
-                    }
-                    if (minHeight) {
-                        element.style.minHeight = typeof minHeight === "number" ? minHeight + "px" : minHeight;
-                        heightSet = true;
-                    }
-                    if (maxWidth) {
-                        element.style.maxWidth = typeof maxWidth === "number" ? maxWidth + "px" : maxWidth;
-                        widthSet = true;
-                    }
-                    if (maxHeight) {
-                        element.style.maxHeight = typeof maxHeight === "number" ? maxHeight + "px" : maxHeight;
-                        heightSet = true;
-                    }
-                }
-                if (!widthSet) {
-                    element.setAttribute("data-no-width", "true");
-                }
-                if (!heightSet) {
-                    element.setAttribute("data-no-height", "true");
-                }
-                if (parameters) {
-                    for (const key in parameters) {
-                        if (Object.prototype.hasOwnProperty.call(parameters, key)) {
-                            const e = parameters[key];
-                            vm[key] = e;
-                        }
-                    }
-                    const init = control.init;
-                    if (init) {
-                        const c = control.init();
-                        if (c?.then) {
-                            c.then(() => control.element.dispatchEvent(new CustomEvent("popupReady", { bubbles: true })), (error) => {
-                                control.element.dispatchEvent(new CustomEvent("popupReady", { bubbles: true }));
-                                if (!CancelToken.isCancelled(error)) {
-                                    console.error(error);
-                                }
-                            });
-                        }
-                        else {
-                            setTimeout(() => control.element.dispatchEvent(new CustomEvent("popupReady", { bubbles: true })), 1);
-                        }
-                    }
-                    else {
-                        setTimeout(() => control.element.dispatchEvent(new CustomEvent("popupReady", { bubbles: true })), 1);
-                    }
-                }
-                else {
-                    setTimeout(() => control.element.dispatchEvent(new CustomEvent("popupReady", { bubbles: true })), 1);
-                }
-                cancelToken?.registerForCancel(cancel);
-                isModal = modal;
+  }
+  static showWindow(opener, popupClass, popupOptions) {
+    return new Promise((resolve, reject) => {
+      const activeElement = document.activeElement;
+      const previousTarget = opener;
+      const parent = AtomControl.from(opener);
+      const control = new popupClass(parent.app, document.createElement("div"));
+      const vm = getOwnInheritedProperty(control, "viewModel") ?? ("parameters" in control ? control.parameters ??= {} : control);
+      let element = control.element;
+      element.style.zIndex = `${popupId++}`;
+      let resolved = false;
+      const close = r => {
+        setTimeout(() => {
+          if (!resolved) {
+            resolved = true;
+            setTimeout(resolve, 1, r);
+            if (control.element) {
+              control.element.remove();
+              control.dispose();
             }
-            const host = findHost(opener);
-            host.appendChild(control.element);
-            vm.cancel = cancel;
-            vm.close = close;
-            if (vm !== control) {
-                control.cancel = cancel;
-                control.close = close;
+            element?.remove();
+            element = undefined;
+            PopupService.lastTarget = previousTarget;
+            try {
+              activeElement?.focus();
+            } catch (error) {
+              console.error(error);
             }
-            if (isModal) {
-                const bg = document.createElement("div");
-                bg.setAttribute("data-window-modal-background", "background");
-                host.appendChild(bg);
-                const onBack = (e) => {
-                    e.preventDefault();
-                    e.stopImmediatePropagation?.();
-                    e.stopPropagation();
-                    control.requestCancel?.();
-                };
-                window.addEventListener("backButton", onBack, true);
-                control.registerDisposable({
-                    dispose: () => {
-                        bg.remove();
-                        window.removeEventListener("backButton", onBack, true);
-                    }
-                });
+          }
+        }, 1);
+      };
+      const cancel = r => {
+        setTimeout(() => {
+          if (!resolved) {
+            resolved = true;
+            setTimeout(reject, 1, r ?? "cancelled");
+            if (control.element) {
+              control.element.remove();
+              control.dispose();
             }
-            else {
-                closeHandler(host, opener, control, cancel);
+            element?.remove();
+            element = undefined;
+            PopupService.lastTarget = previousTarget;
+            try {
+              activeElement?.focus();
+            } catch (error) {
+              console.error(error);
             }
-        });
-    }
-    static async notify(message, title, type, delay) {
-        try {
-            const notification = NotificationPopup({ message, type });
-            const cancelToken = new CancelToken(delay ?? 5000);
-            await notification.showWindow(notification, {
-                title,
-                cancelToken
-            });
+          }
+        }, 1);
+      };
+      let isModal = false;
+      if (popupOptions) {
+        const {
+          width,
+          height,
+          minHeight,
+          maxHeight,
+          minWidth,
+          maxWidth,
+          maximize,
+          title,
+          parameters,
+          cancelToken,
+          modal
+        } = popupOptions;
+        if (title) {
+          vm.title = title;
         }
-        catch (ex) {
-            console.error(ex);
+        let widthSet = false;
+        let heightSet = false;
+        if (maximize) {
+          element.setAttribute("data-maximize", "true");
+          widthSet = heightSet = true;
+        } else {
+          if (width) {
+            element.style.width = typeof width === "number" ? width + "px" : width;
+            widthSet = true;
+          }
+          if (height) {
+            element.style.height = typeof height === "number" ? height + "px" : height;
+            heightSet = true;
+          }
+          if (minWidth) {
+            element.style.minWidth = typeof minWidth === "number" ? minWidth + "px" : minWidth;
+            widthSet = true;
+          }
+          if (minHeight) {
+            element.style.minHeight = typeof minHeight === "number" ? minHeight + "px" : minHeight;
+            heightSet = true;
+          }
+          if (maxWidth) {
+            element.style.maxWidth = typeof maxWidth === "number" ? maxWidth + "px" : maxWidth;
+            widthSet = true;
+          }
+          if (maxHeight) {
+            element.style.maxHeight = typeof maxHeight === "number" ? maxHeight + "px" : maxHeight;
+            heightSet = true;
+          }
         }
-    }
-    static show(opener, popup, options) {
-        const previousTarget = opener;
-        const container = {
-            element: document.createElement("div"),
-            disposables: new AtomDisposableList(),
-            registerDisposable: null,
-            dispose: null,
-        };
-        container.registerDisposable = (f) => container.disposables.add(f);
-        let alignment = options?.alignment ?? "auto";
-        if (alignment === "auto") {
-            const rect = opener.getBoundingClientRect();
-            const w = window.visualViewport.width;
-            if (rect.left > w / 2) {
-                alignment = "bottomRight";
-            }
+        if (!widthSet) {
+          element.setAttribute("data-no-width", "true");
         }
-        const isCenterOfScreen = alignment === "centerOfScreen";
-        const popupStyle = options?.popupStyle ?? popupCss;
-        container.element._logicalParent = opener;
-        container.element.classList.add(popupStyle);
-        if (isCenterOfScreen) {
-            container.element.dataset.centerPopup = "center";
+        if (!heightSet) {
+          element.setAttribute("data-no-height", "true");
         }
-        else {
-            container.element.dataset.inlinePopup = "left";
-            const alignPopup = () => {
-                switch (alignment) {
-                    case "bottomRight":
-                        container.element.style.top = (opener.offsetTop + opener.offsetHeight) + "px";
-                        container.element.style.right = "0px";
-                        container.element.dataset.inlinePopup = "right";
-                        opener.insertAdjacentElement("afterend", container.element);
-                        break;
-                    case "topRight":
-                    case "right":
-                        container.element.style.top = (opener.offsetTop) + "px";
-                        container.element.style.left = (opener.offsetWidth) + "px";
-                        opener.insertAdjacentElement("afterend", container.element);
-                        break;
-                    case "bottomLeft":
-                        container.element.dataset.inlinePopup = "inline-left";
-                        container.element.style.top = (opener.offsetTop + opener.offsetHeight) + "px";
-                        opener.insertAdjacentElement("beforebegin", container.element);
-                        break;
-                    default:
-                        container.element.style.top = (opener.offsetTop + opener.offsetHeight) + "px";
-                        opener.insertAdjacentElement("afterend", container.element);
-                        break;
-                }
-            };
-            if (opener.offsetParent !== opener.parentElement) {
-                opener.parentElement.style.position = "relative";
-                setTimeout(alignPopup, 5);
+        if (parameters) {
+          for (const key in parameters) {
+            if (Object.prototype.hasOwnProperty.call(parameters, key)) {
+              const e = parameters[key];
+              vm[key] = e;
             }
-            else {
-                alignPopup();
+          }
+          const init = control.init;
+          if (init) {
+            const c = control.init();
+            if (c?.then) {
+              c.then(() => control.element.dispatchEvent(new CustomEvent("popupReady", {
+                bubbles: true
+              })), error => {
+                control.element.dispatchEvent(new CustomEvent("popupReady", {
+                  bubbles: true
+                }));
+                if (!CancelToken.isCancelled(error)) {
+                  console.error(error);
+                }
+              });
+            } else {
+              setTimeout(() => control.element.dispatchEvent(new CustomEvent("popupReady", {
+                bubbles: true
+              })), 1);
             }
+          } else {
+            setTimeout(() => control.element.dispatchEvent(new CustomEvent("popupReady", {
+              bubbles: true
+            })), 1);
+          }
+        } else {
+          setTimeout(() => control.element.dispatchEvent(new CustomEvent("popupReady", {
+            bubbles: true
+          })), 1);
         }
-        const parent = AtomControl.from(opener);
-        if (popup instanceof XNode) {
-            parent.render(popup, container);
-        }
-        else {
-            container.element.appendChild(popup);
-        }
-        const style = container.element.style;
-        style.zIndex = `${popupId++}`;
-        container.dispose = () => {
-            if (!container.disposables) {
-                return;
-            }
-            container.disposables.dispose();
-            parent.dispose(container.element);
-            container.element.remove();
-            container.disposables = null;
-            PopupService.lastTarget = previousTarget;
+        cancelToken?.registerForCancel(cancel);
+        isModal = modal;
+      }
+      const host = findHost(opener);
+      host.appendChild(control.element);
+      vm.cancel = cancel;
+      vm.close = close;
+      if (vm !== control) {
+        control.cancel = cancel;
+        control.close = close;
+      }
+      if (isModal) {
+        const bg = document.createElement("div");
+        bg.setAttribute("data-window-modal-background", "background");
+        host.appendChild(bg);
+        const onBack = e => {
+          e.preventDefault();
+          e.stopImmediatePropagation?.();
+          e.stopPropagation();
+          control.requestCancel?.();
         };
-        closeHandler(opener.parentElement, opener, container, () => {
-            const e = container.element;
-            container.dispose();
-            e.remove();
+        window.addEventListener("backButton", onBack, true);
+        control.registerDisposable({
+          dispose: () => {
+            bg.remove();
+            window.removeEventListener("backButton", onBack, true);
+          }
         });
-        const ct = options?.cancelToken;
-        if (ct) {
-            ct.registerForCancel(() => container.dispose());
+      } else {
+        closeHandler(host, opener, control, cancel);
+      }
+    });
+  }
+  static async notify(message, title, type, delay) {
+    try {
+      const notification = NotificationPopup({
+        message,
+        type
+      });
+      const cancelToken = new CancelToken(delay ?? 5000);
+      await notification.showWindow(notification, {
+        title,
+        cancelToken
+      });
+    } catch (ex) {
+      console.error(ex);
+    }
+  }
+  static show(opener, popup, options) {
+    const previousTarget = opener;
+    const container = {
+      element: document.createElement("div"),
+      disposables: new AtomDisposableList(),
+      registerDisposable: null,
+      dispose: null
+    };
+    container.registerDisposable = f => container.disposables.add(f);
+    let alignment = options?.alignment ?? "auto";
+    if (alignment === "auto") {
+      const rect = opener.getBoundingClientRect();
+      const w = window.visualViewport.width;
+      if (rect.left > w / 2) {
+        alignment = "bottomRight";
+      }
+    }
+    const isCenterOfScreen = alignment === "centerOfScreen";
+    const popupStyle = options?.popupStyle ?? popupCss;
+    container.element._logicalParent = opener;
+    container.element.classList.add(popupStyle);
+    if (isCenterOfScreen) {
+      container.element.dataset.centerPopup = "center";
+    } else {
+      container.element.dataset.inlinePopup = "left";
+      const alignPopup = () => {
+        switch (alignment) {
+          case "bottomRight":
+            container.element.style.top = opener.offsetTop + opener.offsetHeight + "px";
+            container.element.style.right = "0px";
+            container.element.dataset.inlinePopup = "right";
+            opener.insertAdjacentElement("afterend", container.element);
+            break;
+          case "topRight":
+          case "right":
+            container.element.style.top = opener.offsetTop + "px";
+            container.element.style.left = opener.offsetWidth + "px";
+            opener.insertAdjacentElement("afterend", container.element);
+            break;
+          case "bottomLeft":
+            container.element.dataset.inlinePopup = "inline-left";
+            container.element.style.top = opener.offsetTop + opener.offsetHeight + "px";
+            opener.insertAdjacentElement("beforebegin", container.element);
+            break;
+          default:
+            container.element.style.top = opener.offsetTop + opener.offsetHeight + "px";
+            opener.insertAdjacentElement("afterend", container.element);
+            break;
         }
-        return container;
+      };
+      if (opener.offsetParent !== opener.parentElement) {
+        opener.parentElement.style.position = "relative";
+        setTimeout(alignPopup, 5);
+      } else {
+        alignPopup();
+      }
     }
-    static { this.targetPath = []; }
-}
-//# sourceMappingURL=PopupService.js.map
+    const parent = AtomControl.from(opener);
+    if (popup instanceof XNode) {
+      parent.render(popup, container);
+    } else {
+      container.element.appendChild(popup);
+    }
+    const style = container.element.style;
+    style.zIndex = `${popupId++}`;
+    container.dispose = () => {
+      if (!container.disposables) {
+        return;
+      }
+      container.disposables.dispose();
+      parent.dispose(container.element);
+      container.element.remove();
+      container.disposables = null;
+      PopupService.lastTarget = previousTarget;
+    };
+    closeHandler(opener.parentElement, opener, container, () => {
+      const e = container.element;
+      container.dispose();
+      e.remove();
+    });
+    const ct = options?.cancelToken;
+    if (ct) {
+      ct.registerForCancel(() => container.dispose());
+    }
+    return container;
+  }
+  static {
+    this.targetPath = [];
+  }
+}