@web-atoms/core 2.5.11 → 2.5.13

package/dist-esm/web/controls/AtomControl.js

@@ -0,0 +1,661 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AtomControl = exports.ElementValueSetters = void 0;
+const tslib_1 = require("tslib");
+const AtomBinder_js_1 = require("../../core/AtomBinder.js");
+const AtomComponent_js_1 = require("../../core/AtomComponent.js");
+const BindableProperty_js_1 = require("../../core/BindableProperty.js");
+const Command_js_1 = tslib_1.__importDefault(require("../../core/Command.js"));
+const FormattedString_js_1 = tslib_1.__importDefault(require("../../core/FormattedString.js"));
+const Hacks_js_1 = require("../../core/Hacks.js");
+const WebImage_js_1 = tslib_1.__importDefault(require("../../core/WebImage.js"));
+const XNode_js_1 = tslib_1.__importStar(require("../../core/XNode.js"));
+const TypeKey_js_1 = require("../../di/TypeKey.js");
+const AtomStyle_js_1 = require("../styles/AtomStyle.js");
+const AtomStyleSheet_js_1 = require("../styles/AtomStyleSheet.js");
+const isAtomControl = XNode_js_1.isControl;
+// export { default as WebApp } from "../WebApp.js";
+// if (!AtomBridge.platform) {
+//     AtomBridge.platform = "web";
+//     AtomBridge.instance = new AtomElementBridge();
+// } else {
+//     console.log(`Platform is ${AtomBridge.platform}`);
+// }
+const fromHyphenToCamel = (input) => input.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+if (typeof bridge !== "undefined" && bridge.platform) {
+    throw new Error("AtomControl of Web should not be used with Xamarin Forms");
+}
+const defaultStyleSheets = {};
+function setAttribute(name) {
+    return (ctrl, e, value) => {
+        e.setAttribute(name, value);
+    };
+}
+function setEvent(name) {
+    return (ctrl, e, value) => {
+        ctrl.bindEvent(e, name, value);
+    };
+}
+function setStyle(name, applyUnit) {
+    if (applyUnit) {
+        return (ctrl, e, value) => {
+            if (typeof value === "number") {
+                e.style[name] = value + applyUnit;
+                return;
+            }
+            e.style[name] = value;
+        };
+    }
+    return (ctrl, e, value) => {
+        e.style[name] = value;
+    };
+}
+function disposeChildren(owner, e) {
+    if (!e) {
+        return;
+    }
+    let s = e.firstElementChild;
+    while (s) {
+        const c = s;
+        s = s.nextElementSibling;
+        const ac = c.atomControl;
+        if (ac) {
+            ac.dispose();
+            c.remove();
+            continue;
+        }
+        disposeChildren(owner, c);
+        owner.unbind(c);
+        owner.unbindEvent(c);
+        c.remove();
+    }
+}
+exports.ElementValueSetters = {
+    text(ctrl, e, value) {
+        e.textContent = value;
+    },
+    ["class"](ctrl, e, value) {
+        if (typeof value === "string") {
+            e.className = value;
+            return;
+        }
+        ctrl.setElementClass(e, value, true);
+    },
+    alt: setAttribute("alt"),
+    title: setAttribute("title"),
+    href: setAttribute("href"),
+    target: setAttribute("target"),
+    style: setAttribute("style"),
+    styleLeft: setStyle("left", "px"),
+    styleTop: setStyle("top", "px"),
+    styleBottom: setStyle("bottom", "px"),
+    styleRight: setStyle("right", "px"),
+    styleWidth: setStyle("width", "px"),
+    styleHeight: setStyle("height", "px"),
+    stylePosition: setStyle("position"),
+    styleFontSize: setStyle("fontSize", "px"),
+    styleFontFamily: setStyle("fontFamily"),
+    styleFontWeight: setStyle("fontWeight"),
+    styleBorder: setStyle("border"),
+    styleBorderWidth: setStyle("borderWidth", "px"),
+    styleBorderColor: setStyle("borderColor"),
+    styleColor: setStyle("color"),
+    styleBackgroundColor: setStyle("backgroundColor"),
+    dir: setAttribute("dir"),
+    name: setAttribute("name"),
+    tabIndex: setAttribute("tabIndex"),
+    contentEditable: setAttribute("contentEditable"),
+    eventClick: setEvent("click"),
+    eventKeydown: setEvent("keydown"),
+    eventKeyup: setEvent("keyup"),
+    eventKeypress: setEvent("keypress"),
+    eventMousedown: setEvent("mousedown"),
+    eventMouseup: setEvent("mouseup"),
+    eventMousemove: setEvent("mousemove"),
+    src(ctrl, e, value) {
+        if (value && /^http\:/i.test(value)) {
+            e.src = value.substring(5);
+            return;
+        }
+        e.src = value;
+    },
+    styleClass(ctrl, e, value) {
+        ctrl.setElementClass(e, value);
+    },
+    styleDisplay(ctrl, e, value) {
+        if (typeof value === "boolean") {
+            e.style.display = value ? "" : "none";
+            return;
+        }
+        e.style.display = value;
+    },
+    formattedText(ctrl, e, value) {
+        if (value instanceof FormattedString_js_1.default) {
+            value.applyTo(ctrl.app, e);
+        }
+        else {
+            e.textContent = (value || "").toString();
+        }
+    },
+    disabled(ctrl, e, value) {
+        if (value) {
+            e.setAttribute("disabled", "");
+            return;
+        }
+        e.removeAttribute("disabled");
+    },
+    autofocus(ctrl, element, value) {
+        if (value === false) {
+            return;
+        }
+        ctrl.app.callLater(() => {
+            const ie = element;
+            if (ie) {
+                setTimeout(() => requestAnimationFrame(() => ie.focus()), 100);
+            }
+        });
+    },
+    autocomplete(ctrl, element, value) {
+        ctrl.app.callLater(() => {
+            element.autocomplete = value;
+        });
+    },
+    onCreate(ctrl, element, value) {
+        value(ctrl, element);
+    },
+    watch(ctrl, element, value) {
+        setTimeout((c1, e1, v1) => {
+            e1.dispatchEvent(new CustomEvent("watch", {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    control: c1,
+                    value: v1
+                }
+            }));
+        }, 1, ctrl, element, value);
+    },
+    ariaLabel(ctrl, e, value) {
+        if (value === null) {
+            e.removeAttribute("aria-label");
+            return;
+        }
+        if (typeof value === "object") {
+            value = JSON.stringify(value);
+        }
+        if (typeof value !== "string") {
+            value = value.toString();
+        }
+        e.setAttribute("aria-label", value);
+    },
+    ariaPlaceholder(ctrl, e, value) {
+        if (value === null) {
+            e.removeAttribute("aria-placeholder");
+            return;
+        }
+        if (typeof value === "object") {
+            value = JSON.stringify(value);
+        }
+        if (typeof value !== "string") {
+            value = value.toString();
+        }
+        e.setAttribute("aria-placeholder", value);
+    }
+};
+exports.ElementValueSetters["aria-label"] = exports.ElementValueSetters.ariaLabel;
+exports.ElementValueSetters["aria-placeholder"] = exports.ElementValueSetters.ariaPlaceholder;
+exports.ElementValueSetters["style-display"] = exports.ElementValueSetters.styleDisplay;
+exports.ElementValueSetters["style-left"] = exports.ElementValueSetters.styleLeft;
+exports.ElementValueSetters["style-top"] = exports.ElementValueSetters.styleTop;
+exports.ElementValueSetters["style-bottom"] = exports.ElementValueSetters.styleBottom;
+exports.ElementValueSetters["style-right"] = exports.ElementValueSetters.styleRight;
+exports.ElementValueSetters["style-width"] = exports.ElementValueSetters.styleWidth;
+exports.ElementValueSetters["style-height"] = exports.ElementValueSetters.styleHeight;
+exports.ElementValueSetters["style-position"] = exports.ElementValueSetters.stylePosition;
+exports.ElementValueSetters["style-font-size"] = exports.ElementValueSetters.styleFontSize;
+exports.ElementValueSetters["style-font-family"] = exports.ElementValueSetters.styleFontFamily;
+exports.ElementValueSetters["style-font-weight"] = exports.ElementValueSetters.styleFontWeight;
+exports.ElementValueSetters["style-border"] = exports.ElementValueSetters.styleBorder;
+exports.ElementValueSetters["style-border-width"] = exports.ElementValueSetters.styleBorderWidth;
+exports.ElementValueSetters["style-border-color"] = exports.ElementValueSetters.styleBorderColor;
+exports.ElementValueSetters["style-color"] = exports.ElementValueSetters.styleColor;
+exports.ElementValueSetters["style-background-color"] = exports.ElementValueSetters.styleBackgroundColor;
+exports.ElementValueSetters["on-create"] = exports.ElementValueSetters.onCreate;
+let propertyId = 1;
+;
+/**
+ * AtomControl class represents UI Component for a web browser.
+ */
+class AtomControl extends AtomComponent_js_1.AtomComponent {
+    static from(e1) {
+        let e = e1;
+        while (e) {
+            const { atomControl } = e;
+            if (atomControl) {
+                return atomControl;
+            }
+            e = e._logicalParent ?? e.parentElement;
+        }
+    }
+    static registerProperty(attributeName, attributeValue, setter) {
+        const setterSymbol = `${attributeName}_${attributeValue}_${propertyId++}`;
+        exports.ElementValueSetters[setterSymbol] = setter;
+        function setterFx(v) {
+            return {
+                [setterSymbol]: v
+            };
+        }
+        setterFx.toString = () => {
+            return setterSymbol;
+        };
+        setterFx.property = setterSymbol;
+        return setterFx;
+    }
+    get controlStyle() {
+        if (this.mControlStyle === undefined) {
+            const key = TypeKey_js_1.TypeKey.getName(this.defaultControlStyle || this.constructor);
+            this.mControlStyle = defaultStyleSheets[key];
+            if (this.mControlStyle) {
+                return this.mControlStyle;
+            }
+            if (this.defaultControlStyle) {
+                this.mControlStyle = defaultStyleSheets[key] ||
+                    (defaultStyleSheets[key] = this.theme.createNamedStyle(this.defaultControlStyle, key));
+            }
+            this.mControlStyle = this.mControlStyle || null;
+        }
+        return this.mControlStyle;
+    }
+    set controlStyle(v) {
+        if (v instanceof AtomStyle_js_1.AtomStyle) {
+            this.mControlStyle = v;
+        }
+        else {
+            const key = TypeKey_js_1.TypeKey.getName(v);
+            this.mControlStyle = defaultStyleSheets[key] ||
+                (defaultStyleSheets[key] = this.theme.createNamedStyle(v, key));
+        }
+        AtomBinder_js_1.AtomBinder.refreshValue(this, "controlStyle");
+        this.invalidate();
+    }
+    /**
+     * Represents associated AtomStyleSheet with this visual hierarchy. AtomStyleSheet is
+     * inherited by default.
+     */
+    get theme() {
+        return this.mTheme ||
+            this.mCachedTheme ||
+            (this.mCachedTheme = (this.parent ? this.parent.theme : this.app.resolve(AtomStyleSheet_js_1.AtomStyleSheet, false, null)));
+    }
+    set theme(v) {
+        this.mTheme = v;
+        (0, Hacks_js_1.refreshInherited)(this, "theme");
+    }
+    /**
+     * Gets Parent AtomControl of this control.
+     */
+    get parent() {
+        let e = this.element?._logicalParent || this.element?.parentElement;
+        if (!e) {
+            return null;
+        }
+        while (e) {
+            const ac = e.atomControl;
+            if (ac) {
+                return ac;
+            }
+            e = e._logicalParent || e.parentElement;
+        }
+    }
+    get factory() {
+        return AtomControl;
+    }
+    constructor(app, e = document.createElement("div")) {
+        super(app, e);
+    }
+    onPropertyChanged(name) {
+        super.onPropertyChanged(name);
+        switch (name) {
+            case "theme":
+                this.mCachedTheme = null;
+                AtomBinder_js_1.AtomBinder.refreshValue(this, "style");
+                break;
+            case "renderer":
+                this.rendererChanged();
+                break;
+        }
+    }
+    atomParent(e) {
+        while (e) {
+            const ac = e.atomControl;
+            if (ac) {
+                return ac;
+            }
+            e = e._logicalParent ?? e.parentElement;
+        }
+    }
+    append(element) {
+        if (element instanceof AtomControl) {
+            this.element.appendChild(element.element);
+        }
+        else {
+            this.element.appendChild(element);
+        }
+        return this;
+    }
+    updateSize() {
+        this.onUpdateSize();
+        (0, Hacks_js_1.visitDescendents)(this.element, (e, ac) => {
+            if (ac) {
+                ac.updateSize();
+                return false;
+            }
+            return true;
+        });
+    }
+    rendererChanged() {
+        disposeChildren(this, this.element);
+        this.element.innerHTML = "";
+        const r = this.renderer;
+        if (!r) {
+            return;
+        }
+        delete this.render;
+        this.render(r);
+    }
+    preCreate() {
+        // if (!this.element) {
+        //     this.element = document.createElement("div");
+        // }
+    }
+    setElementValue(element, name, value) {
+        if (value === undefined) {
+            return;
+        }
+        const setter = exports.ElementValueSetters[name];
+        if (setter !== void 0) {
+            setter(this, element, value);
+            return;
+        }
+        if (/^(data|aria)\-/.test(name)) {
+            if (value === null) {
+                element.removeAttribute(name);
+                return;
+            }
+            if (typeof value === "object") {
+                value = JSON.stringify(value);
+            }
+            if (typeof value !== "string") {
+                value = value.toString();
+            }
+            element.setAttribute(name, value);
+            return;
+        }
+        if (/^style/.test(name)) {
+            name = name.substring(5);
+            if (name.startsWith("-")) {
+                name = fromHyphenToCamel(name.substring(1));
+            }
+            else {
+                name = name.charAt(0).toLowerCase() + name.substring(1);
+            }
+            if (value instanceof WebImage_js_1.default) {
+                value = `url(${value})`;
+            }
+            element.style[name] = value;
+            return;
+        }
+        if (/^event/.test(name)) {
+            name = name.substring(5);
+            if (name.startsWith("-")) {
+                name = fromHyphenToCamel(name.substring(1));
+            }
+            else {
+                name = name.charAt(0).toLowerCase() + name.substring(1);
+            }
+            this.bindEvent(element, name, value);
+            return;
+        }
+        if (name.startsWith("attr-")) {
+            if (value === null) {
+                element.removeAttribute(name.substring(5));
+                return;
+            }
+            element.setAttribute(name.substring(5), value);
+        }
+        else {
+            element[name] = value;
+        }
+    }
+    // protected bindElementEvent(element: HTMLElement, name: string, value: any) {
+    //     this.bindEvent(element, name, value);
+    // }
+    setElementClass(element, value, clear) {
+        const s = value;
+        if (s && typeof s === "object") {
+            if (!s.className) {
+                if (clear) {
+                    let sr = "";
+                    for (const key in s) {
+                        if (s.hasOwnProperty(key)) {
+                            const sv = s[key];
+                            if (sv) {
+                                sr += (sr ? (" " + key) : key);
+                            }
+                        }
+                    }
+                    element.className = sr;
+                    return;
+                }
+                for (const key in s) {
+                    if (s.hasOwnProperty(key)) {
+                        const sv = s[key];
+                        if (sv) {
+                            if (!element.classList.contains(key)) {
+                                element.classList.add(key);
+                            }
+                        }
+                        else {
+                            if (element.classList.contains(key)) {
+                                element.classList.remove(key);
+                            }
+                        }
+                    }
+                }
+                return;
+            }
+        }
+        const sv1 = s ? (s.className || s.toString()) : "";
+        element.className = sv1;
+    }
+    onUpdateSize() {
+        // pending !!
+    }
+    removeAllChildren(e) {
+        let child = e.firstElementChild;
+        while (child) {
+            const c = child;
+            child = child.nextElementSibling;
+            const ac = c;
+            if (ac && ac.atomControl) {
+                ac.atomControl.dispose();
+            }
+            else {
+                // remove all children events
+                this.unbindEvent(child);
+                // remove all bindings
+                this.unbind(child);
+            }
+            c.remove();
+        }
+    }
+    createNode(app, e, iterator, creator) {
+        const name = iterator.name;
+        const attributes = iterator.attributes;
+        if (typeof name === "string") {
+            const element = document.createElement(name);
+            if (name === "input") {
+                if (!attributes.autocomplete) {
+                    this.app.callLater(() => {
+                        element.autocomplete = "google-stop";
+                    });
+                }
+            }
+            e?.appendChild(element);
+            this.render(iterator, element, creator);
+            return element;
+        }
+        if (name[isAtomControl]) {
+            const forName = attributes?.for;
+            const ctrl = new (name)(app, forName ? document.createElement(forName) : undefined);
+            const element = ctrl.element;
+            e?.appendChild(element);
+            ctrl.render(iterator, element, creator);
+            return element;
+        }
+        throw new Error(`not implemented create for ${iterator.name}`);
+    }
+    toTemplate(app, iterator, creator) {
+        if (iterator.isTemplate) {
+            return this.toTemplate(app, iterator.children[0], creator);
+        }
+        const name = iterator.name;
+        if (typeof name === "string") {
+            return class Template extends AtomControl {
+                constructor(a = app, e = document.createElement(name)) {
+                    super(a, e);
+                }
+                create() {
+                    super.create();
+                    this.render(iterator, undefined, creator);
+                }
+            };
+        }
+        if (name[isAtomControl]) {
+            const forName = name.attributes?.for;
+            if (forName) {
+                return class Template extends name {
+                    constructor(a = app, e = document.createElement(forName)) {
+                        super(a, e);
+                    }
+                    create() {
+                        super.create();
+                        this.render(iterator, undefined, creator);
+                    }
+                };
+            }
+            return class Template extends name {
+                constructor(a = app, e) {
+                    super(a, e);
+                }
+                create() {
+                    super.create();
+                    this.render(iterator, undefined, creator);
+                }
+            };
+        }
+        throw new Error(`Creating template from ${name} not supported`);
+    }
+    dispatchClickEvent(e, data) {
+        let clickEvent = data.clickEvent;
+        if (!clickEvent) {
+            return;
+        }
+        clickEvent = clickEvent.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        const ce = new CustomEvent(clickEvent, { detail: data, bubbles: true, cancelable: true });
+        e.target.dispatchEvent(ce);
+        if (ce.preventClickEvent) {
+            // ce.preventDefault();
+            e.preventDefault();
+        }
+        /** There is a problem with following method, in hierarchy of nodes,
+         * it will not be possible to know which control should execute it
+         */
+        // if (!ce.defaultPrevented) {
+        //     if (clickEvent === "invokeMethod") {
+        //         const method = data.method;
+        //         const m = this[method] as Function;
+        //         if (m) {
+        //             this.app.runAsync(() => m.call(this, ce));
+        //         }
+        //     }
+        // }
+    }
+}
+exports.AtomControl = AtomControl;
+tslib_1.__decorate([
+    BindableProperty_js_1.BindableProperty,
+    tslib_1.__metadata("design:type", XNode_js_1.default)
+], AtomControl.prototype, "renderer", void 0);
+const getSelection = () => {
+    const sel = window.getSelection();
+    if (sel.rangeCount) {
+        var frag = sel.getRangeAt(0).cloneContents();
+        var el = document.createElement("div");
+        el.appendChild(frag);
+        return el.innerHTML;
+    }
+    return "";
+};
+const body = document.body;
+const html = body.parentElement;
+// any cancellation must happen at body level...
+window.addEventListener("click", (e) => {
+    if (e.defaultPrevented) {
+        return;
+    }
+    if (getSelection()) {
+        return;
+    }
+    const originalTarget = e.target;
+    let start = originalTarget;
+    if (originalTarget === html) {
+        return;
+    }
+    let clickEvent;
+    while (start && start !== body) {
+        clickEvent || (clickEvent = start.getAttribute("data-click-event"));
+        if (start.tagName === "A") {
+            if (!clickEvent) {
+                // let default handler run here
+                // get href...
+                return;
+            }
+            if (clickEvent === "route") {
+                const { href } = start;
+                if (href) {
+                    if (Command_js_1.default.invokeRoute(href, true)) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                        e.stopPropagation();
+                    }
+                }
+            }
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+            break;
+        }
+        start = start.parentNode;
+    }
+    let control = AtomControl.from(originalTarget);
+    if (control !== void 0) {
+        const data = new Proxy(originalTarget, {
+            get(target, p) {
+                if (typeof p !== "string") {
+                    return;
+                }
+                while (target) {
+                    const value = target.dataset[p];
+                    if (value !== void 0) {
+                        return value;
+                    }
+                    target = target.parentElement;
+                }
+            }
+        });
+        // @ts-ignore
+        control.dispatchClickEvent(e, data);
+    }
+});
+//# sourceMappingURL=AtomControl.js.map