@node-projects/web-component-designer 0.0.28 → 0.0.32

package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts

@@ -0,0 +1,14 @@
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from "../../item/IBinding";
+import { IBindingService } from "./IBindingService";
+export declare class SpecialTagsBindingService implements IBindingService {
+    static type: string;
+    _bindingTagName: string;
+    _elementIdAttribute: string;
+    _propertyNameAttribute: string;
+    _isStyleNameAttribute: string;
+    constructor();
+    getBindings(designItem: IDesignItem): IBinding[];
+    private _parseBindingElement;
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+}

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -0,0 +1,40 @@
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { BindingMode } from "../../item/BindingMode.js";
+/* Service wich read binings from special HTMl elements -> like tag-binding */
+export class SpecialTagsBindingService {
+    constructor() {
+        this._bindingTagName = "visu-tagbinding";
+        this._elementIdAttribute = "elemnt-id";
+        this._propertyNameAttribute = "property";
+        this._isStyleNameAttribute = "is-style";
+    }
+    getBindings(designItem) {
+        const bindings = [];
+        const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName);
+        for (let b of directBindings) {
+            bindings.push(this._parseBindingElement(b));
+        }
+        if (designItem.id) {
+            const nameBindings = designItem.instanceServiceContainer.contentService.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]");
+            for (let b of nameBindings) {
+                const bnd = this._parseBindingElement(b);
+                bnd.targetId = designItem.id;
+                bindings.push(bnd);
+            }
+        }
+        return null;
+    }
+    _parseBindingElement(b) {
+        let bnd = { targetName: b.getAttribute(this._propertyNameAttribute) };
+        bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property;
+        bnd.invert = b.hasAttribute('negative-logic');
+        bnd.rawValue = b.outerHTML;
+        bnd.type = SpecialTagsBindingService.type;
+        bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay;
+        return bnd;
+    }
+    setBinding(designItem, binding) {
+        return true;
+    }
+}
+SpecialTagsBindingService.type = 'visu-tagbinding-binding';

package/dist/elements/services/bindingsService/VueBindingsService.js

@@ -0,0 +1,7 @@
+"use strict";
+//read vue bindings:
+//v-bind:class
+//v-bind:style
+//v-if
+//v-else
+//v-show

package/dist/elements/services/htmlParserService/NodeHtmlParserService.d.ts

@@ -3,6 +3,8 @@ import { ServiceContainer } from "../ServiceContainer";
 import { IHtmlParserService } from "./IHtmlParserService";
 import { IDesignItem } from '../../item/IDesignItem';
 export declare class NodeHtmlParserService implements IHtmlParserService {
+    private _parserUrl;
+    constructor(parserUrl?: string);
     parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
     private _parseDiv;
     _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -4,12 +4,13 @@ import { newElementFromString } from "../../helper/ElementHelper";
 // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
 // attributes from their DOM, so you loose Data
 export class NodeHtmlParserService {
-    constructor() {
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
         this._parseDiv = document.createElement("div");
+        this._parserUrl = parserUrl;
     }
     async parse(html, serviceContainer, instanceServiceContainer) {
         //@ts-ignore
-        let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
+        let parser = await import(this._parserUrl);
         const parsed = parser.parse(html, { comment: true });
         let designItems = [];
         for (let p of parsed.childNodes) {

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.d.ts

@@ -0,0 +1,9 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.js

@@ -0,0 +1,100 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    constructor() {
+        this._parseDiv = document.createElement("div");
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                let bnd;
+                if (serviceContainer.bindingService) {
+                    bnd = serviceContainer.bindingService.parseBindingAttribute(a, attr[a]);
+                }
+                if (bnd) {
+                    designItem.setAttribute(a, bnd);
+                }
+                else if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    let bnd;
+                    if (serviceContainer.bindingService) {
+                        bnd = serviceContainer.bindingService.parseBindingAttribute(s.name, s.value);
+                    }
+                    if (bnd) {
+                        designItem.setStyle(s.name, bnd);
+                    }
+                    else {
+                        designItem.setStyle(s.name, s.value);
+                    }
+                    //designItem.styles.set(s.name, s.value);
+                }
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem.insertChild(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.LOCAL.d.ts

@@ -0,0 +1,11 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    private _parserUrl;
+    constructor(parserUrl?: string);
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.LOCAL.js

@@ -0,0 +1,84 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
+        this._parseDiv = document.createElement("div");
+        this._parserUrl = parserUrl;
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem.setStyle(s.name, s.value);
+                }
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem.insertChild(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.REMOTE.d.ts

@@ -0,0 +1,9 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.REMOTE.js

@@ -0,0 +1,83 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    constructor() {
+        this._parseDiv = document.createElement("div");
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem.setStyle(s.name, s.value);
+                }
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem.insertChild(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.d.ts

@@ -0,0 +1,16 @@
+import { IPropertiesService } from "../IPropertiesService";
+import { IProperty } from '../IProperty';
+import { IDesignItem } from '../../../item/IDesignItem';
+import { ValueType } from "../ValueType";
+export declare class CommonPropertiesService implements IPropertiesService {
+    private commonProperties;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[];
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean | import("../../bindingsService/IBinding").IBinding;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}

package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.js

@@ -0,0 +1,94 @@
+import { ValueType } from "../ValueType";
+export class CommonPropertiesService {
+    constructor() {
+        //@ts-ignore
+        this.commonProperties = [
+            {
+                name: "id",
+                type: "string",
+                service: this
+            }, {
+                name: "class",
+                type: "string",
+                service: this
+            }, {
+                name: "title",
+                type: "string",
+                service: this
+            }, {
+                name: "tabindex",
+                type: "number",
+                service: this
+            }
+        ];
+        this.name = "common";
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return this.commonProperties[name];
+    }
+    getProperties(designItem) {
+        return this.commonProperties;
+    }
+    setValue(designItems, property, value) {
+        for (let d of designItems) {
+            if (property.type == 'boolean' && !value) {
+                d.attributes.delete(property.name);
+                d.element.removeAttribute(property.name);
+            }
+            else if (property.type == 'boolean' && value) {
+                d.attributes.set(property.name, "");
+                d.element.setAttribute(property.name, "");
+            }
+            else {
+                d.attributes.set(property.name, value);
+                d.element.setAttribute(property.name, value);
+            }
+        }
+    }
+    clearValue(designItems, property) {
+        for (let d of designItems) {
+            d.attributes.delete(property.name);
+            d.element.removeAttribute(property.name);
+        }
+    }
+    isSet(designItems, property) {
+        let all = true;
+        let some = false;
+        if (designItems != null && designItems.length !== 0) {
+            let attributeName = property.name;
+            designItems.forEach((x) => {
+                let has = x.attributes.has(attributeName);
+                all = all && has;
+                some = some || has;
+            });
+        }
+        else
+            return ValueType.none;
+        return all ? ValueType.all : some ? ValueType.some : ValueType.none;
+    }
+    getValue(designItems, property) {
+        if (designItems != null && designItems.length !== 0) {
+            let attributeName = property.name;
+            if (property.type == 'boolean')
+                return designItems[0].attributes.has(attributeName);
+            let lastValue = designItems[0].attributes.get(attributeName);
+            /*
+            for (const x of designItems) {
+              let value = x.attributes.get(attributeName);
+              if (value != lastValue) {
+                lastValue = null;
+                break;
+              }
+            }
+            */
+            return lastValue;
+        }
+        return null;
+    }
+    getUnsetValue(designItems, property) {
+        return property.defaultValue;
+    }
+}

package/dist/elements/services/propertiesService/services/CommonPropertiesService.d.ts

@@ -11,6 +11,6 @@ export declare class CommonPropertiesService implements IPropertiesService {
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | boolean | import("../../bindingsService/IBinding").IBinding;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts

@@ -14,6 +14,6 @@ export declare class CssPropertiesService implements IPropertiesService {
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | import("../../bindingsService/IBinding").IBinding;
+    getValue(designItems: IDesignItem[], property: IProperty): string;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -1,5 +1,6 @@
 import { ValueType } from '../ValueType';
 import { NodeType } from '../../../item/NodeType';
+import { BindingTarget } from '../../../item/BindingTarget.js';
 export class CssPropertiesService {
     constructor(name) {
         //@ts-ignore
@@ -214,12 +215,19 @@ export class CssPropertiesService {
     isSet(designItems, property) {
         let all = true;
         let some = false;
-        if (designItems != null && designItems.length !== 0)
+        if (designItems != null && designItems.length !== 0) {
             designItems.forEach((x) => {
                 let has = x.styles.has(property.name);
                 all = all && has;
                 some = some || has;
             });
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
+                return ValueType.bound;
+        }
         else
             return ValueType.none;
         return all ? ValueType.all : some ? ValueType.some : ValueType.none;

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts

@@ -11,6 +11,6 @@ export declare class UnkownElementPropertiesService implements IPropertiesServic
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | boolean | import("../../bindingsService/IBinding").IBinding;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.d.ts

@@ -1,6 +1,6 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { IBinding } from '../../bindingsService/IBinding.js';
+import { IBinding } from '../../../item/IBinding.js';
 export declare class AttributeChangeAction implements ITransactionItem {
     constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null);
     title?: string;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -199,8 +199,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
         if (this.children) {
+            let children = this.children;
+            if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
+                children = this.children[0].assignedElements();
+            }
             const parser = this.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
-            this.addDesignItems(parser.createDesignItems(this.children, this.serviceContainer, this.instanceServiceContainer));
+            this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer));
         }
     }
     elementFromPoint(x, y) {