@pacem/pacem-core 1.0.0-abel

package/dist/esm/utils.js

@@ -0,0 +1,1073 @@
+import { Keys, Dates, Colors, Strings, Blobs, Imaging, NullChecker, detect } from '@pacem/pacem-foundation';
+import { Json } from './trees/json';
+import { DeepCloner } from './trees/deepcloner';
+import { DeferPromise } from './promise';
+// namespace Pacem {
+const PACEM_CORE_DEFAULT = 'pacem';
+const DEFAULT_DOWNLOAD_FILENAME = 'download';
+export const stopPropagationHandler = (evt) => {
+    evt.stopPropagation();
+};
+export const preventDefaultHandler = (evt) => {
+    evt.preventDefault();
+};
+export const avoidHandler = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+};
+const SEGMENT_PATTERN = /^\/[^\/]+/;
+const ROUTE_SEGMENT_PATTERN = /\/\{([a-z\$_][\w]*)\??\}/;
+export class Utils {
+    static get core() {
+        const root = window['Pacem'];
+        var id = (root && root.Configuration && root.Configuration.core) || PACEM_CORE_DEFAULT;
+        return window[id] = window[id] || {};
+    }
+    static get customElements() {
+        return window['customElements'];
+    }
+    // #region GENERAL
+    static uniqueId() {
+        return Keys.uniqueId();
+    }
+    static uniqueCode() {
+        return Keys.uniqueCode();
+    }
+    static randomString(length) {
+        return Keys.randomString(length);
+    }
+    static parseDate(input) {
+        return Dates.parse(input);
+    }
+    static copyToClipboard(input) {
+        if (navigator.clipboard) {
+            return navigator.clipboard.writeText(input);
+        }
+        // deprecated code branch
+        return new Promise((resolve, reject) => {
+            const el = document.createElement('textarea');
+            el.value = input;
+            el.style.opacity = "0";
+            document.body.appendChild(el);
+            try {
+                el.select();
+                document.execCommand('copy');
+                el.remove();
+                resolve();
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+    }
+    // json-dedicated
+    static { this.Json = {
+        stringify: Json.serialize,
+        parse: Json.deserialize
+    }; }
+    // dates-dedicated (moved to foundations, kept for backwards compat)
+    static { this.Dates = {
+        now: () => Utils.parseDate(Date.now()),
+        parse: Utils.parseDate,
+        isLeapYear: Dates.isLeapYear,
+        daysInMonth: Dates.daysInMonth,
+        /**
+         * Gets whether a date is an `Invalid Date` or not.
+         * @param date
+         */
+        isDate: Dates.isDate,
+        dateOnly: Dates.dateOnly,
+        addMonths: Dates.addMonths,
+        addDays: Dates.addDays,
+        daysBetween: Dates.daysBetween,
+    }; }
+    static colorize(elementOrRgb, rgb) {
+        const hsl0 = /*Colors.hsl(Colors.parse('#000'))*/ { h: 38, s: .245, l: .6 };
+        var realRgb, rgba, filter, element;
+        if (elementOrRgb instanceof HTMLElement) {
+            realRgb = rgb;
+        }
+        else {
+            realRgb = elementOrRgb;
+        }
+        // rgba
+        if (typeof realRgb === 'string') {
+            rgba = Colors.parse(realRgb);
+        }
+        else {
+            rgba = { r: realRgb[0], g: realRgb[1], b: realRgb[2] };
+        }
+        const hsl = Colors.hsl(rgba);
+        filter = `brightness(50%) sepia(1) hue-rotate(${(hsl.h - hsl0.h)}deg) saturate(${(1.0 + (hsl.s - hsl0.s))}) brightness(${(1.0 + (hsl.l - hsl0.l))})`;
+        if (realRgb === rgb) {
+            element.style.filter = filter;
+        }
+        else {
+            return filter;
+        }
+    }
+    static cssEscape(input) {
+        return escape(input).replace('%', '\\');
+    }
+    // css-dedicated
+    static { this.Css = {
+        colorize: Utils.colorize,
+        escape: Utils.cssEscape,
+        getVariableValue(name) {
+            return getComputedStyle(document.documentElement).getPropertyValue(name);
+        },
+        setVariable(name, value) {
+            getComputedStyle(document.documentElement).setProperty(name, value);
+        },
+        /**
+         * Naive O(n^2) implementation for an actual css class presence (definition) in the current DOM.
+         * @param name CSS class name
+         */
+        isClassDefined(name) {
+            const pattern = new RegExp('\.' + name + '($|[\s\.,])');
+            for (let j = 0; j < document.styleSheets.length; j++) {
+                const sheet = document.styleSheets.item(j);
+                try {
+                    const rules = sheet.cssRules;
+                    for (let i = 0; i < rules.length; i++) {
+                        const rule = sheet.cssRules.item(i);
+                        if (pattern.test(rule.selectorText)) {
+                            return true;
+                        }
+                    }
+                }
+                catch (e) {
+                    if (e instanceof DOMException) {
+                        console.warn('Couldn\'t access cssRules of stylesheet "' + sheet.href + '".');
+                        // console.error(e);
+                    }
+                }
+            }
+            return false;
+        },
+        deserializeTransform(element) {
+            const style = element instanceof Element ? getComputedStyle(element) : element;
+            let a = 1, b = 0, c = 0, d = 1, x = 0, y = 0, matches = /^matrix\((.*)\)$/.exec(style.transform), mij;
+            //matrix(1, 0, 0, 1, 2, 4) 
+            if (matches && matches.length > 1 && (mij = matches[1].split(',')).length == 6) {
+                // scale + rot
+                a = parseFloat(mij[0]);
+                b = parseFloat(mij[1]);
+                c = parseFloat(mij[2]);
+                d = parseFloat(mij[3]);
+                // transl
+                x += parseFloat(mij[4]);
+                y += parseFloat(mij[5]);
+            }
+            return { a: a, b: b, c: c, d: d, e: x, f: y };
+        }
+    }; }
+    // #region strings
+    // legacy
+    static { this.leftPad = Strings.leftPad; }
+    static { this.formatString = Strings.format; }
+    static { this.diff = Strings.diff; }
+    static { this.Strings = {
+        leftPad: Strings.leftPad,
+        format: Strings.format,
+        diff: Strings.diff,
+        stripHTML: (html) => {
+            let doc = new DOMParser().parseFromString(html, 'text/html');
+            return doc.body.textContent || '';
+        }
+    }; }
+    // #endregion
+    // #endregion
+    // #region blob/files...
+    static { this.Blobs = {
+        toDataURL: Blobs.blobToDataURL,
+        fromDataURL: Blobs.dataURLToBlob,
+        toText: Blobs.blobToText,
+        fromText: Blobs.textToBlob
+    }; }
+    static { this.Images = {
+        load: Imaging.loadImage,
+        resize: Imaging.resizeImage
+    }; }
+    static loadImage(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.src = src;
+            if (img.complete) {
+                resolve(img);
+            }
+            else {
+                img.onload = (evt) => {
+                    resolve(img);
+                };
+                img.onerror = (evt) => {
+                    reject();
+                };
+            }
+        });
+    }
+    static blobToDataURL(blob) {
+        return Utils.Blobs.toDataURL(blob);
+    }
+    static dataURLToBlob(dataURL) {
+        return Utils.Blobs.fromDataURL(dataURL);
+    }
+    static blobToText(blob, encoding) {
+        return Utils.Blobs.toText(blob, encoding);
+    }
+    static textToBlob(content, type = 'text/plain') {
+        return Utils.Blobs.fromText(content, type);
+    }
+    /** @deprecated Use {Utils.Images.resize}, instead.
+     * Resizes an image when exceeding the provided size constraints.
+     * @param img {Blob} Input image
+     * @param maxWidth {number} Width constraint
+     * @param maxHeight {number} Height constraint
+     */
+    static resizeImage(img, maxWidth, maxHeight, quality) {
+        var deferred = DeferPromise.defer();
+        Utils.blobToDataURL(img)
+            .then(Utils.loadImage)
+            .then(el => {
+            const origWidth = el.width, origHeight = el.height;
+            let cnv = document.createElement('canvas');
+            cnv.width = origWidth;
+            cnv.height = origHeight;
+            let ctx = cnv.getContext('2d');
+            //ctx.drawImage(el, 0, 0);
+            if (origWidth > maxWidth
+                || origHeight > maxHeight) {
+                const origRatio = origWidth / origHeight, targetRatio = maxWidth / maxHeight;
+                let targetHeight, targetWidth;
+                if (targetRatio < origRatio) {
+                    targetWidth = maxWidth;
+                    targetHeight = maxWidth / origRatio;
+                }
+                else {
+                    targetHeight = maxHeight;
+                    targetWidth = maxHeight * origRatio;
+                }
+                cnv.width = targetWidth;
+                cnv.height = targetHeight;
+                const jpeg = quality > 0 && quality <= 1;
+                if (jpeg) {
+                    ctx.fillStyle = '#000';
+                    ctx.fillRect(0, 0, cnv.width, cnv.height);
+                }
+                Utils.cropImageOntoCanvas(el, ctx);
+                let newUrl;
+                if (jpeg)
+                    newUrl = ctx.canvas.toDataURL("image/jpeg", quality);
+                else
+                    newUrl = ctx.canvas.toDataURL();
+                deferred.resolve(Utils.dataURLToBlob(newUrl));
+            }
+            else {
+                deferred.resolve(img);
+            }
+        }, _ => {
+            // image loading error caught...
+        });
+        return deferred.promise;
+    }
+    /** @deprecated Use {Utils.Images.resize}, instead.
+     * Crops an image having the provided url (might be a dataURL) into another having the provided size
+     * @param url
+     * @param width
+     * @param height
+     * @param ctx
+     */
+    static cropImage(url, width, height, quality) {
+        var deferred = DeferPromise.defer();
+        let el = new Image();
+        el.crossOrigin = 'anonymous';
+        el.onload = function (ev) {
+            let cnv = document.createElement('canvas');
+            let ctx = cnv.getContext('2d');
+            if (width)
+                cnv.width = width;
+            if (height)
+                cnv.height = height;
+            //
+            const jpeg = quality > 0 && quality <= 1;
+            if (jpeg) {
+                ctx.fillStyle = '#000';
+                ctx.fillRect(0, 0, cnv.width, cnv.height);
+            }
+            Utils.cropImageOntoCanvas(el, ctx);
+            deferred.resolve(jpeg ? cnv.toDataURL('image/jpeg', quality) : cnv.toDataURL());
+        };
+        el.src = url;
+        return deferred.promise;
+    }
+    static getUserMediaFunctions() {
+        var _getUserMedia = [];
+        let methods = [navigator['getUserMedia'], navigator['webkitGetUserMedia'], navigator['msGetUserMedia'], navigator['mozGetUserMedia']];
+        let fns = methods.filter(function (fn, j) { return typeof fn == 'function'; });
+        if (fns.length)
+            _getUserMedia = fns;
+        return _getUserMedia;
+    }
+    /**
+     * Crops the snapshot of a drawable element onto a provided canvas context. It gets centered in the area and cropped (`cover`-like behavior).
+     * @param el drawable element
+     * @param ctx canvas context
+     * @param sourceWidth forced source width
+     * @param sourceHeight forced source height
+     */
+    static cropImageOntoCanvas(el, ctx, sourceWidth, sourceHeight) {
+        ctx.imageSmoothingEnabled =
+            ctx['mozImageSmoothingEnabled'] =
+                ctx['oImageSmoothingEnabled'] =
+                    ctx['webkitImageSmoothingEnabled'] =
+                        true;
+        //
+        let tgetW = ctx.canvas.width /*= parseFloat(scope.thumbWidth)*/;
+        let tgetH = ctx.canvas.height /*= parseFloat(scope.thumbHeight)*/;
+        let cnvW = tgetW, cnvH = tgetH;
+        let w = sourceWidth || 1.0 * el.width, h = sourceHeight || 1.0 * el.height;
+        //console.log('img original size: ' + w + 'x' + h);
+        var ratio = w / h;
+        var tgetRatio = tgetW / tgetH;
+        if (tgetRatio > ratio) {
+            // crop vertically
+            var f = tgetW / w;
+            tgetH = f * h;
+            ctx.drawImage(el, 0, .5 * (-tgetH + cnvH), cnvW, tgetH);
+        }
+        else {
+            // crop horizontally
+            var f = tgetH / h;
+            tgetW = f * w;
+            ctx.drawImage(el, -Math.abs(.5 * (-tgetW + cnvW)), 0, tgetW, cnvH);
+        }
+    }
+    static get _domURL() {
+        return window.URL || window['webkitURL'] || window;
+    }
+    /**
+     * Snapshots a DOM element and returns its blob image representation.
+     * @param el Element to snapshot
+     * @param background Background color to replace the original
+     * @param type Output mimetype (image/png, image/jpeg, images/webp, ...)
+     * @param quality Quality ratio between 0..1
+     */
+    static snapshotElement(el, background, type = 'image/png', quality) {
+        function drawCanvas(img) {
+            return new Promise((resolve, reject) => {
+                const canvas = document.createElement('canvas'), width = img.width, height = img.height;
+                if (!(width > 0)) {
+                    reject('Image has width zero.');
+                }
+                else if (!(height > 0)) {
+                    reject('Image has height zero.');
+                }
+                else {
+                    canvas.width = width;
+                    canvas.height = height;
+                    const ctx = canvas.getContext('2d');
+                    if (!Utils.isNullOrEmpty(background)) {
+                        ctx.fillStyle = background;
+                        ctx.fillRect(0, 0, width, height);
+                    }
+                    ctx.drawImage(img, 0, 0);
+                    canvas.toBlob(b => {
+                        resolve(b);
+                    }, type, quality);
+                }
+            });
+        }
+        if (el instanceof HTMLCanvasElement) {
+            return drawCanvas(el);
+        }
+        return new Promise((resolve, _) => {
+            const loadPromises = [];
+            //#region utils functions
+            function addLoadPromise(img) {
+                const p = new Promise((resolve0, _) => {
+                    const getSrc = () => {
+                        return img instanceof HTMLImageElement ? img.src : img.href.baseVal;
+                    };
+                    const setSrc = (src) => {
+                        if (img instanceof HTMLImageElement)
+                            img.src = src;
+                        else {
+                            img.setAttribute('href', src);
+                        }
+                    };
+                    fetch(getSrc())
+                        .then(r => r.blob())
+                        .then(blob => Utils.blobToDataURL(blob))
+                        .then(url => {
+                        setSrc(url);
+                        resolve0();
+                    });
+                });
+                loadPromises.push(p);
+            }
+            function copyCanvas(copy, srcCanvas) {
+                const p = new Promise((resolve0, _) => {
+                    const img = new Image();
+                    img.crossOrigin = 'anonymous';
+                    img.width = srcCanvas.width;
+                    img.height = srcCanvas.height;
+                    img.style.cssText = copy.style.cssText;
+                    img.onload = () => {
+                        copy.replaceWith(img);
+                        resolve0();
+                    };
+                    img.src = srcCanvas.toDataURL();
+                });
+                loadPromises.push(p);
+            }
+            function applyCss(copy, src) {
+                const css = getComputedStyle(src);
+                for (let j = 0; j < css.length; j++) {
+                    const item = css.item(j);
+                    copy.style[item] = css[item];
+                }
+            }
+            function recSetupCopy(copy, src) {
+                // assign css text
+                applyCss(copy, src);
+                // bitmaps
+                if (copy instanceof HTMLImageElement || copy instanceof SVGImageElement) {
+                    addLoadPromise(copy);
+                }
+                else if (copy instanceof HTMLCanvasElement) {
+                    copyCanvas(copy, src);
+                }
+                // recursion
+                const childLength = copy.children.length;
+                for (let i = 0; i < childLength; i++) {
+                    const copy1 = copy.children.item(i), src1 = src.children.item(i);
+                    if (copy1.tagName === src1.tagName) {
+                        recSetupCopy(copy1, src1);
+                    }
+                }
+            }
+            //#endregion
+            const isSvg = el instanceof SVGElement;
+            if (!isSvg) {
+                var doc = document.implementation.createHTMLDocument('');
+                doc.write(el.outerHTML);
+                doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
+                const xpath = document.evaluate(".//" + el.localName, doc.body, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+                const node = xpath;
+                node.setAttribute('xmlns', doc.documentElement.namespaceURI);
+                recSetupCopy(node, el);
+                Promise.all(loadPromises).then(_ => {
+                    // Get well-formed markup
+                    const svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
+                    const size = Utils.offset(el);
+                    svg.setAttribute('viewBox', `0 0 ${size.width} ${size.height}`);
+                    svg.setAttribute('width', size.width.toString());
+                    svg.setAttribute('height', size.height.toString());
+                    svg.innerHTML = `<foreignObject width="${size.width}" height="${size.height}">${node.outerHTML}</foreignObject>`;
+                    el = svg;
+                    execute();
+                });
+            }
+            else {
+                const svg = el.cloneNode(true);
+                recSetupCopy(svg, el);
+                Promise.all(loadPromises).then(_ => {
+                    el = svg;
+                    execute();
+                });
+            }
+            function execute() {
+                const data = new XMLSerializer().serializeToString(el);
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                // switching from blob to data url (see: https://bugs.chromium.org/p/chromium/issues/detail?id=294129)
+                //const domURL = this._domURL;
+                //var svg = new Blob([data], { type: 'image/svg+xml' });
+                //var url = domURL.createObjectURL(svg);
+                const url = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(data);
+                img.onload = () => {
+                    drawCanvas(img).then(resolve);
+                    //domURL.revokeObjectURL(url);
+                };
+                img.src = url;
+            }
+        });
+    }
+    static async download(arg0, arg1, mime = "application/download") {
+        if (typeof arg0 === 'string') {
+            const url = arg0;
+            let options = {}, filename;
+            if (!Utils.isNullOrEmpty(arg1)) {
+                if (typeof arg1 === 'object') {
+                    options = { credentials: arg1.credentials, headers: arg1.headers };
+                    filename = arg1.filename || filename;
+                    mime = arg1.mime || mime;
+                }
+                else {
+                    filename = arg1;
+                }
+            }
+            var response = await fetch(url, options);
+            if (response.ok) {
+                if (Utils.isNullOrEmpty(filename)) {
+                    const headerName = 'Content-Disposition';
+                    if (response.headers.has(headerName)) {
+                        const header = response.headers.get(headerName), results = /^attachment; filename=\"?([^;\"]+)\"?(;|$)/.exec(header);
+                        if (results.length > 1) {
+                            filename = results[1];
+                        }
+                    }
+                    else {
+                        filename = DEFAULT_DOWNLOAD_FILENAME;
+                    }
+                }
+                var blob = await response.blob();
+                const fn = filename.split(/[\\\/]/g).join('_');
+                return Utils.download(blob, fn);
+            }
+            {
+                const reason = await response.text();
+                throw new Error(reason);
+            }
+        }
+        else {
+            const content = arg0, filename = (typeof arg1 === 'string' && arg1) || DEFAULT_DOWNLOAD_FILENAME, fanchor = document.createElement('a');
+            fanchor.setAttribute('href', Utils._domURL.createObjectURL(content));
+            fanchor.setAttribute('download', filename);
+            if (document.createEvent) {
+                var event = document.createEvent('MouseEvents');
+                event.initEvent('click', true, true);
+                fanchor.dispatchEvent(event);
+            }
+            else {
+                fanchor.click();
+            }
+        }
+    }
+    // #endregion
+    // #region DOM
+    static isDOMReady() {
+        // Must exclude 'interactive' state since module script haven't been processed yet.
+        return /* document.readyState === 'interactive' ||*/ document.readyState === 'complete';
+    }
+    static onDOMReady(listener) {
+        //window.addEventListener('DOMContentLoaded', listener, false);
+        // window 'load' event fires after 'DOMCOntentLoaded' since includes images load.
+        window.addEventListener('load', listener, false);
+    }
+    /**
+     * Moves all the source element children to the target element and returns them as an array of nodes.
+     * @param source Source element.
+     * @param target Target element.
+     */
+    static moveChildren(source, target) {
+        return Utils.moveItems(source.childNodes, target);
+    }
+    /**
+     * Moves specific nodes to the target element and returns them as an array of nodes.
+     * @param nodes Nodes to move.
+     * @param target Target element.
+     */
+    static moveItems(nodes, target) {
+        let dom = [], ref;
+        for (let j = nodes.length - 1; j >= 0; j--) {
+            let item = nodes instanceof NodeList ? nodes.item(j) : nodes[j];
+            target.insertBefore(item, ref);
+            dom.unshift(item);
+            ref = item;
+        }
+        return dom;
+    }
+    static is(el, selector) {
+        return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector)
+            .call(el, selector);
+    }
+    static lang(el) {
+        return el.lang || document.documentElement.lang || navigator.language;
+    }
+    static jsonSortStringify(obj) {
+        if (Utils.isNull(obj)) {
+            return obj;
+        }
+        return Utils.Json.stringify(obj);
+    }
+    static { this.Browsers = {
+        detect
+    }; }
+    static cookies(cookie) {
+        const cookies = (cookie ?? document.cookie).split(';'), retval = {};
+        for (var pair of cookies) {
+            const keyval = pair.split('=');
+            if (keyval.length < 2) {
+                continue;
+            }
+            const key = (keyval[0] || '').trim(), value = (keyval[1] || '').trim();
+            Object.defineProperty(retval, key, {
+                configurable: false, enumerable: true, writable: false,
+                value: decodeURIComponent(value.split('+').join(' '))
+            });
+        }
+        return retval;
+    }
+    static { this.Cookies = {
+        getAll: async (cookieName) => {
+            const store = 'cookieStore' in window ? window.cookieStore : null;
+            const retval = [];
+            if (Utils.isNull(store)) {
+                const nameValues = Utils.cookies();
+                for (let name in nameValues) {
+                    if (!Utils.isNullOrEmpty(cookieName) && cookieName !== name) {
+                        continue;
+                    }
+                    retval.push({ name, value: nameValues[name] });
+                }
+                return retval;
+            }
+            else {
+                return await store.getAll(cookieName);
+            }
+        },
+        stringify: (data) => {
+            let retval = `${data.name}=${encodeURIComponent(data.value ?? '')}`;
+            if (!Utils.isNullOrEmpty(data.domain)) {
+                retval += `; domain=${encodeURIComponent(data.domain)}`;
+            }
+            if (!Utils.isNullOrEmpty(data.path)) {
+                retval += `; path=${encodeURIComponent(data.path)}`;
+            }
+            if (data.maxAge > 0) {
+                retval += `; max-age=${data.maxAge.toFixed(0)}`;
+            }
+            if (!Utils.isNullOrEmpty(data.expires)) {
+                retval += `; expires=${data.expires}`;
+            }
+            if (data.partitioned) {
+                retval += '; Partitioned';
+            }
+            if (!Utils.isNullOrEmpty(data.sameSite)) {
+                retval += `; SameSite=${encodeURIComponent(data.sameSite)}`;
+            }
+            if (data.secure) {
+                retval += '; Secure';
+            }
+            return retval;
+        }
+    }; }
+    static isVisible(el) {
+        if ('checkVisibility' in el) {
+            return el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true });
+        }
+        return getComputedStyle(el).visibility !== 'hidden' && (el.clientWidth > 0 || el.clientHeight > 0);
+    }
+    //#region classList DOMTokenList (css)
+    static hasClass(el, className) {
+        if (el.classList) {
+            return el.classList.contains(className);
+        }
+        else {
+            return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+        }
+    }
+    static addClass(el, className) {
+        const css = className.trim();
+        if (el.classList) {
+            DOMTokenList.prototype.add.apply(el.classList, css.split(' '));
+        }
+        else {
+            el.setAttribute('class', el.className + ' ' + css);
+        }
+    }
+    static removeClass(el, className) {
+        const css = className.trim();
+        if (el.classList) {
+            DOMTokenList.prototype.remove.apply(el.classList, css.split(' '));
+        }
+        else {
+            el.setAttribute('class', el.className.replace(new RegExp('(^|\\b)' + css.split(' ').join('|') + '(\\b|$)', 'gi'), ' '));
+        }
+    }
+    static toggleClass(el, className, on) {
+        if (on) {
+            Utils.addClass(el, className);
+        }
+        else {
+            Utils.removeClass(el, className);
+        }
+    }
+    //#endregion
+    //#region part DOMTokenList (shadow-DOM)
+    static hasPart(el, partName) {
+        return el.part.contains(partName);
+    }
+    static addPart(el, partName) {
+        DOMTokenList.prototype.add.apply(el.part, partName.trim().split(' '));
+    }
+    static removePart(el, partName) {
+        DOMTokenList.prototype.remove.apply(el.part, partName.trim().split(' '));
+    }
+    static togglePart(el, partName, on) {
+        if (on) {
+            Utils.addPart(el, partName);
+        }
+        else {
+            Utils.removePart(el, partName);
+        }
+    }
+    //#endregion
+    /**
+     * Retrieve the bounding box of the provided element as of its rendered appearance on the stage (takes transformations into account).
+     * @param el The element.
+     */
+    static offset(el) {
+        var rect = el.getBoundingClientRect();
+        return {
+            top: Math.round(rect.top) + Utils.scrollTop,
+            left: Math.round(rect.left) + Utils.scrollLeft,
+            width: Math.round(rect.width),
+            height: Math.round(rect.height)
+        };
+    }
+    /**
+     * Retrieve the bounding box of the provided element as of its rendered appearance on the stage (takes transformations into account).
+     * @param el The element.
+     */
+    static offsetRect(el) {
+        var rect = this.offset(el);
+        return {
+            y: rect.top,
+            x: rect.left,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    static naturalOffsetTop(el) {
+        return (el?.offsetTop ?? 0) + ((el?.offsetParent && el.offsetParent instanceof HTMLElement) ? this.naturalOffsetTop(el.offsetParent) : 0);
+    }
+    static naturalOffsetLeft(el) {
+        return (el?.offsetTop ?? 0) + ((el?.offsetParent && el.offsetParent instanceof HTMLElement) ? this.naturalOffsetLeft(el.offsetParent) : 0);
+    }
+    /**
+     * Retrieve the natural bounding box of the provided element (does not takes transformations into account).
+     * @param el {HTMLElement} The element.
+     */
+    static naturalOffset(el) {
+        return { left: this.naturalOffsetLeft(el), top: this.naturalOffsetTop(el), width: el?.offsetWidth ?? 0, height: el?.offsetHeight ?? 0 };
+    }
+    /**
+     * Retrieve the natural bounding box of the provided element (does not takes transformations into account).
+     * @param el {HTMLElement} The element.
+     */
+    static naturalOffsetRect(el) {
+        var rect = this.naturalOffset(el);
+        return {
+            y: rect.top,
+            x: rect.left,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    /** @deprecated */
+    static deserializeTransform(obj) {
+        return Utils.Css.deserializeTransform(obj);
+    }
+    static set scrollTop(y) {
+        window.scrollTo(Utils.scrollLeft, y);
+    }
+    static set scrollLeft(x) {
+        window.scrollTo(x, Utils.scrollTop);
+    }
+    static get scrollTop() {
+        return window.scrollY /*window.pageYOffset*/ || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    }
+    static get scrollLeft() {
+        return window.scrollX /*window.pageXOffset*/ || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    }
+    static get windowSize() {
+        let win = window;
+        return {
+            width: win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth || 0,
+            height: win.innerHeight || win.document.documentElement.clientHeight || win.document.body.clientHeight || 0
+        };
+    }
+    /**
+     * Adds a callback at the end of a CSS animation/transition for a given element (execute once).
+     * @param element The very element that has to trigger the animation/transitionend event.
+     * @param callback Then callback.
+     * @param timeout Fallback timeout (ms) in case the animation/transitionend event won't fire.
+     */
+    static addAnimationEndCallback(element, callback, timeout = 500) {
+        const fn = (e) => {
+            if (!e || e.target == element) {
+                clearTimeout(handle);
+                element.removeEventListener('animationend', fn, false);
+                element.removeEventListener('transitionend', fn, false);
+                callback.apply(this, [element]);
+            }
+        };
+        element.addEventListener('animationend', fn, false);
+        element.addEventListener('transitionend', fn, false);
+        // fallback in case animation is missing
+        const handle = setTimeout(fn, timeout);
+    }
+    /**
+     * Promisifies the addAnimationEndCallback function.
+     * @param element The very element that has to trigger the animation/transitionend event.
+     * @param timeout Fallback timeout (ms) in case the animation/transitionend event won't fire.
+     */
+    static waitForAnimationEnd(element, timeout = 500) {
+        return new Promise((resolve, _) => {
+            Utils.addAnimationEndCallback(element, () => {
+                resolve();
+            }, timeout);
+        });
+    }
+    /**
+     * Waits until the provided timespan elapses.
+     * @param msecs timespan in milliseconds
+     */
+    static idle(msecs) {
+        return new Promise((resolve, _) => {
+            setTimeout(() => resolve(), msecs);
+        });
+    }
+    /**
+     * Increases a callback loop call until cancelation is called.
+     * @param callback Callback looped.
+     * @param interval First callback call delay in ms (default 500).
+     * @param pace Acceleration in ms per loop (default 5).
+     * @param min Minimum loop rate in ms (default 20).
+     *
+     * Use case/example: while keeping a button pressed, the related callback execution increases in frequency.
+     */
+    static accelerateCallback(callback, interval = 500, pace = 5, min = 20) {
+        let token = { cancel: false }, int = interval, last = pace + min;
+        let fn = () => {
+            callback(token);
+            if (!token.cancel) {
+                setTimeout(fn, int);
+                if (int < last) {
+                    int = min;
+                }
+                else {
+                    int -= pace;
+                }
+            }
+        };
+        fn();
+    }
+    // #endregion
+    // #region other
+    static isEmpty(obj) {
+        return NullChecker.isEmpty(obj) && !(obj instanceof Node);
+    }
+    static isNull(obj) {
+        return NullChecker.isNull(obj);
+    }
+    // legacy
+    static isArray(val) {
+        return Array.isArray(val);
+    }
+    static isNullOrEmpty(val) {
+        return Utils.isNull(val) || Utils.isEmpty(val);
+    }
+    /**
+     * It is a `valueOf()` based comparison.
+     * @param v1 term 1
+     * @param v2 term 2
+     */
+    static areSemanticallyEqual(v1, v2) {
+        // undefined and null are semantically equal
+        v1 ??= null;
+        v2 ??= null;
+        const sv1 = v1 && v1.valueOf && v1.valueOf();
+        const sv2 = v2 && v2.valueOf && v2.valueOf();
+        return sv1 === sv2;
+    }
+    /** Legacy alias for Object.assign(). */
+    static { this.extend = Object.assign; }
+    static clone(obj) {
+        if (obj === undefined)
+            return undefined;
+        return DeepCloner.clone(obj);
+    }
+    /** Legacy alias for Promise.resolve(). */
+    static fromResult(v) {
+        return Promise.resolve(v);
+    }
+    static fromResultAsync(task) {
+        return new Promise(resolve => requestAnimationFrame(() => resolve(task())));
+    }
+    static readonlyCopy(obj) {
+        if (Utils.isNull(obj)) {
+            return null;
+        }
+        if (Utils.isArray(obj)) {
+            const output = obj.slice(0);
+            Object.freeze(output);
+            return output;
+        }
+        else {
+            const output = {};
+            for (let name in obj) {
+                output[name] = obj[name];
+            }
+            Object.freeze(output);
+            return output;
+        }
+    }
+    //#endregion
+    //#region Net
+    static { this.URIs = {
+        format: function (url, parameters, removeMatchedParameters) {
+            // replace segments
+            for (let name in parameters || {}) {
+                let tmpl = new RegExp("(^|\\/)\\{" + name + "\\??\\}(\\/|$)");
+                let arr = tmpl.exec(url);
+                if (arr && arr.length) {
+                    let rpl = new RegExp("\\{" + name + "\\??\\}"), ndx = arr.index;
+                    url = url.substring(0, ndx) + url.substring(ndx).replace(rpl, encodeURIComponent(parameters[name]));
+                    if (removeMatchedParameters) {
+                        delete parameters[name];
+                    }
+                }
+            }
+            // clean-up optional
+            const optPattern = /(^|\/)\{[\w]+\?\}(\/|$)/;
+            var optArr;
+            while ((optArr = optPattern.exec(url)) && optArr.length > 0) {
+                let wholeMatch = optArr[0];
+                url = url.replace(wholeMatch, wholeMatch.endsWith('/') ? "/" : "");
+            }
+            return url;
+        },
+        appendQuery: function (url, parameters, removeNullEntries = false, hash = false) {
+            const char = hash ? '#' : '?', pattern = hash ? /#/ : /\?/;
+            const query = (pattern.test(url) ? '&' : char) +
+                Object.keys(parameters)
+                    .filter(k => !Utils.isNull(parameters[k]) || !removeNullEntries)
+                    .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(parameters[k] ?? '')).join('&');
+            return url + (query.length > 1 ? query : '');
+        },
+        parseQuery: (query = window.location) => {
+            if (typeof query !== 'string') {
+                query = query.search;
+            }
+            const obj = {};
+            new URLSearchParams(query).forEach((value, name) => {
+                Object.defineProperty(obj, name, { enumerable: true, value });
+            });
+            return obj;
+        },
+        hasMandatoryTemplateSegments: function (url) {
+            return /(^|\/)\{\.*\}(\/|$)/.test(url);
+        },
+        parseRoute: function (pathTemplate) {
+            let tmpl = pathTemplate;
+            const trunks = [];
+            if (!Utils.isNullOrEmpty(tmpl)) {
+                let res;
+                let j = 0;
+                while ((res = SEGMENT_PATTERN.exec(tmpl)) != null) {
+                    const item = res[0];
+                    const res1 = ROUTE_SEGMENT_PATTERN.exec(item);
+                    if (!Utils.isNullOrEmpty(res1)) {
+                        const prop = res1[1];
+                        trunks.push({ name: prop, optional: item.charAt(item.length - 2) === '?', index: j });
+                    }
+                    tmpl = tmpl.substring(res.index + item.length);
+                    j++;
+                }
+            }
+            return trunks;
+        },
+        split: function (url) {
+            const URL_PATTERN = /^((https?:)?\/\/[^\/]+)?([^\?#]+)(\?[^#]*)?(#[^#]*)?$/;
+            const regArr = URL_PATTERN.exec(url);
+            if (!regArr /*|| regArr.length <= 3*/) {
+                return null;
+            }
+            return { domain: regArr[2] ?? '', protocol: regArr[1] ?? '', path: regArr[3] ?? '', query: regArr[4] ?? '', hash: regArr[5] ?? '' };
+        },
+        parseState: function (metadata, url, path, query, hash) {
+            let fullPath = url;
+            if (Utils.isNullOrEmpty(path)) {
+                const split = Utils.URIs.split(url);
+                path = split.path;
+                if (Utils.isNullOrEmpty(query)) {
+                    query = split.query ?? '';
+                }
+                if (Utils.isNullOrEmpty(hash)) {
+                    hash = split.hash ?? '';
+                }
+                fullPath = path + query + hash;
+            }
+            const parseHash = (hash) => {
+                const ndx = hash.indexOf('#');
+                if (ndx !== 0) {
+                    return null;
+                }
+                return hash.substring(ndx + 1);
+            };
+            const parseQuery = (search) => {
+                const ndx = search.indexOf('?');
+                if (ndx === 0) {
+                    return Utils.URIs.parseQuery(search.substring(ndx + 1));
+                }
+                return {};
+            };
+            let obj = {
+                $path: fullPath,
+                $pathname: path,
+                $querystring: query.length > 0 ? query.substring(1) : query,
+                $query: parseQuery(query),
+                $hash: parseHash(hash)
+            }, i = 0;
+            const tmpl = metadata.slice();
+            if (!Utils.isNullOrEmpty(tmpl)) {
+                let res;
+                while ((res = SEGMENT_PATTERN.exec(path)) != null) {
+                    const v = res[0];
+                    const tmplIndex = tmpl.findIndex(t => t.index === i);
+                    if (tmplIndex >= 0) {
+                        const tmplItem = tmpl[tmplIndex];
+                        const { name: prop } = tmplItem;
+                        Object.defineProperty(obj, prop, { enumerable: true, value: v.substring(1) });
+                        // remove used value
+                        tmpl.splice(tmplIndex, 1);
+                    }
+                    i++;
+                    path = path.substring(res.index + v.length);
+                }
+            }
+            for (let k = 0; k < tmpl.length; k++) {
+                if (!tmpl[k].optional) {
+                    throw `Must provide "${tmpl[k].name}" route value.`;
+                }
+            }
+            return obj;
+        }
+    }; }
+    /**
+     * Ensures the proper parsing of Web API results, including deprecated/legacy Pacem wrapped results.
+     */
+    static getApiResult(json) {
+        if (typeof json === 'object'
+            && !Utils.isNull(json)
+            && json.hasOwnProperty('success')) {
+            switch (json.success) {
+                case true:
+                    if (json.hasOwnProperty('result')) {
+                        return json.result;
+                    }
+                    break;
+                case false:
+                    if (json.hasOwnProperty('error')) {
+                        return null;
+                    }
+                    break;
+            }
+        }
+        return json;
+    }
+}
+// }