@node-projects/web-component-designer 0.0.215 → 0.0.217

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

@@ -1,73 +1,74 @@
-import { BindingMode } from '../../item/BindingMode.js';
-import { BindingTarget } from "../../item/BindingTarget.js";
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
-export class BaseCustomWebcomponentBindingsService {
-    static type = 'base-custom-webcomponent-binding';
-    getBindings(designItem) {
-        let bindings = null;
-        for (let a of designItem.attributes()) {
-            const name = a[0];
-            const value = a[1];
-            if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {
-                if (!bindings)
-                    bindings = [];
-                let bnd = { rawName: name, rawValue: value };
-                if (a[0].startsWith('css:')) {
-                    bnd.targetName = name.substring(4);
-                    bnd.target = BindingTarget.css;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else if (a[0].startsWith('class:')) {
-                    bnd.targetName = name.substring(4);
-                    bnd.target = BindingTarget.class;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else if (a[0].startsWith('$')) {
-                    bnd.targetName = name.substring(1);
-                    bnd.target = BindingTarget.attribute;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else if (a[0].startsWith('@')) {
-                    bnd.targetName = name.substring(1);
-                    bnd.target = BindingTarget.event;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else {
-                    bnd.targetName = PropertiesHelper.dashToCamelCase(name);
-                    bnd.target = BindingTarget.property;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                bnd.type = BaseCustomWebcomponentBindingsService.type;
-                bnd.targetName = bnd.targetName;
-                bindings.push(bnd);
-            }
-        }
-        return bindings;
-    }
-    setBinding(designItem, binding) {
-        if (binding.type !== BaseCustomWebcomponentBindingsService.type)
-            return false;
-        let nm = '';
-        switch (binding.target) {
-            case BindingTarget.css:
-                nm += 'css:';
-                break;
-            case BindingTarget.class:
-                nm += 'class';
-                break;
-            case BindingTarget.attribute:
-                nm += '$';
-                break;
-            case BindingTarget.event:
-                nm += '@';
-                break;
-        }
-        nm += binding.targetName;
-        let value = (binding.mode == BindingMode.oneWay ? '[[' : '{{') + binding.expression + (binding.mode == BindingMode.oneWay ? ']]' : '}}');
-        designItem.setAttribute(nm, value);
-        return true;
-    }
-    clearBinding(designItem, propertyName, propertyTarget) {
-        return true;
-    }
-}
+import { BindingMode } from '../../item/BindingMode.js';
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+class BaseCustomWebcomponentBindingsService {
+    static type = 'base-custom-webcomponent-binding';
+    getBindings(designItem) {
+        let bindings = null;
+        for (let a of designItem.attributes()) {
+            const name = a[0];
+            const value = a[1];
+            if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {
+                if (!bindings)
+                    bindings = [];
+                let bnd = { rawName: name, rawValue: value };
+                if (a[0].startsWith('css:')) {
+                    bnd.targetName = name.substring(4);
+                    bnd.target = BindingTarget.css;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('class:')) {
+                    bnd.targetName = name.substring(4);
+                    bnd.target = BindingTarget.class;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('$')) {
+                    bnd.targetName = name.substring(1);
+                    bnd.target = BindingTarget.attribute;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('@')) {
+                    bnd.targetName = name.substring(1);
+                    bnd.target = BindingTarget.event;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else {
+                    bnd.targetName = PropertiesHelper.dashToCamelCase(name);
+                    bnd.target = BindingTarget.property;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                bnd.type = BaseCustomWebcomponentBindingsService.type;
+                bnd.targetName = bnd.targetName;
+                bindings.push(bnd);
+            }
+        }
+        return bindings;
+    }
+    setBinding(designItem, binding) {
+        if (binding.type !== BaseCustomWebcomponentBindingsService.type)
+            return false;
+        let nm = '';
+        switch (binding.target) {
+            case BindingTarget.css:
+                nm += 'css:';
+                break;
+            case BindingTarget.class:
+                nm += 'class';
+                break;
+            case BindingTarget.attribute:
+                nm += '$';
+                break;
+            case BindingTarget.event:
+                nm += '@';
+                break;
+        }
+        nm += binding.targetName;
+        let value = (binding.mode == BindingMode.oneWay ? '[[' : '{{') + binding.expression + (binding.mode == BindingMode.oneWay ? ']]' : '}}');
+        designItem.setAttribute(nm, value);
+        return true;
+    }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
+}
+export { BaseCustomWebcomponentBindingsService };

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

@@ -1,13 +1,13 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IBinding } from '../../item/IBinding.js';
-import { BindingTarget } from '../../item/BindingTarget.js';
-/**
- * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
- * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
- * htmlParserService
- */
-export interface IBindingService {
-    getBindings(designItem: IDesignItem): IBinding[];
-    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
-    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
-}
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { BindingTarget } from '../../item/BindingTarget.js';
+/**
+ * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
+ * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
+ * htmlParserService
+ */
+export interface IBindingService {
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
+}

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

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,16 +1,16 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IBinding } from '../../item/IBinding.js';
-import { IBindingService } from './IBindingService.js';
-import { BindingTarget } from "../../item/BindingTarget.js";
-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;
-    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
-}
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { IBindingService } from './IBindingService.js';
+import { BindingTarget } from "../../item/BindingTarget.js";
+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;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
+}

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

@@ -1,44 +1,45 @@
-import { BindingTarget } from "../../item/BindingTarget.js";
-import { BindingMode } from "../../item/BindingMode.js";
-/* Service wich read binings from special HTMl elements -> like tag-binding */
-//TODO: refactor so we could use it
-export class SpecialTagsBindingService {
-    static type = 'visu-tagbinding-binding';
-    _bindingTagName = "visu-tagbinding";
-    _elementIdAttribute = "elemnt-id";
-    _propertyNameAttribute = "property";
-    _isStyleNameAttribute = "is-style";
-    constructor() {
-    }
-    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;
-    }
-    clearBinding(designItem, propertyName, propertyTarget) {
-        return true;
-    }
-}
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { BindingMode } from "../../item/BindingMode.js";
+/* Service wich read binings from special HTMl elements -> like tag-binding */
+//TODO: refactor so we could use it
+class SpecialTagsBindingService {
+    static type = 'visu-tagbinding-binding';
+    _bindingTagName = "visu-tagbinding";
+    _elementIdAttribute = "elemnt-id";
+    _propertyNameAttribute = "property";
+    _isStyleNameAttribute = "is-style";
+    constructor() {
+    }
+    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;
+    }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
+}
+export { SpecialTagsBindingService };

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

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

package/dist/elements/services/contentService/ContentService.d.ts

@@ -1,9 +1,9 @@
-import { IContentService } from './IContentService.js';
-import { IContentChanged } from './IContentChanged';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare class ContentService implements IContentService {
-    constructor(rootElement: IDesignItem);
-    readonly rootDesignItem: IDesignItem;
-    readonly onContentChanged: TypedEvent<IContentChanged>;
-}
+import { IContentService } from './IContentService.js';
+import { IContentChanged } from './IContentChanged';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare class ContentService implements IContentService {
+    constructor(rootElement: IDesignItem);
+    readonly rootDesignItem: IDesignItem;
+    readonly onContentChanged: TypedEvent<IContentChanged>;
+}

package/dist/elements/services/contentService/ContentService.js

@@ -1,8 +1,8 @@
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ContentService {
-    constructor(rootElement) {
-        this.rootDesignItem = rootElement;
-    }
-    rootDesignItem;
-    onContentChanged = new TypedEvent();
-}
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ContentService {
+    constructor(rootElement) {
+        this.rootDesignItem = rootElement;
+    }
+    rootDesignItem;
+    onContentChanged = new TypedEvent();
+}

package/dist/elements/services/contentService/IContentChanged.d.ts

@@ -1,10 +1,10 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-interface IContentChangedParsed {
-    changeType: 'parsed';
-}
-interface IContentChangedWithDesignItems {
-    changeType: "added" | "removed" | "moved";
-    designItems: IDesignItem[];
-}
-export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems;
-export {};
+import { IDesignItem } from "../../item/IDesignItem.js";
+interface IContentChangedParsed {
+    changeType: 'parsed';
+}
+interface IContentChangedWithDesignItems {
+    changeType: "added" | "removed" | "moved";
+    designItems: IDesignItem[];
+}
+export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems;
+export {};

package/dist/elements/services/contentService/IContentChanged.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/services/contentService/IContentService.d.ts

@@ -1,7 +1,7 @@
-import { IContentChanged } from './IContentChanged.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export interface IContentService {
-    readonly onContentChanged: TypedEvent<IContentChanged>;
-    readonly rootDesignItem: IDesignItem;
-}
+import { IContentChanged } from './IContentChanged.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface IContentService {
+    readonly onContentChanged: TypedEvent<IContentChanged>;
+    readonly rootDesignItem: IDesignItem;
+}

package/dist/elements/services/contentService/IContentService.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/services/copyPasteService/CopyPasteService.d.ts

@@ -1,10 +1,10 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { ICopyPasteService } from "./ICopyPasteService.js";
-import { ServiceContainer } from '../ServiceContainer.js';
-import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
-import { IRect } from "../../../interfaces/IRect.js";
-export declare const positionsJsonMime = "web text/positions";
-export declare class CopyPasteService implements ICopyPasteService {
-    copyItems(designItems: IDesignItem[]): Promise<void>;
-    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
-}
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { ICopyPasteService } from "./ICopyPasteService.js";
+import { ServiceContainer } from '../ServiceContainer.js';
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IRect } from "../../../interfaces/IRect.js";
+export declare const positionsJsonMime = "web text/positions";
+export declare class CopyPasteService implements ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
+}

package/dist/elements/services/copyPasteService/CopyPasteService.js

@@ -1,33 +1,33 @@
-import { DomConverter } from "../../widgets/designerView/DomConverter.js";
-import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
-export const positionsJsonMime = 'web text/positions';
-export class CopyPasteService {
-    async copyItems(designItems) {
-        const copyText = DomConverter.ConvertToString(designItems, null, false);
-        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
-        copyToClipboard([["text/html", copyText], [positionsJsonMime, JSON.stringify(positions)]]);
-    }
-    async getPasteItems(serviceContainer, instanceServiceContainer) {
-        let html = '';
-        let positions = null;
-        const items = await getFromClipboard();
-        if (items != null) {
-            try {
-                html = await (await items[0].getType('text/html'))?.text();
-            }
-            catch { }
-            if (!html)
-                html = await (await items[0].getType('text/plain'))?.text();
-            try {
-                let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
-                positions = JSON.parse(positionsJson);
-            }
-            catch { }
-        }
-        else {
-            html = await getTextFromClipboard();
-        }
-        const parserService = serviceContainer.htmlParserService;
-        return [await parserService.parse(html, serviceContainer, instanceServiceContainer), positions];
-    }
-}
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
+export const positionsJsonMime = 'web text/positions';
+export class CopyPasteService {
+    async copyItems(designItems) {
+        const copyText = DomConverter.ConvertToString(designItems, false);
+        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+        copyToClipboard([["text/html", copyText], [positionsJsonMime, JSON.stringify(positions)]]);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        let html = '';
+        let positions = null;
+        const items = await getFromClipboard();
+        if (items != null) {
+            try {
+                html = await (await items[0].getType('text/html'))?.text();
+            }
+            catch { }
+            if (!html)
+                html = await (await items[0].getType('text/plain'))?.text();
+            try {
+                let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
+                positions = JSON.parse(positionsJson);
+            }
+            catch { }
+        }
+        else {
+            html = await getTextFromClipboard();
+        }
+        const parserService = serviceContainer.htmlParserService;
+        return [await parserService.parse(html, serviceContainer, instanceServiceContainer, true), positions];
+    }
+}

package/dist/elements/services/copyPasteService/ICopyPasteService.d.ts

@@ -1,8 +1,8 @@
-import { IRect } from "../../../interfaces/IRect.js";
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
-import { ServiceContainer } from "../ServiceContainer.js";
-export interface ICopyPasteService {
-    copyItems(designItems: IDesignItem[]): Promise<void>;
-    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
-}
+import { IRect } from "../../../interfaces/IRect.js";
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
+}

package/dist/elements/services/copyPasteService/ICopyPasteService.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/services/demoProviderService/DemoProviderService.d.ts

@@ -1,6 +1,6 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
-import { ServiceContainer } from "../ServiceContainer.js";
-import { IDemoProviderService } from "./IDemoProviderService.js";
-export declare class DemoProviderService implements IDemoProviderService {
-    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
-}
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class DemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -1,29 +1,29 @@
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
-export class DemoProviderService {
-    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
-        return new Promise(resolve => {
-            const iframe = document.createElement('iframe');
-            iframe.style.width = '100%';
-            iframe.style.height = '100%';
-            iframe.style.border = 'none';
-            iframe.style.display = 'none';
-            DomHelper.removeAllChildnodes(container);
-            container.appendChild(iframe);
-            iframe.onload = () => {
-                iframe.style.display = 'block';
-                resolve();
-            };
-            const doc = iframe.contentWindow.document;
-            doc.open();
-            doc.write('<script type="module">');
-            for (let i of instanceServiceContainer.designContext.imports) {
-                doc.write("import '" + i + "';");
-            }
-            doc.write("document.body.style.display='';");
-            doc.write('</script>');
-            doc.write('<style>' + (style ?? '') + '</style>');
-            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
-            doc.close();
-        });
-    }
-}
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+export class DemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            for (let i of instanceServiceContainer.designContext.imports) {
+                doc.write("import '" + i + "';");
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<style>' + (style ?? '') + '</style>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.d.ts

@@ -1,5 +1,5 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
-import { ServiceContainer } from "../ServiceContainer.js";
-export interface IDemoProviderService {
-    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
-}
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IStringPosition } from "../htmlWriterService/IStringPosition.js";
+import { IDesignItemDocumentPositionService } from "./IDesignItemDocumentPositionService.js";
+export declare class DesignItemDocumentPositionService implements IDesignItemDocumentPositionService {
+    private _designItemsAssignmentList?;
+    constructor(designerCanvas: IDesignerCanvas);
+    setPosition(designItem: IDesignItem, position: IStringPosition): void;
+    getPosition(designItem: IDesignItem): IStringPosition;
+}

package/dist/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js

@@ -0,0 +1,10 @@
+export class DesignItemDocumentPositionService {
+    _designItemsAssignmentList = new WeakMap();
+    constructor(designerCanvas) { }
+    setPosition(designItem, position) {
+        this._designItemsAssignmentList.set(designItem, position);
+    }
+    getPosition(designItem) {
+        return this._designItemsAssignmentList.get(designItem);
+    }
+}