@web-atoms/core 2.1.478 → 2.2.0

package/dist/web/services/PopupService.js

@@ -1,998 +1,828 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../core/AtomDisposableList", "../../core/Bind", "../../core/BindableProperty", "../../core/Colors", "../../core/InheritedProperty", "../../core/sleep", "../../core/types", "../../core/XNode", "../../style/StyleRule", "../controls/AtomControl", "../styles/CSS"], factory);
+System.register(["../../core/AtomDisposableList", "../../core/Bind", "../../core/BindableProperty", "../../core/Colors", "../../core/InheritedProperty", "../../core/sleep", "../../core/types", "../../core/XNode", "../../style/StyleRule", "../controls/AtomControl", "../styles/CSS"], function (_export, _context) {
+  "use strict";
+
+  var AtomDisposableList, Bind, BindableProperty, Colors, getOwnInheritedProperty, sleep, CancelToken, XNode, StyleRule, AtomControl, CSS, PopupControl, PopupWindow, ConfirmPopup, PopupService, __decorate, __metadata, __awaiter, __rest, popupCss, disableContain, popupId, lastTarget;
+  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.dataset.popUpHost === "yes") {
+        break;
+      }
+    } while (true);
+    rect = root.getBoundingClientRect();
+    offset.x -= rect.x;
+    offset.y -= rect.y;
+    offset.root = root;
+    return offset;
+  }
+  function findHost(opener, offset) {
+    var _a, _b;
+    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;
+      }
+      host = host.offsetParent;
+      if (host.classList.contains("page-host")) {
+        host = current;
+        return host;
+      }
+      if (!host) {
+        continue;
+      }
+      if (!offset) {
+        continue;
+      }
+      offset.x += host.offsetLeft;
+      offset.y += host.offsetTop - ((_b = (_a = host.offsetParent) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
     }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.disableContain = exports.ConfirmPopup = exports.PopupWindow = exports.PopupControl = void 0;
-    const AtomDisposableList_1 = require("../../core/AtomDisposableList");
-    const Bind_1 = require("../../core/Bind");
-    const BindableProperty_1 = require("../../core/BindableProperty");
-    const Colors_1 = require("../../core/Colors");
-    const InheritedProperty_1 = require("../../core/InheritedProperty");
-    const sleep_1 = require("../../core/sleep");
-    const types_1 = require("../../core/types");
-    const XNode_1 = require("../../core/XNode");
-    const StyleRule_1 = require("../../style/StyleRule");
-    const AtomControl_1 = require("../controls/AtomControl");
-    const CSS_1 = require("../styles/CSS");
-    // let lastTarget = null;
-    document.body.addEventListener("click", (e) => {
-        if (e.target.offsetParent) {
-            PopupService.lastTarget = e.target;
+    return host;
+  }
+  function closeHandler(host, opener, container, close) {
+    let handler = null;
+    handler = e => {
+      var _a;
+      let start = e.target;
+      if (e.defaultPrevented) {
+        return;
+      }
+      while (start) {
+        if (start === host) {
+          break;
         }
-    });
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .custom("contain", "none !important"), "[data-force-contain=none]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .position("relative")
-        .height(0)
-        .width(0)
-        .left(0)
-        .child((0, StyleRule_1.default)("*")
-        .position("absolute")
-        .left(0)
-        .top(0)
-        .padding(5)
-        .maxHeight(300)
-        .overflow("auto")
-        .borderRadius(5)
-        .backgroundColor(Colors_1.default.white)
-        .zIndex(200)
-        .defaultBoxShadow()), "*[data-inline-popup=left]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .position("absolute")
-        .height(0)
-        .width(0)
-        .right(0)
-        .child((0, StyleRule_1.default)("*")
-        .position("absolute")
-        .right(0)
-        .top(0)
-        .padding(5)
-        .maxHeight(300)
-        .overflow("auto")
-        .borderRadius(5)
-        .backgroundColor(Colors_1.default.white)
-        .zIndex(200)
-        .defaultBoxShadow()), "*[data-inline-popup=right]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .position("relative")
-        .height(0)
-        .width(0)
-        .left(0)
-        .child((0, StyleRule_1.default)("*")
-        .position("absolute")
-        .left(0)
-        .top(0)
-        .padding(5)
-        .maxHeight(300)
-        .overflow("auto")
-        .borderRadius(5)
-        .backgroundColor(Colors_1.default.white)
-        .zIndex(200)
-        .defaultBoxShadow()), "*[data-inline-popup=inline-left]");
-    (0, CSS_1.default)((0, StyleRule_1.default)("popup")
-        .position("fixed")
-        .left("50%")
-        .top("50%")
-        .transform("translate(-50%, -50%)")
-        .zIndex(10000)
-        .padding(5)
-        .backgroundColor(Colors_1.default.white)
-        .border("solid 1px lightgray")
-        .borderRadius(5)
-        .boxShadow("rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;")
-        .display("inline-block"), "*[data-center-popup]");
-    const popupCss = (0, CSS_1.default)((0, StyleRule_1.default)("popup")
-        .padding(5)
-        .backgroundColor(Colors_1.default.white)
-        .border("solid 1px lightgray")
-        .borderRadius(5)
-        .boxShadow("rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;")
-        .display("inline-block"));
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .position("absolute")
-        .border("solid 1px lightgray")
-        .borderRadius(5)
-        .backgroundColor(Colors_1.default.white)
-        .top("50%")
-        .left("50%")
-        .transform("translate(-50%,-50%)")
-        .boxShadow("0 0 20px 1px rgb(0 0 0 / 75%)")
-        .display("grid")
-        .alignItems("center")
-        .justifyItems("center")
-        .gridTemplateRows("auto 1fr")
-        .gridTemplateColumns("1fr")
-        .opacity("0")
-        .transition("opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32)")
-        .and((0, StyleRule_1.default)("[data-ready=true]")
-        .opacity("1"))
-        .and((0, StyleRule_1.default)("[data-dragging=true]")
-        .opacity("0.5"))
-        .child((0, StyleRule_1.default)(".title")
-        .justifySelf("stretch")
-        .display("flex")
-        .backgroundColor(Colors_1.default.lightGray.withAlphaPercent(0.2))
-        .padding(5)
-        .alignItems("center")
-        .justifyItems("center")
-        .child((0, StyleRule_1.default)(".title-text")
-        .cursor("move")
-        .flexStretch())
-        .child((0, StyleRule_1.default)("*")
-        .flex("1 1 100%"))
-        .child((0, StyleRule_1.default)(".popup-close-button")
-        .fontFamily("arial")
-        .fontSize(15)
-        .flex("1 0 auto")
-        .cursor("pointer")
-        .width(30)
-        .height(30)
-        .backgroundColor(Colors_1.default.red.withAlphaPercent(0.1))
-        .border("none")
-        .borderRadius(9999)
-        .textTransform("capitalize")
-        .hoverBackgroundColor(Colors_1.default.red)))
-        .child((0, StyleRule_1.default)("*[data-window-content=window-content]")
-        .margin(5)
-        .alignSelf("stretch")
-        .justifySelf("stretch")
-        .flexStretch()
-        .overflow("auto")
-        // This is done to avoid absolute position
-        // to run out of content area
-        .position("relative")
-    // .display("flex")
-    // .child(StyleRule("*")
-    //     .flex("1 1 100%")
-    // )
-    // .and(StyleRule("[data-window-content-fill] > *")
-    //     .maximizeAbsolute()
-    // )
-    )
-        .child((0, StyleRule_1.default)(" * > .command-bar")
-        .backgroundColor(Colors_1.default.lightGray.withAlphaPercent(0.6))
-        .display("flex")
-        .margin(0)
-        .padding(5)
-        .gap(5)
-        .nested((0, StyleRule_1.default)("button")
-        .borderWidth(1)
-        .borderRadius(9999)
-        .padding(5)
-        .paddingLeft(10)
-        .paddingRight(10))), "*[data-popup-window=popup-window]");
-    class PopupControl extends AtomControl_1.AtomControl {
-        static showControl(opener, _a = {}) {
-            var { onClick = "close" } = _a, options = __rest(_a, ["onClick"]);
-            let openerElement = options === null || options === void 0 ? void 0 : options.parentElement;
-            let app;
-            if (opener instanceof AtomControl_1.AtomControl) {
-                openerElement !== null && openerElement !== void 0 ? openerElement : (openerElement = opener.element);
-                app = opener.app;
+        if (start === opener) {
+          return;
+        }
+        if (start === container.element) {
+          return;
+        }
+        start = start.parentElement;
+      }
+      close();
+      e.preventDefault();
+      (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    };
+    document.body.addEventListener("click", handler, true);
+    container.registerDisposable(() => document.body.removeEventListener("click", handler, true));
+    const onBack = e => {
+      var _a;
+      e.preventDefault();
+      (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+      e.stopPropagation();
+      close();
+    };
+    document.body.addEventListener("backButton", onBack, true);
+    container.registerDisposable(() => document.body.removeEventListener("backButton", onBack, true));
+    setTimeout(() => {
+      container.registerDisposable(disableContain(container.element));
+    }, 10);
+  }
+  _export({
+    PopupControl: void 0,
+    PopupWindow: void 0,
+    ConfirmPopup: void 0,
+    default: void 0
+  });
+  return {
+    setters: [function (_coreAtomDisposableList) {
+      AtomDisposableList = _coreAtomDisposableList.AtomDisposableList;
+    }, function (_coreBind) {
+      Bind = _coreBind.default;
+    }, function (_coreBindableProperty) {
+      BindableProperty = _coreBindableProperty.BindableProperty;
+    }, function (_coreColors) {
+      Colors = _coreColors.default;
+    }, function (_coreInheritedProperty) {
+      getOwnInheritedProperty = _coreInheritedProperty.getOwnInheritedProperty;
+    }, function (_coreSleep) {
+      sleep = _coreSleep.default;
+    }, function (_coreTypes) {
+      CancelToken = _coreTypes.CancelToken;
+    }, function (_coreXNode) {
+      XNode = _coreXNode.default;
+    }, function (_styleStyleRule) {
+      StyleRule = _styleStyleRule.default;
+    }, function (_controlsAtomControl) {
+      AtomControl = _controlsAtomControl.AtomControl;
+    }, function (_stylesCSS) {
+      CSS = _stylesCSS.default;
+    }],
+    execute: function () {
+      __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+        var c = arguments.length,
+          r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+          d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      };
+      __metadata = void 0 && (void 0).__metadata || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+      };
+      __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+        function adopt(value) {
+          return value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+          });
+        }
+        return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) {
+            try {
+              step(generator.next(value));
+            } catch (e) {
+              reject(e);
             }
-            else {
-                openerElement !== null && openerElement !== void 0 ? openerElement : (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;
+          }
+          function rejected(value) {
+            try {
+              step(generator["throw"](value));
+            } catch (e) {
+              reject(e);
             }
-            const popup = new this(app);
-            if (onClick === "close") {
-                popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.close(), 10));
+          }
+          function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+          }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+      };
+      __rest = void 0 && (void 0).__rest || function (s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+        }
+        return t;
+      };
+      document.body.addEventListener("click", e => {
+        if (e.target.offsetParent) {
+          PopupService.lastTarget = e.target;
+        }
+      });
+      CSS(StyleRule().custom("contain", "none !important"), "[data-force-contain=none]");
+      CSS(StyleRule().position("relative").height(0).width(0).left(0).child(StyleRule("*").position("absolute").left(0).top(0).padding(5).maxHeight(300).overflow("auto").borderRadius(5).backgroundColor(Colors.white).zIndex(200).defaultBoxShadow()), "*[data-inline-popup=left]");
+      CSS(StyleRule().position("absolute").height(0).width(0).right(0).child(StyleRule("*").position("absolute").right(0).top(0).padding(5).maxHeight(300).overflow("auto").borderRadius(5).backgroundColor(Colors.white).zIndex(200).defaultBoxShadow()), "*[data-inline-popup=right]");
+      CSS(StyleRule().position("relative").height(0).width(0).left(0).child(StyleRule("*").position("absolute").left(0).top(0).padding(5).maxHeight(300).overflow("auto").borderRadius(5).backgroundColor(Colors.white).zIndex(200).defaultBoxShadow()), "*[data-inline-popup=inline-left]");
+      CSS(StyleRule("popup").position("fixed").left("50%").top("50%").transform("translate(-50%, -50%)").zIndex(10000).padding(5).backgroundColor(Colors.white).border("solid 1px lightgray").borderRadius(5).boxShadow("rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;").display("inline-block"), "*[data-center-popup]");
+      popupCss = CSS(StyleRule("popup").padding(5).backgroundColor(Colors.white).border("solid 1px lightgray").borderRadius(5).boxShadow("rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;").display("inline-block"));
+      CSS(StyleRule().position("absolute").border("solid 1px lightgray").borderRadius(5).backgroundColor(Colors.white).top("50%").left("50%").transform("translate(-50%,-50%)").boxShadow("0 0 20px 1px rgb(0 0 0 / 75%)").display("grid").alignItems("center").justifyItems("center").gridTemplateRows("auto 1fr").gridTemplateColumns("1fr").opacity("0").transition("opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32)").and(StyleRule("[data-ready=true]").opacity("1")).and(StyleRule("[data-dragging=true]").opacity("0.5")).child(StyleRule(".title").justifySelf("stretch").display("flex").backgroundColor(Colors.lightGray.withAlphaPercent(0.2)).padding(5).alignItems("center").justifyItems("center").child(StyleRule(".title-text").cursor("move").flexStretch()).child(StyleRule("*").flex("1 1 100%")).child(StyleRule(".popup-close-button").fontFamily("arial").fontSize(15).flex("1 0 auto").cursor("pointer").width(30).height(30).backgroundColor(Colors.red.withAlphaPercent(0.1)).border("none").borderRadius(9999).textTransform("capitalize").hoverBackgroundColor(Colors.red))).child(StyleRule("*[data-window-content=window-content]").margin(5).alignSelf("stretch").justifySelf("stretch").flexStretch().overflow("auto").position("relative")).child(StyleRule(" * > .command-bar").backgroundColor(Colors.lightGray.withAlphaPercent(0.6)).display("flex").margin(0).padding(5).gap(5).nested(StyleRule("button").borderWidth(1).borderRadius(9999).padding(5).paddingLeft(10).paddingRight(10))), "*[data-popup-window=popup-window]");
+      _export("PopupControl", PopupControl = class PopupControl extends AtomControl {
+        static showControl(opener, _a = {}) {
+          var {
+              onClick = "close"
+            } = _a,
+            options = __rest(_a, ["onClick"]);
+          let openerElement = options === null || options === void 0 ? void 0 : options.parentElement;
+          let app;
+          if (opener instanceof AtomControl) {
+            openerElement !== null && openerElement !== void 0 ? openerElement : openerElement = opener.element;
+            app = opener.app;
+          } else {
+            openerElement !== null && openerElement !== void 0 ? openerElement : openerElement = opener;
+            let start = opener;
+            while (!start.atomControl) {
+              start = start.parentElement;
             }
-            else if (onClick === "cancel") {
-                popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.cancel(), 10));
+            if (!start) {
+              return Promise.reject("Could not create popup as target is not attached");
             }
-            const p = PopupService.show(openerElement, popup.element, options);
-            // since popup will be children of openerElement
-            // on dispose(popupElement), popup will be disposed automatically
-            // p.registerDisposable(popup);
-            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();
-                };
-            }));
+            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;
+              }
+              resolved = true;
+              PopupService.lastTarget = openerElement;
+              resolve(r);
+              p.dispose();
+            };
+            popup.cancel = e => {
+              if (resolved) {
+                return;
+              }
+              resolved = true;
+              PopupService.lastTarget = openerElement;
+              reject(e);
+              p.dispose();
+            };
+          });
         }
-    }
-    exports.PopupControl = PopupControl;
-    class PopupWindow extends AtomControl_1.AtomControl {
+      });
+      _export("PopupWindow", PopupWindow = class PopupWindow extends AtomControl {
         static showWindow(window, options) {
-            return __awaiter(this, arguments, void 0, function* () {
-                if (arguments.length <= 1) {
-                    options = arguments[0];
-                    window = this;
-                }
-                // this will force lastTarget to be set
-                yield (0, sleep_1.default)(1);
-                return PopupService.showWindow(PopupService.lastTarget, window, options);
-            });
+          return __awaiter(this, arguments, void 0, function* () {
+            if (arguments.length <= 1) {
+              options = arguments[0];
+              window = this;
+            }
+            yield sleep(1);
+            return PopupService.showWindow(PopupService.lastTarget, window, options);
+          });
         }
         static showModal(window, options) {
-            var _a;
-            return __awaiter(this, arguments, void 0, function* () {
-                if (arguments.length <= 1) {
-                    options = arguments[0];
-                    window = this;
-                }
-                options !== null && options !== void 0 ? options : (options = {});
-                (_a = options.modal) !== null && _a !== void 0 ? _a : (options.modal = true);
-                // this will force lastTarget to be set
-                yield (0, sleep_1.default)(1);
-                return PopupService.showWindow(PopupService.lastTarget, window, options);
-            });
-        }
-        init() {
-            // do nothing...
+          var _a;
+          return __awaiter(this, arguments, void 0, function* () {
+            if (arguments.length <= 1) {
+              options = arguments[0];
+              window = this;
+            }
+            options !== null && options !== void 0 ? options : options = {};
+            (_a = options.modal) !== null && _a !== void 0 ? _a : options.modal = true;
+            yield sleep(1);
+            return PopupService.showWindow(PopupService.lastTarget, window, options);
+          });
         }
+        init() {}
         requestCancel() {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (this.closeWarning) {
-                    if (!(yield ConfirmPopup.showModal({
-                        parameters: {
-                            message: this.closeWarning
-                        }
-                    }))) {
-                        return;
-                    }
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.closeWarning) {
+              if (!(yield ConfirmPopup.showModal({
+                parameters: {
+                  message: this.closeWarning
                 }
-                this.cancel();
-            });
+              }))) {
+                return;
+              }
+            }
+            this.cancel();
+          });
         }
         preCreate() {
-            this.title = null;
-            this.viewModelTitle = null;
-            const handler = (e) => {
-                if (e.key === "Escape") {
-                    this.app.runAsync(() => this.requestCancel());
-                    e.preventDefault();
-                    return;
-                }
-            };
-            this.bindEvent(this.element, "keydown", handler);
-            // document.body.addEventListener("keydown", handler);
-            // this.registerDisposable({
-            //     dispose() {
-            //         document.body.removeEventListener("keydown", handler);
-            //     }
-            // });
-            this.element.dataset.popupWindow = "popup-window";
-            setTimeout((p) => {
-                p.dataset.ready = "true";
-            }, 10, this.element);
+          this.title = null;
+          this.viewModelTitle = null;
+          const handler = e => {
+            if (e.key === "Escape") {
+              this.app.runAsync(() => this.requestCancel());
+              e.preventDefault();
+              return;
+            }
+          };
+          this.bindEvent(this.element, "keydown", handler);
+          this.element.dataset.popupWindow = "popup-window";
+          setTimeout(p => {
+            p.dataset.ready = "true";
+          }, 10, this.element);
         }
         render(node, e, creator) {
-            var _a, _b, _c, _d, _e;
-            this.render = super.render;
-            const titleContent = (_b = (_a = this.titleRenderer) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : XNode_1.default.create("span", { class: "title-text", text: Bind_1.default.oneWay(() => this.title || this.viewModelTitle) });
-            const closeButton = (_d = (_c = this.closeButtonRenderer) === null || _c === void 0 ? void 0 : _c.call(this)) !== null && _d !== void 0 ? _d : XNode_1.default.create("button", { class: "popup-close-button", text: "x", eventClick: Bind_1.default.event(() => this.requestCancel()) });
-            const a = (_e = node.attributes) !== null && _e !== void 0 ? _e : (node.attributes = {});
-            a["data-window-content"] = "window-content";
-            const extracted = this.extractControlProperties(node);
-            super.render(XNode_1.default.create("div", Object.assign({ viewModelTitle: Bind_1.default.oneWay(() => this.viewModel.title) }, extracted),
-                XNode_1.default.create("div", { class: "title title-host" },
-                    titleContent,
-                    closeButton),
-                node));
-            this.runAfterInit(() => {
-                if (!this.element) {
-                    return;
-                }
-                const host = this.element.getElementsByClassName("title-host")[0];
-                this.setupDragging(host);
-                // this.element may become null if it was immediately
-                // closed, very rare case, but possible if
-                // supplied cancelToken was cancelled
-                const anyAutofocus = this.element.querySelector(`*[autofocus]`);
-                if (!anyAutofocus) {
-                    const windowContent = this.element.querySelector("[data-window-content]");
-                    if (windowContent) {
-                        const firstInput = windowContent.querySelector("input,button,a");
-                        if (firstInput) {
-                            firstInput.focus();
-                            return;
-                        }
-                    }
-                    const cb = this.element.querySelector(".popup-close-button");
-                    if (cb) {
-                        cb.focus();
-                    }
-                    return;
+          var _a, _b, _c, _d, _e;
+          this.render = super.render;
+          const titleContent = (_b = (_a = this.titleRenderer) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : XNode.create("span", {
+            class: "title-text",
+            text: Bind.oneWay(() => this.title || this.viewModelTitle)
+          });
+          const closeButton = (_d = (_c = this.closeButtonRenderer) === null || _c === void 0 ? void 0 : _c.call(this)) !== null && _d !== void 0 ? _d : XNode.create("button", {
+            class: "popup-close-button",
+            text: "x",
+            eventClick: Bind.event(() => this.requestCancel())
+          });
+          const a = (_e = node.attributes) !== null && _e !== void 0 ? _e : node.attributes = {};
+          a["data-window-content"] = "window-content";
+          const extracted = this.extractControlProperties(node);
+          super.render(XNode.create("div", Object.assign({
+            viewModelTitle: Bind.oneWay(() => this.viewModel.title)
+          }, extracted), XNode.create("div", {
+            class: "title title-host"
+          }, titleContent, closeButton), node));
+          this.runAfterInit(() => {
+            if (!this.element) {
+              return;
+            }
+            const host = this.element.getElementsByClassName("title-host")[0];
+            this.setupDragging(host);
+            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+            if (!anyAutofocus) {
+              const windowContent = this.element.querySelector("[data-window-content]");
+              if (windowContent) {
+                const firstInput = windowContent.querySelector("input,button,a");
+                if (firstInput) {
+                  firstInput.focus();
+                  return;
                 }
-            });
+              }
+              const cb = this.element.querySelector(".popup-close-button");
+              if (cb) {
+                cb.focus();
+              }
+              return;
+            }
+          });
         }
         setupDragging(tp) {
-            this.bindEvent(tp, "mousedown", (startEvent) => {
-                startEvent.preventDefault();
-                const disposables = [];
-                // const offset = AtomUI.screenOffset(tp);
-                const element = this.element;
-                const offset = { x: element.offsetLeft, y: element.offsetTop };
-                if (element.style.transform !== "none") {
-                    offset.x -= element.offsetWidth / 2;
-                    offset.y -= element.offsetHeight / 2;
-                    element.style.left = offset.x + "px";
-                    element.style.top = offset.y + "px";
-                    element.style.transform = "none";
-                }
-                this.element.dataset.dragging = "true";
-                const rect = { x: startEvent.clientX, y: startEvent.clientY };
-                const cursor = tp.style.cursor;
-                tp.style.cursor = "move";
-                disposables.push(this.bindEvent(document.body, "mousemove", (moveEvent) => {
-                    const { clientX, clientY } = moveEvent;
-                    const dx = clientX - rect.x;
-                    const dy = clientY - rect.y;
-                    const finalX = offset.x + dx;
-                    const finalY = offset.y + dy;
-                    if (finalX < 0 || finalY < 0) {
-                        return;
-                    }
-                    offset.x = finalX;
-                    offset.y = finalY;
-                    this.element.style.left = offset.x + "px";
-                    this.element.style.top = offset.y + "px";
-                    rect.x = clientX;
-                    rect.y = clientY;
-                }));
-                disposables.push(this.bindEvent(document.body, "mouseup", (endEvent) => {
-                    tp.style.cursor = cursor;
-                    this.element.removeAttribute("data-dragging");
-                    for (const iterator of disposables) {
-                        iterator.dispose();
-                    }
-                }));
-            });
+          this.bindEvent(tp, "mousedown", startEvent => {
+            startEvent.preventDefault();
+            const disposables = [];
+            const element = this.element;
+            const offset = {
+              x: element.offsetLeft,
+              y: element.offsetTop
+            };
+            if (element.style.transform !== "none") {
+              offset.x -= element.offsetWidth / 2;
+              offset.y -= element.offsetHeight / 2;
+              element.style.left = offset.x + "px";
+              element.style.top = offset.y + "px";
+              element.style.transform = "none";
+            }
+            this.element.dataset.dragging = "true";
+            const rect = {
+              x: startEvent.clientX,
+              y: startEvent.clientY
+            };
+            const cursor = tp.style.cursor;
+            tp.style.cursor = "move";
+            disposables.push(this.bindEvent(document.body, "mousemove", moveEvent => {
+              const {
+                clientX,
+                clientY
+              } = moveEvent;
+              const dx = clientX - rect.x;
+              const dy = clientY - rect.y;
+              const finalX = offset.x + dx;
+              const finalY = offset.y + dy;
+              if (finalX < 0 || finalY < 0) {
+                return;
+              }
+              offset.x = finalX;
+              offset.y = finalY;
+              this.element.style.left = offset.x + "px";
+              this.element.style.top = offset.y + "px";
+              rect.x = clientX;
+              rect.y = clientY;
+            }));
+            disposables.push(this.bindEvent(document.body, "mouseup", endEvent => {
+              tp.style.cursor = cursor;
+              this.element.removeAttribute("data-dragging");
+              for (const iterator of disposables) {
+                iterator.dispose();
+              }
+            }));
+          });
         }
-    }
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], PopupWindow.prototype, "title", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], PopupWindow.prototype, "closeWarning", void 0);
-    exports.PopupWindow = PopupWindow;
-    // @ts-ignore
-    delete PopupWindow.prototype.init;
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .display("grid")
-        .nested((0, StyleRule_1.default)(".yes")
-        .borderRadius(9999)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .borderWidth(1)
-        .borderColor(Colors_1.default.transparent)
-        .margin(5)
-        .marginRight(10)
-        .backgroundColor(Colors_1.default.lightGreen))
-        .nested((0, StyleRule_1.default)(".no")
-        .borderRadius(9999)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .borderWidth(1)
-        .borderColor(Colors_1.default.transparent)
-        .margin(5)
-        .marginRight(10)
-        .backgroundColor(Colors_1.default.red)
-        .color(Colors_1.default.white))
-        .nested((0, StyleRule_1.default)(".cancel")
-        .borderRadius(9999)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .borderWidth(1)
-        .borderColor(Colors_1.default.transparent)
-        .margin(5)
-        .marginRight(10)
-        .backgroundColor(Colors_1.default.gray))
-        .child((0, StyleRule_1.default)("[data-element=message]")
-        .overflow("auto")), "div[data-confirm-popup=confirm-popup]");
-    class ConfirmPopup extends PopupWindow {
-        static confirm({ message, title = "Confirm", yesLabel = "Yes", noLabel = "No", cancelLabel = null }) {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const popup = class extends ConfirmPopup {
-                        create() {
-                            this.render(XNode_1.default.create("div", null, message instanceof XNode_1.default ? message : XNode_1.default.create("div", { text: message })));
-                        }
-                    };
-                    return yield popup.showModal({
-                        parameters: {
-                            message,
-                            yesLabel,
-                            noLabel,
-                            cancelLabel
-                        },
-                        title
-                    });
-                }
-                catch (e) {
-                    if (types_1.CancelToken.isCancelled(e)) {
-                        return false;
-                    }
-                    throw e;
+      });
+      __decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "title", void 0);
+      __decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "closeWarning", void 0);
+      delete PopupWindow.prototype.init;
+      CSS(StyleRule().display("grid").nested(StyleRule(".yes").borderRadius(9999).paddingLeft(10).paddingRight(10).borderWidth(1).borderColor(Colors.transparent).margin(5).marginRight(10).backgroundColor(Colors.lightGreen)).nested(StyleRule(".no").borderRadius(9999).paddingLeft(10).paddingRight(10).borderWidth(1).borderColor(Colors.transparent).margin(5).marginRight(10).backgroundColor(Colors.red).color(Colors.white)).nested(StyleRule(".cancel").borderRadius(9999).paddingLeft(10).paddingRight(10).borderWidth(1).borderColor(Colors.transparent).margin(5).marginRight(10).backgroundColor(Colors.gray)).child(StyleRule("[data-element=message]").overflow("auto")), "div[data-confirm-popup=confirm-popup]");
+      _export("ConfirmPopup", ConfirmPopup = class ConfirmPopup extends PopupWindow {
+        static confirm({
+          message,
+          title = "Confirm",
+          yesLabel = "Yes",
+          noLabel = "No",
+          cancelLabel = null
+        }) {
+          return __awaiter(this, void 0, void 0, function* () {
+            try {
+              const popup = class extends ConfirmPopup {
+                create() {
+                  this.render(XNode.create("div", null, message instanceof XNode ? message : XNode.create("div", {
+                    text: message
+                  })));
                 }
-            });
+              };
+              return yield popup.showModal({
+                parameters: {
+                  message,
+                  yesLabel,
+                  noLabel,
+                  cancelLabel
+                },
+                title
+              });
+            } catch (e) {
+              if (CancelToken.isCancelled(e)) {
+                return false;
+              }
+              throw e;
+            }
+          });
         }
         preCreate() {
-            super.preCreate();
-            this.yesLabel = "Yes";
-            this.noLabel = "No";
-            this.cancelLabel = null;
+          super.preCreate();
+          this.yesLabel = "Yes";
+          this.noLabel = "No";
+          this.cancelLabel = null;
         }
         render(node, e, creator) {
-            var _a;
-            this.render = super.render;
-            this.element.dataset.confirmPopup = "confirm-popup";
-            this.closeButtonRenderer = () => XNode_1.default.create("div", null);
-            const extracted = this.extractControlProperties(node);
-            const na = (_a = node.attributes) !== null && _a !== void 0 ? _a : (node.attributes = {});
-            na["data-element"] = "message";
-            super.render(XNode_1.default.create("div", Object.assign({}, extracted),
-                node,
-                XNode_1.default.create("div", { "data-element": "buttons" },
-                    XNode_1.default.create("button", { class: "yes", autofocus: true, text: Bind_1.default.oneWay(() => this.yesLabel), eventClick: () => this.close(true), "style-display": Bind_1.default.oneWay(() => !!this.yesLabel) }),
-                    XNode_1.default.create("button", { class: "no", text: Bind_1.default.oneWay(() => this.noLabel), eventClick: () => this.close(false), "style-display": Bind_1.default.oneWay(() => !!this.noLabel) }),
-                    XNode_1.default.create("button", { class: "cancel", text: Bind_1.default.oneWay(() => this.cancelLabel), eventClick: () => this.requestCancel(), "style-display": Bind_1.default.oneWay(() => !!this.cancelLabel) }))));
+          var _a;
+          this.render = super.render;
+          this.element.dataset.confirmPopup = "confirm-popup";
+          this.closeButtonRenderer = () => XNode.create("div", null);
+          const extracted = this.extractControlProperties(node);
+          const na = (_a = node.attributes) !== null && _a !== void 0 ? _a : node.attributes = {};
+          na["data-element"] = "message";
+          super.render(XNode.create("div", Object.assign({}, extracted), node, XNode.create("div", {
+            "data-element": "buttons"
+          }, XNode.create("button", {
+            class: "yes",
+            autofocus: true,
+            text: Bind.oneWay(() => this.yesLabel),
+            eventClick: () => this.close(true),
+            "style-display": Bind.oneWay(() => !!this.yesLabel)
+          }), XNode.create("button", {
+            class: "no",
+            text: Bind.oneWay(() => this.noLabel),
+            eventClick: () => this.close(false),
+            "style-display": Bind.oneWay(() => !!this.noLabel)
+          }), XNode.create("button", {
+            class: "cancel",
+            text: Bind.oneWay(() => this.cancelLabel),
+            eventClick: () => this.requestCancel(),
+            "style-display": Bind.oneWay(() => !!this.cancelLabel)
+          }))));
         }
-    }
-    exports.ConfirmPopup = ConfirmPopup;
-    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.dataset.popUpHost === "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 us find scrollable target offsetParent
-        var _a, _b;
-        // find host...
-        let host = opener.offsetParent;
-        while (host) {
-            const current = host;
-            if (host === document.body) {
-                // we have reached top...
-                return host;
-            }
-            if (host.classList.contains("popup-host")) {
-                // let us use this..
-                return host;
-            }
-            if (host.dataset.popUpHost === "yes") {
-                return host;
-            }
-            host = host.offsetParent;
-            if (host.classList.contains("page-host")) {
-                // we have reached popup host...
-                host = current;
-                return host;
-            }
-            if (!host) {
-                continue;
-            }
-            if (!offset) {
-                continue;
-            }
-            offset.x += host.offsetLeft;
-            offset.y += host.offsetTop - ((_b = (_a = host.offsetParent) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
-        }
-        return host;
-    }
-    const disableContain = (ce) => {
+      });
+      _export("disableContain", disableContain = ce => {
         const containNoneList = [];
         while (ce) {
-            const style = window.getComputedStyle(ce);
-            const isNotNone = style.contain !== "none";
-            if (isNotNone) {
-                ce.dataset.forceContain = "none";
-                containNoneList.push(ce);
-            }
-            ce = ce.parentElement;
+          const style = window.getComputedStyle(ce);
+          const isNotNone = style.contain !== "none";
+          if (isNotNone) {
+            ce.dataset.forceContain = "none";
+            containNoneList.push(ce);
+          }
+          ce = ce.parentElement;
         }
         return () => {
-            for (const iterator of containNoneList) {
-                delete iterator.dataset.forceContain;
-            }
+          for (const iterator of containNoneList) {
+            delete iterator.dataset.forceContain;
+          }
         };
-    };
-    exports.disableContain = disableContain;
-    function closeHandler(host, opener, container, close) {
-        let handler = null;
-        handler = (e) => {
-            var _a;
-            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();
-            (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
-        };
-        document.body.addEventListener("click", handler, true);
-        container.registerDisposable(() => document.body.removeEventListener("click", handler, true));
-        const onBack = (e) => {
-            var _a;
-            e.preventDefault();
-            (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
-            e.stopPropagation();
-            close();
-        };
-        document.body.addEventListener("backButton", onBack, true);
-        container.registerDisposable(() => document.body.removeEventListener("backButton", onBack, true));
-        setTimeout(() => {
-            container.registerDisposable((0, exports.disableContain)(container.element));
-        }, 10);
-    }
-    let popupId = 1001;
-    let lastTarget = {
+      });
+      popupId = 1001;
+      lastTarget = {
         element: null,
         x: 10,
         y: 10
-    };
-    class PopupService {
+      };
+      _export("default", PopupService = class PopupService {
         static get lastTarget() {
-            var _a, _b;
-            const { element, x = 0, y = 0 } = lastTarget;
-            if (element === null || element === void 0 ? void 0 : element.isConnected) {
-                return element;
-            }
-            const e = (_b = (_a = document.elementFromPoint) === null || _a === void 0 ? void 0 : _a.call(document, x, y)) !== null && _b !== void 0 ? _b : document.body;
-            PopupService.lastTarget = e;
-            return e;
+          var _a, _b;
+          const {
+            element,
+            x = 0,
+            y = 0
+          } = lastTarget;
+          if (element === null || element === void 0 ? void 0 : element.isConnected) {
+            return element;
+          }
+          const e = (_b = (_a = document.elementFromPoint) === null || _a === void 0 ? void 0 : _a.call(document, x, y)) !== null && _b !== void 0 ? _b : document.body;
+          PopupService.lastTarget = e;
+          return e;
         }
         static set lastTarget(element) {
-            if (!element.isConnected) {
-                return;
-            }
-            const rect = element.getBoundingClientRect();
-            lastTarget = {
-                element,
-                x: rect.left + (rect.width / 2),
-                y: rect.top + (rect.height / 2)
-            };
+          if (!element.isConnected) {
+            return;
+          }
+          const rect = element.getBoundingClientRect();
+          lastTarget = {
+            element,
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+          };
         }
-        static alert({ message, title = "Alert", yesLabel = "Ok" }) {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const popup = class extends ConfirmPopup {
-                        create() {
-                            this.render(XNode_1.default.create("div", null, message instanceof XNode_1.default ? message : XNode_1.default.create("div", { text: message })));
-                        }
-                    };
-                    return yield popup.showModal({
-                        parameters: {
-                            message,
-                            yesLabel,
-                            noLabel: ""
-                        },
-                        title
-                    });
+        static alert({
+          message,
+          title = "Alert",
+          yesLabel = "Ok"
+        }) {
+          return __awaiter(this, void 0, void 0, function* () {
+            try {
+              const popup = class extends ConfirmPopup {
+                create() {
+                  this.render(XNode.create("div", null, message instanceof XNode ? message : XNode.create("div", {
+                    text: message
+                  })));
                 }
-                catch (e) {
-                    if (types_1.CancelToken.isCancelled(e)) {
-                        return false;
-                    }
-                    throw e;
-                }
-            });
+              };
+              return yield popup.showModal({
+                parameters: {
+                  message,
+                  yesLabel,
+                  noLabel: ""
+                },
+                title
+              });
+            } catch (e) {
+              if (CancelToken.isCancelled(e)) {
+                return false;
+              }
+              throw e;
+            }
+          });
         }
-        static confirm({ message, title = "Confirm", yesLabel = "Yes", noLabel = "No", cancelLabel = null }) {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const popup = class extends ConfirmPopup {
-                        create() {
-                            this.render(XNode_1.default.create("div", null, message instanceof XNode_1.default ? message : XNode_1.default.create("div", { text: message })));
-                        }
-                    };
-                    return yield popup.showModal({
-                        parameters: {
-                            message,
-                            yesLabel,
-                            noLabel,
-                            cancelLabel
-                        },
-                        title
-                    });
-                }
-                catch (e) {
-                    if (types_1.CancelToken.isCancelled(e)) {
-                        return false;
-                    }
-                    throw e;
+        static confirm({
+          message,
+          title = "Confirm",
+          yesLabel = "Yes",
+          noLabel = "No",
+          cancelLabel = null
+        }) {
+          return __awaiter(this, void 0, void 0, function* () {
+            try {
+              const popup = class extends ConfirmPopup {
+                create() {
+                  this.render(XNode.create("div", null, message instanceof XNode ? message : XNode.create("div", {
+                    text: message
+                  })));
                 }
-            });
+              };
+              return yield 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) => {
-                var _a, _b, _c, _d, _e;
-                var _f;
-                const activeElement = document.activeElement;
-                const previousTarget = opener;
-                const parent = AtomControl_1.AtomControl.from(opener);
-                const control = new (popupClass)(parent.app, document.createElement("div"));
-                const vm = (_a = (0, InheritedProperty_1.getOwnInheritedProperty)(control, "viewModel")) !== null && _a !== void 0 ? _a : ("parameters" in control ? (_b = (_f = control).parameters) !== null && _b !== void 0 ? _b : (_f.parameters = {}) : control);
-                let element = control.element;
-                element.style.zIndex = `${popupId++}`;
-                let resolved = false;
-                const close = (r) => {
-                    // this is to allow binding events
-                    // to refresh the data
-                    setTimeout(() => {
-                        if (!resolved) {
-                            resolved = true;
-                            setTimeout(resolve, 1, r);
-                            // if control's element is null
-                            // control has been disposed and no need to dispose it
-                            if (control.element) {
-                                control.element.remove();
-                                control.dispose();
-                            }
-                            element === null || element === void 0 ? void 0 : element.remove();
-                            element = undefined;
-                            PopupService.lastTarget = previousTarget;
-                            try {
-                                activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-                            }
-                            catch (error) {
-                                // tslint:disable-next-line: no-console
-                                console.error(error);
-                            }
-                        }
-                    }, 1);
-                };
-                const cancel = (r) => {
-                    // this is to allow binding events
-                    // to refresh the data
-                    setTimeout(() => {
-                        if (!resolved) {
-                            resolved = true;
-                            setTimeout(reject, 1, r !== null && r !== void 0 ? r : "cancelled");
-                            // if control's element is null
-                            // control has been disposed and no need to dispose it
-                            if (control.element) {
-                                control.element.remove();
-                                control.dispose();
-                            }
-                            element === null || element === void 0 ? void 0 : element.remove();
-                            element = undefined;
-                            PopupService.lastTarget = previousTarget;
-                            try {
-                                activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-                            }
-                            catch (error) {
-                                // tslint:disable-next-line: no-console
-                                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.style.width = "95%";
-                        element.style.height = "95%";
-                        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;
-                        }
-                        else {
-                            element.style.maxWidth = "95%";
-                        }
-                        if (maxHeight) {
-                            element.style.maxHeight = typeof maxHeight === "number" ? maxHeight + "px" : maxHeight;
-                            heightSet = true;
-                        }
-                        else {
-                            element.style.maxHeight = "95%";
-                        }
-                    }
-                    if (!widthSet) {
-                        element.style.maxWidth = "95%";
-                        element.style.minWidth = "300px";
-                    }
-                    if (!heightSet) {
-                        element.style.maxHeight = "95%";
-                        element.style.minHeight = "100px";
-                    }
-                    if (parameters) {
-                        for (const key in parameters) {
-                            if (Object.prototype.hasOwnProperty.call(parameters, key)) {
-                                const e = parameters[key];
-                                vm[key] = e;
-                            }
-                        }
-                        (_e = (_d = (_c = control).init) === null || _d === void 0 ? void 0 : _d.call(_c)) === null || _e === void 0 ? void 0 : _e.catch((error) => {
-                            if (!types_1.CancelToken.isCancelled(error)) {
-                                console.error(error);
-                            }
-                        });
-                    }
-                    cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.registerForCancel(cancel);
-                    isModal = modal;
+          return new Promise((resolve, reject) => {
+            var _a, _b, _c, _d, _e;
+            var _f;
+            const activeElement = document.activeElement;
+            const previousTarget = opener;
+            const parent = AtomControl.from(opener);
+            const control = new popupClass(parent.app, document.createElement("div"));
+            const vm = (_a = getOwnInheritedProperty(control, "viewModel")) !== null && _a !== void 0 ? _a : "parameters" in control ? (_b = (_f = control).parameters) !== null && _b !== void 0 ? _b : _f.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 === null || element === void 0 ? void 0 : element.remove();
+                  element = undefined;
+                  PopupService.lastTarget = previousTarget;
+                  try {
+                    activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
+                  } catch (error) {
+                    console.error(error);
+                  }
                 }
-                const host = findHost(opener);
-                host.appendChild(control.element);
-                vm.cancel = cancel;
-                vm.close = close;
-                if (vm !== control) {
-                    control.cancel = cancel;
-                    control.close = close;
+              }, 1);
+            };
+            const cancel = r => {
+              setTimeout(() => {
+                if (!resolved) {
+                  resolved = true;
+                  setTimeout(reject, 1, r !== null && r !== void 0 ? r : "cancelled");
+                  if (control.element) {
+                    control.element.remove();
+                    control.dispose();
+                  }
+                  element === null || element === void 0 ? void 0 : element.remove();
+                  element = undefined;
+                  PopupService.lastTarget = previousTarget;
+                  try {
+                    activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
+                  } catch (error) {
+                    console.error(error);
+                  }
                 }
-                if (isModal) {
-                    const bg = document.createElement("div");
-                    bg.style.position = "absolute";
-                    bg.style.right = "0";
-                    bg.style.bottom = "0";
-                    bg.style.left = "0";
-                    bg.style.top = "0";
-                    host.appendChild(bg);
-                    control.registerDisposable({
-                        dispose: () => {
-                            bg.remove();
-                        }
-                    });
+              }, 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.style.width = "95%";
+                element.style.height = "95%";
+                widthSet = heightSet = true;
+              } else {
+                if (width) {
+                  element.style.width = typeof width === "number" ? width + "px" : width;
+                  widthSet = true;
                 }
-                else {
-                    closeHandler(host, opener, control, cancel);
+                if (height) {
+                  element.style.height = typeof height === "number" ? height + "px" : height;
+                  heightSet = true;
                 }
-            });
-        }
-        /**
-         * Display given popup attached to given opener and returns
-         * disposable that can be used to dispose the popup
-         * @param opener Element which opens this popup
-         * @param popup Popup Element, it must be rendered within the opener's parent
-         * @param options IPopupOptions
-         * @returns IDisposable
-         */
-        static show(opener, popup, options) {
-            var _a, _b;
-            const previousTarget = opener;
-            const container = {
-                element: document.createElement("div"),
-                disposables: new AtomDisposableList_1.AtomDisposableList(),
-                registerDisposable: null,
-                dispose: null,
-            };
-            container.registerDisposable = (f) => container.disposables.add(f);
-            let alignment = (_a = options === null || options === void 0 ? void 0 : options.alignment) !== null && _a !== void 0 ? _a : "auto";
-            if (alignment === "auto") {
-                const rect = opener.getBoundingClientRect();
-                const w = window.visualViewport.width;
-                if (rect.left > w / 2) {
-                    alignment = "bottomRight";
+                if (minWidth) {
+                  element.style.minWidth = typeof minWidth === "number" ? minWidth + "px" : minWidth;
+                  widthSet = true;
                 }
-            }
-            const isCenterOfScreen = alignment === "centerOfScreen";
-            const popupStyle = (_b = options === null || options === void 0 ? void 0 : options.popupStyle) !== null && _b !== void 0 ? _b : 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;
-                    }
-                };
-                if (opener.offsetParent !== opener.parentElement) {
-                    opener.parentElement.style.position = "relative";
-                    setTimeout(alignPopup, 5);
+                if (minHeight) {
+                  element.style.minHeight = typeof minHeight === "number" ? minHeight + "px" : minHeight;
+                  heightSet = true;
                 }
-                else {
-                    alignPopup();
+                if (maxWidth) {
+                  element.style.maxWidth = typeof maxWidth === "number" ? maxWidth + "px" : maxWidth;
+                  widthSet = true;
+                } else {
+                  element.style.maxWidth = "95%";
                 }
+                if (maxHeight) {
+                  element.style.maxHeight = typeof maxHeight === "number" ? maxHeight + "px" : maxHeight;
+                  heightSet = true;
+                } else {
+                  element.style.maxHeight = "95%";
+                }
+              }
+              if (!widthSet) {
+                element.style.maxWidth = "95%";
+                element.style.minWidth = "300px";
+              }
+              if (!heightSet) {
+                element.style.maxHeight = "95%";
+                element.style.minHeight = "100px";
+              }
+              if (parameters) {
+                for (const key in parameters) {
+                  if (Object.prototype.hasOwnProperty.call(parameters, key)) {
+                    const e = parameters[key];
+                    vm[key] = e;
+                  }
+                }
+                (_e = (_d = (_c = control).init) === null || _d === void 0 ? void 0 : _d.call(_c)) === null || _e === void 0 ? void 0 : _e.catch(error => {
+                  if (!CancelToken.isCancelled(error)) {
+                    console.error(error);
+                  }
+                });
+              }
+              cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.registerForCancel(cancel);
+              isModal = modal;
             }
-            const parent = AtomControl_1.AtomControl.from(opener);
-            if (popup instanceof XNode_1.default) {
-                // @ts-ignore
-                parent.render(popup, container);
-            }
-            else {
-                container.element.appendChild(popup);
+            const host = findHost(opener);
+            host.appendChild(control.element);
+            vm.cancel = cancel;
+            vm.close = close;
+            if (vm !== control) {
+              control.cancel = cancel;
+              control.close = close;
             }
-            const style = container.element.style;
-            // const offset = findHostAndPosition(opener);
-            // const host = offset.root;
-            // const hostHeight = host.offsetHeight
-            // || host.clientHeight
-            // || (host.firstElementChild as HTMLElement).offsetHeight;
-            // style.position = "absolute";
-            // offset.y += opener.offsetHeight;
-            // if (options?.alignment === "centerOfScreen") {
-            //     style.left = "50%";
-            //     style.top = "50%";
-            //     style.transform = "translate(-50%,-50%)";
-            // } else {
-            //     if (!options || options?.alignment === "auto") {
-            //         // check where is more space??
-            //         if (offset.x < (host.offsetWidth / 2)) {
-            //             style.left = offset.x + "px";
-            //         } else {
-            //             style.right = `${(host.offsetWidth - (offset.x + opener.offsetWidth))}px`;
-            //         }
-            //         if (offset.y < (hostHeight / 2)) {
-            //             style.top = offset.y + "px";
-            //         } else {
-            //             style.top = `${offset.y - opener.offsetHeight}px`;
-            //             style.transform = "translate(0, -100%)";
-            //         }
-            //     } else {
-            //         offset.y -= opener.offsetHeight;
-            //         style.top = offset.y + "px";
-            //         if (options?.alignment === "right") {
-            //             style.left = `${(opener.offsetLeft + opener.offsetWidth)}px`;
-            //         } else {
-            //             style.left = offset.x + "px";
-            //         }
-            //     }
-            // }
-            style.zIndex = `${popupId++}`;
-            // host.appendChild(container.element);
-            container.dispose = () => {
-                if (!container.disposables) {
-                    return;
+            if (isModal) {
+              const bg = document.createElement("div");
+              bg.style.position = "absolute";
+              bg.style.right = "0";
+              bg.style.bottom = "0";
+              bg.style.left = "0";
+              bg.style.top = "0";
+              host.appendChild(bg);
+              control.registerDisposable({
+                dispose: () => {
+                  bg.remove();
                 }
-                container.disposables.dispose();
-                parent.dispose(container.element);
-                container.element.remove();
-                container.disposables = null;
-                PopupService.lastTarget = previousTarget;
+              });
+            } else {
+              closeHandler(host, opener, control, cancel);
+            }
+          });
+        }
+        static show(opener, popup, options) {
+          var _a, _b;
+          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 = (_a = options === null || options === void 0 ? void 0 : options.alignment) !== null && _a !== void 0 ? _a : "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 = (_b = options === null || options === void 0 ? void 0 : options.popupStyle) !== null && _b !== void 0 ? _b : 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;
+              }
             };
-            closeHandler(opener.parentElement, opener, container, () => {
-                const e = container.element;
-                container.dispose();
-                e.remove();
-            });
-            const ct = options === null || options === void 0 ? void 0 : options.cancelToken;
-            if (ct) {
-                ct.registerForCancel(() => container.dispose());
+            if (opener.offsetParent !== opener.parentElement) {
+              opener.parentElement.style.position = "relative";
+              setTimeout(alignPopup, 5);
+            } else {
+              alignPopup();
+            }
+          }
+          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;
             }
-            return container;
+            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 === null || options === void 0 ? void 0 : options.cancelToken;
+          if (ct) {
+            ct.registerForCancel(() => container.dispose());
+          }
+          return container;
         }
+      });
     }
-    exports.default = PopupService;
-});
-//# sourceMappingURL=PopupService.js.map
+  };
+});
+//# sourceMappingURL=/home/runner/work/core/core/dist/web/services/PopupService.js.map