@web-atoms/core 2.2.8 → 2.2.10

package/dist/web/services/PopupService.js

@@ -1,2 +1,772 @@
-System.register(["tslib","../../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 __awaiter,__decorate,__metadata,__rest,AtomDisposableList,Bind,BindableProperty,Colors,getOwnInheritedProperty,sleep,CancelToken,XNode,StyleRule,AtomControl,CSS,PopupControl,PopupWindow,ConfirmPopup,PopupService,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);}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;}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(_tslib){__awaiter=_tslib.__awaiter;__decorate=_tslib.__decorate;__metadata=_tslib.__metadata;__rest=_tslib.__rest;},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(){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").minWidth(0).backgroundColor(Colors.lightGray.withAlphaPercent(0.2)).padding(5).alignItems("center").justifyItems("center").child(StyleRule(".title-text").cursor("move").flexStretch().textEllipsis()).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;}if(!start){return Promise.reject("Could not create popup as target is not attached");}app=start.atomControl.app;}const popup=new this(app);if(onClick==="close"){popup.bindEvent(popup.element,"click",()=>setTimeout(()=>popup.close(),10));}else if(onClick==="cancel"){popup.bindEvent(popup.element,"click",()=>setTimeout(()=>popup.cancel(),10));}const p=PopupService.show(openerElement,popup.element,options);return new Promise((resolve,reject)=>{let resolved=false;popup.close=r=>{if(resolved){return;}resolved=true;PopupService.lastTarget=openerElement;resolve(r);p.dispose();};popup.cancel=e=>{if(resolved){return;}resolved=true;PopupService.lastTarget=openerElement;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<=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;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;}}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";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));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 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);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;}render(node,e,creator){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)}))));}});_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;}return()=>{for(const iterator of containNoneList){delete iterator.dataset.forceContain;}};});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){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.create("div",null,message instanceof XNode?message: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,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.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);}}},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;}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 host=findHost(opener);host.appendChild(control.element);vm.cancel=cancel;vm.close=close;if(vm!==control){control.cancel=cancel;control.close=close;}if(isModal){const bg=document.createElement("div");bg.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();}});}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;}};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;}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;}});}};});
+System.register(["tslib", "../../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 __awaiter, __decorate, __metadata, __rest, AtomDisposableList, Bind, BindableProperty, Colors, getOwnInheritedProperty, sleep, CancelToken, XNode, StyleRule, AtomControl, CSS, PopupControl, PopupWindow, ConfirmPopup, PopupService, 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);
+    }
+    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;
+        }
+        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 (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+      __rest = _tslib.__rest;
+    }, 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 () {
+      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").minWidth(0).backgroundColor(Colors.lightGray.withAlphaPercent(0.2)).padding(5).alignItems("center").justifyItems("center").child(StyleRule(".title-text").cursor("move").flexStretch().textEllipsis()).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;
+            }
+            if (!start) {
+              return Promise.reject("Could not create popup as target is not attached");
+            }
+            app = start.atomControl.app;
+          }
+          const popup = new this(app);
+          if (onClick === "close") {
+            popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.close(), 10));
+          } else if (onClick === "cancel") {
+            popup.bindEvent(popup.element, "click", () => setTimeout(() => popup.cancel(), 10));
+          }
+          const p = PopupService.show(openerElement, popup.element, options);
+          return new Promise((resolve, reject) => {
+            let resolved = false;
+            popup.close = r => {
+              if (resolved) {
+                return;
+              }
+              resolved = true;
+              PopupService.lastTarget = openerElement;
+              resolve(r);
+              p.dispose();
+            };
+            popup.cancel = e => {
+              if (resolved) {
+                return;
+              }
+              resolved = true;
+              PopupService.lastTarget = openerElement;
+              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 <= 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;
+            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;
+              }
+            }
+            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";
+          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));
+          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 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);
+      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* () {
+            return PopupService.confirm({
+              title,
+              message,
+              yesLabel,
+              noLabel,
+              cancelLabel
+            });
+          });
+        }
+        preCreate() {
+          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.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)
+          }))));
+        }
+      });
+      _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;
+        }
+        return () => {
+          for (const iterator of containNoneList) {
+            delete iterator.dataset.forceContain;
+          }
+        };
+      });
+      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) {
+          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.create("div", null, message instanceof XNode ? message : 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, 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.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);
+                  }
+                }
+              }, 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;
+                } 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 host = findHost(opener);
+            host.appendChild(control.element);
+            vm.cancel = cancel;
+            vm.close = close;
+            if (vm !== control) {
+              control.cancel = cancel;
+              control.close = close;
+            }
+            if (isModal) {
+              const bg = document.createElement("div");
+              bg.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();
+                }
+              });
+            } 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;
+              }
+            };
+            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;
+            }
+            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;
+        }
+      });
+    }
+  };
+});
 //# sourceMappingURL=PopupService.js.map