@web-atoms/core 2.1.357 → 2.1.369

package/dist/web/services/PopupService.sys.js

@@ -0,0 +1,876 @@
+System.register(["../../core/AtomDisposableList", "../../core/Bind", "../../core/BindableProperty", "../../core/Colors", "../../core/sleep", "../../core/types", "../../core/XNode", "../../style/StyleRule", "../controls/AtomControl", "../styles/CSS"], function (_export, _context) {
+  "use strict";
+
+  var AtomDisposableList, Bind, BindableProperty, Colors, sleep, CancelToken, XNode, StyleRule, AtomControl, CSS, PopupControl, PopupWindow, ConfirmPopup, PopupService, __decorate, __metadata, __awaiter, popupCss, popupId, lastTarget;
+
+  function getParent(e) {
+    var _a;
+
+    let start = e;
+
+    while (start) {
+      if (start.atomControl) {
+        return start.atomControl;
+      }
+
+      start = (_a = start._logicalParent) !== null && _a !== void 0 ? _a : start.parentElement;
+    }
+  }
+
+  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);
+    }
+
+    return host;
+  }
+
+  function closeHandler(host, opener, container, close) {
+    let handler = null;
+
+    handler = e => {
+      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();
+    };
+
+    document.body.addEventListener("click", handler);
+    container.registerDisposable(() => document.body.removeEventListener("click", handler));
+  }
+
+  _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 (_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);
+            }
+          }
+
+          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());
+        });
+      };
+
+      document.body.addEventListener("click", e => {
+        if (e.target.offsetParent) {
+          PopupService.lastTarget = e.target;
+        }
+      });
+      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%)").verticalFlexLayout({
+        alignItems: "stretch",
+        justifyContent: "flex-start"
+      }).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").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).flexStretch().overflow("hidden").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, options) {
+          let openerElement;
+          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);
+          const p = PopupService.show(openerElement, popup.element, options);
+          return new Promise((resolve, reject) => {
+            let resolved = false;
+
+            popup.close = r => {
+              if (resolved) {
+                return;
+              }
+
+              resolved = true;
+              resolve(r);
+              p.dispose();
+            };
+
+            popup.cancel = e => {
+              if (resolved) {
+                return;
+              }
+
+              resolved = true;
+              reject(e);
+              p.dispose();
+            };
+          });
+        }
+
+      });
+
+      _export("PopupWindow", PopupWindow = class PopupWindow extends AtomControl {
+        static showWindow(window, options) {
+          return __awaiter(this, arguments, void 0, function* () {
+            if (arguments.length <= 2) {
+              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 <= 2) {
+              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);
+          });
+        }
+
+        requestCancel() {
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.closeWarning) {
+              if (!(yield ConfirmPopup.showModal({
+                parameters: {
+                  message: this.closeWarning
+                }
+              }))) {
+                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);
+          this.element.dataset.popupWindow = "popup-window";
+          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 closeButton = this.element.querySelector(".popup-close-button");
+
+              if (closeButton) {
+                closeButton.focus();
+              }
+
+              return;
+            }
+          });
+          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.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));
+        }
+
+        setupDragging(tp) {
+          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, __metadata("design:type", String)], PopupWindow.prototype, "title", void 0);
+
+      __decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "closeWarning", void 0);
+
+      CSS(StyleRule().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)), "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, 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;
+        }
+
+        render(node, e, creator) {
+          this.render = super.render;
+          this.element.dataset.confirmPopup = "confirm-popup";
+
+          this.closeButtonRenderer = () => XNode.create("div", null);
+
+          const extracted = this.extractControlProperties(node);
+          super.render(XNode.create("div", Object.assign({}, extracted), node, XNode.create("div", null, 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)
+          }))));
+        }
+
+      });
+
+      popupId = 1001;
+      lastTarget = {
+        element: null,
+        x: 10,
+        y: 10
+      };
+
+      _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;
+        }
+
+        static set lastTarget(element) {
+          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.create("div", null, XNode.create("div", {
+                    text: message
+                  })));
+                }
+
+              };
+              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.create("div", null, 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;
+
+            const activeElement = document.activeElement;
+            const previousTarget = opener;
+            const parent = getParent(opener);
+            const control = new popupClass(parent.app, document.createElement("div"));
+            const vm = (_a = control.viewModel) !== null && _a !== void 0 ? _a : 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);
+                  }
+                }
+              }, 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);
+                  }
+                }
+              }, 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;
+                }
+
+                if (maxHeight) {
+                  element.style.maxHeight = typeof maxHeight === "number" ? maxHeight + "px" : maxHeight;
+                  heightSet = true;
+                }
+              }
+
+              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;
+                  }
+                }
+              }
+
+              cancelToken === null || cancelToken === void 0 ? void 0 : 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) {
+              closeHandler(host, opener, control, cancel);
+            }
+          });
+        }
+
+        static show(opener, popup, options) {
+          var _a;
+
+          const previousTarget = opener;
+          const container = {
+            element: document.createElement("div"),
+            disposables: new AtomDisposableList(),
+            registerDisposable: null,
+            dispose: null
+          };
+
+          container.registerDisposable = f => container.disposables.add(f);
+
+          const popupStyle = (_a = options === null || options === void 0 ? void 0 : options.popupStyle) !== null && _a !== void 0 ? _a : popupCss;
+          container.element._logicalParent = opener;
+          container.element.classList.add(popupStyle);
+          container.element.appendChild(popup);
+          const offset = findHostAndPosition(opener);
+          const host = offset.root;
+          const hostHeight = host.offsetHeight || host.clientHeight || host.firstElementChild.offsetHeight;
+          const style = container.element.style;
+          style.position = "absolute";
+          offset.y += opener.offsetHeight;
+
+          if ((options === null || options === void 0 ? void 0 : options.alignment) === "centerOfScreen") {
+            style.left = "50%";
+            style.top = "50%";
+            style.transform = "translate(-50%,-50%)";
+          } else {
+            if (!options || (options === null || options === void 0 ? void 0 : options.alignment) === "auto") {
+              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 === null || options === void 0 ? void 0 : 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;
+            }
+
+            container.disposables.dispose();
+            const parent = getParent(opener);
+            parent.dispose(container.element);
+            container.element.remove();
+            container.disposables = null;
+            PopupService.lastTarget = previousTarget;
+          };
+
+          closeHandler(host, 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;
+        }
+
+      });
+    }
+  };
+});
+//# sourceMappingURL=PopupService.sys.js.map