@web-atoms/web-controls 2.3.5 → 2.3.7

package/dist/mobile-app/MobileApp.js

@@ -1,2 +1,572 @@
-System.register(["tslib","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/style/StyleRule","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/styles/CSS","../PageNavigator"],function(_export,_context){"use strict";var __awaiter,__decorate,__metadata,AtomDisposableList,AtomLoader,Bind,BindableProperty,Colors,sleep,XNode,NavigationService,StyleRule,AtomControl,ChildEnumerator,ConfirmPopup,CSS,PageNavigator,BasePage,ContentPage,TabbedPage,Drawer,MobileApp;function PullToRefresh(){return XNode.create("div",null,XNode.create("i",{class:"pull-icon fa-solid fa-down"}),XNode.create("span",{class:"down",text:" Pull"}),XNode.create("span",{class:"up",text:" Refresh"}),XNode.create("i",{class:"loading fa-duotone fa-spinner fa-spin"}));}_export({PullToRefresh:PullToRefresh,BasePage:void 0,ContentPage:void 0,TabbedPage:void 0,Drawer:void 0,default:void 0});return{setters:[function(_tslib){__awaiter=_tslib.__awaiter;__decorate=_tslib.__decorate;__metadata=_tslib.__metadata;},function(_webAtomsCoreDistCoreAtomDisposableList){AtomDisposableList=_webAtomsCoreDistCoreAtomDisposableList.AtomDisposableList;},function(_webAtomsCoreDistCoreAtomLoader){AtomLoader=_webAtomsCoreDistCoreAtomLoader.AtomLoader;},function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default;},function(_webAtomsCoreDistCoreBindableProperty){BindableProperty=_webAtomsCoreDistCoreBindableProperty.BindableProperty;},function(_webAtomsCoreDistCoreColors){Colors=_webAtomsCoreDistCoreColors.default;},function(_webAtomsCoreDistCoreSleep){sleep=_webAtomsCoreDistCoreSleep.default;},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default;},function(_webAtomsCoreDistServicesNavigationService){NavigationService=_webAtomsCoreDistServicesNavigationService.NavigationService;},function(_webAtomsCoreDistStyleStyleRule){StyleRule=_webAtomsCoreDistStyleStyleRule.default;},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl;},function(_webAtomsCoreDistWebCoreAtomUI){ChildEnumerator=_webAtomsCoreDistWebCoreAtomUI.ChildEnumerator;},function(_webAtomsCoreDistWebServicesPopupService){ConfirmPopup=_webAtomsCoreDistWebServicesPopupService.ConfirmPopup;},function(_webAtomsCoreDistWebStylesCSS){CSS=_webAtomsCoreDistWebStylesCSS.default;},function(_PageNavigator){PageNavigator=_PageNavigator.default;}],execute:function(){CSS(StyleRule().absolutePosition({left:0,top:0,right:0,bottom:0}).padding(5).overflow("hidden").child(StyleRule("[data-container]").absolutePosition({left:0,top:0,bottom:0,width:"100%"}).overflow("hidden").transition("left 0.3s ease-out")).and(StyleRule("[data-drawer=visible]").child(StyleRule("[data-container]").left("80%")).child(StyleRule("[data-drawer-page]").left(0))).nested(StyleRule("div[data-drawer-page=drawer-page]").absolutePosition({left:"-80%",top:0}).width("80%").height("100%").overflow("hidden").transition("left 0.3s ease-out")),"div[data-page-app=page-app]");CSS(StyleRule().absolutePosition({left:0,top:0}).width("100%").height("100%").overflow("hidden").transition("transform 0.3s ease-out").display("grid").gridTemplateRows("auto auto 1fr auto").gridTemplateColumns("auto 1fr auto").child(StyleRule("[data-icon-button=icon-button]").padding(5)).child(StyleRule("[data-page-element=action-bar]").zIndex(11).gridRowStart("1").gridColumnStart("1").gridColumnEnd("span 3").backgroundColor(Colors.silver)).child(StyleRule("[data-page-element=icon]").fontSize(20).zIndex(14).padding(10).width(40).height(40).textAlign("center").alignSelf("center").justifySelf("center").gridRowStart("1").gridColumnStart("1")).child(StyleRule("[data-page-element=title]").fontSize(20).zIndex(14).padding(5).alignSelf("center").justifySelf("stretch").gridRowStart("1").gridColumnStart("2").textEllipsis()).child(StyleRule("[data-page-element=action]").fontSize(20).zIndex(14).padding(10).gridRowStart("1").gridColumnStart("3").nested(StyleRule("button").width(30).border("none").outline("none").background("transparent").fontSize("inherit"))).child(StyleRule("button[data-page-element=action]").width(30).border("none").outline("none").background("transparent")).child(StyleRule("[data-page-element=header]").zIndex(12).padding(5).gridRowStart("2").gridColumnStart("1").gridColumnEnd("span 3").backgroundColor(Colors.silver)).child(StyleRule("[data-page-element=pull-to-refresh]").gridRowStart("3").gridColumnStart("1").gridColumnEnd("span 3").padding(5).margin(10).zIndex(9).alignSelf("start").justifySelf("center").nested(StyleRule(".pull-icon").transition("all 0.3s ease-out")).and(StyleRule("[data-mode=up] .pull-icon").transform("rotate(180deg)")).and(StyleRule("[data-mode=loading] .pull-icon").display("none")).and(StyleRule(":not([data-mode=down]) .down").display("none")).and(StyleRule(":not([data-mode=up]) .up").display("none")).and(StyleRule(":not([data-mode=loading]) .loading").display("none"))).child(StyleRule("[data-page-element=content]").gridRowStart("3").gridColumnStart("1").gridColumnEnd("span 3").padding(5).position("relative").overflowX("hidden").overflowY("auto").zIndex(10).scrollBarWidth("5px").scrollBarColor(Colors.orange,"white").child(StyleRule("*").flexShrink("0"))).child(StyleRule("[data-page-element=footer]").gridRowStart("4").gridColumnStart("1").gridColumnEnd("span 3").zIndex(11).padding(5)).transform("translate(100%,0)").and(StyleRule("[data-page-state=ready]").transform("translate(0,0)")).and(StyleRule("[data-page-state=hidden]").transform("translate(-100%,0)")),"div[data-base-page=base-page]");_export("BasePage",BasePage=class BasePage extends AtomControl{requestCancel(){return __awaiter(this,void 0,void 0,function*(){if(this.closeWarning){if(!(yield ConfirmPopup.showModal({parameters:{message:this.closeWarning}}))){return;}}this.cancel();});}onPropertyChanged(name){var _a;super.onPropertyChanged(name);switch(name){case"footerRenderer":this.recreate(name,"footer");break;case"iconRenderer":this.recreate(name,"icon");break;case"titleRenderer":this.recreate(name,"title");break;case"actionRenderer":this.recreate(name,"action");break;case"headerRenderer":this.recreate(name,"header");break;case"pullToRefreshRenderer":this.pullToRefreshElement=this.recreate(name,"pull-to-refresh");(_a=this.pullToRefreshElement)===null||_a===void 0?void 0:_a.remove();this.enablePullToRefreshEvents();break;case"actionBarRenderer":this.recreate(name,"action-bar");break;}}init(){}rendererChanged(){for(const content of ChildEnumerator.where(this.element,({dataset:{pageElement}})=>!pageElement||pageElement==="content")){this.dispose(content);content.remove();}const r=this.renderer;if(!r){return;}delete this.render;this.render(r);}recreate(renderer,name){var _a,_b,_c;const node=(_b=(_a=this[renderer])===null||_a===void 0?void 0:_a.call(this))!==null&&_b!==void 0?_b:undefined;for(const e of ChildEnumerator.enumerate(this.element)){if(e.dataset.pageElement===name){this.dispose(e);e.remove();break;}}if(node){const na=(_c=node.attributes)!==null&&_c!==void 0?_c:node.attributes={};na["data-page-element"]=name;super.render(XNode.create("div",null,node));return this.element.querySelector(`[data-page-element="${name}"]`);}return null;}preCreate(){this.element.dataset.basePage="base-page";this.iconClass="";this.viewModelTitle=null;this.runAfterInit(()=>{if(!this.element){return;}const anyAutofocus=this.element.querySelector(`*[autofocus]`);if(!anyAutofocus){const windowContent=this.element.querySelector(`[data-page-element="content"]`);if(windowContent){const firstInput=windowContent.querySelector("input,button,a,textarea");if(firstInput){firstInput.focus();return;}}return;}});setTimeout(p=>{p.dataset.pageState="ready";},10,this.element);this.titleRenderer=()=>XNode.create("span",{class:"title-text",text:Bind.oneWay(()=>this.viewModelTitle||this.title)});this.iconRenderer=()=>XNode.create("i",{"data-icon-button":"icon-button",class:Bind.oneWay(()=>this.iconClass),eventClick:e1=>this.dispatchIconClickEvent(e1)});this.actionBarRenderer=()=>XNode.create("div",null);this.runAfterInit(()=>{var _a,_b;(_b=(_a=this.pullToRefreshElement)===null||_a===void 0?void 0:_a.remove)===null||_b===void 0?void 0:_b.call(_a);this.initialized=true;this.enablePullToRefreshEvents();});}render(node,e,creator){var _a,_b;if(e||((_a=node===null||node===void 0?void 0:node.attributes)===null||_a===void 0?void 0:_a["data-page-element"])){super.render(node,e,creator);return;}this.render=super.render;const na=(_b=node.attributes)!==null&&_b!==void 0?_b:node.attributes={};let extracted={};if(!na["data-page-element"]){na["data-page-element"]="content";extracted=this.extractControlProperties(node);}super.render(XNode.create("div",Object.assign({viewModelTitle:Bind.oneWay(()=>this.viewModel.title)},extracted),node),e,creator);this.contentElement=this.element.querySelector("[data-page-element='content']");setTimeout(()=>this.contentElement.scrollTo(0,0),100);}enablePullToRefreshEvents(){var _a;const e=this.pullToRefreshElement;if(!e){(_a=this.pullToRefreshDisposable)===null||_a===void 0?void 0:_a.dispose();this.pullToRefreshDisposable=void 0;return e;}if(this.pullToRefreshDisposable){return;}let elementAdded=false;const touchStart=te=>{var _a;if(!this.pullToRefreshElement){(_a=this.pullToRefreshDisposable)===null||_a===void 0?void 0:_a.dispose();this.pullToRefreshDisposable=null;return;}if(this.contentElement.scrollTop>0){return;}const isMouseEvent=te.type==="mousedown";const moveEventName=isMouseEvent?"mousemove":"touchmove";const endEventName=isMouseEvent?"mouseup":"touchend";const startY=isMouseEvent?te.screenY:te.touches[0].screenY;this.pullToRefreshElement.dataset.mode="down";if(isMouseEvent){te.stopPropagation();te.preventDefault();}const d=new AtomDisposableList();d.add(()=>{this.contentElement.style.removeProperty("touch-action");});d.add(this.bindEvent(this.contentElement,moveEventName,me=>{const screenY=isMouseEvent?me.screenY:me.touches[0].screenY;const diffX=Math.min(75,screenY-startY);if(diffX>5){if(!elementAdded){this.contentElement.style.touchAction="none";elementAdded=true;this.element.appendChild(this.pullToRefreshElement);}}else{return;}this.contentElement.style.transform=`translateY(${diffX}px)`;if(diffX>50){this.pullToRefreshElement.dataset.mode="up";}else{this.pullToRefreshElement.dataset.mode="down";}},null,{passive:true}));d.add(this.bindEvent(this.contentElement,endEventName,ue=>{ue.stopPropagation();if(isMouseEvent){ue.stopImmediatePropagation();ue.preventDefault();}d.dispose();const done=()=>{delete this.pullToRefreshElement.dataset.mode;this.contentElement.style.transform=``;this.pullToRefreshElement.style.transform="";this.pullToRefreshElement.remove();elementAdded=false;};const diffX=ue.screenY-startY;if(diffX<=50){done();return;}const ce=new CustomEvent("reloadPage",{detail:this,bubbles:true,cancelable:true});this.contentElement.dispatchEvent(ce);if(ce.defaultPrevented){done();return;}this.pullToRefreshElement.dataset.mode="loading";const promise=ce.promise;if(!promise){done();return;}promise.then(done,done);},null,{passive:!isMouseEvent}));};const ed=new AtomDisposableList();ed.add(this.bindEvent(this.contentElement,"mousedown",touchStart));ed.add(this.bindEvent(this.contentElement,"touchstart",touchStart,null,{passive:true}));this.pullToRefreshDisposable=ed;}dispatchIconClickEvent(e){const ce=new CustomEvent("iconClick",{bubbles:true});e.target.dispatchEvent(ce);}hide(){var _a;this.element.dataset.pageState="hidden";this.element._logicalParent=this.element.parentElement;this.scrollTop=(_a=this.contentElement)===null||_a===void 0?void 0:_a.scrollTop;setTimeout(()=>{var _a;(_a=this.element)===null||_a===void 0?void 0:_a.remove();},400);}show(){this.element._logicalParent.appendChild(this.element);setTimeout(()=>{if(this.scrollTop){this.contentElement.scrollTop=this.scrollTop;}this.element.dataset.pageState="ready";},10);}});__decorate([BindableProperty,__metadata("design:type",String)],BasePage.prototype,"closeWarning",void 0);__decorate([BindableProperty,__metadata("design:type",String)],BasePage.prototype,"title",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"titleRenderer",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"iconRenderer",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"actionRenderer",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"footerRenderer",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"actionBarRenderer",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"headerRenderer",void 0);__decorate([BindableProperty,__metadata("design:type",Function)],BasePage.prototype,"pullToRefreshRenderer",void 0);delete BasePage.prototype.init;_export("ContentPage",ContentPage=class ContentPage extends BasePage{});_export("TabbedPage",TabbedPage=class TabbedPage extends BasePage{});_export("Drawer",Drawer=class Drawer extends AtomControl{init(){}preCreate(){this.element.dataset.drawerPage="drawer-page";this.bindEvent(this.element,"click",e=>e.defaultPrevented?null:this.closeDrawer());this.runAfterInit(()=>this.app.runAsync(()=>{var _a;return(_a=this.init)===null||_a===void 0?void 0:_a.call(this);}));}closeDrawer(){const ce=new CustomEvent("closeDrawer",{bubbles:true});this.element.dispatchEvent(ce);}});delete Drawer.prototype.init;_export("default",MobileApp=class MobileApp extends AtomControl{static pushPage(pageUri,parameters={},clearHistory=false){return __awaiter(this,void 0,void 0,function*(){const mobileApp=this.current;const page=yield AtomLoader.loadClass(pageUri,parameters,mobileApp.app);const result=yield mobileApp.loadPage(page,clearHistory);return result;});}popTo(w){this.app.runAsync(()=>__awaiter(this,void 0,void 0,function*(){while(this.selectedPage!==w){this.selectedPage.cancel();yield sleep(500);}}));}back(){return __awaiter(this,void 0,void 0,function*(){if(this.pages.length===0){const drawer=this.drawer;if(drawer&&!this.hideDrawer){const drawerPage=new drawer(this.app);const modalClose=ce=>{var _a;let start=ce.target;const de=drawerPage.element;while(start){if(start===de){return;}start=start.parentElement;}ce.preventDefault();(_a=ce.stopImmediatePropagation)===null||_a===void 0?void 0:_a.call(ce);ce.target.dispatchEvent(new CustomEvent("closeDrawer",{bubbles:true}));};const dispatchCloseDrawer=de=>{if(de.defaultPrevented){return;}de.target.dispatchEvent(new CustomEvent("closeDrawer",{bubbles:true}));};this.element.appendChild(drawerPage.element);setTimeout(()=>{this.element.dataset.drawer="visible";drawerPage.bindEvent(this.element,"click",dispatchCloseDrawer);drawerPage.bindEvent(document.body,"click",modalClose,null,true);},10);this.hideDrawer=()=>{this.element.dataset.drawer="";setTimeout(()=>{const de=drawerPage.element;drawerPage.dispose();de.remove();},400);this.hideDrawer=undefined;};return false;}return true;}this.selectedPage.cancel("cancelled");return false;});}init(){return __awaiter(this,void 0,void 0,function*(){});}preCreate(){MobileApp.current=this;window.addEventListener("backButton",ce=>{const{detail}=ce;ce.preventDefault();this.app.runAsync(()=>__awaiter(this,void 0,void 0,function*(){if(yield this.back()){detail();}}));});document.body.style.overflow="hidden";this.drawer=null;this.element.dataset.pageApp="page-app";const container=this.container=document.createElement("div");container.dataset.container="true";this.element.appendChild(container);this.pages=[];this.selectedPage=null;this.bindEvent(this.element,"iconClick",e=>this.back());this.bindEvent(this.element,"closeDrawer",e=>{var _a;(_a=this.hideDrawer)===null||_a===void 0?void 0:_a.call(this);});const navigationService=this.app.resolve(NavigationService);navigationService.registerNavigationHook((uri,{target,clearHistory})=>{if(/^(app|root)$/.test(target)){return this.loadPageForReturn(uri,clearHistory);}});this.runAfterInit(()=>this.app.runAsync(()=>this.init()));}loadPageForReturn(url,clearHistory){return __awaiter(this,void 0,void 0,function*(){const page=yield AtomLoader.loadControl(url,this.app);if(url.query&&url.query.title){page.title=url.query.title.toString();}const p=yield this.loadPage(page,clearHistory);try{return yield p;}catch(ex){if((ex.message?ex.message:ex)==="cancelled"){console.warn(ex);return;}throw ex;}});}loadPage(page,clearHistory){var _a;return __awaiter(this,void 0,void 0,function*(){(_a=page.title)!==null&&_a!==void 0?_a:page.title="Title";const selectedPage=this.selectedPage;if(selectedPage){selectedPage.hide();this.pages.add(selectedPage);}const hasPages=!clearHistory&&this.pages.length;if(clearHistory){for(const iterator of this.pages){const e=iterator.element;iterator.dispose();e.remove();}this.pages.length=0;this.selectedPage=null;}if(!hasPages){page.element.dataset.pageState="ready";page.iconClass="fas fa-bars";}else{page.iconClass="fas fa-arrow-left";}this.container.appendChild(page.element);this.selectedPage=page;const vm=page.viewModel;const element=page.element;return new Promise((resolve,reject)=>{const cancel=error=>{element.dataset.pageState="";const last=this.pages.pop();last.show();setTimeout(()=>{page.dispose();element.remove();reject(error!==null&&error!==void 0?error:"cancelled");this.selectedPage=last;},300);};const close=r=>{delete element.dataset.pageState;const last=this.pages.pop();last.show();setTimeout(()=>{page.dispose();element.remove();resolve(r);this.selectedPage=last;},300);};if(vm){vm.cancel=cancel;vm.close=close;}page.cancel=cancel;page.close=close;});});}});MobileApp.drawer=XNode.prepare("drawer",true,true);PageNavigator.pushPageForResult=(page,parameters,clearHistory)=>MobileApp.pushPage(page,parameters,clearHistory);}};});
+System.register(["tslib", "@web-atoms/core/dist/core/AtomDisposableList", "@web-atoms/core/dist/core/AtomLoader", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/services/NavigationService", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/core/AtomUI", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/core/dist/web/styles/CSS", "../PageNavigator"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, __decorate, __metadata, AtomDisposableList, AtomLoader, Bind, BindableProperty, Colors, sleep, XNode, NavigationService, StyleRule, AtomControl, ChildEnumerator, ConfirmPopup, CSS, PageNavigator, BasePage, ContentPage, TabbedPage, Drawer, MobileApp;
+  function PullToRefresh() {
+    return XNode.create("div", null, XNode.create("i", {
+      class: "pull-icon fa-solid fa-down"
+    }), XNode.create("span", {
+      class: "down",
+      text: " Pull"
+    }), XNode.create("span", {
+      class: "up",
+      text: " Refresh"
+    }), XNode.create("i", {
+      class: "loading fa-duotone fa-spinner fa-spin"
+    }));
+  }
+  _export({
+    PullToRefresh: PullToRefresh,
+    BasePage: void 0,
+    ContentPage: void 0,
+    TabbedPage: void 0,
+    Drawer: void 0,
+    default: void 0
+  });
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreAtomDisposableList) {
+      AtomDisposableList = _webAtomsCoreDistCoreAtomDisposableList.AtomDisposableList;
+    }, function (_webAtomsCoreDistCoreAtomLoader) {
+      AtomLoader = _webAtomsCoreDistCoreAtomLoader.AtomLoader;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreSleep) {
+      sleep = _webAtomsCoreDistCoreSleep.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistServicesNavigationService) {
+      NavigationService = _webAtomsCoreDistServicesNavigationService.NavigationService;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebCoreAtomUI) {
+      ChildEnumerator = _webAtomsCoreDistWebCoreAtomUI.ChildEnumerator;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      ConfirmPopup = _webAtomsCoreDistWebServicesPopupService.ConfirmPopup;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_PageNavigator) {
+      PageNavigator = _PageNavigator.default;
+    }],
+    execute: function () {
+      CSS(StyleRule().absolutePosition({
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      }).padding(5).overflow("hidden").child(StyleRule("[data-container]").absolutePosition({
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: "100%"
+      }).overflow("hidden").transition("left 0.3s ease-out")).and(StyleRule("[data-drawer=visible]").child(StyleRule("[data-container]").left("80%")).child(StyleRule("[data-drawer-page]").left(0))).nested(StyleRule("div[data-drawer-page=drawer-page]").absolutePosition({
+        left: "-80%",
+        top: 0
+      }).width("80%").height("100%").overflow("hidden").transition("left 0.3s ease-out")), "div[data-page-app=page-app]");
+      CSS(StyleRule().absolutePosition({
+        left: 0,
+        top: 0
+      }).width("100%").height("100%").overflow("hidden").transition("transform 0.3s ease-out").display("grid").gridTemplateRows("auto auto 1fr auto").gridTemplateColumns("auto 1fr auto").child(StyleRule("[data-icon-button=icon-button]").padding(5)).child(StyleRule("[data-page-element=action-bar]").zIndex(11).gridRowStart("1").gridColumnStart("1").gridColumnEnd("span 3").backgroundColor(Colors.silver)).child(StyleRule("[data-page-element=icon]").fontSize(20).zIndex(14).padding(10).width(40).height(40).textAlign("center").alignSelf("center").justifySelf("center").gridRowStart("1").gridColumnStart("1")).child(StyleRule("[data-page-element=title]").fontSize(20).zIndex(14).padding(5).alignSelf("center").justifySelf("stretch").gridRowStart("1").gridColumnStart("2").textEllipsis()).child(StyleRule("[data-page-element=action]").fontSize(20).zIndex(14).padding(10).gridRowStart("1").gridColumnStart("3").nested(StyleRule("button").width(30).border("none").outline("none").background("transparent").fontSize("inherit"))).child(StyleRule("button[data-page-element=action]").width(30).border("none").outline("none").background("transparent")).child(StyleRule("[data-page-element=header]").zIndex(12).padding(5).gridRowStart("2").gridColumnStart("1").gridColumnEnd("span 3").backgroundColor(Colors.silver)).child(StyleRule("[data-page-element=pull-to-refresh]").gridRowStart("3").gridColumnStart("1").gridColumnEnd("span 3").padding(5).margin(10).zIndex(9).alignSelf("start").justifySelf("center").nested(StyleRule(".pull-icon").transition("all 0.3s ease-out")).and(StyleRule("[data-mode=up] .pull-icon").transform("rotate(180deg)")).and(StyleRule("[data-mode=loading] .pull-icon").display("none")).and(StyleRule(":not([data-mode=down]) .down").display("none")).and(StyleRule(":not([data-mode=up]) .up").display("none")).and(StyleRule(":not([data-mode=loading]) .loading").display("none"))).child(StyleRule("[data-page-element=content]").gridRowStart("3").gridColumnStart("1").gridColumnEnd("span 3").padding(5).position("relative").overflowX("hidden").overflowY("auto").zIndex(10).scrollBarWidth("5px").scrollBarColor(Colors.orange, "white").child(StyleRule("*").flexShrink("0"))).child(StyleRule("[data-page-element=footer]").gridRowStart("4").gridColumnStart("1").gridColumnEnd("span 3").zIndex(11).padding(5)).transform("translate(100%,0)").and(StyleRule("[data-page-state=ready]").transform("translate(0,0)")).and(StyleRule("[data-page-state=hidden]").transform("translate(-100%,0)")), "div[data-base-page=base-page]");
+      _export("BasePage", BasePage = class BasePage extends AtomControl {
+        requestCancel() {
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.closeWarning) {
+              if (!(yield ConfirmPopup.showModal({
+                parameters: {
+                  message: this.closeWarning
+                }
+              }))) {
+                return;
+              }
+            }
+            this.cancel();
+          });
+        }
+        onPropertyChanged(name) {
+          var _a;
+          super.onPropertyChanged(name);
+          switch (name) {
+            case "footerRenderer":
+              this.recreate(name, "footer");
+              break;
+            case "iconRenderer":
+              this.recreate(name, "icon");
+              break;
+            case "titleRenderer":
+              this.recreate(name, "title");
+              break;
+            case "actionRenderer":
+              this.recreate(name, "action");
+              break;
+            case "headerRenderer":
+              this.recreate(name, "header");
+              break;
+            case "pullToRefreshRenderer":
+              this.pullToRefreshElement = this.recreate(name, "pull-to-refresh");
+              (_a = this.pullToRefreshElement) === null || _a === void 0 ? void 0 : _a.remove();
+              this.enablePullToRefreshEvents();
+              break;
+            case "actionBarRenderer":
+              this.recreate(name, "action-bar");
+              break;
+          }
+        }
+        init() {}
+        rendererChanged() {
+          for (const content of ChildEnumerator.where(this.element, ({
+            dataset: {
+              pageElement
+            }
+          }) => !pageElement || pageElement === "content")) {
+            this.dispose(content);
+            content.remove();
+          }
+          const r = this.renderer;
+          if (!r) {
+            return;
+          }
+          delete this.render;
+          this.render(r);
+        }
+        recreate(renderer, name) {
+          var _a, _b, _c;
+          const node = (_b = (_a = this[renderer]) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : undefined;
+          for (const e of ChildEnumerator.enumerate(this.element)) {
+            if (e.dataset.pageElement === name) {
+              this.dispose(e);
+              e.remove();
+              break;
+            }
+          }
+          if (node) {
+            const na = (_c = node.attributes) !== null && _c !== void 0 ? _c : node.attributes = {};
+            na["data-page-element"] = name;
+            super.render(XNode.create("div", null, node));
+            return this.element.querySelector(`[data-page-element="${name}"]`);
+          }
+          return null;
+        }
+        preCreate() {
+          this.element.dataset.basePage = "base-page";
+          this.iconClass = "";
+          this.viewModelTitle = null;
+          this.runAfterInit(() => {
+            if (!this.element) {
+              return;
+            }
+            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+            if (!anyAutofocus) {
+              const windowContent = this.element.querySelector(`[data-page-element="content"]`);
+              if (windowContent) {
+                const firstInput = windowContent.querySelector("input,button,a,textarea");
+                if (firstInput) {
+                  firstInput.focus();
+                  return;
+                }
+              }
+              return;
+            }
+          });
+          setTimeout(p => {
+            p.dataset.pageState = "ready";
+          }, 10, this.element);
+          this.titleRenderer = () => XNode.create("span", {
+            class: "title-text",
+            text: Bind.oneWay(() => this.viewModelTitle || this.title)
+          });
+          this.iconRenderer = () => XNode.create("i", {
+            "data-icon-button": "icon-button",
+            class: Bind.oneWay(() => this.iconClass),
+            eventClick: e1 => this.dispatchIconClickEvent(e1)
+          });
+          this.actionBarRenderer = () => XNode.create("div", null);
+          this.runAfterInit(() => {
+            var _a, _b;
+            (_b = (_a = this.pullToRefreshElement) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.initialized = true;
+            this.enablePullToRefreshEvents();
+          });
+        }
+        render(node, e, creator) {
+          var _a, _b;
+          if (e || ((_a = node === null || node === void 0 ? void 0 : node.attributes) === null || _a === void 0 ? void 0 : _a["data-page-element"])) {
+            super.render(node, e, creator);
+            return;
+          }
+          this.render = super.render;
+          const na = (_b = node.attributes) !== null && _b !== void 0 ? _b : node.attributes = {};
+          let extracted = {};
+          if (!na["data-page-element"]) {
+            na["data-page-element"] = "content";
+            extracted = this.extractControlProperties(node);
+          }
+          super.render(XNode.create("div", Object.assign({
+            viewModelTitle: Bind.oneWay(() => this.viewModel.title)
+          }, extracted), node), e, creator);
+          this.contentElement = this.element.querySelector("[data-page-element='content']");
+          setTimeout(() => this.contentElement.scrollTo(0, 0), 100);
+        }
+        enablePullToRefreshEvents() {
+          var _a;
+          const e = this.pullToRefreshElement;
+          if (!e) {
+            (_a = this.pullToRefreshDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+            this.pullToRefreshDisposable = void 0;
+            return e;
+          }
+          if (this.pullToRefreshDisposable) {
+            return;
+          }
+          let elementAdded = false;
+          const touchStart = te => {
+            var _a;
+            if (!this.pullToRefreshElement) {
+              (_a = this.pullToRefreshDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+              this.pullToRefreshDisposable = null;
+              return;
+            }
+            if (this.contentElement.scrollTop > 0) {
+              return;
+            }
+            const isMouseEvent = te.type === "mousedown";
+            const moveEventName = isMouseEvent ? "mousemove" : "touchmove";
+            const endEventName = isMouseEvent ? "mouseup" : "touchend";
+            const startY = isMouseEvent ? te.screenY : te.touches[0].screenY;
+            this.pullToRefreshElement.dataset.mode = "down";
+            if (isMouseEvent) {
+              te.stopPropagation();
+              te.preventDefault();
+            }
+            const d = new AtomDisposableList();
+            d.add(() => {
+              this.contentElement.style.removeProperty("touch-action");
+            });
+            d.add(this.bindEvent(this.contentElement, moveEventName, me => {
+              const screenY = isMouseEvent ? me.screenY : me.touches[0].screenY;
+              const diffX = Math.min(75, screenY - startY);
+              if (diffX > 5) {
+                if (!elementAdded) {
+                  this.contentElement.style.touchAction = "none";
+                  elementAdded = true;
+                  this.element.appendChild(this.pullToRefreshElement);
+                }
+              } else {
+                return;
+              }
+              this.contentElement.style.transform = `translateY(${diffX}px)`;
+              if (diffX > 50) {
+                this.pullToRefreshElement.dataset.mode = "up";
+              } else {
+                this.pullToRefreshElement.dataset.mode = "down";
+              }
+            }, null, {
+              passive: true
+            }));
+            d.add(this.bindEvent(this.contentElement, endEventName, ue => {
+              ue.stopPropagation();
+              if (isMouseEvent) {
+                ue.stopImmediatePropagation();
+                ue.preventDefault();
+              }
+              d.dispose();
+              const done = () => {
+                delete this.pullToRefreshElement.dataset.mode;
+                this.contentElement.style.transform = ``;
+                this.pullToRefreshElement.style.transform = "";
+                this.pullToRefreshElement.remove();
+                elementAdded = false;
+              };
+              const diffX = ue.screenY - startY;
+              if (diffX <= 50) {
+                done();
+                return;
+              }
+              const ce = new CustomEvent("reloadPage", {
+                detail: this,
+                bubbles: true,
+                cancelable: true
+              });
+              this.contentElement.dispatchEvent(ce);
+              if (ce.defaultPrevented) {
+                done();
+                return;
+              }
+              this.pullToRefreshElement.dataset.mode = "loading";
+              const promise = ce.promise;
+              if (!promise) {
+                done();
+                return;
+              }
+              promise.then(done, done);
+            }, null, {
+              passive: !isMouseEvent
+            }));
+          };
+          const ed = new AtomDisposableList();
+          ed.add(this.bindEvent(this.contentElement, "mousedown", touchStart));
+          ed.add(this.bindEvent(this.contentElement, "touchstart", touchStart, null, {
+            passive: true
+          }));
+          this.pullToRefreshDisposable = ed;
+        }
+        dispatchIconClickEvent(e) {
+          const ce = new CustomEvent("iconClick", {
+            bubbles: true
+          });
+          e.target.dispatchEvent(ce);
+        }
+        hide() {
+          var _a;
+          this.element.dataset.pageState = "hidden";
+          this.element._logicalParent = this.element.parentElement;
+          this.scrollTop = (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.scrollTop;
+          setTimeout(() => {
+            var _a;
+            (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
+          }, 400);
+        }
+        show() {
+          this.element._logicalParent.appendChild(this.element);
+          setTimeout(() => {
+            if (this.scrollTop) {
+              this.contentElement.scrollTop = this.scrollTop;
+            }
+            this.element.dataset.pageState = "ready";
+          }, 10);
+        }
+      });
+      __decorate([BindableProperty, __metadata("design:type", String)], BasePage.prototype, "closeWarning", void 0);
+      __decorate([BindableProperty, __metadata("design:type", String)], BasePage.prototype, "title", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "titleRenderer", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "iconRenderer", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "actionRenderer", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "footerRenderer", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "actionBarRenderer", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "headerRenderer", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Function)], BasePage.prototype, "pullToRefreshRenderer", void 0);
+      delete BasePage.prototype.init;
+      _export("ContentPage", ContentPage = class ContentPage extends BasePage {});
+      _export("TabbedPage", TabbedPage = class TabbedPage extends BasePage {});
+      _export("Drawer", Drawer = class Drawer extends AtomControl {
+        init() {}
+        preCreate() {
+          this.element.dataset.drawerPage = "drawer-page";
+          this.bindEvent(this.element, "click", e => e.defaultPrevented ? null : this.closeDrawer());
+          this.runAfterInit(() => this.app.runAsync(() => {
+            var _a;
+            return (_a = this.init) === null || _a === void 0 ? void 0 : _a.call(this);
+          }));
+        }
+        closeDrawer() {
+          const ce = new CustomEvent("closeDrawer", {
+            bubbles: true
+          });
+          this.element.dispatchEvent(ce);
+        }
+      });
+      delete Drawer.prototype.init;
+      _export("default", MobileApp = class MobileApp extends AtomControl {
+        static pushPage(pageUri, parameters = {}, clearHistory = false) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const mobileApp = this.current;
+            const page = yield AtomLoader.loadClass(pageUri, parameters, mobileApp.app);
+            const result = yield mobileApp.loadPage(page, clearHistory);
+            return result;
+          });
+        }
+        popTo(w) {
+          this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+            while (this.selectedPage !== w) {
+              this.selectedPage.cancel();
+              yield sleep(500);
+            }
+          }));
+        }
+        back() {
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.pages.length === 0) {
+              const drawer = this.drawer;
+              if (drawer && !this.hideDrawer) {
+                const drawerPage = new drawer(this.app);
+                const modalClose = ce => {
+                  var _a;
+                  let start = ce.target;
+                  const de = drawerPage.element;
+                  while (start) {
+                    if (start === de) {
+                      return;
+                    }
+                    start = start.parentElement;
+                  }
+                  ce.preventDefault();
+                  (_a = ce.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(ce);
+                  ce.target.dispatchEvent(new CustomEvent("closeDrawer", {
+                    bubbles: true
+                  }));
+                };
+                const dispatchCloseDrawer = de => {
+                  if (de.defaultPrevented) {
+                    return;
+                  }
+                  de.target.dispatchEvent(new CustomEvent("closeDrawer", {
+                    bubbles: true
+                  }));
+                };
+                this.element.appendChild(drawerPage.element);
+                setTimeout(() => {
+                  this.element.dataset.drawer = "visible";
+                  drawerPage.bindEvent(this.element, "click", dispatchCloseDrawer);
+                  drawerPage.bindEvent(document.body, "click", modalClose, null, true);
+                }, 10);
+                this.hideDrawer = () => {
+                  this.element.dataset.drawer = "";
+                  setTimeout(() => {
+                    const de = drawerPage.element;
+                    drawerPage.dispose();
+                    de.remove();
+                  }, 400);
+                  this.hideDrawer = undefined;
+                };
+                return false;
+              }
+              return true;
+            }
+            this.selectedPage.cancel("cancelled");
+            return false;
+          });
+        }
+        init() {
+          return __awaiter(this, void 0, void 0, function* () {});
+        }
+        preCreate() {
+          MobileApp.current = this;
+          window.addEventListener("backButton", ce => {
+            const {
+              detail
+            } = ce;
+            ce.preventDefault();
+            this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+              if (yield this.back()) {
+                detail();
+              }
+            }));
+          });
+          document.body.style.overflow = "hidden";
+          this.drawer = null;
+          this.element.dataset.pageApp = "page-app";
+          const container = this.container = document.createElement("div");
+          container.dataset.container = "true";
+          this.element.appendChild(container);
+          this.pages = [];
+          this.selectedPage = null;
+          this.bindEvent(this.element, "iconClick", e => this.back());
+          this.bindEvent(this.element, "closeDrawer", e => {
+            var _a;
+            (_a = this.hideDrawer) === null || _a === void 0 ? void 0 : _a.call(this);
+          });
+          const navigationService = this.app.resolve(NavigationService);
+          navigationService.registerNavigationHook((uri, {
+            target,
+            clearHistory
+          }) => {
+            if (/^(app|root)$/.test(target)) {
+              return this.loadPageForReturn(uri, clearHistory);
+            }
+          });
+          this.runAfterInit(() => this.app.runAsync(() => this.init()));
+        }
+        loadPageForReturn(url, clearHistory) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const page = yield AtomLoader.loadControl(url, this.app);
+            if (url.query && url.query.title) {
+              page.title = url.query.title.toString();
+            }
+            const p = yield this.loadPage(page, clearHistory);
+            try {
+              return yield p;
+            } catch (ex) {
+              if ((ex.message ? ex.message : ex) === "cancelled") {
+                console.warn(ex);
+                return;
+              }
+              throw ex;
+            }
+          });
+        }
+        loadPage(page, clearHistory) {
+          var _a;
+          return __awaiter(this, void 0, void 0, function* () {
+            (_a = page.title) !== null && _a !== void 0 ? _a : page.title = "Title";
+            const selectedPage = this.selectedPage;
+            if (selectedPage) {
+              selectedPage.hide();
+              this.pages.add(selectedPage);
+            }
+            const hasPages = !clearHistory && this.pages.length;
+            if (clearHistory) {
+              for (const iterator of this.pages) {
+                const e = iterator.element;
+                iterator.dispose();
+                e.remove();
+              }
+              this.pages.length = 0;
+              this.selectedPage = null;
+            }
+            if (!hasPages) {
+              page.element.dataset.pageState = "ready";
+              page.iconClass = "fas fa-bars";
+            } else {
+              page.iconClass = "fas fa-arrow-left";
+            }
+            this.container.appendChild(page.element);
+            this.selectedPage = page;
+            const vm = page.viewModel;
+            const element = page.element;
+            return new Promise((resolve, reject) => {
+              const cancel = error => {
+                element.dataset.pageState = "";
+                const last = this.pages.pop();
+                last.show();
+                setTimeout(() => {
+                  page.dispose();
+                  element.remove();
+                  reject(error !== null && error !== void 0 ? error : "cancelled");
+                  this.selectedPage = last;
+                }, 300);
+              };
+              const close = r => {
+                delete element.dataset.pageState;
+                const last = this.pages.pop();
+                last.show();
+                setTimeout(() => {
+                  page.dispose();
+                  element.remove();
+                  resolve(r);
+                  this.selectedPage = last;
+                }, 300);
+              };
+              if (vm) {
+                vm.cancel = cancel;
+                vm.close = close;
+              }
+              page.cancel = cancel;
+              page.close = close;
+            });
+          });
+        }
+      });
+      MobileApp.drawer = XNode.prepare("drawer", true, true);
+      PageNavigator.pushPageForResult = (page, parameters, clearHistory) => MobileApp.pushPage(page, parameters, clearHistory);
+    }
+  };
+});
 //# sourceMappingURL=MobileApp.js.map