@web-atoms/web-controls 2.3.0 → 2.3.2

package/dist/mobile-app/MobileApp.js

@@ -1,605 +1,2 @@
-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 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