@pacem/pacem-core 1.0.0-abel

package/dist/esm/utils-customelement.js

@@ -0,0 +1,524 @@
+/// <reference path="expression.ts" />
+/// <reference path="promise.ts" />
+/// <reference path="prefix.ts" />
+/// <reference path="trees/json.ts" />
+/// <reference path="utils.ts" />
+import { Utils } from './utils';
+import { INSTANCE_SCOPE_VAR, WATCH_PROPS_VAR, INSTANCE_HOST_VAR, INSTANCE_BINDINGS_VAR } from './types';
+import { PCSS } from './prefix';
+import { Expression } from './expression';
+import { TemplateElement } from './template';
+// namespace Pacem {
+const PACEM_BAG = '__pacem__';
+// {{ binding.expression }}
+const bindingPattern = /^\{\{(.|\n)+\}\}$/;
+// TODO: CSP-proof binding (no unsafe-eval)
+// binding syntax example: `{ binding: { source: ^item.property.path, binder: $pacem.func, parameters: [ ^index, 'foo', : host._baz], mode: 'twoway' } }`
+export class CustomElementUtils {
+    static get polyfilling() {
+        return customElements instanceof window['CustomElementRegistry'];
+    }
+    static camelToKebab(camelCased) {
+        return camelCased && camelCased.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    static kebabToCamel(kebabCased) {
+        return kebabCased && kebabCased.replace(/(-[a-z])/g, (m) => {
+            return m[1].toUpperCase();
+        });
+    }
+    static getWatchedProperties(target, includeInherited = true) {
+        var properties = [];
+        var chain = target instanceof HTMLElement ? target.constructor : target;
+        do {
+            let additional = this.getAttachedPropertyValue(chain, WATCH_PROPS_VAR) || [];
+            let pblic = additional.filter(p => !p.name.startsWith('_'));
+            Array.prototype.splice.apply(properties, [0, 0].concat(pblic));
+        } while (includeInherited && (chain = Object.getPrototypeOf(chain)));
+        return properties;
+    }
+    static getWatchedProperty(target, name) {
+        return this.getWatchedProperties(target, true).find(p => p.name === name);
+    }
+    static importjs(src, integrity = null, crossorigin = false) {
+        var attrs = { 'type': 'text\/javascript', 'src': src };
+        if (!Utils.isNullOrEmpty(integrity))
+            Utils.extend(attrs, { integrity: integrity });
+        if (crossorigin)
+            Utils.extend(attrs, { 'crossorigin': '' });
+        return CustomElementUtils.import(src, 'script', attrs, (document.head || document.getElementsByTagName("head")[0]));
+    }
+    static importcss(src, integrity = null, crossorigin = false) {
+        var attrs = { 'rel': 'stylesheet', 'href': src };
+        if (!Utils.isNullOrEmpty(integrity))
+            Utils.extend(attrs, { integrity: integrity });
+        if (crossorigin)
+            Utils.extend(attrs, { 'crossorigin': 'anonymous' });
+        return CustomElementUtils.import(src, 'link', attrs, (document.head || document.getElementsByTagName("head")[0]));
+    }
+    static import(key, tagName, attrs, appendTo = document.body) {
+        const _p = Utils.core;
+        var _imports = _p['imports'] = _p['imports'] || {};
+        return _imports[key] = _imports[key] || new Promise((resolve, reject) => {
+            // try to find the equivalent element in the DOM
+            var selector = tagName;
+            for (let attr in attrs || {}) {
+                selector += `[${attr}="${attrs[attr]}"]`;
+            }
+            var script = document.querySelector(selector);
+            if (!Utils.isNull(script)) {
+                // best guess: since element was already there, it is hopefully fully loaded
+                resolve(script);
+            }
+            else {
+                script = document.createElement(tagName);
+                script.onerror = e => {
+                    reject(e);
+                };
+                script.onload = () => {
+                    resolve(script);
+                };
+                for (var attr in (attrs || {})) {
+                    script.setAttribute(attr, attrs[attr]);
+                }
+                appendTo.appendChild(script);
+            }
+        });
+    }
+    static { this.Theme = {
+        importWebFonts() {
+            function cleanupQuotes(input) {
+                // check if the string is wrapped around quotes to escape ';' chars
+                if (/^('|").*\1$/.test(input)) {
+                    return input.substring(1, input.length - 1);
+                }
+                return input;
+            }
+            function downloadFont(fontFace) {
+                return Utils.isNullOrEmpty(fontFace) ? Promise.resolve() : document.fonts.load('1rem ' + fontFace);
+            }
+            const promises = ['icons', 'std', 'main', 'tech', 'btn'].map(f => {
+                const fontFace = Utils.Css.getVariableValue(`--${PCSS}-font-${f}`).split(',')[0];
+                const url = cleanupQuotes(Utils.Css.getVariableValue(`--${PCSS}-font-${f}-api-url`));
+                if (Utils.isNullOrEmpty(url)) {
+                    return downloadFont(fontFace);
+                }
+                else {
+                    return CustomElementUtils.importcss(url).then(_ => downloadFont(fontFace));
+                }
+            });
+            const atLeast1FontFaceReady = new Promise((resolve) => {
+                function check(count = 0) {
+                    // size against the specs: https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/size#specifications
+                    if (count > 4 || !('size' in document.fonts) || typeof document.fonts.size === 'number' && document.fonts.size > 0) {
+                        document.fonts.ready.then(resolve);
+                    }
+                    else {
+                        setTimeout(check, 250, count++);
+                    }
+                }
+                check();
+            });
+            promises.push(atLeast1FontFaceReady);
+            return Promise.all(promises);
+        }
+    }; }
+    static setAttachedPropertyValue(target, name, value) {
+        /*(target[PACEM_BAG] = target[PACEM_BAG] || {})[name] = value;*/
+        if (Utils.isNull(target))
+            return;
+        const propKey = Object.getOwnPropertyDescriptor(target, PACEM_BAG);
+        const bag = (propKey && propKey.value)
+            || Object.defineProperty(target, PACEM_BAG, {
+                value: {}, enumerable: false, writable: false, configurable: false
+            })[PACEM_BAG];
+        if (Utils.isNull(value))
+            delete bag[name];
+        else
+            bag[name] = value;
+    }
+    static deleteAttachedPropertyValue(target, name) {
+        CustomElementUtils.setAttachedPropertyValue(target, name, undefined);
+    }
+    static getAttachedPropertyValue(target, name, ensureValue) {
+        const propKey = Object.getOwnPropertyDescriptor(target, PACEM_BAG), bag = propKey && propKey.value;
+        if (Utils.isNull(bag && bag[name]) && !Utils.isNull(ensureValue)) {
+            CustomElementUtils.setAttachedPropertyValue(target, name, ensureValue);
+            return ensureValue;
+        }
+        return bag && bag[name];
+    }
+    /**
+     * Resolves a dotted path into actual values.
+     * @param path Dotted path
+     * @param scope Root of the path
+     */
+    static resolvePath(path, scope) {
+        if (!path || !scope)
+            return undefined;
+        if (/[\(\)\{\}]/.test(path))
+            throw `Security alert: not allowed to process paths like ${path}.`;
+        const trunks = path.split('.');
+        var root = scope, ref = root, parent, core = trunks[0];
+        trunks.forEach((t, i) => {
+            var trunksSq = t.split('[');
+            trunksSq.forEach((t2, j) => {
+                parent = ref;
+                if (/\]$/.test(t2)) {
+                    t2 = t2.substring(0, t2.length - 1);
+                    if (/^('|").+[^\\]\1$/.test(t2)) {
+                        t2 = t2.substr(1, t2.length - 2);
+                    }
+                }
+                ref = ref[t2];
+            });
+        });
+        var name, ndx;
+        if (/\]$/.test(path)) {
+            ndx = path.lastIndexOf('[');
+            name = path.substring(ndx + 1);
+            name = name.substring(0, name.length - 1);
+        }
+        else {
+            ndx = path.lastIndexOf('.');
+            name = path.substring(ndx + 1);
+        }
+        return { target: { value: ref, name: name }, parent: { value: parent || scope, path: path.substring(0, ndx) }, root: { value: root, property: core } };
+    }
+    static set(element, path, value) {
+        var obj = CustomElementUtils.resolvePath(path, element);
+        var current = obj.target.value;
+        if (current !== value) {
+            if (obj.parent.value != obj.root.value /* nested property scenario */
+                && !(obj.parent.value instanceof HTMLElement) /* and not targeting an HTMLElement (which will eventually fire autonomously) */) {
+                // 1. set new value (won't fire 'propertychange' since it's a nested property)
+                obj.parent.value[obj.target.name] = value;
+                // 2. clone the resulting object (will be set as the new one at 4.)
+                const set_val = Utils.clone(obj.root.value[obj.root.property]);
+                // 3. reset to previous value (so that when 4. will trigger the 'propertychange' we'll have meaningful arguments)
+                obj.parent.value[obj.target.name] = current;
+                // repeater-item?
+                let repItem;
+                if (obj.root.property === 'item' && !Utils.isNull(repItem = RepeaterItem.getRepeaterItem(obj.root.value))) {
+                    // kind of ugly solution, I know. it works however...
+                    // trigger array update
+                    repItem.repeater && repItem.repeater.datasource && repItem.repeater.datasource.splice(repItem.index, 1, repItem.item = set_val);
+                }
+                else {
+                    // 4. force root property change
+                    obj.root.value[obj.root.property] = set_val;
+                }
+            }
+            else {
+                // parent === root, property change event fires automatically
+                obj.parent.value[obj.target.name] = value;
+            }
+        }
+    }
+    static get(element, path) {
+        var obj = CustomElementUtils.resolvePath(path, element);
+        return obj && obj.target && obj.target.value;
+    }
+    /**
+     * Works for unit-test contexts.
+     * @param element
+     */
+    static _findScopeContextLegacy(element) {
+        // old impl...
+        let el = element;
+        let retval;
+        do {
+            el = el.parentNode;
+        } while (el != null && (el != (retval = element.ownerDocument) || (el instanceof HTMLElement && (retval = el.shadowRoot) != null)));
+        //let logFn: (message?: string) => void;
+        //if (retval == null && console && (logFn = console.debug))
+        //    logFn(`Element "${element.constructor.name}" isn't attached to any context yet.`);
+        return retval;
+    }
+    static findScopeContext(element) {
+        let retval = (element.isConnected) ?
+            element.getRootNode()
+            : CustomElementUtils.getAttachedPropertyValue(element, INSTANCE_SCOPE_VAR);
+        return retval ?? /* in Jasmine TESTS `element.isConnected` always returns false (attached to #document-fragment) */ CustomElementUtils._findScopeContextLegacy(element);
+    }
+    static findAncestor(element, predicate) {
+        let el = element;
+        let retval;
+        while (el && (el = el.parentNode || el.getRootNode()?.host) != null) {
+            if (el['host'] instanceof HTMLElement)
+                el = el['host'];
+            if (predicate.apply(el, [el])) {
+                retval = el;
+                break;
+            }
+        }
+        return retval;
+    }
+    static findAncestorShell(element) {
+        return CustomElementUtils.findAncestor(element, el => Utils.is(el, `.${PCSS}-body`) || el === document.body);
+    }
+    static findAncestorOfType(element, ctor) {
+        return CustomElementUtils.findAncestor(element, el => el instanceof ctor);
+    }
+    static findDescendants(element, predicate, firstOnly = false) {
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+        var retval = [];
+        while (walker.nextNode()) {
+            let n = walker.currentNode;
+            if (predicate(n) === true) {
+                retval.push(n);
+                if (firstOnly) {
+                    return retval;
+                }
+            }
+        }
+        return retval;
+    }
+    static findFirstDescendant(element, predicate) {
+        const any = CustomElementUtils.findDescendants(element, predicate, true);
+        return Utils.isNullOrEmpty(any) ? void 0 : any[0];
+    }
+    static findAll(selector = '[pacem]', filter = (e) => true) {
+        const retval = [];
+        document.querySelectorAll(selector).forEach((e, i, arr) => {
+            if (filter(e) === true) {
+                retval.push(e);
+            }
+        });
+        return retval;
+    }
+    /**
+     * To be used back again when Edge will allow Comment subclassing
+     * https://github.com/Microsoft/ChakraCore/issues/2999 and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12080908/
+     * @param element
+     * @param ctor
+     * @param upLevels
+     */
+    static findPreviousSiblingOrAncestorOfType(element, ctor, upLevels = 0) {
+        let el = element;
+        let retval = null;
+        let levels = 0;
+        do {
+            el = el.previousSibling || el.parentNode;
+            if (el instanceof ctor) {
+                if (levels >= upLevels) {
+                    retval = el;
+                    break;
+                }
+                else {
+                    el = el.parentNode;
+                }
+                levels++;
+            }
+        } while (el != null);
+        return retval;
+    }
+    /**
+     * To be removed when Edge will allow Comment subclassing
+     * https://github.com/Microsoft/ChakraCore/issues/2999 and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12080908/
+     * @param element
+     * @param predicate
+     * @param upLevels
+     */
+    static findPreviousSiblingOrAncestor(element, predicate, upLevels = 0) {
+        let el = element;
+        let retval = null;
+        let levels = 0;
+        do {
+            el = el.previousSibling || el.parentNode;
+            if (el && predicate.apply(el, [el])) {
+                if (levels >= upLevels) {
+                    retval = el;
+                    break;
+                }
+                else {
+                    el = el.parentNode;
+                }
+                levels++;
+            }
+        } while (el != null);
+        return retval;
+    }
+    static assignHostContext(host, template) {
+        // navigate through the DOM hierarchy
+        const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT + /* traverse templates' content */ NodeFilter.SHOW_DOCUMENT_FRAGMENT);
+        while (walker.nextNode()) {
+            var node = walker.currentNode;
+            /*if (node instanceof HTMLTemplateElement)
+                CustomElementUtils.assignHostContext(host, node);
+            else*/ if (Utils.isNull(CustomElementUtils.getAttachedPropertyValue(node, INSTANCE_HOST_VAR))) {
+                CustomElementUtils.setAttachedPropertyValue(node, INSTANCE_HOST_VAR, host);
+            }
+        }
+    }
+    static findHostContext(element) {
+        let el = element;
+        let retval;
+        // not connected to the DOM? then exit and return undefined
+        if (!el.isConnected) {
+            return retval;
+        }
+        /*const root = element.getRootNode({ composed: false });
+        if (root instanceof ShadowRoot) {
+            return root.host as HTMLElement;
+        }*/
+        while (el != null) {
+            retval = CustomElementUtils.getAttachedPropertyValue(el, INSTANCE_HOST_VAR);
+            if (retval instanceof HTMLElement)
+                break;
+            el = el.parentElement;
+        }
+        let logFn;
+        if (retval == null && console && (logFn = console.warn))
+            logFn(`Element "${element.constructor.name}" isn't a descendant of a templated component.`);
+        return retval;
+    }
+    static isBindingAttribute(attr) {
+        /*if (/^\s*\{\s*binding\s+.*\}\s*$/.test(attr)) {
+
+            // { binding ... } syntax
+            var fn = attr.replace('binding', '').trim();
+            fn = fn.substring(1, fn.length - 1);
+            let twoway = /,\s*twoway\s*=\s*true\s*$/.test(fn);
+            let commaNdx = fn.indexOf(',');
+            if (commaNdx == -1)
+                commaNdx = fn.length;
+            var expression = Expression.parse(fn.substr(0, commaNdx), element);
+            (expression && expression.dependencies).forEach(d => {
+                d.twoway = d.twowayAllowed && twoway && expression.dependencies.length == 1;
+            });
+            return expression;
+        }
+        else*/
+        return bindingPattern.test(attr);
+    }
+    static extractBindingAttributeExpression(attr) {
+        if (CustomElementUtils.isBindingAttribute(attr)) {
+            return attr.substr(2, attr.length - 4);
+        }
+        else {
+            throw `Invalid attribute: incorrect binding syntax.`;
+        }
+    }
+    static parseBindingAttribute(attr, element) {
+        // loose syntax {{ ... }}
+        let expression = CustomElementUtils.extractBindingAttributeExpression(attr);
+        const arr = /,\s*(twoway|once)\s*$/.exec(expression), mode = arr && arr.length > 1 && arr[1];
+        if (!Utils.isNullOrEmpty(mode)) {
+            expression = expression.substr(0, expression.lastIndexOf(','));
+        }
+        var expr = Expression.parse(expression, element);
+        (expr && expr.dependencies).forEach(d => {
+            switch (mode) {
+                case 'twoway':
+                    d.mode = (d.twowayAllowed && expr.dependencies.length == 1) ? 'twoway' : undefined;
+                    break;
+                case 'once':
+                    d.mode = mode;
+                    break;
+            }
+        });
+        return expr;
+    }
+    static ensureMember(o, name, attributes) {
+        let original = Object.getOwnPropertyDescriptor(o, name);
+        if (original != undefined)
+            return original;
+        Object.defineProperty(o, name, attributes);
+        return Object.getOwnPropertyDescriptor(o, name);
+    }
+    /**
+     * Strips all the observed attributes of an element and its descendants, in order to seal that dom branch and to avoid bindings evaluation.
+     * @param element Input element
+     */
+    static stripObservedAttributes(element) {
+        avoidObservedAttributes(element, false);
+    }
+    /**
+     * Freezes all the observed attributes of an element and its descendants, in order to seal that dom branch and to avoid bindings evaluation.
+     * @param element Input element
+     */
+    static freezeObservedAttributes(element) {
+        avoidObservedAttributes(element);
+    }
+}
+function avoidObservedAttributes(element, freeze = true) {
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+    do {
+        var node = walker.currentNode;
+        if (node instanceof HTMLElement) {
+            const attrs = node.constructor['observedAttributes'];
+            if (!Utils.isNull(attrs)) {
+                CustomElementUtils.deleteAttachedPropertyValue(node, INSTANCE_BINDINGS_VAR);
+                let revertFn = function (v) {
+                    if (Utils.isArray(v)) {
+                        return '[' + v.map(revertFn).join(',') + ']';
+                    }
+                    if (v instanceof Element) {
+                        const vid = v.id = v.id || ('_' + Utils.uniqueCode());
+                        return `#${vid}`;
+                    }
+                    else {
+                        return `${Utils.Json.stringify(v)}`;
+                    }
+                };
+                for (var attr of attrs) {
+                    if (attr in node.attributes) {
+                        let prop;
+                        let val;
+                        if (freeze && !Utils.isNull(val = node[prop = CustomElementUtils.kebabToCamel(attr)])) {
+                            let reverted = revertFn(val);
+                            node.setAttribute(attr, `{{ ${reverted} }}`);
+                        }
+                        else
+                            node.removeAttribute(attr);
+                    }
+                }
+            }
+        }
+    } while (walker.nextNode());
+}
+const GET_VAL = CustomElementUtils.getAttachedPropertyValue;
+const SET_VAL = CustomElementUtils.setAttachedPropertyValue;
+const REPEATERITEM_PLACEHOLDER = 'pacem:repeater-item';
+export class Repeater {
+    /**
+     * Seeks for a PacemRepeaterItem element upwards through the DOM tree, given a starting element and the number of nesting levels.
+     * @param element {HTMLElement} Element to start the upward search from
+     * @param Optional upLevels {Number} 0-based nesting level
+     */
+    static findItemContext(element, upLevels = 0, logFn = console.warn) {
+        let retval = RepeaterItem.findUpwards(element, upLevels, logFn);
+        if (retval == null && logFn && element instanceof HTMLElement && element['isConnected']) {
+            logFn(`Couldn't find a ${RepeaterItem.name} up ${upLevels} level${((upLevels === 1) ? "" : "s")} from element "${element.constructor.name}".`);
+        }
+        return retval;
+    }
+}
+export class RepeaterItem {
+    static findUpwards(element, upLevels = 0, logFn = console.warn) {
+        if (Utils.isNull(element) || element.localName === 'template' || element instanceof /* template-like element? */ TemplateElement) {
+            return null;
+        }
+        let item = null;
+        let predicate = (node) => !Utils.isNull(item = RepeaterItem.getRepeaterItem(node));
+        let retval = CustomElementUtils.findPreviousSiblingOrAncestor(element, predicate, upLevels);
+        if (retval == null && logFn && element instanceof HTMLElement && element['isConnected']) {
+            logFn(`Couldn't find a ${RepeaterItem.name} up ${upLevels} level${((upLevels === 1) ? "" : "s")} from element "${element.constructor.name}".`);
+        }
+        return item;
+    }
+    static isRepeaterItem(node) {
+        return !Utils.isNull(GET_VAL(node, REPEATERITEM_PLACEHOLDER));
+    }
+    static getRepeaterItem(node) {
+        return GET_VAL(node, REPEATERITEM_PLACEHOLDER);
+    }
+    constructor(_placeholder) {
+        this._placeholder = _placeholder;
+        SET_VAL(_placeholder, REPEATERITEM_PLACEHOLDER, this);
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+}
+// }

package/dist/esm/utils-customevent.js

@@ -0,0 +1,60 @@
+import { Utils } from './utils';
+export var EventKeyModifier;
+(function (EventKeyModifier) {
+    EventKeyModifier["AltKey"] = "Alt";
+    EventKeyModifier["CtrlKey"] = "Ctrl";
+    EventKeyModifier["ShiftKey"] = "Shift";
+    EventKeyModifier["MetaKey"] = "Cmd";
+})(EventKeyModifier || (EventKeyModifier = {}));
+export class CustomEventUtils {
+    static isInstanceOf(evt, type) {
+        return evt instanceof type;
+        // || CustomElementUtils.getAttachedPropertyValue(evt, 'pacem:custom-event') === evt.type;
+    }
+    static getEventCoordinates(evt) {
+        var src;
+        if ('touches' in evt) {
+            if (!Utils.isNullOrEmpty(evt.touches)) {
+                src = evt.touches[0];
+            }
+            else if (!Utils.isNullOrEmpty(evt.changedTouches)) {
+                src = evt.changedTouches[0];
+            }
+        }
+        else {
+            src = evt;
+        }
+        return {
+            page: { x: src.pageX, y: src.pageY },
+            screen: { x: src.screenX, y: src.screenY },
+            client: { x: src.clientX, y: src.clientY }
+        };
+    }
+    static getEventKeyModifiers(evt) {
+        var which = evt.which;
+        if (evt instanceof MouseEvent) {
+            which = evt.button;
+        }
+        return {
+            which: which, shiftKey: evt.shiftKey, altKey: evt.altKey, ctrlKey: evt.ctrlKey, metaKey: evt.metaKey
+        };
+    }
+    static matchModifiers(evt, ...args) {
+        const modifiers = !Utils.isNull(args) && (args.length === 1 && Utils.isArray(args[0]) ? args[0] : Array.from(args).filter(i => !Utils.isNullOrEmpty(i))), lowerCaseModifiers = (modifiers || []).map(i => i.toLowerCase());
+        const altKey = lowerCaseModifiers.indexOf('alt') >= 0 || lowerCaseModifiers.indexOf('option') >= 0, shiftKey = lowerCaseModifiers.indexOf('shift') >= 0, ctrlKey = lowerCaseModifiers.indexOf('ctrl') >= 0, metaKey = lowerCaseModifiers.indexOf('win') >= 0 || lowerCaseModifiers.indexOf('cmd') >= 0;
+        if (altKey !== evt.altKey
+            || shiftKey !== evt.shiftKey
+            || metaKey !== evt.metaKey
+            || ctrlKey !== evt.ctrlKey) {
+            return false;
+        }
+        return true;
+    }
+    static fixEdgeCustomEventSubClassInstance(evt, type) {
+        // this an optimistic BUGGED workaround due to a damn' Edge bug: https://github.com/Microsoft/ChakraCore/issues/3952
+        if (!(evt instanceof type)) {
+            Object.setPrototypeOf(evt, type);
+        }
+    }
+}
+//}