iobroker.webui 1.25.2 → 1.26.0

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/Debounce.js

@@ -0,0 +1,19 @@
+export function debounce(func, wait, immediate = false) {
+    var timeout;
+    return function executedFunction() {
+        //@ts-ignore
+        let context = this;
+        let args = arguments;
+        let later = function () {
+            timeout = null;
+            if (!immediate)
+                func.apply(context, args);
+        };
+        let callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow)
+            func.apply(context, args);
+    };
+}
+;

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/DeclaritiveBaseCustomWebcomponent.js

@@ -0,0 +1,176 @@
+import { BaseCustomWebComponentNoAttachedTemplate, css, cssFromString } from "./BaseCustomWebComponent.js";
+import { WeakArray } from "./WeakArray.js";
+function camelToDashCase(text) {
+    return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+}
+const instanceMap = new Map();
+class BaseDeclaritiveWebcomponent extends BaseCustomWebComponentNoAttachedTemplate {
+    #firstConnect = false;
+    constructor() {
+        super();
+    }
+    async connectedCallback() {
+        if (!this.#firstConnect) {
+            this.#firstConnect = true;
+            if (window[this.localName].template === undefined) {
+                window[this.localName].template = window[this.localName]._definingElement.querySelector('template');
+                const styles = window[this.localName]._definingElement.querySelectorAll('style[type=adopted-css]');
+                if (styles?.length)
+                    window[this.localName]._styles = Array.from(styles).map(x => cssFromString(x.textContent));
+            }
+            //@ts-ignore
+            this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
+            //@ts-ignore
+            if (this.constructor._styles) {
+                //@ts-ignore
+                this.shadowRoot.adoptedStyleSheets = this.constructor._styles;
+            }
+            //@ts-ignore
+            if (this.constructor._enableBindings)
+                this._bindingsParse(null, true);
+            this.shadowRoot.appendChild(this._rootDocumentFragment);
+        }
+        this._parseAttributesToProperties();
+        //@ts-ignore
+        if (this.constructor._enableBindings)
+            this._bindingsRefresh();
+    }
+    _reapplyTemplateAfterUpdate() {
+        this._bindings = null;
+        this.shadowRoot.innerHTML = '';
+        this.shadowRoot.adoptedStyleSheets = [];
+        //@ts-ignore
+        if (this.constructor._styles) {
+            //@ts-ignore
+            this.shadowRoot.adoptedStyleSheets = this.constructor._styles;
+        }
+        //@ts-ignore
+        this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
+        this.shadowRoot.appendChild(this._rootDocumentFragment);
+        //@ts-ignore
+        if (this.constructor._enableBindings)
+            this._bindingsParse(null, true);
+    }
+}
+class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttachedTemplate {
+    static style = css `:host{display:none;}`;
+    name;
+    enableBindings;
+    properties;
+    static properties = {
+        name: String,
+        enableBindings: Boolean,
+        properties: String
+    };
+    constructor() {
+        super();
+        this._parseAttributesToProperties();
+        let props = {};
+        if (this.properties) {
+            if (this.properties[0] === '{') {
+                const obj = JSON.parse(this.properties);
+                for (let i in obj) {
+                    if (typeof obj[i] === 'string')
+                        props[i] = window[obj[i]];
+                    else {
+                        props[i] = obj[i];
+                        props[i].type = obj[i].type ? window[obj[i].type] : String;
+                    }
+                }
+            }
+            else {
+                props = this.properties.split(/[\s,;]+/).reduce((a, v) => ({ ...a, [v]: String }), {});
+            }
+        }
+        const name = this.name;
+        if (window[name]) {
+            window[name].template = undefined;
+            window[name].properties = props;
+            window[name]._propertiesDictionary = null;
+            window[name]._enableBindings = this.enableBindings;
+            window[name]._definingElement = this;
+            window[name]._styles = null;
+        }
+        else {
+            const instanceArray = new WeakArray();
+            instanceMap.set(name, instanceArray);
+            window[name] = function () {
+                const instance = Reflect.construct(BaseDeclaritiveWebcomponent, [], window[name]);
+                instanceArray.add(instance);
+                for (let p in props) {
+                    Object.defineProperty(instance, p, {
+                        get() {
+                            return this['_' + p];
+                        },
+                        set(newValue) {
+                            if (this['_' + p] !== newValue) {
+                                this['_' + p] = newValue;
+                                if (props[p].reflect) {
+                                    if (props[p].type === Boolean) {
+                                        if (newValue === true)
+                                            this.setAttribute(props[p].attribute ?? camelToDashCase(p), '');
+                                        else
+                                            this.removeAttribute(props[p].attribute ?? camelToDashCase(p));
+                                    }
+                                    else {
+                                        if (props[p].type === Object || props[p].type === Array)
+                                            this.setAttribute(props[p].attribute ?? camelToDashCase(p), JSON.stringify(newValue));
+                                        else
+                                            this.setAttribute(props[p].attribute ?? camelToDashCase(p), newValue);
+                                    }
+                                }
+                                //@ts-ignore
+                                if (this.constructor._enableBindings)
+                                    this._bindingsRefresh(p);
+                                instance.dispatchEvent(new CustomEvent(camelToDashCase(p) + '-changed', { detail: { newValue } }));
+                            }
+                        },
+                        enumerable: true,
+                        configurable: true,
+                    });
+                    if (props[p].default) {
+                        instance['_' + p] = props[p].default;
+                    }
+                }
+                return instance;
+            };
+            //window[name].style = style;
+            window[name].properties = props;
+            window[name]._propertiesDictionary = null;
+            window[name]._enableBindings = this.enableBindings;
+            window[name]._definingElement = this;
+            window[name]._styles = null;
+            window[name].prototype = Object.create(BaseDeclaritiveWebcomponent.prototype, { constructor: { value: window[name] } });
+            if (!customElements.get(name))
+                customElements.define(name, window[name]);
+        }
+    }
+    upgradeAllInstances(template) {
+        window[this.name].template = template ?? this.querySelector('template');
+        const styles = this.querySelectorAll('style[type=adopted-css]');
+        if (styles?.length)
+            window[this.name]._styles = Array.from(styles).map(x => cssFromString(x.textContent));
+        const instanceArray = instanceMap.get(this.name);
+        for (const i of instanceArray)
+            i._reapplyTemplateAfterUpdate();
+    }
+}
+customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);
+/*
+<node-projects-dce name="simple-dce-demo" properties='{"list":"Array", "list2":"Array", "ctx":{"type":"String","reflect":true}}' enable-bindings >
+    <template>
+        <style>h1 {color: red}</style>
+        <h1>Hello World</h1>
+        <div style="border: solid 3px black">Ctx: [[this.ctx]]</div>
+        <template repeat:myitem="[[this.list]]">
+            <button>[[myitem.toUpperCase()]] - <b>[[myitem.toLowerCase()]]</b> - [[index]]</button>
+            <ul>
+            <template repeat:myitem2="[[this.list2]]" repeat-index="inneridx">
+                <button @click="[[this.ctx = myitem2]]" >[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
+            </template>
+            </ul>
+        </template>
+    </template>
+</node-projects-dce>
+<simple-dce-demo list='["aa","bb","cc"]' list2='["hello", "you"]' ctx="TestCtx" style="position:absolute;left:184px;top:-53px;"></simple-dce-demo>
+*/ 

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/DomHelper.js

@@ -0,0 +1,96 @@
+export class DomHelper {
+    static *getAllChildNodes(element, includeShadowDom = false, ignore) {
+        if (!ignore || ignore.indexOf(element) < 0) {
+            if (element.children) {
+                for (const node of element.children) {
+                    yield node;
+                    const childs = DomHelper.getAllChildNodes(node, includeShadowDom, ignore);
+                    for (const cnode of childs) {
+                        yield cnode;
+                    }
+                }
+            }
+            if (includeShadowDom && element.shadowRoot != null) {
+                yield element.shadowRoot;
+                const childs = DomHelper.getAllChildNodes(element.shadowRoot, includeShadowDom, ignore);
+                for (const cnode of childs) {
+                    yield cnode;
+                }
+            }
+        }
+        return null;
+    }
+    static removeAllChildnodes(node, selector) {
+        if (!selector) {
+            for (let c = node.firstChild; c !== null; c = node.firstChild) {
+                node.removeChild(c);
+            }
+        }
+        else {
+            const elements = node.querySelectorAll(selector);
+            for (const e of elements) {
+                if (e.parentNode == node)
+                    node.removeChild(e);
+            }
+        }
+    }
+    static nodeIndex(node) {
+        let i = 0;
+        while ((node = node.previousSibling) != null)
+            i++;
+        return i;
+    }
+    static childIndex(node) {
+        for (let i = 0; i < node.parentElement.children.length; i++)
+            if (node.parentElement.children[i] == node)
+                return i;
+        return -1;
+    }
+    static getHost(node) {
+        return node.getRootNode()?.host;
+    }
+    static nodeIsChildOf(node, parentNode) {
+        while (node.parentElement) {
+            if (node.parentElement == parentNode)
+                return true;
+            node = node.parentElement;
+        }
+        return false;
+    }
+    static findParentNodeOfWithLocalName(element, localName) {
+        let el = element;
+        while (true) {
+            if (el.parentElement != null) {
+                el = el.parentElement;
+            }
+            else if (el.parentNode != null && el.parentNode.host != null) {
+                el = el.parentNode.host;
+            }
+            else {
+                break;
+            }
+            if (el.localName == localName) {
+                return el;
+            }
+        }
+        return null;
+    }
+    static findParentNodeOfType(element, type) {
+        let el = element;
+        while (true) {
+            if (el.parentElement != null) {
+                el = el.parentElement;
+            }
+            else if (el.parentNode != null && el.parentNode.host != null) {
+                el = el.parentNode.host;
+            }
+            else {
+                break;
+            }
+            if (el instanceof type) {
+                return el;
+            }
+        }
+        return null;
+    }
+}

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/HotModuleReplacement.js

@@ -0,0 +1,125 @@
+import { BaseCustomWebComponentNoAttachedTemplate } from "./BaseCustomWebComponent.js";
+export function getFunctionType(x) {
+    return typeof x === 'function'
+        ? x.prototype
+            ? Object.getOwnPropertyDescriptor(x, 'prototype').writable
+                ? 'function'
+                : 'class'
+            : x.constructor.name === 'AsyncFunction'
+                ? 'async'
+                : 'arrow'
+        : '';
+}
+export class HotModuleReplacement {
+    static changesFetcher;
+    static instances = [];
+    static initHMR(fetchChangedFiles) {
+        HotModuleReplacement.changesFetcher = fetchChangedFiles;
+        BaseCustomWebComponentNoAttachedTemplate.instanceCreatedCallback = (i) => {
+            HotModuleReplacement.instances.push(new WeakRef(i));
+        };
+        HotModuleReplacement.startPolling();
+    }
+    static startPolling(interval = 100) {
+        setTimeout(() => {
+            HotModuleReplacement.pollForChanges(interval);
+        }, interval);
+    }
+    static async pollForChanges(interval) {
+        let changes = await HotModuleReplacement.changesFetcher();
+        if (changes != null) {
+            for (let file of changes) {
+                HotModuleReplacement.assertFileType(file);
+            }
+        }
+        setTimeout(() => {
+            HotModuleReplacement.pollForChanges(interval);
+        }, interval);
+    }
+    static assertFileType(file) {
+        switch (file.trim().toLowerCase().split(".").pop()) {
+            case "css":
+                console.warn("🔥 Hot reload - css: " + file);
+                HotModuleReplacement.reloadCss(file);
+                break;
+            case "js":
+            case "cjs":
+            case "mjs":
+                console.warn("🔥 Hot reload - js: " + file);
+                HotModuleReplacement.reloadJs(file);
+                break;
+            default:
+                break;
+        }
+    }
+    static async reloadJs(file) {
+        let oldModule = await import(file);
+        let oldDefine = customElements.define;
+        customElements.define = () => null;
+        let newModule = await import(file + "?reload=" + new Date().getTime());
+        customElements.define = oldDefine;
+        for (let nameOfexport in newModule) {
+            const classExport = newModule[nameOfexport];
+            if (getFunctionType(classExport) == 'class') {
+                let i = HotModuleReplacement.instances.length;
+                while (i--) {
+                    let instanceRef = HotModuleReplacement.instances[i];
+                    let instance = instanceRef.deref();
+                    if (instance) {
+                        if (classExport.name == instance.constructor.name) {
+                            if (instance._hmrCallback)
+                                instance._hmrCallback(classExport);
+                        }
+                    }
+                    else {
+                        HotModuleReplacement.instances.splice(i, 1);
+                    }
+                }
+            }
+        }
+        for (let nameOfexport in oldModule) {
+            const oExport = oldModule[nameOfexport];
+            if (getFunctionType(oExport) == 'class') {
+                const newExport = newModule[nameOfexport];
+                if (newExport) {
+                    // Gets all attribute-properties of class
+                    let properties = Object.getOwnPropertyNames(oExport);
+                    for (let property of properties) {
+                        if (property == 'prototype' || property == 'name' || property == 'length')
+                            continue;
+                        delete oExport[property];
+                        try {
+                            oExport[property] = newExport[property];
+                        }
+                        catch (err) {
+                            console.error("🔥 Hot reload - error setting property '" + property + "' of '" + oExport.name + "'", err);
+                        }
+                    }
+                    properties = Object.getOwnPropertyNames(oExport.prototype);
+                    for (let property of properties) {
+                        if (property == 'prototype' || property == 'name' || property == 'length')
+                            continue;
+                        delete oExport[property];
+                        try {
+                            oExport.prototype[property] = newExport.prototype[property];
+                        }
+                        catch (err) {
+                            console.error("🔥 Hot reload - error setting property '" + property + "' of '" + oExport.name + "'", err);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // Change the url of the stylesheet to force a reload
+    static async reloadCss(file) {
+        const newId = new Date().getTime();
+        for (let link of document.querySelectorAll(`link[href*="${file}"]`))
+            link.href = link.href.split("?")[0] + "?reload=" + newId;
+        const oldCssModule = await import(file, { assert: { type: 'css' } });
+        const newCssModule = await import(file + "?reload=" + newId, { assert: { type: 'css' } });
+        const oldStylesheet = oldCssModule.default;
+        const newStylesheet = newCssModule.default;
+        oldStylesheet.replace(Array.from(newStylesheet.cssRules).map(rule => rule.cssText).join(''));
+    }
+}

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/LazyLoader.js

@@ -0,0 +1,52 @@
+export class LazyLoader {
+    static LoadJavascript(file) {
+        const checkName = '_' + file + '-loaded';
+        if (LazyLoader[checkName]) {
+            return Promise.resolve(false);
+        }
+        return new Promise((resolve, reject) => {
+            const el = document.createElement('script');
+            el.src = file;
+            el.onload = e => {
+                LazyLoader[checkName] = true;
+                resolve(true);
+            };
+            el.onerror = err => {
+                reject(err);
+            };
+            window.document.head.appendChild(el);
+        });
+    }
+    static LoadJavascripts(...files) {
+        let p = [];
+        for (let f of files) {
+            p.push(LazyLoader.LoadJavascript(f));
+        }
+        return Promise.all(p);
+    }
+    static LoadText(url) {
+        return new Promise(function (resolve, reject) {
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', url);
+            xhr.overrideMimeType('text/plain; charset=x-user-defined');
+            xhr.onload = () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    resolve(xhr.response);
+                }
+                else {
+                    reject({
+                        status: xhr.status,
+                        statusText: xhr.statusText,
+                    });
+                }
+            };
+            xhr.onerror = () => {
+                reject({
+                    status: xhr.status,
+                    statusText: xhr.statusText,
+                });
+            };
+            xhr.send();
+        });
+    }
+}

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/TouchContextMenu.js

@@ -0,0 +1,20 @@
+let m = new WeakMap();
+export function addTouchFriendlyContextMenu(element, callback) {
+    let cb = (e) => {
+        let t = setTimeout(() => {
+            callback(e);
+        }, 500);
+        window.addEventListener('touchend', () => {
+            clearTimeout(t);
+        });
+    };
+    element.addEventListener('touchstart', cb);
+    element.addEventListener('contextmenu', callback);
+    m.set(callback, cb);
+}
+export function removeTouchFriendlyContextMenu(element, callback) {
+    let cb = m.get(callback);
+    m.delete(callback);
+    element.removeEventListener('touchstart', cb);
+    element.removeEventListener('contextmenu', cb);
+}

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/TypedEvent.js

@@ -0,0 +1,48 @@
+export class PropertyChangedArgs {
+    constructor(newValue, oldValue) {
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    oldValue;
+    newValue;
+}
+export class TypedEvent {
+    listeners = [];
+    listenersOncer = [];
+    listenerSingle = null;
+    on = (listener) => {
+        this.listeners.push(listener);
+        return {
+            dispose: () => this.off(listener)
+        };
+    };
+    single = (listener) => {
+        this.listenerSingle = listener;
+        return {
+            dispose: () => { if (this.listenerSingle === listener)
+                this.listenerSingle = null; }
+        };
+    };
+    once = (listener) => {
+        this.listenersOncer.push(listener);
+    };
+    off = (listener) => {
+        let callbackIndex = this.listeners.indexOf(listener);
+        if (callbackIndex > -1)
+            this.listeners.splice(callbackIndex, 1);
+    };
+    emit = (event) => {
+        this.listeners.forEach((listener) => listener(event));
+        if (this.listenersOncer.length > 0) {
+            const toCall = this.listenersOncer;
+            this.listenersOncer = [];
+            toCall.forEach(listener => listener(event));
+        }
+        if (this.listenerSingle) {
+            this.listenerSingle(event);
+        }
+    };
+    pipe = (te) => {
+        return this.on((e) => te.emit(e));
+    };
+}

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/WeakArray.js

@@ -0,0 +1,27 @@
+export class WeakArray {
+    constructor() {
+        this.#finalizationRegistry = new FinalizationRegistry((obj) => {
+            this.#items.delete(obj);
+        });
+    }
+    #items = new Set();
+    #finalizationRegistry;
+    add(obj) {
+        const wref = new WeakRef(obj);
+        this.#items.add(wref);
+        this.#finalizationRegistry.register(obj, wref);
+        return wref;
+    }
+    remove(obj) {
+        this.#items.delete(obj);
+    }
+    *[Symbol.iterator]() {
+        for (const o of this.#items) {
+            const v = o.deref();
+            if (v)
+                yield v;
+            else
+                this.#items.delete(o);
+        }
+    }
+}

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/index.js

@@ -0,0 +1,9 @@
+export * from "./BaseCustomWebComponent.js";
+export * from "./DomHelper.js";
+export * from "./LazyLoader.js";
+export * from "./TypedEvent.js";
+export * from "./TouchContextMenu.js";
+export * from "./Debounce.js";
+export * from "./DeclaritiveBaseCustomWebcomponent.js";
+export * from "./WeakArray.js";
+//export * from "./HotModuleReplacement.js"

package/www/node_modules/@node-projects/propertygrid.webcomponent/node_modules/@node-projects/base-custom-webcomponent/jsr.json

@@ -0,0 +1,5 @@
+{
+    "name": "@node-projects/base-custom-webcomponent",
+    "version": "0.27.6",
+    "exports": "./src/index.ts"
+}

package/www/node_modules/@node-projects/web-component-designer/dist/elements/helper/getBoxQuads.js

@@ -143,7 +143,7 @@ export function getBoxQuads(node, options) {
             return q;
     }
     /** @type {DOMMatrix} */
-    let originalElementAndAllParentsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(node, options?.relativeTo ?? document.body, options.iframes);
+    let originalElementAndAllParentsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(node, options?.relativeTo ?? document.body, options?.iframes);
     let { width, height } = getElementSize(node, originalElementAndAllParentsMultipliedMatrix);
     let arr = [{ x: 0, y: 0 }, { x: width, y: 0 }, { x: width, y: height }, { x: 0, y: height }];
     /** @type { [DOMPoint, DOMPoint, DOMPoint, DOMPoint] } */
@@ -234,11 +234,12 @@ export function getElementSize(node, matrix) {
 }
 /**
 * @param {Node} node
+* @param {boolean} includeScroll
 * @param {HTMLIFrameElement[]} iframes
 */
-function getElementOffsetsInContainer(node, iframes) {
+function getElementOffsetsInContainer(node, includeScroll, iframes) {
     if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement) {
-        return new DOMPoint(node.offsetLeft - node.scrollLeft, node.offsetTop - node.scrollTop);
+        return new DOMPoint(node.offsetLeft - (includeScroll ? node.scrollLeft : 0), node.offsetTop - (includeScroll ? node.scrollTop : 0));
     }
     else if (node instanceof (node.ownerDocument.defaultView ?? window).Text) {
         const range = document.createRange();
@@ -306,22 +307,20 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
     let lastOffsetParent = null;
     while (actualElement != ancestor && actualElement != null) {
         const parentElement = getParentElementIncludingSlots(actualElement, iframes);
-        if (!(parentElement instanceof HTMLSlotElement)) {
-            if (actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement) {
-                if (lastOffsetParent !== actualElement.offsetParent && !(actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement)) {
-                    const offsets = getElementOffsetsInContainer(actualElement, iframes);
-                    lastOffsetParent = actualElement.offsetParent;
-                    const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
-                    originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
-                }
-            }
-            else {
-                const offsets = getElementOffsetsInContainer(actualElement, iframes);
-                lastOffsetParent = null;
+        if (actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement) {
+            if (lastOffsetParent !== actualElement.offsetParent && !(actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement)) {
+                const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
+                lastOffsetParent = actualElement.offsetParent;
                 const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
                 originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
             }
         }
+        else {
+            const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
+            lastOffsetParent = null;
+            const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
+            originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
+        }
         if (parentElement) {
             parentElementMatrix = getElementCombinedTransform(parentElement, iframes);
             if (parentElement != ancestor)

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/ServiceContainer.js

@@ -17,6 +17,7 @@ export class ServiceContainer extends BaseServiceContainer {
             }
         }
     }
+    instanceServiceContainerCreatedCallbacks = [];
     designViewConfigButtons = [];
     designViewToolbarButtons = [];
     designerPointerExtensions = [];