@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/mobile-app/MobileApp.js

@@ -1,707 +1,605 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@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"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Drawer = exports.TabbedPage = exports.ContentPage = exports.BasePage = exports.PullToRefresh = void 0;
-    const AtomDisposableList_1 = require("@web-atoms/core/dist/core/AtomDisposableList");
-    const AtomLoader_1 = require("@web-atoms/core/dist/core/AtomLoader");
-    const Bind_1 = require("@web-atoms/core/dist/core/Bind");
-    const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
-    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
-    const sleep_1 = require("@web-atoms/core/dist/core/sleep");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const NavigationService_1 = require("@web-atoms/core/dist/services/NavigationService");
-    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
-    const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
-    const AtomUI_1 = require("@web-atoms/core/dist/web/core/AtomUI");
-    const PopupService_1 = require("@web-atoms/core/dist/web/services/PopupService");
-    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
-    const PageNavigator_1 = require("../PageNavigator");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .absolutePosition({ left: 0, top: 0, right: 0, bottom: 0 })
-        .padding(5)
-        .overflow("hidden")
-        .child((0, StyleRule_1.default)("[data-container]")
-        .absolutePosition({ left: 0, top: 0, bottom: 0, width: "100%" })
-        .overflow("hidden")
-        .transition("left 0.3s ease-out"))
-        .and((0, StyleRule_1.default)("[data-drawer=visible]")
-        .child((0, StyleRule_1.default)("[data-container]")
-        .left("80%"))
-        .child((0, StyleRule_1.default)("[data-drawer-page]")
-        .left(0)))
-        .nested((0, StyleRule_1.default)("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: "-80%", top: 0 })
-    //     .width("80%")
-    //     .height("100%")
-    //     .overflow("hidden")
-    //     .transition("left 0.3s ease-out")
-    // , "div[data-drawer-page=drawer-page]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .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((0, StyleRule_1.default)("[data-icon-button=icon-button]")
-        .padding(5))
-        .child((0, StyleRule_1.default)("[data-page-element=action-bar]")
-        .zIndex(11)
-        .gridRowStart("1")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 3")
-        .backgroundColor(Colors_1.default.silver))
-        .child((0, StyleRule_1.default)("[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((0, StyleRule_1.default)("[data-page-element=title]")
-        .fontSize(20)
-        .zIndex(14)
-        .padding(5)
-        .alignSelf("center")
-        .justifySelf("stretch")
-        .gridRowStart("1")
-        .gridColumnStart("2")
-        .textEllipsis())
-        .child((0, StyleRule_1.default)("[data-page-element=action]")
-        .fontSize(20)
-        .zIndex(14)
-        .padding(10)
-        .gridRowStart("1")
-        .gridColumnStart("3")
-        .nested((0, StyleRule_1.default)("button")
-        .width(30)
-        .border("none")
-        .outline("none")
-        .background("transparent")
-        .fontSize("inherit")))
-        .child((0, StyleRule_1.default)("button[data-page-element=action]")
-        .width(30)
-        .border("none")
-        .outline("none")
-        .background("transparent"))
-        .child((0, StyleRule_1.default)("[data-page-element=header]")
-        .zIndex(12)
-        .padding(5)
-        .gridRowStart("2")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 3")
-        .backgroundColor(Colors_1.default.silver))
-        .child((0, StyleRule_1.default)("[data-page-element=pull-to-refresh]")
-        .gridRowStart("3")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 3")
-        .padding(5)
-        .margin(10)
-        .zIndex(9)
-        .alignSelf("start")
-        .justifySelf("center")
-        .nested((0, StyleRule_1.default)(".pull-icon")
-        .transition("all 0.3s ease-out"))
-        .and((0, StyleRule_1.default)("[data-mode=up] .pull-icon")
-        .transform("rotate(180deg)"))
-        .and((0, StyleRule_1.default)("[data-mode=loading] .pull-icon")
-        .display("none"))
-        .and((0, StyleRule_1.default)(":not([data-mode=down]) .down")
-        .display("none"))
-        .and((0, StyleRule_1.default)(":not([data-mode=up]) .up")
-        .display("none"))
-        .and((0, StyleRule_1.default)(":not([data-mode=loading]) .loading")
-        .display("none")))
-        .child((0, StyleRule_1.default)("[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_1.default.orange, "white")
-        // trick to disable shrinking for flexbox
-        .child((0, StyleRule_1.default)("*")
-        .flexShrink("0")))
-        .child((0, StyleRule_1.default)("[data-page-element=footer]")
-        .gridRowStart("4")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 3")
-        .zIndex(11)
-        .padding(5))
-        .transform("translate(100%,0)")
-        .and((0, StyleRule_1.default)("[data-page-state=ready]")
-        .transform("translate(0,0)"))
-        .and((0, StyleRule_1.default)("[data-page-state=hidden]")
-        .transform("translate(-100%,0)")), "div[data-base-page=base-page]");
-    // CSS(StyleRule()
-    //     .paddingBottom(500)
-    // , "body[data-keyboard=shown] div[data-base-page=base-page] > [data-page-element=content]");
-    // if (/iphone|ios/i.test(window.navigator.userAgent)) {
-    //     CSS(StyleRule()
-    //         .marginBottom(500)
-    //     , "body[data-keyboard=shown] div[data-page-app=page-app]");
-    // }
-    function PullToRefresh() {
-        return XNode_1.default.create("div", null,
-            XNode_1.default.create("i", { class: "pull-icon fa-solid fa-down" }),
-            XNode_1.default.create("span", { class: "down", text: " Pull" }),
-            XNode_1.default.create("span", { class: "up", text: " Refresh" }),
-            XNode_1.default.create("i", { class: "loading fa-duotone fa-spinner fa-spin" }));
-    }
-    exports.PullToRefresh = PullToRefresh;
-    class BasePage extends AtomControl_1.AtomControl {
+System.register(["@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 AtomDisposableList, AtomLoader, Bind, BindableProperty, Colors, sleep, XNode, NavigationService, StyleRule, AtomControl, ChildEnumerator, ConfirmPopup, CSS, PageNavigator, BasePage, ContentPage, TabbedPage, Drawer, MobileApp, __decorate, __metadata, __awaiter;
+  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 (_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 () {
+      __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+        var c = arguments.length,
+          r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+          d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      };
+      __metadata = void 0 && (void 0).__metadata || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+      };
+      __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+        function adopt(value) {
+          return value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+          });
+        }
+        return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) {
+            try {
+              step(generator.next(value));
+            } catch (e) {
+              reject(e);
+            }
+          }
+          function rejected(value) {
+            try {
+              step(generator["throw"](value));
+            } catch (e) {
+              reject(e);
+            }
+          }
+          function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+          }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+      };
+      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 PopupService_1.ConfirmPopup.showModal({
-                        parameters: {
-                            message: this.closeWarning
-                        }
-                    }))) {
-                        return;
-                    }
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.closeWarning) {
+              if (!(yield ConfirmPopup.showModal({
+                parameters: {
+                  message: this.closeWarning
                 }
-                this.cancel();
-            });
-        }
-        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;
+              }))) {
+                return;
+              }
             }
+            this.cancel();
+          });
         }
-        // tslint:disable-next-line: no-empty
-        init() {
+        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 AtomUI_1.ChildEnumerator.where(this.element, ({ dataset: { pageElement } }) => !pageElement || pageElement === "content")) {
-                this.dispose(content);
-                content.remove();
-            }
-            const r = this.renderer;
-            if (!r) {
-                return;
+          for (const content of ChildEnumerator.where(this.element, ({
+            dataset: {
+              pageElement
             }
-            delete this.render;
-            this.render(r);
+          }) => !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 AtomUI_1.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_1.default.create("div", null, node));
-                return this.element.querySelector(`[data-page-element="${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;
             }
-            return null;
+          }
+          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;
+          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;
                 }
-            });
-            setTimeout((p) => {
-                p.dataset.pageState = "ready";
-            }, 10, this.element);
-            this.titleRenderer = () => XNode_1.default.create("span", { class: "title-text", text: Bind_1.default.oneWay(() => this.viewModelTitle || this.title) });
-            this.iconRenderer = () => XNode_1.default.create("i", { "data-icon-button": "icon-button", class: Bind_1.default.oneWay(() => this.iconClass), eventClick: (e1) => this.dispatchIconClickEvent(e1) });
-            this.actionBarRenderer = () => XNode_1.default.create("div", null);
-            this.runAfterInit(() => {
-                var _a, _b;
-                // we will not keep in the dom
-                // this is to prevent any heavy animation classes slowing down performance
-                (_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();
-            });
+              }
+              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_1.default.create("div", Object.assign({ viewModelTitle: Bind_1.default.oneWay(() => this.viewModel.title) }, extracted), node), e, creator);
-            this.contentElement = this.element.querySelector("[data-page-element='content']");
-            setTimeout(() => this.contentElement.scrollTo(0, 0), 100);
+          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;
-            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.pullToRefreshElement) {
+              (_a = this.pullToRefreshDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+              this.pullToRefreshDisposable = null;
+              return;
             }
-            if (this.pullToRefreshDisposable) {
-                return;
+            if (this.contentElement.scrollTop > 0) {
+              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);
                 }
-                const isMouseEvent = te.type === "mousedown";
-                const moveEventName = isMouseEvent ? "mousemove" : "touchmove";
-                const endEventName = isMouseEvent ? "mouseup" : "touchend";
-                const startY = isMouseEvent ? te.screenY : te.touches[0].screenY;
+              } else {
+                return;
+              }
+              this.contentElement.style.transform = `translateY(${diffX}px)`;
+              if (diffX > 50) {
+                this.pullToRefreshElement.dataset.mode = "up";
+              } else {
                 this.pullToRefreshElement.dataset.mode = "down";
-                if (isMouseEvent) {
-                    te.stopPropagation();
-                    te.preventDefault();
-                }
-                const d = new AtomDisposableList_1.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_1.AtomDisposableList();
-            ed.add(this.bindEvent(this.contentElement, "mousedown", touchStart));
-            ed.add(this.bindEvent(this.contentElement, "touchstart", touchStart, null, { passive: true }));
-            this.pullToRefreshDisposable = ed;
+              }
+            }, 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);
+          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;
-            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);
+            (_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);
+          this.element._logicalParent.appendChild(this.element);
+          setTimeout(() => {
+            if (this.scrollTop) {
+              this.contentElement.scrollTop = this.scrollTop;
+            }
+            this.element.dataset.pageState = "ready";
+          }, 10);
         }
-    }
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], BasePage.prototype, "closeWarning", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], BasePage.prototype, "title", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "titleRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "iconRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "actionRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "footerRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "actionBarRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "headerRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], BasePage.prototype, "pullToRefreshRenderer", void 0);
-    exports.BasePage = BasePage;
-    delete BasePage.prototype.init;
-    class ContentPage extends BasePage {
-    }
-    exports.ContentPage = ContentPage;
-    class TabbedPage extends BasePage {
-    }
-    exports.TabbedPage = TabbedPage;
-    class Drawer extends AtomControl_1.AtomControl {
-        // tslint:disable-next-line: no-empty
-        init() { }
+      });
+      __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); }));
+          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);
+          const ce = new CustomEvent("closeDrawer", {
+            bubbles: true
+          });
+          this.element.dispatchEvent(ce);
         }
-    }
-    exports.Drawer = Drawer;
-    delete Drawer.prototype.init;
-    class MobileApp extends AtomControl_1.AtomControl {
+      });
+      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_1.AtomLoader.loadClass(pageUri, parameters, mobileApp.app);
-                const result = yield mobileApp.loadPage(page, clearHistory);
-                return result;
-            });
+          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 (0, sleep_1.default)(500);
-                }
-            }));
+          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);
-                        // (drawerPage as any).init?.()?.catch((error) => {
-                        //     if (!CancelToken.isCancelled(error)) {
-                        //         // tslint:disable-next-line: no-console
-                        //         console.error(error);
-                        //     }
-                        // });
-                        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 da = drawerNode.attributes ??= {};
-                        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 __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;
                     }
-                    return true;
-                }
-                this.selectedPage.cancel("cancelled");
+                    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* () {
-            });
+          return __awaiter(this, void 0, void 0, function* () {});
         }
         preCreate() {
-            MobileApp.current = this;
-            // tslint:disable-next-line: ban-types
-            window.addEventListener("backButton", (ce) => {
-                const { detail } = ce;
-                ce.preventDefault();
-                this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                    if (yield this.back()) {
-                        detail();
-                    }
-                }));
-            });
-            // disable top level scroll
-            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_1.NavigationService);
-            navigationService.registerNavigationHook((uri, { target, clearHistory }) => {
-                if (/^(app|root)$/.test(target)) {
-                    return this.loadPageForReturn(uri, clearHistory);
-                }
-            });
-            this.runAfterInit(() => this.app.runAsync(() => this.init()));
+          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_1.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) {
-                    // this will prevent warning in chrome for unhandled exception
-                    if ((ex.message ? ex.message : ex) === "cancelled") {
-                        // tslint:disable-next-line: no-console
-                        console.warn(ex);
-                        return;
-                    }
-                    throw ex;
-                }
-            });
+          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) => {
-                        // page.dispose();
-                        // element.remove();
-                        element.dataset.pageState = "";
-                        const last = this.pages.pop();
-                        last.show();
-                        // last.element.dataset.pageState = "ready";
-                        setTimeout(() => {
-                            page.dispose();
-                            element.remove();
-                            reject(error !== null && error !== void 0 ? error : "cancelled");
-                            this.selectedPage = last;
-                        }, 300);
-                    };
-                    const close = (r) => {
-                        // page.dispose();
-                        // element.remove();
-                        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;
-                });
+          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);
     }
-    exports.default = MobileApp;
-    MobileApp.drawer = XNode_1.default.prepare("drawer", true, true);
-    PageNavigator_1.default.pushPageForResult =
-        (page, parameters, clearHistory) => MobileApp.pushPage(page, parameters, clearHistory);
-});
+  };
+});
 //# sourceMappingURL=MobileApp.js.map