@social-mail/social-mail-hosted-web 1.2.18 → 1.2.21

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

@@ -12,6 +12,9 @@ export class Variable {
 
     public readonly optional: boolean;
 
+    public prefix = "";
+    public suffix = "";
+
     public get regex() {
         if (this.catchAll) {
             return `(/(?<${this.variable}>.+)?)?`;
@@ -19,7 +22,7 @@ export class Variable {
         if (this.optional) {
             return `(/?(?<${this.variable}>[^\\/]+))?`;
         }
-        return `/(?<${this.variable}>[^\\/]+)`;
+        return `/${ StringHelper.escapeRegExp(this.prefix)}(?<${this.variable}>[^\\/]{1,500})${ StringHelper.escapeRegExp(this.suffix)}`;
     }
 
     constructor(public readonly variable: string, public readonly name?: string) {
@@ -118,19 +121,42 @@ export default class Route {
             if (regex.length > 2) {
                 this.substitutions.push("/");
             }
-            if (!iterator.startsWith("{")) {
+
+            const match = /\{(\*?[\p{L}:]{1,50}\??)\}/u.exec(iterator);
+
+            if (!match) {
                 this.substitutions.push(iterator);
                 regex += StringHelper.escapeRegExp("/");
                 regex += StringHelper.escapeRegExp(iterator);
                 continue;
             }
 
-            if (!iterator.endsWith("}")) {
-                throw new Error("invalid route, missing end curly brace");
-            }
+            const start = match.index;
+            const index = match[0].length;
+            const name = match[1];
+
+            const prefix = iterator.substring(0, start);
+            const suffix = iterator.substring(index + 1);
+
+            // if (start === -1) {
+            //     this.substitutions.push(iterator);
+            //     regex += StringHelper.escapeRegExp("/");
+            //     regex += StringHelper.escapeRegExp(iterator);
+            //     continue;
+            // }
+
+            // const end = iterator.indexOf("}");
+            // if (end === -1) {
+            //     throw new Error("invalid route, missing end curly brace");
+            // }
 
-            const v = new Variable(iterator.substring(1, iterator.length - 1));
+            // if (!iterator.endsWith("}")) {
+            //     throw new Error("invalid route, missing end curly brace");
+            // }
 
+            const v = new Variable(name);
+            v.prefix = prefix;
+            v.suffix = suffix;
             regex += v.regex;
 
             this.variables.push(v);

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

@@ -178,7 +178,7 @@ Object.values ??= function (t) {
     return r;
 }
 
-Array.prototype.flat ??= function (depth = 1) {
+const flat = Array.prototype.flat ?? function (depth = 1) {
     const r = [];
     const flat = depth > 0;
     const nestDepth = depth - 1;
@@ -195,10 +195,9 @@ Array.prototype.flat ??= function (depth = 1) {
         r.push(iterator);
     }
     return r;
-}
+};
 
-// tslint:disable-next-line
-Array.prototype["groupBy"] = <any> function (keySelector: any) {
+const groupBy = Array.prototype.groupBy ?? function (keySelector: any) {
     const map = new Map();
     const groups = [];
     for (const iterator of this) {
@@ -216,6 +215,20 @@ Array.prototype["groupBy"] = <any> function (keySelector: any) {
     return groups;
 };
 
+Object.defineProperties(Array.prototype, {
+    flat: {
+        enumerable: false,
+        value: flat,
+        configurable: true
+    },
+    groupBy: {
+        enumerable: false,
+        value: groupBy,
+        configurable: true
+    }
+})
+
+
 export interface IUMDClass {
     debug: boolean;
     resolveViewClassAsync(path: string): Promise<any>;

package/node_modules/@web-atoms/core/src/index.d.ts

@@ -13,6 +13,11 @@ declare module "*.jpeg" {
     export default value;
 }
 
+declare module "*.less" {
+    const value: string;
+    export default value;
+}
+
 declare module "*.gif" {
     const value: string;
     export default value;

package/node_modules/@web-atoms/core/src/services/FetchBuilder.ts

@@ -1,24 +1,23 @@
 import { CancelToken } from "../core/types";
-import JsonError from "./http/JsonError";
-
-export function buildUrl(strings: TemplateStringsArray, ... p: any[]) {
-    let r = "";
-    for (let index = 0; index < strings.length; index++) {
-        const element = strings[index];
-        r += element;
-        if(index < p.length) {
-            r += encodeURIComponent(p[index]);
-        }
-    }
-    return r;
-}
 
-type IBuilder = (r: Request) => Request;
-
-type IRequest = { url?: string } & RequestInit;
+type IRequest = { jsonPostProcessor?: (x) => any, dispatcher?: any, fetchProxy?: any, url?: string, log?: (...a: any[]) => void, logError?: (...a: any[]) => void } & RequestInit;
 
 export default class FetchBuilder {
 
+    static JsonError: typeof JsonError;
+    
+    static buildUrl(strings: TemplateStringsArray, ... p: any[]) {
+        let r = "";
+        for (let index = 0; index < strings.length; index++) {
+            const element = strings[index];
+            r += element;
+            if(index < p.length) {
+                r += encodeURIComponent(p[index]);
+            }
+        }
+        return r;
+    }
+    
     public static get(url) {
         return this.method(url, "GET");
     }
@@ -35,6 +34,14 @@ export default class FetchBuilder {
         return this.method(url, "DELETE");
     }
 
+    public static url(url: string) {
+        return this.method(url, "GET");
+    }
+
+    public static header(name: string, value: string) {
+        return new FetchBuilder({ headers: { url: "", method: "POST", [name]: value }});
+    }
+
     public static method(url, method: string) {
         return new FetchBuilder({ url, method });
     }
@@ -42,18 +49,59 @@ export default class FetchBuilder {
     private constructor(private readonly request: IRequest) {
     }
 
-    public cancelToken(cancelToken: CancelToken) {
-        const ac = new AbortController();
-        cancelToken.registerForCancel(() => ac.abort());
-        return this.signal(ac.signal);
+    public log(logger: (...a: any[]) => void) {
+        return this.append({ log: logger });
+    }
+
+    public logWhenFailed(logger: (...a: any[]) => void) {
+        return this.append({ logError: logger });
+    }
+
+    public get(url) {
+        return this.method(url, "GET");
     }
 
+    public put(url) {
+        return this.method(url, "PUT");
+    }
+
+    public post(url) {
+        return this.method(url, "POST");
+    }
+
+    public delete(url) {
+        return this.method(url, "DELETE");
+    }
+
+    public method(url: string, method: string ) {
+        return this.append({ url, method });
+    }
+
+    // public cancelToken(cancelToken: CancelToken) {
+    //     const ac = new AbortController();
+    //     cancelToken.registerForCancel(() => ac.abort());
+    //     return this.signal(ac.signal);
+    // }
+
     public signal(signal: AbortSignal) {
+        if (!signal) {
+            return this;
+        }
         return this.append({
             signal
         });
     }
 
+    public cancelToken(ct: CancelToken) {
+        if (!ct) {
+            return this;
+        }
+        const ac = new AbortController();
+        const signal = ac.signal;
+        ct.registerForCancel(() => ac.abort());
+        return this.signal(signal);
+    }
+
     public form(name: string, value: string): FetchBuilder;
     public form(name: string, value: Blob, fileName: string): FetchBuilder;
     public form(name: string, value: string | Blob, fileName?: string ): FetchBuilder {
@@ -113,54 +161,144 @@ export default class FetchBuilder {
         return this.append({ url });
     }
 
-    public async responseAsText(ensureSuccess = true) {
-        const r = await this.response();
-        if (ensureSuccess) {
-            await this.ensureSuccess(r);
-        }
-        return await r.text();
+    public async asText(ensureSuccess = true) {
+        const { result } = await this.asTextResponse(ensureSuccess);
+        return result;
     }
 
-    public async responseAsBlob(ensureSuccess = true) {
-        const r = await this.response();
-        if (ensureSuccess) {
-            await this.ensureSuccess(r);
-        }
-        return await r.blob();
+    public async asBlob(ensureSuccess = true) {
+        const { result } = await this.asBlobResponse(ensureSuccess);
+        return result;
     }
 
-    public async responseAsJson<T>(ensureSuccess = true) {
-        const r = await this.response();
-        if (ensureSuccess) {
-            await this.ensureSuccess(r);
-        }
-        return (await r.json()) as T;
+    public async asJson<T = any>(ensureSuccess = true) {
+        const { result } = await this.asJsonResponse<T>(ensureSuccess);
+        return result;
     }
 
-    public response() {
-        return fetch(this.request.url, this.request);
+    public jsonPostProcessor(jsonPostProcessor: (x) => any) {
+        return this.append({ jsonPostProcessor });
     }
 
-    private async ensureSuccess(r: Response) {
-        if (r.status <= 300) {
-            return;
-        }
-        // is json...
-        const type = r.headers.get("content-type");
-        if (/\/json/i.test(type)) {
-            const json = await r.json();
-            throw new JsonError(json.title
-            ?? json.detail
-            ?? json.message
-            ?? json.exceptionMessage
-            ?? "Json Server Error", json);
+    public async asJsonResponse<T = any>(ensureSuccess = true) {
+        return this.execute<T>(ensureSuccess, async (x, jsonPostProcessor) => {
+            if(!/json/i.test(x.headers.get("content-type"))) {
+                throw new Error(`Failed to parse json from ${this.request.url}\n${await x.text()}`);
+            }
+            if (jsonPostProcessor) {
+                return x.json().then(jsonPostProcessor) as T;
+            }
+            return x.json() as T;
+        });
+    }
+
+    public async asTextResponse(ensureSuccess = true) {
+        return this.execute(ensureSuccess, (x) => x.text());
+    }
+
+    public asBlobResponse(ensureSuccess = true) {
+        return this.execute(ensureSuccess, (x) => x.blob());
+    }
+
+    public dispatcher(dispatcher: any) {
+        return this.append({ dispatcher });
+    }
+
+    public withFetchProxy(fetchProxy: any) {
+        return this.append({ fetchProxy });
+    }
+
+    public async execute<T>(ensureSuccess = true,
+        postProcessor: (r: Response, next?: (data) => any) => T | Promise<T>): Promise<{ result: T, headers: any, status: number }> {
+
+        let { log, logError } = this.request;
+        try {
+
+            const { headers, fetchProxy, jsonPostProcessor } = this.request;
+            const r = await (fetchProxy ?? fetch)(this.request.url, this.request);
+            if (ensureSuccess) {
+                if (r.status > 300) {
+                    log = logError;
+                    log?.(`fetch: ${this.request.method ?? "GET"} ${this.request.url}`);
+                    if (log && headers) {
+                        for (const key in headers) {
+                            if (headers.hasOwnProperty(key)) {
+                                log?.(`${key}: ${headers[key]}`);
+                            }
+                        }
+                    }
+                    log?.(`${r.status} ${r.statusText || "Http Error"}`);
+                    const type = r.headers.get("content-type");
+                    if (/\/json/i.test(type)) {
+                        const json: any = await r.json();
+                        log?.(json);
+                        const message = json.title
+                        ?? json.detail
+                        ?? json.message
+                        ?? json.exceptionMessage
+                        ?? "Json Server Error";
+                        log = null;
+                        logError = null;
+                        throw new JsonError(message, json);
+                    }
+                    const text = await r.text();
+                    log?.(text);
+                    log = null;
+                    logError = null;
+                    throw new Error(`Fetch failed with error ${r.status} for ${this.request.url}\n${text}`);
+                }
+            }
+            log?.(`${this.request.method ?? "GET"} ${this.request.url}`);
+            if (log && headers) {
+                for (const key in headers) {
+                    if (headers.hasOwnProperty(key)) {
+                        log?.(`${key}: ${headers[key]}`);
+                    }
+                }
+            }
+            const result = await postProcessor(r, jsonPostProcessor);
+            if (log) {
+                log(`${r.status} ${r.statusText || "OK"}`)
+                log(result);
+            }
+            return { result, headers: r.headers, status: r.status };
+        } catch (error) {
+            log?.(error);
+            throw error;
         }
-        const text = await r.text();
-        throw new Error(`Failed for ${this.request.url}\n${text}`);
     }
 
+
     private append(r: IRequest) {
-        return new FetchBuilder({ ... this.request, ... r});
+
+        // we will try to merge url here..
+        let { url } = this.request;
+        const { url: newUrl } = r;
+        if (newUrl) {
+            if (!url) {
+                url = newUrl;
+            } else {
+                if (/^https?\:\/\//i.test(newUrl)) {
+                    url = newUrl;
+                } else {
+                    url = (new URL(newUrl, url)).toString();
+                }
+            }
+        }
+
+        return new FetchBuilder({
+            ... this.request,
+            ... r,
+            url
+        });
+    }
+
+}
+
+class JsonError extends Error {
+    constructor(message, public readonly json) {
+        super(message);
     }
+}
 
-}
+FetchBuilder.JsonError = JsonError;

package/node_modules/@web-atoms/core/src/style/styled.ts

@@ -42,29 +42,36 @@ let id = 1;
 
 const nextId = () => `styled-r${id++}`;
 
-const globalLow = document.createElement("meta");
-globalLow.name = "global-low-style";
-document.head.appendChild(globalLow);
+let first = document.head.firstElementChild;
 
-const global = document.createElement("meta");
-global.name = "global-style";
-document.head.appendChild(global);
+const markers = {
 
-const globalHigh = document.createElement("meta");
-globalHigh.name = "global-high-style";
-document.head.appendChild(globalHigh);
+};
 
-const localLow = document.createElement("meta");
-localLow.name = "local-low-style";
-document.head.appendChild(localLow);
+const addMarker = (name) => {
+    let m = document.head.querySelector(`meta[name="${name}"]`) as HTMLMetaElement;
+    if (m) {
+        first = m;
+        return markers[name] = m;
+    }
+    m = document.createElement("meta");
+    m.name = name;
+    if (first) {
+        first.insertAdjacentElement("afterend", m);
+    } else {
+        document.head.insertAdjacentElement("afterbegin", m);
+    }
+    first = m;
+    return markers[name] = m;
+}
 
-const local = document.createElement("meta");
-local.name = "local-style";
-document.head.appendChild(local);
+addMarker("global-low-marker");
+addMarker("global-marker");
+addMarker("global-high-marker");
 
-const localHigh = document.createElement("meta");
-localHigh.name = "local-high-style";
-document.head.appendChild(localHigh);
+addMarker("local-low-marker");
+addMarker("local-marker");
+addMarker("local-high-marker");
 
 // export type IStyleFragment = Partial<StyleFragment>;
 
@@ -168,14 +175,14 @@ class StyleFragment {
         }
         switch(this.order) {
             case "low":
-                document.head.insertBefore(style, globalLow);
+                document.head.insertBefore(style, markers["global-low-marker"]);
                 break;
             case "default":
             case "medium":
-                document.head.insertBefore(style, global);
+                document.head.insertBefore(style, markers["global-marker"]);
                 break;
             case "high":
-                document.head.insertBefore(style, globalHigh);
+                document.head.insertBefore(style, markers["global-high-marker"]);
                 break;
         }
         style.id = id;
@@ -198,14 +205,14 @@ class StyleFragment {
         }
         switch(this.order) {
             case "low":
-                document.head.insertBefore(style, localLow);
+                document.head.insertBefore(style, markers["local-low-marker"]);
                 break;
             case "default":
             case "medium":
-                document.head.insertBefore(style, local);
+                document.head.insertBefore(style, markers["local-marker"]);
                 break;
             case "high":
-                document.head.insertBefore(style, localHigh);
+                document.head.insertBefore(style, markers["local-high-marker"]);
                 break;
         }
         return selector;
@@ -266,3 +273,5 @@ const styled = {
 };
 
 export default styled;
+
+export const svgAsCssDataUrl = (text: string) => `url(${JSON.stringify(`data:image/svg+xml,${text}`)})`;

package/node_modules/@web-atoms/core/src/web/controls/AtomControl.ts

@@ -247,7 +247,8 @@ ElementValueSetters["on-create"] = ElementValueSetters.onCreate;
 
 let propertyId = 1;
 
-export type PropertyRegistration = ((value) => ({[key: string]: any})) & {
+export interface PropertyRegistration<T> {
+    (value: T): ({[key: string]: T});
     property: string;
 };
 
@@ -268,13 +269,13 @@ export class AtomControl extends AtomComponent {
         }
     }
 
-    public static registerProperty(
+    public static registerProperty<T = any>(
         attributeName: string,
         attributeValue: string,
-        setter: (ctrl: AtomControl, element: HTMLElement, value: any) => void): PropertyRegistration {
+        setter: (ctrl: AtomControl, element: HTMLElement, value: T) => void): PropertyRegistration<T> {
         const setterSymbol = `${attributeName}_${attributeValue}_${propertyId++}`;
         ElementValueSetters[setterSymbol] = setter;
-        function setterFx(v) {
+        function setterFx(v: T) {
             return {
                 [setterSymbol]: v
             };
@@ -283,7 +284,7 @@ export class AtomControl extends AtomComponent {
             return setterSymbol;
         };
         setterFx.property = setterSymbol;
-        return setterFx;
+        return setterFx as any;
     }
 
     @BindableProperty
@@ -478,8 +479,12 @@ export class AtomControl extends AtomComponent {
             return;
         }
 
-        if (name.startsWith("aria-")) {
-            element.setAttribute(name, value);
+        if (name.startsWith("attr-")) {
+            if (value === null) {
+                element.removeAttribute(name.substring(5));
+                return;
+            }
+            element.setAttribute(name.substring(5), value);
         } else {
             element[name] = value;
         }
@@ -673,8 +678,12 @@ const getSelection = () => {
     return "";
 };
 
+const body = document.body;
+const html = body.parentElement;
+
 // any cancellation must happen at body level...
 window.addEventListener("click", (e) => {
+
     if (e.defaultPrevented) {
         return;
     }
@@ -685,9 +694,11 @@ window.addEventListener("click", (e) => {
 
     const originalTarget = e.target as HTMLElement;
     let start = originalTarget;
+    if (originalTarget === html) {
+        return;
+    }
     let clickEvent;
-    const end = document.body;
-    while (start && start !== end ) {
+    while (start && start !== body ) {
         clickEvent ||= start.getAttribute("data-click-event");
         if (start.tagName === "A") {
             if(!clickEvent) {

package/node_modules/@web-atoms/core/src/web/core/HtmlNode.tsx

@@ -123,7 +123,12 @@ function render(node: XNode, root: HTMLElement): void {
                     continue;
                 }
                 if (key.length > 5 && /^style/.test(key)) {
-                    root.style[fromHyphenToCamel(key.substring(5))] = element;
+                    // root.style[fromHyphenToCamel(key.substring(6))] = element;
+                    if (/^style\-/.test(key)) {
+                        root.style.setProperty(key.substring(6), element);
+                    } else {
+                        root.style[fromHyphenToCamel(key.substring(6))] = element;
+                    }
                     continue;
                 }
                 if (/^data-/i.test(key)) {

package/node_modules/@web-atoms/core/src/web/services/NotifcationPopup.global.less

@@ -0,0 +1,11 @@
+.web-atoms-notification-popup {
+    padding: 5px;
+    font-size: larger;
+    & .error {
+        color: red;
+        border-color: red;
+    }
+    & .warning {
+        background-color: lightyellow;
+    }
+}

package/node_modules/@web-atoms/core/src/web/services/NotificationPopup.tsx

@@ -1,18 +1,9 @@
 import XNode from "../../core/XNode";
-import styled from "../../style/styled";
 import { PopupWindow } from "./PopupService";
 
-const css = styled.css `
-    padding: 5px;
-    font-size: larger;
-    & .error {
-        color: red;
-        border-color: red;
-    }
-    & .warning {
-        background-color: lightyellow;
-    }
-`.installLocal();
+import "./NotifcationPopup.global.less";
+
+const css = "web-atoms-notification-popup";
 
 export default function NotificationPopup({
     message,