iobroker.webui 1.25.2 → 1.26.0

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

@@ -0,0 +1,795 @@
+import { addTouchFriendlyContextMenu } from "./TouchContextMenu.js";
+import { TypedEvent } from './TypedEvent.js';
+function toParString(strings, values) {
+    if (strings.length === 1)
+        return strings.raw[0];
+    else {
+        let r = '';
+        for (let i = 0; i < strings.length; i++) {
+            r += strings[i] + (values[i] ?? '');
+        }
+        return r;
+    }
+}
+export const html = function (strings, ...values) {
+    const template = document.createElement('template');
+    template.innerHTML = toParString(strings, values);
+    return template;
+};
+export const htmlFromString = function (value) {
+    const template = document.createElement('template');
+    template.innerHTML = value;
+    return template;
+};
+export const css = function (strings, ...values) {
+    const cssStyleSheet = new CSSStyleSheet();
+    //@ts-ignore
+    cssStyleSheet.replaceSync(toParString(strings, values));
+    return cssStyleSheet;
+};
+export const cssFromString = function (value) {
+    if (typeof value === 'object' && value.default instanceof CSSStyleSheet)
+        return value.default;
+    if (value instanceof CSSStyleSheet)
+        return value;
+    const cssStyleSheet = new CSSStyleSheet();
+    //@ts-ignore
+    cssStyleSheet.replaceSync(value);
+    return cssStyleSheet;
+};
+// decorators
+export function property(par) {
+    return function (target, propertyKey) {
+        //@ts-ignore
+        if (!target.constructor.properties) {
+            //@ts-ignore
+            target.constructor.properties = {};
+        }
+        if (par && par.type != null) {
+            //@ts-ignore
+            target.constructor.properties[propertyKey] = par.type ? par.type : String;
+        }
+        else {
+            //@ts-ignore
+            target.constructor.properties[propertyKey] = par ? par : String;
+        }
+    };
+}
+export function customElement(tagname) {
+    return function (class_) {
+        //@ts-ignore
+        class_.is = tagname;
+        customElements.define(tagname, class_);
+    };
+}
+let _bindingRegex = /\[\[.*?\]\]/g;
+export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
+    static style;
+    static template;
+    //todo: bindings map should contain the name of the bound property
+    _bindings;
+    _repeatBindings;
+    _rootDocumentFragment;
+    _initialPropertyCache = new Map();
+    _noWarningOnBindingErrors;
+    _getDomElement(id) {
+        if (this.shadowRoot.children.length > 1 || (this.shadowRoot.children[0] !== undefined && this.shadowRoot.children[0].localName !== 'style'))
+            return this.shadowRoot.getElementById(id);
+        return this._rootDocumentFragment.getElementById(id);
+    }
+    _getDomElements(selector) {
+        if (this.shadowRoot.children.length > 1 || (this.shadowRoot.children[0] !== undefined && this.shadowRoot.children[0].localName !== 'style'))
+            return this.shadowRoot.querySelectorAll(selector);
+        return this._rootDocumentFragment.querySelectorAll(selector);
+    }
+    _assignEvents(node) {
+        if (!node) {
+            node = this.shadowRoot.children.length > 0 ? this.shadowRoot : this._rootDocumentFragment;
+        }
+        if (node instanceof Element) {
+            for (let a of node.attributes) {
+                if (a.name.startsWith('@') && !a.value.startsWith('[[')) {
+                    try {
+                        if (a.name == "@touch:contextmenu")
+                            addTouchFriendlyContextMenu(node, this[a.value].bind(this));
+                        else {
+                            let sNm = a.name.substr(1);
+                            if (sNm[0] === '@') {
+                                sNm = sNm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            }
+                            let nm = sNm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            if (node[nm] instanceof TypedEvent) {
+                                node[nm].on(this[a.value].bind(this));
+                            }
+                            else {
+                                node.addEventListener(sNm, this[a.value].bind(this));
+                            }
+                        }
+                    }
+                    catch (error) {
+                        console.warn(error.message, 'Failed to attach event "', a, node);
+                    }
+                }
+            }
+        }
+        for (let n of node.childNodes) {
+            this._assignEvents(n);
+        }
+    }
+    /**
+     * Parses Polymer like Bindings
+     *
+     * use [[expression]] for one way bindings
+     *
+     * use {{this.property::change;paste}} for two way wich binds to events 'change 'and 'paste'
+     *
+     * use @eventname="eventHandler" to bind a handler to a event
+     * or @eventname="[[this.eventHandler(par1, par2, ..)]]" for complexer event logic
+     * use @touch:contextmenu... for a context menu that also works with long press on touch
+     *
+     * use css:cssPropertyName=[[expression]] to bind to a css property
+     *
+     * use class:className=[[boolExpression]] to set/remove a css class
+     *
+     * sub <template></template> elements are not bound, so elemnts like <iron-list> of polymer also work
+     *
+     * use repeat:nameOfItem=[[enumerableExpression]] on a Template Element to repeate it for every instance of the enumarable
+     * ==> this could also be nested
+     *
+     */
+    _bindingsParse(node, removeAttributes = false, host = null, context = null) {
+        this._bindingsInternalParse(node, null, removeAttributes, host, context);
+    }
+    _bindingsInternalParse(startNode, repeatBindingItems, removeAttributes, host, context) {
+        if (!this._bindings)
+            this._bindings = [];
+        if (!startNode)
+            startNode = this.shadowRoot.childNodes.length > 0 ? this.shadowRoot : this._rootDocumentFragment;
+        const walker = document.createTreeWalker(startNode, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null);
+        let currNode = startNode;
+        let loopNode = currNode;
+        while (loopNode) {
+            loopNode = currNode;
+            if (!loopNode)
+                break;
+            currNode = walker.nextNode();
+            let node = loopNode;
+            if (node.nodeType === 1) { //node.nodeType === 1
+                const attributes = Array.from(node.attributes);
+                for (let a of attributes) {
+                    if (a.value[0] === '[' && a.value[1] === '[' && a.value[a.value.length - 1] === ']' && a.value[a.value.length - 2] === ']') {
+                        if (a.name.startsWith('css:')) {
+                            const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            const camelCased = a.name.substring(4, a.name.length).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            const b = () => this._bindingSetElementCssValue(node, camelCased, value, repeatBindingItems, host, context);
+                            this._bindings.push([b, null]);
+                            b();
+                        }
+                        else if (a.name.startsWith('class:')) {
+                            const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            const camelCased = a.name.substring(6, a.name.length).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            const b = () => this._bindingSetElementClass(node, camelCased, value, repeatBindingItems, host, context);
+                            this._bindings.push([b, null]);
+                            b();
+                        }
+                        else if (a.name.startsWith('bcw:')) {
+                            if (a.name === 'bcw:visible') {
+                                const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                                const display = node.style.display;
+                                const b = () => this._bindingSetElementCssValue(node, 'display', value + "?'" + display + "':'none'", repeatBindingItems, host, context);
+                                this._bindings.push([b, null]);
+                                b();
+                            }
+                        }
+                        else if (a.name.length === 28 && a.name === 'repeat-changed-item-callback') {
+                            //do nothing
+                        }
+                        else if (a.name === 'if' && node instanceof HTMLTemplateElement) {
+                            const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            const elementsCache = [];
+                            const b = () => this._bindingConditional(node, value, repeatBindingItems, elementsCache, host, context);
+                            this._bindings.push([b, null]);
+                            b();
+                        }
+                        else if (a.name.startsWith('repeat:')) {
+                            const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            const bindingItemVariableName = a.name.substring(7, a.name.length).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            const elementsCache = [];
+                            let bindingIndexname = 'index';
+                            let changeItemCallback = null;
+                            const indexNameAttribute = attributes.find(x => x.name == 'repeat-index');
+                            if (indexNameAttribute)
+                                bindingIndexname = indexNameAttribute.value;
+                            const changeItemCallbackAttribute = attributes.find(x => x.name == 'repeat-changed-item-callback');
+                            if (changeItemCallbackAttribute)
+                                changeItemCallback = changeItemCallbackAttribute.value;
+                            const b = () => this._bindingRepeat(node, bindingItemVariableName, bindingIndexname, value, changeItemCallback, repeatBindingItems, elementsCache, host, context);
+                            this._bindings.push([b, null]);
+                            b();
+                        }
+                        else if (a.name[0] === '@') { //todo remove events on repeat refresh
+                            let nm;
+                            if (a.name[1] === '@')
+                                nm = a.name.substring(2, a.name.length).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            else
+                                nm = a.name.substring(1, a.name.length);
+                            const value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            if (a.name == "@touch:contextmenu")
+                                addTouchFriendlyContextMenu(node, (e) => this._bindingRunEval(value, repeatBindingItems, e, host, context));
+                            else {
+                                if (node[nm] instanceof TypedEvent) {
+                                    node[nm].on((e) => this._bindingRunEval(value, repeatBindingItems, e, host, context));
+                                }
+                                else {
+                                    node.addEventListener(nm, (e) => this._bindingRunEval(value, repeatBindingItems, e, host, context));
+                                }
+                            }
+                        }
+                        else {
+                            let value = a.value.substring(2, a.value.length - 2).replaceAll('&amp;', '&');
+                            let camelCased = a.name;
+                            if (a.name[0] !== '$' && a.name[0] !== '?')
+                                camelCased = a.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            let noNull = false;
+                            if (value[0] === '?') {
+                                value = value.substring(1);
+                                noNull = true;
+                            }
+                            const b = (firstRun, onlyWhenChanged) => this._bindingSetNodeValue(firstRun, node, a, camelCased, value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
+                            this._bindings.push([b, null]);
+                            b(true, false);
+                        }
+                    }
+                    else if (a.value[0] === '{' && a.value[1] === '{' && a.value[a.value.length - 1] === '}' && a.value[a.value.length - 2] === '}') {
+                        const attributeValues = a.value.substring(2, a.value.length - 2).split('::');
+                        let nm = a.name;
+                        if (nm[0] == '.')
+                            nm = nm.substring(1);
+                        let value = attributeValues[0];
+                        let event = (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) ? 'input' : (node instanceof HTMLSelectElement ? 'change' : nm + '-changed');
+                        if (attributeValues.length > 1 && attributeValues[1])
+                            event = attributeValues[1];
+                        const camelCased = nm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                        let noNull = false;
+                        if (value[0] === '?') {
+                            value = value.substring(1);
+                            noNull = true;
+                        }
+                        const b = (firstRun, onlyWhenChanged) => this._bindingSetNodeValue(firstRun, node, a, camelCased, value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
+                        this._bindings.push([b, null]);
+                        b(true, false);
+                        if (event) {
+                            for (let x of event.split(';')) {
+                                if (node[x] instanceof TypedEvent)
+                                    node[x].on((e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), node[camelCased], context, repeatBindingItems));
+                                else
+                                    node.addEventListener(x, (e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), node[camelCased], context, repeatBindingItems));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (node.nodeType === 3) {
+                if (node.nodeValue.indexOf('[[') >= 0) {
+                    const text = node.nodeValue;
+                    const matches = text.matchAll(_bindingRegex);
+                    let lastindex = 0;
+                    let fragment;
+                    const trimmedLength = text.trim().length;
+                    for (let m of matches) {
+                        if ((m[0].length == trimmedLength || (m.index == 0 && m[0].length == text.length)) && node.parentNode.childNodes.length == 1) {
+                            const parent = node.parentNode;
+                            node.parentNode.removeChild(node);
+                            this._textFragmentBinding(parent, m, repeatBindingItems, removeAttributes, host, context);
+                        }
+                        else {
+                            if (!fragment)
+                                fragment = document.createDocumentFragment();
+                            if (m.index - lastindex > 0) {
+                                const tn = document.createTextNode(text.substr(lastindex, m.index - lastindex));
+                                fragment.appendChild(tn);
+                            }
+                            const newNode = document.createElement('span');
+                            this._textFragmentBinding(newNode, m, repeatBindingItems, removeAttributes, host, context);
+                            fragment.appendChild(newNode);
+                            lastindex = m.index + m[0].length;
+                        }
+                    }
+                    if (fragment) {
+                        if (lastindex > 0 && text.length - lastindex > 0) {
+                            let tn = document.createTextNode(text.substr(lastindex, text.length - lastindex));
+                            fragment.appendChild(tn);
+                        }
+                        node.parentNode.replaceChild(fragment, node);
+                    }
+                }
+            }
+        }
+    }
+    _textFragmentBinding(node, m, repeatBindingItems, removeAttributes, host, context) {
+        let value = m[0].substr(2, m[0].length - 4);
+        let noNull = false;
+        if (value[0] === '?') {
+            value = value.substring(1);
+            noNull = true;
+        }
+        const b = (firstRun, onlyWhenChanged) => this._bindingSetNodeValue(firstRun, node, null, 'innerHTML', value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
+        this._bindings.push([b, null]);
+        b(true, false);
+    }
+    _bindingRunEval(expression, repeatBindingItems, event, host, context) {
+        if (host)
+            return this._bindingRunEvalInt.bind(host)(expression, repeatBindingItems, event, context);
+        return this._bindingRunEvalInt(expression, repeatBindingItems, event, context);
+    }
+    //This method can not use "this" anywhere, cause it's bound to different host via method above.
+    _bindingRunEvalInt(expression, repeatBindingItems, event, context) {
+        if (repeatBindingItems) {
+            let n = 0;
+            let set = new Set();
+            for (let b of repeatBindingItems) {
+                if (!set.has(b.name)) {
+                    expression = 'let ' + b.name + ' = ___repeatBindingItems[' + n + '].item;' + expression;
+                    set.add(b.name);
+                }
+                n++;
+            }
+            if (event) {
+                expression = 'let event = ___event;' + expression;
+            }
+            if (context) {
+                for (let i in context) {
+                    expression = 'let ' + i + ' = ___context["' + i + '"];' + expression;
+                }
+            }
+            //@ts-ignore
+            var ___repeatBindingItems = repeatBindingItems;
+            //@ts-ignore
+            var ___event = event;
+            //@ts-ignore
+            var ___context = context;
+            let value = eval(expression);
+            return value;
+        }
+        if (context) {
+            for (let i in context) {
+                expression = 'let ' + i + ' = ___context["' + i + '"];' + expression;
+            }
+            //@ts-ignore
+            var ___context = context;
+            let value = eval(expression);
+            return value;
+        }
+        let value = eval(expression);
+        return value;
+    }
+    _bindingConditional(node, expression, repeatBindingItems, elementsCache, host, context) {
+        try {
+            const value = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+            if (!value && elementsCache.length > 0) {
+                for (let c of elementsCache) {
+                    c.parentNode.removeChild(c);
+                }
+                elementsCache.length = 0;
+            }
+            if (value && elementsCache.length === 0) {
+                let nd = node.content.cloneNode(true);
+                elementsCache.push(...nd.children);
+                this._bindingsInternalParse(nd, repeatBindingItems, true, host, context);
+                node.parentNode.insertBefore(nd, node);
+            }
+        }
+        catch (error) {
+            if (!this._noWarningOnBindingErrors)
+                console.warn(error.message, 'Failed to bind Conditional to expression "' + expression + '"', this, node);
+        }
+    }
+    _bindingRepeat(node, bindingProperty, bindingIndexName, expression, callback, repeatBindingItems, elementsCache, host, context) {
+        try {
+            const values = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+            if (callback) {
+                if (callback.startsWith('[[') && callback.endsWith(']]'))
+                    callback = callback.substring(2, callback.length - 2);
+                else
+                    callback = "this." + callback;
+            }
+            for (let c of elementsCache) {
+                if (c.parentNode) {
+                    let intRepeatBindingItems = [];
+                    intRepeatBindingItems.push({ name: 'nodes', item: [c] });
+                    intRepeatBindingItems.push({ name: 'callbackType', item: 'remove' });
+                    this._bindingRunEval(callback, intRepeatBindingItems, null, host, context);
+                    const bnds = this._repeatBindings.get(c);
+                    if (bnds?.length) {
+                        for (const b of bnds) {
+                            const idx = this._bindings.indexOf(b);
+                            if (idx >= 0)
+                                this._bindings.splice(idx, 1);
+                        }
+                    }
+                    c.parentNode.removeChild(c);
+                }
+            }
+            elementsCache.length = 0;
+            if (values) {
+                if (!this._repeatBindings)
+                    this._repeatBindings = new WeakMap();
+                //todo -> copy values to compare and only generate new controls...
+                let i = 0;
+                for (let e of values) {
+                    let intRepeatBindingItems = [];
+                    if (repeatBindingItems)
+                        intRepeatBindingItems = repeatBindingItems.slice();
+                    intRepeatBindingItems.push({ name: bindingProperty, item: e });
+                    intRepeatBindingItems.push({ name: bindingIndexName, item: i });
+                    let nd = node.content.cloneNode(true);
+                    elementsCache.push(...nd.children);
+                    const bndCount = this._bindings.length;
+                    this._bindingsInternalParse(nd, intRepeatBindingItems, true, host, context);
+                    this._repeatBindings.set(nd.children[0], this._bindings.toSpliced(0, bndCount));
+                    if (callback) {
+                        intRepeatBindingItems.push({ name: 'nodes', item: [...nd.children] });
+                        intRepeatBindingItems.push({ name: 'callbackType', item: 'create' });
+                        let nds = this._bindingRunEval(callback, intRepeatBindingItems, null, host, context);
+                        if (nds === undefined)
+                            nds = nd.children;
+                        if (nds) {
+                            for (let n of Array.from(nds))
+                                node.parentNode.insertBefore(n, node);
+                        }
+                    }
+                    else {
+                        node.parentNode.insertBefore(nd, node);
+                    }
+                    i++;
+                }
+            }
+        }
+        catch (error) {
+            if (!this._noWarningOnBindingErrors)
+                console.warn(error.message, 'Failed to bind Repeat "' + bindingProperty + '" to expression "' + expression + '"', this, node);
+        }
+    }
+    _bindingSetNodeValue(firstRun, node, attribute, property, expression, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged) {
+        try {
+            const value = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+            if (firstRun || node[property] !== value) {
+                if (removeAttributes && attribute)
+                    node.removeAttribute(attribute.name);
+                if (property === 'innerHTML' && (value instanceof Element || value instanceof DocumentFragment)) {
+                    for (let c = node.firstChild; c !== null; c = node.firstChild) {
+                        node.removeChild(c);
+                    }
+                    this._bindingsInternalParse(value, repeatBindingItems, true, host, context);
+                    node.appendChild(value);
+                }
+                else {
+                    if (property[0] === '$') {
+                        if (!value && noNull)
+                            node.setAttribute(property.substring(1), '');
+                        else if (!value)
+                            node.removeAttribute(property.substring(1));
+                        else
+                            node.setAttribute(property.substring(1), value);
+                    }
+                    else if (property[0] === '?') {
+                        if (!value == true)
+                            node.setAttribute(property.substring(1), '');
+                        else
+                            node.removeAttribute(property.substring(1));
+                    }
+                    else if (property == 'class')
+                        node.setAttribute(property, value);
+                    else {
+                        if (property[0] === '.')
+                            property = property.substring(1);
+                        if (!value && noNull) {
+                            if (!onlyWhenChanged || node[property] != value)
+                                node[property] = '';
+                        }
+                        else {
+                            if (!onlyWhenChanged || node[property] != value)
+                                node[property] = value;
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) {
+            if (!this._noWarningOnBindingErrors)
+                console.warn(error.message, ' - Failed to bind Property "' + property + '" to expression "' + expression + '"', this, node);
+        }
+    }
+    _bindingSetElementCssValue(node, property, expression, repeatBindingItems, host, context) {
+        try {
+            const value = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+            if (node.style[property] !== value)
+                node.style[property] = value;
+        }
+        catch (error) {
+            if (!this._noWarningOnBindingErrors)
+                console.warn(error.message, ' - Failed to bind CSS Property "' + property + '" to expression "' + expression + '"', this, node);
+        }
+    }
+    _bindingSetElementClass(node, classname, expression, repeatBindingItems, host, context) {
+        try {
+            const value = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+            if (value) {
+                if (!node.classList.contains(classname))
+                    node.classList.add(classname);
+            }
+            else {
+                if (node.classList.contains(classname))
+                    node.classList.remove(classname);
+            }
+        }
+        catch (error) {
+            if (!this._noWarningOnBindingErrors)
+                console.warn(error.message, 'Failed to bind CSS Class "' + classname + '" to expression "' + expression + '"', this, node);
+        }
+    }
+    _bindingsRefresh(property, onlyWhenChanged) {
+        if (this._bindings)
+            this._bindings.forEach(x => x[0](false, onlyWhenChanged));
+    }
+    _bindingsSetValue(obj, path, value, context, repeatBindingItems) {
+        if (path === undefined || path === null) {
+            return;
+        }
+        if (path.includes("[")) {
+            //support binding like this: {{this.picks?.[this.currentPick]?.ConfirmQuantity::value-changed}}
+            let p = path.replaceAll(".[", "[");
+            p += "=" + value + ";";
+            p = "try { " + p + " } catch (err) { console.warn(err); }";
+            eval(p);
+            return;
+        }
+        let target = obj;
+        if (path.startsWith('this.')) {
+            path = path.substr(5);
+        }
+        else {
+            target = context;
+        }
+        const pathParts = path.split('.');
+        for (let i = 0; i < pathParts.length - 1; i++) {
+            if (target != null) {
+                let newObj = target[pathParts[i]];
+                if (newObj == null) {
+                    newObj = {};
+                    target[pathParts[i]] = newObj;
+                }
+                target = newObj;
+            }
+            else {
+                if (repeatBindingItems) {
+                    let p = pathParts[i];
+                    target = repeatBindingItems.find(x => x.name == p).item;
+                }
+            }
+        }
+        target[pathParts[pathParts.length - 1]] = value;
+    }
+    //@ts-ignore
+    static _propertiesDictionary;
+    _parseAttributesToProperties(noBindings = false) {
+        //@ts-ignore
+        if (!this.constructor._propertiesDictionary) {
+            //@ts-ignore
+            this.constructor._propertiesDictionary = new Map();
+            //@ts-ignore
+            for (let i in this.constructor.properties) {
+                //@ts-ignore
+                this.constructor._propertiesDictionary.set(i.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), [i, this.constructor.properties[i]]);
+            }
+        }
+        for (const a of this.attributes) {
+            //@ts-ignore
+            let pair = this.constructor._propertiesDictionary.get(a.name);
+            if (pair) {
+                if (pair[1] === Boolean)
+                    this[pair[0]] = true;
+                else if (pair[1] === Object || pair[1] === Array) {
+                    if (noBindings || !a.value.startsWith("{{") && !a.value.startsWith("[[")) //cause of this Array in Array Json Values are not possible atm.
+                        this[pair[0]] = JSON.parse(a.value);
+                }
+                else if (pair[1] === Number)
+                    this[pair[0]] = parseFloat(a.value);
+                else
+                    this[pair[0]] = a.value;
+            }
+        }
+    }
+    async _waitForChildrenReady() {
+        await Promise.all(Array.from(this.shadowRoot.querySelectorAll(':not(:defined)'), n => customElements.whenDefined(n.localName)));
+    }
+    _restoreCachedInititalValues() {
+        if (this._initialPropertyCache) {
+            for (const e of this._initialPropertyCache.entries()) {
+                delete this[e[0]];
+                this[e[0]] = e[1];
+            }
+        }
+        this._initialPropertyCache = undefined;
+    }
+    _restoreCachedInititalValue(name) {
+        if (this._initialPropertyCache) {
+            if (this._initialPropertyCache.has(name)) {
+                delete this[name];
+                this[name] = this._initialPropertyCache.get(name);
+                this._initialPropertyCache.delete(name);
+            }
+        }
+        if (!this._initialPropertyCache.size)
+            this._initialPropertyCache = undefined;
+    }
+    static instanceCreatedCallback;
+    _hmrCallback(newClass) {
+        let oldIdx = -1;
+        //@ts-ignore
+        if (this.constructor.style) {
+            //@ts-ignore
+            oldIdx = this.shadowRoot.adoptedStyleSheets.indexOf(this.constructor.style);
+            if (oldIdx >= 0) {
+                let newArr = Array.from(this.shadowRoot.adoptedStyleSheets);
+                newArr.splice(oldIdx, 1);
+                this.shadowRoot.adoptedStyleSheets = newArr;
+            }
+        }
+        if (newClass.style) {
+            if (oldIdx >= 0) {
+                let newArr = Array.from(this.shadowRoot.adoptedStyleSheets);
+                //@ts-ignore
+                newArr.splice(oldIdx, 0, newClass.style);
+                this.shadowRoot.adoptedStyleSheets = newArr;
+            }
+        }
+    }
+    constructor(template, style) {
+        super();
+        if (BaseCustomWebComponentNoAttachedTemplate.instanceCreatedCallback)
+            BaseCustomWebComponentNoAttachedTemplate.instanceCreatedCallback(this);
+        if (!this.shadowRoot)
+            this.attachShadow({ mode: 'open' });
+        if (template) {
+            //@ts-ignore
+            this._rootDocumentFragment = template.content.cloneNode(true);
+        }
+        //@ts-ignore
+        else if (this.constructor.template) {
+            //@ts-ignore
+            this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
+        }
+        //@ts-ignore
+        if (this.templateCloned) {
+            //@ts-ignore
+            this.templateCloned();
+        }
+        if (style) {
+            //@ts-ignore
+            if (style instanceof Promise)
+                //@ts-ignore
+                style.then((s) => this.shadowRoot.adoptedStyleSheets = [s]);
+            else
+                //@ts-ignore
+                this.shadowRoot.adoptedStyleSheets = [style];
+            //@ts-ignore
+        }
+        else if (this.constructor.style) {
+            //@ts-ignore
+            if (this.constructor.style instanceof CSSStyleSheet) {
+                //@ts-ignore
+                this.shadowRoot.adoptedStyleSheets = [this.constructor.style];
+                //@ts-ignore
+            }
+            else if (Array.isArray(this.constructor.style)) {
+                //@ts-ignore
+                this.shadowRoot.adoptedStyleSheets = this.constructor.style;
+                //@ts-ignore
+            }
+            else if (this.constructor.style instanceof Promise)
+                //@ts-ignore
+                this.constructor.style.then((style) => this.shadowRoot.adoptedStyleSheets = [style]);
+        }
+        //@ts-ignore
+        if (this.constructor.properties) {
+            //@ts-ignore
+            for (let p in this.constructor.properties) {
+                if (this.hasOwnProperty(p))
+                    this._initialPropertyCache.set(p, this[p]);
+            }
+        }
+    }
+}
+export class BaseCustomWebComponentLazyAppend extends BaseCustomWebComponentNoAttachedTemplate {
+    constructor(template, style) {
+        super(template, style);
+        queueMicrotask(() => {
+            if (this._rootDocumentFragment)
+                this.shadowRoot.appendChild(this._rootDocumentFragment);
+            //@ts-ignore
+            if (this.oneTimeSetup && !this.constructor._oneTimeSetup) {
+                //@ts-ignore
+                this.constructor._oneTimeSetup = true;
+                //@ts-ignore
+                this.oneTimeSetup();
+            }
+            //@ts-ignore
+            if (this.ready)
+                //@ts-ignore
+                this.ready();
+        });
+    }
+}
+export class BaseCustomWebComponentConstructorAppend extends BaseCustomWebComponentNoAttachedTemplate {
+    constructor(template, style) {
+        super(template, style);
+        queueMicrotask(() => {
+            //@ts-ignore
+            if (this.oneTimeSetup && !this.constructor._oneTimeSetup) {
+                //@ts-ignore
+                this.constructor._oneTimeSetup = true;
+                //@ts-ignore
+                this.oneTimeSetup();
+            }
+            //@ts-ignore
+            if (this.ready)
+                //@ts-ignore
+                this.ready();
+        });
+        if (this._rootDocumentFragment)
+            this.shadowRoot.appendChild(this._rootDocumentFragment);
+    }
+}
+export class BaseCustomWebComponentLazyAppendConnectedReady extends BaseCustomWebComponentNoAttachedTemplate {
+    constructor(template, style) {
+        super(template, style);
+        queueMicrotask(() => {
+            if (this._rootDocumentFragment)
+                this.shadowRoot.appendChild(this._rootDocumentFragment);
+        });
+    }
+    _isReady;
+    connectedCallback() {
+        //@ts-ignore
+        if (this.ready && !this._isReady)
+            //@ts-ignore
+            this.ready();
+        this._isReady = true;
+    }
+}
+export class BaseCustomWebComponentConnectedReady extends BaseCustomWebComponentNoAttachedTemplate {
+    constructor(template, style) {
+        super(template, style);
+        if (this._rootDocumentFragment)
+            this.shadowRoot.appendChild(this._rootDocumentFragment);
+    }
+    _isReady;
+    connectedCallback() {
+        //@ts-ignore
+        if (this.ready && !this._isReady)
+            //@ts-ignore
+            this.ready();
+        this._isReady = true;
+    }
+}
+export class BaseCustomWebComponentConstructorAppendLazyReady extends BaseCustomWebComponentNoAttachedTemplate {
+    constructor(template, style) {
+        super(template, style);
+        if (this._rootDocumentFragment)
+            this.shadowRoot.appendChild(this._rootDocumentFragment);
+        requestAnimationFrame(() => {
+            //@ts-ignore
+            if (this.oneTimeSetup && !this.constructor._oneTimeSetup) {
+                //@ts-ignore
+                this.constructor._oneTimeSetup = true;
+                //@ts-ignore
+                this.oneTimeSetup();
+            }
+            //@ts-ignore
+            if (this.ready)
+                //@ts-ignore
+                this.ready();
+        });
+    }
+}