@social-mail/social-mail-hosted-web 1.0.2

package/node_modules/@web-atoms/core/src/view-model/Load.ts

@@ -0,0 +1,167 @@
+import { App } from "../App";
+import { parsePath } from "../core/ExpressionParser";
+import FormattedString from "../core/FormattedString";
+import sleep from "../core/sleep";
+import { CancelToken } from "../core/types";
+import { NavigationService } from "../services/NavigationService";
+import { AtomViewModel, Watch } from "./AtomViewModel";
+import { registerInit } from "./baseTypes";
+
+export type ILoadOptions = {
+
+    /**
+     * Initializes this action as soon as view model has been created.
+     * If set true, success will be set to null as default.
+     * @default true
+     */
+    init: true;
+
+    /**
+     * Displays an error if error occurs during initialization, to turn it off
+     * you can set to false
+     * @default true
+     */
+    showErrorOnInit?: boolean;
+
+    watch?: false;
+
+    watchDelayMS?: never;
+
+} | {
+
+    init?: false;
+
+    showErrorOnInit?: false;
+
+    /**
+     * Watch, executes this action whenever any of `this`'s properties updates,
+     * this does not refresh when any property is assigned within this method.
+     * Any subsequent update is ignored while the async operation is still in process.
+     *
+     * An automatic delay of 100 milliseconds (you can change this with watchDelayMS)
+     * is applied before execution to accumulate
+     * all updates and event is executed later on.
+     */
+    watch: true;
+
+    /**
+     * Delay in milliseconds before invoking the watched expression.
+     * @default 100
+     */
+    watchDelayMS?: number;
+} | {
+    init: true;
+    showErrorOnInit?: boolean;
+    watch: true;
+    watchDelayMS?: number;
+} | never;
+
+/**
+ * Loads given method on based on init/watch properties.
+ * If init is true, method will be executed when view model is initialized.
+ * If watch is true, method will be executed when any of `this.*.*` properties are
+ * modified. This method can be asynchronous. Watch will ignore all assignment
+ * changes within the method.
+ *
+ * Every execution will be delayed by parameter specified in {@link ILoadOptions#watchDelayMS},
+ * so multiple calls can be accumulated and only one final execution will proceed. This is useful
+ * when you want to load items from API when user is continuously typing in search box.
+ *
+ * Method will have an input parameter for cancelToken {@link CancelToken} which you
+ * can pass it to any REST Api call, before executing next method, cancelToken will
+ * cancel previous execution.
+ *
+ * Either init or watch has to be true, or both can be true as well.
+ */
+export default function Load(
+    {
+        init,
+        showErrorOnInit,
+        watch,
+        watchDelayMS = 100
+    }: ILoadOptions) {
+    // tslint:disable-next-line: only-arrow-functions
+    return function(target: AtomViewModel, key: string | symbol): void {
+        registerInit(target, (vm) => {
+            // tslint:disable-next-line: ban-types
+            const oldMethod = vm[key] as Function;
+            const app = vm.app as App;
+            let showError = init ? (showErrorOnInit ? true : false) : true;
+            let ct: CancelToken;
+
+            const ns = app.resolve(NavigationService);
+
+            const m = async (ctx?: CancelToken) => {
+                try {
+                    const pe = oldMethod.call(vm, ctx);
+                    if (pe?.then) {
+                        return await pe;
+                    }
+                } catch (e) {
+                    if (CancelToken.isCancelled(e)) {
+                        return;
+                    }
+                    if (!showError) {
+                        // tslint:disable-next-line: no-console
+                        console.error(e);
+                        return;
+                    }
+                    await ns.alert(e, "Error");
+                } finally {
+                    ct = null;
+                    showError = true;
+                }
+            };
+
+            if (watch) {
+                let timeout;
+                const fx = (c1?: CancelToken) => {
+                    if (ct && !ct.cancelled) {
+                        ct.cancel();
+                    }
+                    if (timeout) {
+                        clearTimeout(timeout);
+                    }
+                    timeout = setTimeout(() => {
+                        timeout = undefined;
+                        ct = c1 ??= new CancelToken();
+                        m(c1).catch((e) => console.error(e) );
+                    }, watchDelayMS);
+                };
+
+                // get path stripped as we are passing CancelToken, it will not
+                // parse for this. expressions..
+                const pathList = parsePath(oldMethod.toString(), true);
+                if (pathList.length === 0) {
+                    throw new Error("Nothing to watch !!");
+                }
+
+                // in case if init is true..
+                // we will setup watch immediately after init was finished...
+                vm[key] = fx;
+
+                const watchedFunction = () => fx();
+
+                if (init) {
+                    app.runAsync(async () => {
+                        try {
+                            await m(new CancelToken());
+                        }  catch (error) {
+                        } finally {
+                            vm.setupWatch(pathList, watchedFunction);
+                        }
+                    });
+                    return;
+                }
+
+                vm.setupWatch(pathList, watchedFunction);
+
+                return;
+            }
+
+            if (init) {
+                app.runAsync(() => m(new CancelToken()));
+            }
+        });
+    };
+}

package/node_modules/@web-atoms/core/src/view-model/Once.ts

@@ -0,0 +1,50 @@
+import { App } from "../App";
+import { AtomViewModel } from "./AtomViewModel";
+import { registerInit } from "./baseTypes";
+
+const timerSymbol = Symbol();
+
+const Once = (timeInMS: number = 100) =>
+    (target: AtomViewModel, key: string | symbol): void => {
+            registerInit(target, (vm) => {
+                // tslint:disable-next-line: ban-types
+                const oldMethod = vm[key] as Function;
+                let keyTimer = vm[timerSymbol];
+                if (typeof keyTimer === "undefined") {
+                    keyTimer = {};
+                    vm[timerSymbol] = keyTimer;
+                }
+
+                let running = false;
+
+                // tslint:disable-next-line:only-arrow-functions
+                vm[key] = ( ... a: any[]) => {
+                    if (running) {
+                        return;
+                    }
+                    const pending = keyTimer[key];
+                    if (pending) {
+                        clearTimeout(pending);
+                    }
+                    keyTimer[key] = setTimeout((... b: any[]) => {
+                        running = true;
+                        delete keyTimer[key];
+                        const r = oldMethod.apply(vm, b);
+                        if (r && r.then) {
+                            r.then(() => {
+                                running = false;
+                            }, (e) => {
+                                running = false;
+                                // tslint:disable-next-line: no-console
+                                console.warn(e);
+                            });
+                        } else {
+                            running = false;
+                        }
+                    }, timeInMS, ... a);
+                };
+
+            });
+    };
+
+export default Once;

package/node_modules/@web-atoms/core/src/view-model/baseTypes.ts

@@ -0,0 +1,15 @@
+import { IDisposable } from "../core/types";
+
+export interface IAtomViewModel {
+    setupWatch(ft: () => any, proxy?: () => any, forValidation?: boolean, name?: string): IDisposable ;
+}
+
+export type viewModelInit = (vm: any) => void;
+
+export type viewModelInitFunc = (target: any, key: string | symbol) => void;
+
+export function registerInit(target: any, fx: viewModelInit ): void {
+    const t: any = target as any;
+    const inits: viewModelInit[] = t._$_inits = t._$_inits || [];
+    inits.push(fx);
+}

package/node_modules/@web-atoms/core/src/view-model/bindPromise.ts

@@ -0,0 +1,37 @@
+import { AtomBinder } from "../core/AtomBinder";
+import { NavigationService, NotifyType } from "../services/NavigationService";
+import { AtomViewModel } from "./AtomViewModel";
+/**
+ * Use this method to create an object/array that will refresh
+ * when promise is resolved
+ */
+export default function bindPromise<T extends any | any[]>(
+    vm: AtomViewModel,
+    p: Promise<T>,
+    value: any,
+    displayError: boolean | ((e) => void) = true): T {
+    p.then((v) => {
+        if (Array.isArray(v)) {
+            const a = value as any;
+            (a as any[]).replace(v as any);
+        } else {
+            for (const key in v) {
+                if (v.hasOwnProperty(key)) {
+                    const element = v[key];
+                    value[key] = element;
+                    AtomBinder.refreshValue(value, key);
+                }
+            }
+        }
+    }).catch((e) => {
+        if (displayError) {
+            if (typeof displayError === "function") {
+                displayError(e);
+            } else {
+                const n = vm.app.resolve(NavigationService) as NavigationService;
+                n.notify(e, "Error", NotifyType.Error);
+            }
+        }
+    });
+    return value;
+}

package/node_modules/@web-atoms/core/src/view-model/bindProperty.ts

@@ -0,0 +1,28 @@
+import { IValueConverter } from "../core/IValueConverter";
+import { PropertyBinding } from "../core/PropertyBinding";
+import { IDisposable } from "../core/types";
+import { AtomViewModel } from "./AtomViewModel";
+
+/**
+ * Binds source property to target property with optional two ways
+ * @param target target whose property will be set
+ * @param propertyName name of target property
+ * @param source source to read property from
+ * @param path property path of source
+ * @param twoWays optional, two ways {@link IValueConverter}
+ */
+export default function bindProperty(
+    vm: AtomViewModel,
+    target: any,
+    propertyName: string,
+    source: any,
+    path: string[][],
+    twoWays?: IValueConverter | ((v: any) => any) ): IDisposable {
+    const pb = new PropertyBinding(
+        target,
+        null,
+        propertyName,
+        path,
+        (twoWays && typeof twoWays !== "function") ? true : false , twoWays, source);
+    return vm.registerDisposable(pb);
+}

package/node_modules/@web-atoms/core/src/view-model/bindUrlParameter.ts

@@ -0,0 +1,58 @@
+import { AtomDisposableList } from "../core/AtomDisposableList";
+import { AtomOnce } from "../core/AtomOnce";
+import { AtomUri } from "../core/AtomUri";
+import { IDisposable } from "../core/types";
+import { AtomViewModel } from "./AtomViewModel";
+/**
+ * Binds property of View Model to URL Parameter, it can read query string as well,
+ * however it will only persist value in hash
+ * @param vm View Model
+ * @param name property name of View Model
+ * @param urlParameter url parameter name
+ */
+export default function bindUrlParameter(vm: AtomViewModel, name: string, urlParameter: string): IDisposable {
+    if (!name) {
+        return;
+    }
+    if (!urlParameter) {
+        return;
+    }
+    const a = vm as any;
+    const paramDisposables = (a.mUrlParameters || (a.mUrlParameters = {}));
+    const old = paramDisposables[name];
+    if (old) {
+        old.dispose();
+        paramDisposables[name] = null;
+    }
+    const disposables = new AtomDisposableList();
+    const updater = new AtomOnce();
+    disposables.add(a.setupWatch([
+        ["app", "url", "hash", urlParameter],
+        ["app", "url", "query", urlParameter]
+    ], (hash, query) => {
+        updater.run(() => {
+            const value = hash || query;
+            if (value) {
+                // tslint:disable-next-line:triple-equals
+                if (value != vm[name]) {
+                    vm[name] = value;
+                }
+            }
+        });
+    }));
+    disposables.add(a.setupWatch([[name]], (value) => {
+        updater.run(() => {
+            const url = vm.app.url || (vm.app.url = new AtomUri(""));
+            url.hash[urlParameter] = value;
+            vm.app.syncUrl();
+        });
+    }));
+    paramDisposables[name] = disposables;
+    if (vm.app.url) {
+        const v = vm.app.url.hash[urlParameter] || vm.app.url.query[urlParameter];
+        if (v) {
+            vm[name] = v;
+        }
+    }
+    return vm.registerDisposable(disposables);
+}

package/node_modules/@web-atoms/core/src/web/WebApp.ts

@@ -0,0 +1,186 @@
+import { App } from "../App";
+import { AtomOnce } from "../core/AtomOnce";
+import { AtomUri } from "../core/AtomUri";
+import { ServiceCollection } from "../di/ServiceCollection";
+import { BusyIndicatorService } from "../services/BusyIndicatorService";
+import { NavigationService } from "../services/NavigationService";
+import { ChildEnumerator } from "./core/AtomUI";
+import { WebBusyIndicatorService } from "./services/WebBusyIndicatorService";
+import { WindowService } from "./services/WindowService";
+import { AtomStyleSheet } from "./styles/AtomStyleSheet";
+import { AtomTheme } from "./styles/AtomTheme";
+
+declare var UMD: any;
+
+export default class WebApp extends App {
+
+    public get parentElement(): HTMLElement {
+        return document.body;
+    }
+
+    private mRoot: any;
+    public get root(): any {
+        return this.mRoot;
+    }
+
+    public set root(v: any) {
+        const old = this.mRoot;
+        if (old) {
+            old.dispose();
+        }
+        this.mRoot = v;
+        if (!v) {
+            return;
+        }
+        const pe = this.parentElement;
+        const de: HTMLElement[] = Array.from(pe.children) as HTMLElement[];
+        for (const iterator of de) {
+            iterator.remove();
+        }
+        pe.appendChild(v.element);
+    }
+
+    public get theme(): AtomStyleSheet {
+        return this.get(AtomStyleSheet);
+    }
+
+    public set theme(v: AtomStyleSheet) {
+        this.put(AtomTheme, v);
+        this.put(AtomStyleSheet, v);
+    }
+
+    private mContextId: number;
+    public get contextId(): string {
+        // let us set contextId
+        this.mContextId ??=  parseInt((this.url.hash.contextId || "0").toString(), 10);
+        if (!this.mContextId) {
+            //  create new context Id in session...
+            for (let index = 0; index < 100; index++) {
+                const cid = `contextId${index}`;
+                const cidData = sessionStorage.getItem(`contextId${index}`);
+                if (!cidData) {
+                    this.mContextId = index;
+                    sessionStorage.setItem(cid, cid);
+                    this.url.hash.contextId = index;
+                    this.syncUrl();
+                    break;
+                }
+            }
+        }
+        return `contextId_${this.mContextId}`;
+    }
+
+    private hashUpdater = new AtomOnce();
+
+    private styleElement: HTMLElement;
+
+    constructor() {
+        super();
+
+        this.url = new AtomUri(location.href);
+
+        this.put(NavigationService, this.resolve(WindowService));
+
+        this.put(WebApp, this);
+
+        this.put(BusyIndicatorService, this.resolve(WebBusyIndicatorService));
+
+        ServiceCollection.instance.registerSingleton(AtomStyleSheet, (sp) => sp.resolve(AtomTheme));
+
+        window.addEventListener("hashchange", () => {
+            this.hashUpdater.run(() => {
+                this.url = new AtomUri(location.href);
+            });
+        });
+
+        // following must be done automatically by the user as we may need different and newer version
+        // // registering font awesome
+        // this.installStyleSheet("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.9.0/css/all.css");
+        // this.installStyleSheet({
+        //     href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
+        //     integrity: "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
+        //     crossOrigin: "anonymous"
+        // });
+    }
+
+    public updateDefaultStyle(textContent: string) {
+        if (this.styleElement) {
+            if (this.styleElement.textContent === textContent) {
+                return;
+            }
+        }
+        const ss = document.createElement("style");
+
+        ss.textContent = textContent;
+        if (this.styleElement) {
+            this.styleElement.remove();
+        }
+        document.head.appendChild(ss);
+        this.styleElement = ss;
+    }
+
+    /**
+     * Do not use this method
+     */
+    public syncUrl(): void {
+        this.hashUpdater.run(() => {
+            const currentUrl = new AtomUri(location.href);
+            const sourceHash = this.url.hash;
+            const keyValues: Array<{ key: string, value: any}> = [];
+            let modified: boolean = false;
+            for (const key in sourceHash) {
+                if (/^\_\$\_/.test(key)) {
+                    continue;
+                }
+                if (sourceHash.hasOwnProperty(key)) {
+                    const element = sourceHash[key];
+                    const cv = currentUrl.hash[key];
+                    if (element !== undefined) {
+                        keyValues.push({ key, value: element });
+                    }
+                    if (cv === element) {
+                        continue;
+                    }
+                    modified = true;
+                }
+            }
+            if (!modified) {
+                return;
+            }
+            const hash = keyValues.map((s) => `${s.key}=${encodeURIComponent(s.value)}`).join("&");
+            location.hash = hash;
+        });
+    }
+
+    protected invokeReady(): void {
+        if (document.readyState === "complete") {
+            super.invokeReady();
+            return;
+        }
+        document.addEventListener("readystatechange", (e) => {
+            super.invokeReady();
+        });
+    }
+
+}
+
+declare global {
+    // tslint:disable-next-line: interface-name
+    interface Window {
+        // tslint:disable-next-line: ban-types
+        CustomEvent?: Function;
+    }
+}
+
+// tslint:disable-next-line: only-arrow-functions
+(function() {
+
+    if ( typeof window.CustomEvent === "function" ) { return false; }
+    function CustomEvent( event, params ) {
+        params = params || { bubbles: false, cancelable: false, detail: null };
+        const evt = document.createEvent( "CustomEvent" );
+        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+        return evt;
+    }
+    (window as any).CustomEvent = CustomEvent;
+  })();

package/node_modules/@web-atoms/core/src/web/controls/AtomAlertWindow.tsx

@@ -0,0 +1,111 @@
+import { App } from "../../App";
+import Bind from "../../core/Bind";
+import { BindableProperty } from "../../core/BindableProperty";
+import FormattedString from "../../core/FormattedString";
+import XNode from "../../core/XNode";
+import { Inject } from "../../di/Inject";
+import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel";
+import MarkdownService from "../services/MarkdownService";
+import AtomAlertWindowStyle from "../styles/AtomAlertWindowStyle";
+import { AtomControl } from "./AtomControl";
+import { AtomWindow } from "./AtomWindow";
+
+export default class AtomAlertWindow extends AtomWindow {
+
+    public viewModel: AtomAlertViewModel;
+
+    protected create(): void {
+        this.defaultControlStyle =  AtomAlertWindowStyle ;
+        this.viewModel = this.resolve(AtomAlertViewModel);
+
+        // this.windowTemplate = AtomAlertWindowTemplate;
+        // this.commandTemplate =  AtomAlertWindowCommandBar;
+        // this.bind(this.element, "title", [["viewModel", "title"]]);
+
+        this.render(<AtomWindow
+            title={Bind.oneWay(() => this.viewModel.title)}>
+            <AtomWindow.windowTemplate>
+                <div formattedText={Bind.oneWay(() => this.viewModel.message)}></div>
+            </AtomWindow.windowTemplate>
+            <AtomWindow.commandTemplate>
+                <div>
+                    <button
+                        class="yes-button"
+                        styleDisplay={Bind.oneWay(() => this.viewModel.okTitle ? "" : "none")}
+                        text={Bind.oneWay(() => this.viewModel.okTitle)}
+                        eventClick={() => this.viewModel.onOkClicked()}/>
+                    <button
+                        class="no-button"
+                        styleMarginBottom={Bind.oneWay(() => this.viewModel.cancelTitle ? "0" : "10px")}
+                        styleDisplay={Bind.oneWay(() => this.viewModel.cancelTitle ? "" : "none")}
+                        text={Bind.oneWay(() => this.viewModel.cancelTitle)}
+                        eventClick={() => this.viewModel.onCancelClicked()}/>
+                </div>
+            </AtomWindow.commandTemplate>
+        </AtomWindow>);
+    }
+}
+
+// class AtomAlertWindowTemplate extends AtomControl {
+
+//     protected create(): void {
+//         const div = document.createElement("div");
+
+//         this.append(div);
+
+//         this.bind(div, "formattedText", [["viewModel", "message"]]);
+
+//     }
+// }
+
+// class AtomAlertWindowCommandBar extends AtomControl {
+
+//     protected create(): void {
+
+//         const okButton = document.createElement("button");
+
+//         const cancelButton = document.createElement("button");
+//         this.append(okButton);
+//         this.append(cancelButton);
+//         this.setPrimitiveValue(okButton, "class", "yes-button" );
+//         this.setPrimitiveValue(cancelButton, "class", "no-button" );
+
+//         this.bind(okButton, "text", [["viewModel", "okTitle"]]);
+//         this.bind(cancelButton, "text", [["viewModel", "cancelTitle"]]);
+
+//         this.bind(okButton, "styleDisplay", [["viewModel", "okTitle"]], false, (v) => v ? "" : "none");
+//         this.bind(okButton, "styleMarginBottom", [["viewModel", "cancelTitle"]], false, (v) => v ? "0" : "10px");
+//         this.bind(cancelButton, "styleDisplay", [["viewModel", "cancelTitle"]], false, (v) => v ? "" : "none");
+
+//         this.bindEvent(okButton, "click", (e) => {
+//             this.viewModel.onOkClicked();
+//         });
+
+//         this.bindEvent(cancelButton, "click", (e) => {
+
+//             this.viewModel.onCancelClicked();
+//         });
+//     }
+// }
+class AtomAlertViewModel extends AtomWindowViewModel {
+
+    @BindableProperty
+    public title: string;
+
+    @BindableProperty
+    public message: string;
+
+    @BindableProperty
+    public okTitle: string;
+
+    @BindableProperty
+    public cancelTitle: string;
+
+    public onOkClicked(): void {
+        this.close(true);
+    }
+
+    public onCancelClicked(): void {
+        this.cancel();
+    }
+}