@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/mobile-app/MobileApp.js

@@ -14,614 +14,622 @@ import { CancelToken } from "@web-atoms/core/dist/core/types.js";
 import { AncestorEnumerator, ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI.js";
 import { displayRouteSymbol } from "@web-atoms/core/dist/core/Command.js";
 import Route from "@web-atoms/core/dist/core/Route.js";
-import "./MobileApp.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./MobileApp.global.css"));
 export 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" }));
+  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 class Drawer extends AtomControl {
-    init() { }
-    preCreate() {
-        this.element.dataset.drawerPage = "drawer-page";
-        this.bindEvent(this.element, "click", (e) => {
-            const target = e.target;
-            if (e.defaultPrevented) {
-                return;
-            }
-            if (/input/i.test(target.tagName) && !/button|submit/i.test(target.type)) {
-                return;
-            }
-            this.closeDrawer();
-        });
-        this.runAfterInit(() => this.app.runAsync(() => this.init?.()));
-    }
-    closeDrawer() {
-        const ce = new CustomEvent("closeDrawer", { bubbles: true });
-        this.element.dispatchEvent(ce);
-    }
+  init() {}
+  preCreate() {
+    this.element.dataset.drawerPage = "drawer-page";
+    this.bindEvent(this.element, "click", e => {
+      const target = e.target;
+      if (e.defaultPrevented) {
+        return;
+      }
+      if (/input/i.test(target.tagName) && !/button|submit/i.test(target.type)) {
+        return;
+      }
+      this.closeDrawer();
+    });
+    this.runAfterInit(() => this.app.runAsync(() => this.init?.()));
+  }
+  closeDrawer() {
+    const ce = new CustomEvent("closeDrawer", {
+      bubbles: true
+    });
+    this.element.dispatchEvent(ce);
+  }
 }
 delete Drawer.prototype.init;
 let historyBackCalled = false;
 export class BasePage extends AtomControl {
-    constructor() {
-        super(...arguments);
-        this.keep = false;
-        this.disableAutoFocus = false;
+  constructor() {
+    super(...arguments);
+    this.keep = false;
+    this.disableAutoFocus = false;
+  }
+  get route() {
+    return this.routeUrl;
+  }
+  set route(url) {
+    if (!url) {
+      return;
     }
-    get route() {
-        return this.routeUrl;
+    if (history.state?.url === url) {
+      return;
     }
-    set route(url) {
-        if (!url) {
-            return;
-        }
-        if (history.state?.url === url) {
-            return;
-        }
-        url = Route.encodeUrl(url);
-        if (this.routeUrl === url) {
-            return;
-        }
-        this.routeUrl = url;
-        this.routeDisposable?.dispose();
-        let last = void 0;
-        setTimeout(() => last = url, 100);
-        const state = { url };
-        history.pushState(state, "", url);
-        const eventRegistration = (e) => {
-            if (historyBackCalled) {
-                return;
-            }
-            if (e.state?.url === last) {
-                this.cancel();
-            }
-        };
-        window.addEventListener("popstate", eventRegistration);
-        const d = {
-            dispose() {
-                window.removeEventListener("popstate", eventRegistration);
-                if (history.state?.url === state.url) {
-                    historyBackCalled = true;
-                    history.back();
-                    setTimeout(() => historyBackCalled = false, 500);
-                }
-            }
-        };
-        this.routeDisposable = this.registerDisposable(d);
+    url = Route.encodeUrl(url);
+    if (this.routeUrl === url) {
+      return;
     }
-    get hideToolbar() {
-        return /true/i.test(this.element?.getAttribute("data-hide-toolbar"));
+    this.routeUrl = url;
+    this.routeDisposable?.dispose();
+    let last = void 0;
+    setTimeout(() => last = url, 100);
+    const state = {
+      url
+    };
+    history.pushState(state, "", url);
+    const eventRegistration = e => {
+      if (historyBackCalled) {
+        return;
+      }
+      if (e.state?.url === last) {
+        this.cancel();
+      }
+    };
+    window.addEventListener("popstate", eventRegistration);
+    const d = {
+      dispose() {
+        window.removeEventListener("popstate", eventRegistration);
+        if (history.state?.url === state.url) {
+          historyBackCalled = true;
+          history.back();
+          setTimeout(() => historyBackCalled = false, 500);
+        }
+      }
+    };
+    this.routeDisposable = this.registerDisposable(d);
+  }
+  get hideToolbar() {
+    return /true/i.test(this.element?.getAttribute("data-hide-toolbar"));
+  }
+  set hideToolbar(v) {
+    if (v) {
+      this.element.setAttribute("data-hide-toolbar", "true");
+    } else {
+      this.element.removeAttribute("data-hide-toolbar");
     }
-    set hideToolbar(v) {
-        if (v) {
-            this.element.setAttribute("data-hide-toolbar", "true");
-        }
-        else {
-            this.element.removeAttribute("data-hide-toolbar");
-        }
+  }
+  get hideDrawer() {
+    return /true/i.test(this.element?.getAttribute("data-hide-drawer"));
+  }
+  set hideDrawer(v) {
+    if (v) {
+      this.element.setAttribute("data-hide-drawer", "true");
+    } else {
+      this.element.removeAttribute("data-hide-drawer");
     }
-    get hideDrawer() {
-        return /true/i.test(this.element?.getAttribute("data-hide-drawer"));
+  }
+  async requestCancel() {
+    if (this.closeWarning) {
+      if (!(await PopupService.confirm({
+        message: this.closeWarning
+      }))) {
+        return;
+      }
     }
-    set hideDrawer(v) {
-        if (v) {
-            this.element.setAttribute("data-hide-drawer", "true");
-        }
-        else {
-            this.element.removeAttribute("data-hide-drawer");
-        }
+    this.cancel();
+  }
+  onPropertyChanged(name) {
+    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");
+        this.pullToRefreshElement?.remove();
+        this.enablePullToRefreshEvents();
+        break;
+      case "actionBarRenderer":
+        this.recreate(name, "action-bar");
+        break;
     }
-    async requestCancel() {
-        if (this.closeWarning) {
-            if (!await PopupService.confirm({
-                message: this.closeWarning
-            })) {
-                return;
-            }
-        }
-        this.cancel();
+  }
+  init() {}
+  rendererChanged() {
+    for (const content of ChildEnumerator.where(this.element, ({
+      dataset: {
+        pageElement
+      }
+    }) => !pageElement || pageElement === "content")) {
+      this.dispose(content);
+      content.remove();
     }
-    onPropertyChanged(name) {
-        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");
-                this.pullToRefreshElement?.remove();
-                this.enablePullToRefreshEvents();
-                break;
-            case "actionBarRenderer":
-                this.recreate(name, "action-bar");
-                break;
-        }
+    const r = this.renderer;
+    if (!r) {
+      return;
     }
-    init() {
+    delete this.render;
+    this.render(r);
+  }
+  recreate(renderer, name) {
+    const node = this[renderer]?.() ?? undefined;
+    for (const e of ChildEnumerator.enumerate(this.element)) {
+      if (e.dataset.pageElement === name) {
+        this.dispose(e);
+        e.remove();
+        break;
+      }
     }
-    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) {
+    if (node) {
+      const na = 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;
+    const c = new CancelToken();
+    this.cancelToken = c;
+    this.registerDisposable({
+      dispose() {
+        c.cancel();
+      }
+    });
+    this.runAfterInit(() => {
+      if (!this.element) {
+        return;
+      }
+      const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+      if (!anyAutofocus) {
+        if (this.disableAutoFocus) {
+          return;
+        }
+        const windowContent = this.element.querySelector(`[data-page-element="content"]`);
+        if (windowContent) {
+          const firstInput = windowContent.querySelector("input,textarea");
+          if (firstInput) {
+            firstInput.focus();
             return;
-        }
-        delete this.render;
-        this.render(r);
+          }
+        }
+        return;
+      }
+      anyAutofocus.focus();
+    });
+    setTimeout(p => {
+      p.dataset.pageState = "ready";
+    }, 1, this.element);
+    this.titleRenderer = () => XNode.create("span", {
+      "data-text-overflow": "ellipsis",
+      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(() => {
+      this.pullToRefreshElement?.remove?.();
+      this.initialized = true;
+      this.enablePullToRefreshEvents();
+      try {
+        document.body.dispatchEvent(new CustomEvent("pageNavigated", {
+          detail: {
+            title: this.title,
+            route: this.route || Object.getPrototypeOf(this)?.constructor?.name
+          },
+          bubbles: true,
+          cancelable: true
+        }));
+      } catch {}
+    });
+  }
+  render(node, e, creator) {
+    if (e || node?.attributes?.["data-page-element"]) {
+      super.render(node, e, creator);
+      return;
     }
-    recreate(renderer, name) {
-        const node = this[renderer]?.() ?? undefined;
-        for (const e of ChildEnumerator.enumerate(this.element)) {
-            if (e.dataset.pageElement === name) {
-                this.dispose(e);
-                e.remove();
-                break;
-            }
-        }
-        if (node) {
-            const na = node.attributes ??= {};
-            na["data-page-element"] = name;
-            super.render(XNode.create("div", null, node));
-            return this.element.querySelector(`[data-page-element="${name}"]`);
-        }
-        return null;
+    this.render = super.render;
+    const na = node.attributes ??= {};
+    let extracted = {};
+    if (!na["data-page-element"]) {
+      na["data-page-element"] = "content";
+      extracted = this.extractControlProperties(node);
     }
-    preCreate() {
-        this.element.dataset.basePage = "base-page";
-        this.iconClass = "";
-        this.viewModelTitle = null;
-        const c = new CancelToken();
-        this.cancelToken = c;
-        this.registerDisposable({
-            dispose() {
-                c.cancel();
-            }
-        });
-        this.runAfterInit(() => {
-            if (!this.element) {
-                return;
-            }
-            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
-            if (!anyAutofocus) {
-                if (this.disableAutoFocus) {
-                    return;
-                }
-                const windowContent = this.element.querySelector(`[data-page-element="content"]`);
-                if (windowContent) {
-                    const firstInput = windowContent.querySelector("input,textarea");
-                    if (firstInput) {
-                        firstInput.focus();
-                        return;
-                    }
-                }
-                return;
-            }
-            anyAutofocus.focus();
-        });
-        setTimeout((p) => {
-            p.dataset.pageState = "ready";
-        }, 1, this.element);
-        this.titleRenderer = () => XNode.create("span", { "data-text-overflow": "ellipsis", 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(() => {
-            this.pullToRefreshElement?.remove?.();
-            this.initialized = true;
-            this.enablePullToRefreshEvents();
-            try {
-                document.body.dispatchEvent(new CustomEvent("pageNavigated", {
-                    detail: {
-                        title: this.title,
-                        route: this.route || Object.getPrototypeOf(this)?.constructor?.name
-                    },
-                    bubbles: true,
-                    cancelable: true
-                }));
-            }
-            catch { }
-        });
+    super.render(XNode.create("div", {
+      viewModelTitle: Bind.oneWay(() => this.viewModel.title),
+      ...extracted
+    }, node), e, creator);
+    this.contentElement = this.element.querySelector("[data-page-element='content']");
+    if (document.body.hasAttribute("ios-keyboard")) {
+      return;
     }
-    render(node, e, creator) {
-        if (e || node?.attributes?.["data-page-element"]) {
-            super.render(node, e, creator);
-            return;
-        }
-        this.render = super.render;
-        const na = (node.attributes ??= {});
-        let extracted = {};
-        if (!na["data-page-element"]) {
-            na["data-page-element"] = "content";
-            extracted = this.extractControlProperties(node);
-        }
-        super.render(XNode.create("div", { viewModelTitle: Bind.oneWay(() => this.viewModel.title), ...extracted }, node), e, creator);
-        this.contentElement = this.element.querySelector("[data-page-element='content']");
-        if (document.body.hasAttribute("ios-keyboard")) {
-            return;
-        }
-        setTimeout(() => {
-            this.contentElement.scrollTop = 0;
-            this.contentElement.scrollLeft = 0;
-        }, 100);
+    setTimeout(() => {
+      this.contentElement.scrollTop = 0;
+      this.contentElement.scrollLeft = 0;
+    }, 100);
+  }
+  enablePullToRefreshEvents() {
+    const e = this.pullToRefreshElement;
+    if (!e) {
+      this.pullToRefreshDisposable?.dispose();
+      this.pullToRefreshDisposable = void 0;
+      return e;
     }
-    enablePullToRefreshEvents() {
-        const e = this.pullToRefreshElement;
-        if (!e) {
-            this.pullToRefreshDisposable?.dispose();
-            this.pullToRefreshDisposable = void 0;
-            return e;
-        }
-        if (this.pullToRefreshDisposable) {
-            return;
-        }
-        let elementAdded = false;
-        const touchStart = (te) => {
-            if (!this.pullToRefreshElement) {
-                this.pullToRefreshDisposable?.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 }));
+    if (this.pullToRefreshDisposable) {
+      return;
+    }
+    let elementAdded = false;
+    const touchStart = te => {
+      if (!this.pullToRefreshElement) {
+        this.pullToRefreshDisposable?.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 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;
+        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() {
+    const {
+      element
+    } = this;
+    if (!element) {
+      return;
     }
-    dispatchIconClickEvent(e) {
-        const ce = new CustomEvent("iconClick", { bubbles: true });
-        e.target.dispatchEvent(ce);
+    element.setAttribute("data-page-state", "hidden");
+    if (this.keep) {
+      setTimeout(() => element.setAttribute("data-page-removed", "true"), 400);
+      return;
     }
-    hide() {
-        const { element } = this;
-        if (!element) {
-            return;
-        }
-        element.setAttribute("data-page-state", "hidden");
-        if (this.keep) {
-            setTimeout(() => element.setAttribute("data-page-removed", "true"), 400);
-            return;
-        }
-        element._logicalParent = element.parentElement;
-        this.scrollTop = this.contentElement?.scrollTop;
-        setTimeout(() => {
-            element?.remove();
-        }, 400);
-    }
-    show() {
-        if (this.keep) {
-            this.element.removeAttribute("data-page-removed");
-        }
-        else {
-            this.element._logicalParent.appendChild(this.element);
-        }
-        setTimeout(() => {
-            if (this.scrollTop) {
-                this.contentElement.scrollTop = this.scrollTop;
-            }
-            this.element.setAttribute("data-page-state", "ready");
-        }, 1);
+    element._logicalParent = element.parentElement;
+    this.scrollTop = this.contentElement?.scrollTop;
+    setTimeout(() => {
+      element?.remove();
+    }, 400);
+  }
+  show() {
+    if (this.keep) {
+      this.element.removeAttribute("data-page-removed");
+    } else {
+      this.element._logicalParent.appendChild(this.element);
     }
+    setTimeout(() => {
+      if (this.scrollTop) {
+        this.contentElement.scrollTop = this.scrollTop;
+      }
+      this.element.setAttribute("data-page-state", "ready");
+    }, 1);
+  }
 }
-__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);
+__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 class ContentPage extends BasePage {
-}
-export class TabbedPage extends BasePage {
-}
+export class ContentPage extends BasePage {}
+export class TabbedPage extends BasePage {}
 export default class MobileApp extends AtomControl {
-    static { this.drawer = XNode.prepare("drawer", true, true); }
-    static async pushPage(pageUri, parameters = {}, clearHistory = false) {
-        const mobileApp = this.current;
-        const page = await AtomLoader.loadClass(pageUri, parameters ?? {}, mobileApp.app);
-        const result = await mobileApp.loadPage(page, clearHistory);
-        return result;
-    }
-    popTo(w) {
-        this.app.runAsync(async () => {
-            while (this.selectedPage !== w) {
-                this.selectedPage.cancel();
-                await sleep(500);
+  static {
+    this.drawer = XNode.prepare("drawer", true, true);
+  }
+  static async pushPage(pageUri, parameters = {}, clearHistory = false) {
+    const mobileApp = this.current;
+    const page = await AtomLoader.loadClass(pageUri, parameters ?? {}, mobileApp.app);
+    const result = await mobileApp.loadPage(page, clearHistory);
+    return result;
+  }
+  popTo(w) {
+    this.app.runAsync(async () => {
+      while (this.selectedPage !== w) {
+        this.selectedPage.cancel();
+        await sleep(500);
+      }
+    });
+  }
+  async back() {
+    if (this.pages.length === 0) {
+      const drawer = this.drawer;
+      if (drawer && !this.hideDrawer) {
+        const drawerPage = new drawer(this.app);
+        const modalClose = ce => {
+          let start = ce.target;
+          const de = drawerPage.element;
+          while (start) {
+            if (start === de) {
+              return;
             }
-        });
-    }
-    async back() {
-        if (this.pages.length === 0) {
-            const drawer = this.drawer;
-            if (drawer && !this.hideDrawer) {
-                const drawerPage = new drawer(this.app);
-                const modalClose = (ce) => {
-                    let start = ce.target;
-                    const de = drawerPage.element;
-                    while (start) {
-                        if (start === de) {
-                            return;
-                        }
-                        start = start.parentElement;
-                    }
-                    ce.preventDefault();
-                    ce.stopImmediatePropagation?.();
-                    ce.target.dispatchEvent(new CustomEvent("closeDrawer", { bubbles: true }));
-                };
-                const dispatchCloseDrawer = (de) => {
-                    if (de.defaultPrevented) {
-                        return;
-                    }
-                    const target = de.target;
-                    if (AncestorEnumerator.find(target, (x) => x === drawerPage.element)) {
-                        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");
+            start = start.parentElement;
+          }
+          ce.preventDefault();
+          ce.stopImmediatePropagation?.();
+          ce.target.dispatchEvent(new CustomEvent("closeDrawer", {
+            bubbles: true
+          }));
+        };
+        const dispatchCloseDrawer = de => {
+          if (de.defaultPrevented) {
+            return;
+          }
+          const target = de.target;
+          if (AncestorEnumerator.find(target, x => x === drawerPage.element)) {
+            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;
     }
-    async init() {
+    this.selectedPage.cancel("cancelled");
+    return false;
+  }
+  async init() {}
+  preCreate() {
+    MobileApp.current = this;
+    window.addEventListener("backButton", ce => {
+      const {
+        detail
+      } = ce;
+      ce.preventDefault();
+      this.app.runAsync(async () => {
+        if (await this.back()) {
+          detail();
+        }
+      });
+    });
+    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 => {
+      this.hideDrawer?.();
+    });
+    this.runAfterInit(() => this.app.runAsync(() => this.init()));
+  }
+  async loadPageForReturn(url, clearHistory) {
+    this.defaultPage ??= url;
+    const page = await AtomLoader.loadControl(url, this.app);
+    if (url.query && url.query.title) {
+      page.title ||= url.query.title.toString();
     }
-    preCreate() {
-        MobileApp.current = this;
-        window.addEventListener("backButton", (ce) => {
-            const { detail } = ce;
-            ce.preventDefault();
-            this.app.runAsync(async () => {
-                if (await this.back()) {
-                    detail();
-                }
-            });
-        });
-        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) => {
-            this.hideDrawer?.();
-        });
-        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    const p = await this.loadPage(page, clearHistory);
+    try {
+      return await p;
+    } catch (ex) {
+      if ((ex.message ? ex.message : ex) === "cancelled") {
+        console.warn(ex);
+        return;
+      }
+      throw ex;
     }
-    async loadPageForReturn(url, clearHistory) {
-        this.defaultPage ??= url;
-        const page = await AtomLoader.loadControl(url, this.app);
-        if (url.query && url.query.title) {
-            page.title ||= url.query.title.toString();
-        }
-        const p = await this.loadPage(page, clearHistory);
-        try {
-            return await p;
-        }
-        catch (ex) {
-            if ((ex.message ? ex.message : ex) === "cancelled") {
-                console.warn(ex);
-                return;
-            }
-            throw ex;
-        }
+  }
+  async loadPage(page, clearHistory) {
+    page.title ||= StringHelper.fromPascalToTitleCase(Object.getPrototypeOf(page).constructor.name);
+    const {
+      parameters
+    } = page;
+    const route = parameters?.[displayRouteSymbol];
+    if (route) {
+      page.route = route;
     }
-    async loadPage(page, clearHistory) {
-        page.title ||= StringHelper.fromPascalToTitleCase(Object.getPrototypeOf(page).constructor.name);
-        const { parameters } = page;
-        const route = parameters?.[displayRouteSymbol];
-        if (route) {
-            page.route = route;
-        }
-        const selectedPage = this.selectedPage;
-        if (selectedPage) {
-            selectedPage.hide();
-            this.pages.add(selectedPage);
-        }
-        const hasPages = !clearHistory && this.pages.length;
+    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 element = page.element;
+    return new Promise((resolve, reject) => {
+      const closeFactory = (callback, result) => r => {
         if (clearHistory) {
-            for (const iterator of this.pages) {
-                const e = iterator.element;
-                iterator.dispose();
-                e.remove();
-            }
-            this.pages.length = 0;
-            this.selectedPage = null;
+          this.app.runAsync(() => this.loadPageForReturn(this.defaultPage, true));
+          return;
         }
-        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 element = page.element;
-        return new Promise((resolve, reject) => {
-            const closeFactory = (callback, result) => (r) => {
-                if (clearHistory) {
-                    this.app.runAsync(() => this.loadPageForReturn(this.defaultPage, true));
-                    return;
-                }
-                element.removeAttribute("data-page-state");
-                const last = this.pages.pop();
-                last.show();
-                setTimeout(() => {
-                    page.dispose();
-                    element.remove();
-                    callback(r ?? result);
-                    this.selectedPage = last;
-                }, 300);
-            };
-            const cancel = closeFactory(reject, "cancelled");
-            const close = closeFactory(resolve);
-            page.cancel = cancel;
-            page.close = close;
-        });
-    }
+        element.removeAttribute("data-page-state");
+        const last = this.pages.pop();
+        last.show();
+        setTimeout(() => {
+          page.dispose();
+          element.remove();
+          callback(r ?? result);
+          this.selectedPage = last;
+        }, 300);
+      };
+      const cancel = closeFactory(reject, "cancelled");
+      const close = closeFactory(resolve);
+      page.cancel = cancel;
+      page.close = close;
+    });
+  }
 }
-export const isMobileView = /Android|iPhone/i.test(navigator.userAgent)
-    || (window.visualViewport.width < 500)
-    || window.forceMobileLayout;
+export const isMobileView = /Android|iPhone/i.test(navigator.userAgent) || window.visualViewport.width < 500 || window.forceMobileLayout;
 const isPopupPage = Symbol("isPopupPage");
 class PopupWindowEx extends PopupWindow {
-    static { _a = isPopupPage; }
-    static { this[_a] = true; }
-}
-const root = (isMobileView ? ContentPage : PopupWindowEx);
-export class PopupWindowPage extends root {
+  static {
+    _a = isPopupPage;
+  }
+  static {
+    this[_a] = true;
+  }
 }
-PageNavigator.pushPageForResult =
-    (page, parameters, clearHistory) => {
-        if (!isMobileView
-            && page[isPopupPage]) {
-            const popupPage = page;
-            const options = {
-                ...popupPage.dialogOptions ?? {},
-                parameters: {
-                    parameters
-                }
-            };
-            options.modal ??= true;
-            if (options.modal) {
-                return page.showModal(options);
-            }
-            return page.showWindow(options);
-        }
-        return MobileApp.pushPage(page, parameters, clearHistory);
+const root = isMobileView ? ContentPage : PopupWindowEx;
+export class PopupWindowPage extends root {}
+PageNavigator.pushPageForResult = (page, parameters, clearHistory) => {
+  if (!isMobileView && page[isPopupPage]) {
+    const popupPage = page;
+    const options = {
+      ...(popupPage.dialogOptions ?? {}),
+      parameters: {
+        parameters
+      }
     };
-//# sourceMappingURL=MobileApp.js.map
+    options.modal ??= true;
+    if (options.modal) {
+      return page.showModal(options);
+    }
+    return page.showWindow(options);
+  }
+  return MobileApp.pushPage(page, parameters, clearHistory);
+};