@web-atoms/web-controls 2.5.42 → 2.5.61

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

@@ -1,665 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { AtomLoader } from "@web-atoms/core/dist/core/AtomLoader.js";
-import sleep from "@web-atoms/core/dist/core/sleep.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import { NavigationService } from "@web-atoms/core/dist/services/NavigationService.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService.js";
-import PageNavigator from "../PageNavigator.js";
-import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
-import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList.js";
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-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";
-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" }));
-}
-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);
-    }
-}
-delete Drawer.prototype.init;
-let historyBackCalled = false;
-export class BasePage extends AtomControl {
-    close;
-    cancel;
-    closeWarning;
-    title;
-    titleRenderer;
-    iconRenderer;
-    actionRenderer;
-    footerRenderer;
-    actionBarRenderer;
-    headerRenderer;
-    pullToRefreshRenderer;
-    iconClass;
-    keep = false;
-    disableAutoFocus = false;
-    get route() {
-        return this.routeUrl;
-    }
-    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);
-    }
-    routeUrl;
-    routeDisposable;
-    viewModelTitle;
-    initialized;
-    contentElement;
-    pullToRefreshElement;
-    pullToRefreshDisposable;
-    scrollTop;
-    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");
-        }
-    }
-    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");
-        }
-    }
-    cancelToken;
-    async requestCancel() {
-        if (this.closeWarning) {
-            if (!await PopupService.confirm({
-                message: this.closeWarning
-            })) {
-                return;
-            }
-        }
-        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;
-        }
-    }
-    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) {
-        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;
-    }
-    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 { }
-        });
-    }
-    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);
-    }
-    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 }));
-        };
-        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;
-        }
-        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);
-    }
-}
-__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 {
-    parameters;
-}
-export class TabbedPage extends BasePage {
-}
-export default class MobileApp extends AtomControl {
-    static current;
-    static 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;
-    }
-    drawer;
-    hideDrawer;
-    pages;
-    selectedPage;
-    defaultPage;
-    container;
-    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;
-                        }
-                        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");
-        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?.();
-        });
-        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()));
-    }
-    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;
-        }
-        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 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);
-            if (vm) {
-                vm.cancel = cancel;
-                vm.close = close;
-            }
-            page.cancel = cancel;
-            page.close = close;
-        });
-    }
-}
-export const isMobileView = /Android|iPhone/i.test(navigator.userAgent)
-    || (window.visualViewport.width < 500)
-    || window.forceMobileLayout;
-const isPopupPage = Symbol("isPopupPage");
-class PopupWindowEx extends PopupWindow {
-    static [isPopupPage] = true;
-    static dialogOptions;
-}
-const root = (isMobileView ? ContentPage : PopupWindowEx);
-export class PopupWindowPage extends root {
-    static dialogOptions;
-}
-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);
-    };
-//# sourceMappingURL=MobileApp.js.map