@node-projects/web-component-designer 0.0.102 → 0.0.105

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -63,6 +63,7 @@ import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/bu
 import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js';
 import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
 import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
+import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -111,8 +112,12 @@ export function createDefaultServiceContainer() {
         new GrayOutExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
+        new GrayOutDragOverContainerExtensionProvider(),
         new AltToEnterContainerExtensionProvider()
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
+        new GrayOutDragOverContainerExtensionProvider()
+    ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
         new EditTextExtensionProvider()
     ]);

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.d.ts

@@ -0,0 +1,13 @@
+import { IElementDefinition } from "./IElementDefinition.js";
+import { IElementsService } from "./IElementsService.js";
+export declare class WebcomponentManifestElementsService implements IElementsService {
+    private _name;
+    get name(): string;
+    private _importPrefix;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, importPrefix: string, manifest: any);
+    private _parseManifest;
+    getElements(): Promise<IElementDefinition[]>;
+}

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.js

@@ -0,0 +1,37 @@
+export class WebcomponentManifestElementsService {
+    _name;
+    get name() { return this._name; }
+    _importPrefix;
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, importPrefix, manifest) {
+        this._name = name;
+        this._importPrefix = importPrefix;
+        this._parseManifest(manifest);
+    }
+    _parseManifest(manifest) {
+        this._elementList = [];
+        for (let m of manifest.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    async getElements() {
+        if (this._elementList)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+}

package/dist/elements/services/elementsService/WebcomponentManifestParserService.d.ts

@@ -0,0 +1,25 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { IDesignItem } from "../../item/IDesignItem";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

package/dist/elements/services/elementsService/WebcomponentManifestParserService.js

@@ -0,0 +1,94 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { PropertyType } from "../propertiesService/PropertyType";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
+        super();
+        this._name = name;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -7,9 +7,19 @@ export class DefaultInstanceService {
             let importUri = definition.import;
             if (importUri[0] === '.')
                 importUri = (window.location.origin + window.location.pathname).split('/').slice(0, -1).join('/') + '/' + importUri;
-            import(importUri).then(() => {
-                //TODO: refresh all extensions
-            }); //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable
+            //@ts-ignore
+            if (importShim) {
+                //@ts-ignore
+                importShim(importUri).then(() => {
+                    //TODO: refresh all extensions
+                });
+            }
+            else {
+                import(importUri).then(() => {
+                    //TODO: refresh all extensions
+                });
+            }
+            //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable
             if (instanceServiceContainer.designContext.imports.indexOf(importUri) <= 0)
                 instanceServiceContainer.designContext.imports.push(importUri);
         }

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -5,6 +5,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -17,6 +17,13 @@ export class DefaultPlacementService {
             return false;
         return true;
     }
+    canEnterByDrop(container) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        return true;
+    }
     canLeave(container, items) {
         return true;
     }

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -7,6 +7,7 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -18,6 +18,9 @@ export class FlexBoxPlacementService {
     canEnter(container, items) {
         return true;
     }
+    canEnterByDrop(container) {
+        return true;
+    }
     canLeave(container, items) {
         return true;
     }

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -7,6 +7,7 @@ export declare class GridPlacementService implements IPlacementService {
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/placementService/GridPlacementService.js

@@ -29,6 +29,9 @@ export class GridPlacementService {
     canEnter(container, items) {
         return true;
     }
+    canEnterByDrop(container) {
+        return true;
+    }
     canLeave(container, items) {
         return true;
     }

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -4,6 +4,7 @@ import { IPlacementView } from "../../widgets/designerView/IPlacementView";
 import { IPoint } from "../../../interfaces/IPoint";
 export interface IPlacementService extends IService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
+    canEnterByDrop(container: IDesignItem): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): any;
     enterContainer(container: IDesignItem, items: IDesignItem[]): any;

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

@@ -0,0 +1,25 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { IDesignItem } from "../../item/IDesignItem";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

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

@@ -0,0 +1,94 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { PropertyType } from "../propertiesService/PropertyType";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
+        super();
+        this._name = name;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { BindingTarget } from "../../../item/BindingTarget.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+import { IPropertiesService } from "../IPropertiesService.js";
+import { IProperty } from "../IProperty.js";
+import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService.js";
+export declare class WebcomponentManifestPropertiesService extends UnkownElementPropertiesService implements IPropertiesService {
+    private _name;
+    get name(): string;
+    private _propertiesList;
+    constructor(name: string, manifest: any);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

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

@@ -0,0 +1,54 @@
+import { BindingTarget } from "../../../item/BindingTarget.js";
+import { PropertyType } from "../PropertyType.js";
+import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService.js";
+export class WebcomponentManifestPropertiesService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _propertiesList;
+    constructor(name, manifest) {
+        super();
+        this._name = name;
+        this._parseManifest(manifest);
+    }
+    _parseManifest(manifest) {
+        this._propertiesList = {};
+        for (let m of manifest.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    isHandledElement(designItem) {
+        return this._propertiesList[designItem.name] != null;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -77,9 +77,11 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     _updateTransform(): void;
     setDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
+    _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;
     private _onDragLeave;
     private _onDragOver;
+    private _getPossibleContainerForDrop;
     private _onDrop;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;

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

@@ -422,6 +422,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this.snapLines.clearSnaplines();
     }
+    _dragOverExtensionItem;
     _onDragEnter(event) {
         this._fillCalculationrects();
         event.preventDefault();
@@ -446,6 +447,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 event.dataTransfer.dropEffect = effect;
             }
         }
+        if (this._dragOverExtensionItem) {
+            this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            this._dragOverExtensionItem = null;
+        }
     }
     _onDragOver(event) {
         event.preventDefault();
@@ -466,15 +471,57 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     this._canvas.classList.add('dragFileActive');
             }
         }
-        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
-        if (hasTransferDataBindingObject) {
-            const ddService = this.serviceContainer.bindableObjectDragDropService;
-            if (ddService) {
-                const effect = ddService.dragOver(this, event);
-                event.dataTransfer.dropEffect = effect;
+        else {
+            const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+            if (hasTransferDataBindingObject) {
+                const ddService = this.serviceContainer.bindableObjectDragDropService;
+                if (ddService) {
+                    const effect = ddService.dragOver(this, event);
+                    event.dataTransfer.dropEffect = effect;
+                }
+            }
+            else {
+                let [newContainer] = this._getPossibleContainerForDrop(event);
+                if (this._dragOverExtensionItem != newContainer) {
+                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver);
+                    this._dragOverExtensionItem = newContainer;
+                }
             }
         }
     }
+    _getPossibleContainerForDrop(event) {
+        let newContainerElementDesignItem = null;
+        let newContainerService = null;
+        const elementsFromPoint = this.elementsFromPoint(event.x, event.y);
+        for (let e of elementsFromPoint) {
+            if (e == this.rootDesignItem.element) {
+                newContainerElementDesignItem = this.rootDesignItem;
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                break;
+            }
+            else if (false) {
+                //check we don't try to move a item over one of its children..
+            }
+            else {
+                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, this.serviceContainer, this.instanceServiceContainer);
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                if (newContainerService) {
+                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem)) {
+                        break;
+                    }
+                    else {
+                        newContainerElementDesignItem = null;
+                        newContainerService = null;
+                        continue;
+                    }
+                }
+            }
+        }
+        return [newContainerElementDesignItem, newContainerService];
+    }
     async _onDrop(event) {
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
@@ -496,16 +543,23 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 }
             }
             else {
+                if (this._dragOverExtensionItem) {
+                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+                    this._dragOverExtensionItem = null;
+                }
+                let [newContainer] = this._getPossibleContainerForDrop(event);
+                let pos = this.getNormalizedElementCoordinates(newContainer.element);
                 this._fillCalculationrects();
                 const position = this.getNormalizedEventCoordinates(event);
+                //TODO : we need to use container service for adding to element, so also grid and flexbox work correct
                 const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
                 const elementDefinition = JSON.parse(transferData);
                 const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
                 const grp = di.openGroup("Insert");
                 di.setStyle('position', 'absolute');
-                di.setStyle('left', position.x + 'px');
-                di.setStyle('top', position.y + 'px');
-                this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
+                di.setStyle('left', (position.x - pos.x) + 'px');
+                di.setStyle('top', (position.y - pos.y) + 'px');
+                this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
                 grp.commit();
                 requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
             }

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension copy.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class AltToEnterContainerExtension extends AbstractExtension {
+    private _text;
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension copy.js

@@ -0,0 +1,20 @@
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension.d.ts

@@ -4,7 +4,6 @@ import { AbstractExtension } from "./AbstractExtension";
 import { IExtensionManager } from "./IExtensionManger";
 export declare class AltToEnterContainerExtension extends AbstractExtension {
     private _text;
-    private _rect;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension.js

@@ -2,7 +2,6 @@ import { AbstractExtension } from "./AbstractExtension";
 import { OverlayLayer } from "./OverlayLayer.js";
 export class AltToEnterContainerExtension extends AbstractExtension {
     _text;
-    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -12,7 +11,6 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     refresh() {
         let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
-        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
     }
     dispose() {
         this._removeAllOverlays();

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider copy.js

@@ -0,0 +1,14 @@
+import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class AltToEnterContainerExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js

@@ -9,6 +9,5 @@ export class AltToEnterContainerExtensionProvider {
     }
     style = css `
     .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
-    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/ExtensionType.d.ts

@@ -1,18 +1,22 @@
 export declare enum ExtensionType {
     Permanent = 1,
     Selection = 2,
-    PrimarySelection = 4,
-    PrimarySelectionContainer = 8,
-    MouseOver = 16,
-    OnlyOneItemSelected = 32,
-    MultipleItemsSelected = 64,
+    PrimarySelection = 3,
+    PrimarySelectionContainer = 4,
+    MouseOver = 5,
+    OnlyOneItemSelected = 6,
+    MultipleItemsSelected = 7,
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ContainerDragOver = 128,
+    ContainerDragOver = 8,
+    /**
+    * Extension for the Container on wich a new element is draged over.
+    */
+    ContainerExternalDragOver = 9,
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
-    ContainerDrag = 256,
-    Doubleclick = 512
+    ContainerDrag = 10,
+    Doubleclick = 11
 }

package/dist/elements/widgets/designerView/extensions/ExtensionType.js

@@ -2,18 +2,22 @@ export var ExtensionType;
 (function (ExtensionType) {
     ExtensionType[ExtensionType["Permanent"] = 1] = "Permanent";
     ExtensionType[ExtensionType["Selection"] = 2] = "Selection";
-    ExtensionType[ExtensionType["PrimarySelection"] = 4] = "PrimarySelection";
-    ExtensionType[ExtensionType["PrimarySelectionContainer"] = 8] = "PrimarySelectionContainer";
-    ExtensionType[ExtensionType["MouseOver"] = 16] = "MouseOver";
-    ExtensionType[ExtensionType["OnlyOneItemSelected"] = 32] = "OnlyOneItemSelected";
-    ExtensionType[ExtensionType["MultipleItemsSelected"] = 64] = "MultipleItemsSelected";
+    ExtensionType[ExtensionType["PrimarySelection"] = 3] = "PrimarySelection";
+    ExtensionType[ExtensionType["PrimarySelectionContainer"] = 4] = "PrimarySelectionContainer";
+    ExtensionType[ExtensionType["MouseOver"] = 5] = "MouseOver";
+    ExtensionType[ExtensionType["OnlyOneItemSelected"] = 6] = "OnlyOneItemSelected";
+    ExtensionType[ExtensionType["MultipleItemsSelected"] = 7] = "MultipleItemsSelected";
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ExtensionType[ExtensionType["ContainerDragOver"] = 128] = "ContainerDragOver";
+    ExtensionType[ExtensionType["ContainerDragOver"] = 8] = "ContainerDragOver";
+    /**
+    * Extension for the Container on wich a new element is draged over.
+    */
+    ExtensionType[ExtensionType["ContainerExternalDragOver"] = 9] = "ContainerExternalDragOver";
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
-    ExtensionType[ExtensionType["ContainerDrag"] = 256] = "ContainerDrag";
-    ExtensionType[ExtensionType["Doubleclick"] = 512] = "Doubleclick";
+    ExtensionType[ExtensionType["ContainerDrag"] = 10] = "ContainerDrag";
+    ExtensionType[ExtensionType["Doubleclick"] = 11] = "Doubleclick";
 })(ExtensionType || (ExtensionType = {}));

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.d.ts

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutDragOverContainerExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js

@@ -0,0 +1,18 @@
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GrayOutDragOverContainerExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutDragOverContainerExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js

@@ -0,0 +1,13 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { GrayOutDragOverContainerExtension } from "./GrayOutDragOverContainerExtension.js";
+export class GrayOutDragOverContainerExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GrayOutDragOverContainerExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverExtension.d.ts

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutDragOverExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverExtension.js

@@ -0,0 +1,18 @@
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GrayOutDragOverExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/GrayOutExtension.js

@@ -19,10 +19,11 @@ export class GrayOutExtension extends AbstractExtension {
         this.drawGrayOut(normalizedRect);
     }
     drawGrayOut(r) {
-        const pathPoints = "M0 0 L0 " + this.designerCanvas.outerRect.height + "L" + r.x + " " + this.designerCanvas.outerRect.height + "L" + r.x + " 0" + " L0 0" +
-            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.outerRect.width + " " + r.y + "L" + this.designerCanvas.outerRect.width + " 0" + "L" + r.x + " 0" +
-            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.outerRect.height + "L" + this.designerCanvas.outerRect.width + " " + this.designerCanvas.outerRect.height + "L" + this.designerCanvas.outerRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
-            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerCanvas.outerRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.outerRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        const pathPoints = "M0 0 L0 " + outsideRect.height + "L" + r.x + " " + outsideRect.height + "L" + r.x + " 0" + " L0 0" +
+            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + outsideRect.width + " " + r.y + "L" + outsideRect.width + " 0" + "L" + r.x + " 0" +
+            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + outsideRect.height + "L" + outsideRect.width + " " + outsideRect.height + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
+            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
         this._path.setAttribute("d", pathPoints);
     }
     dispose() {

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js

@@ -1,3 +1,4 @@
+import { NodeType } from "../../../../item/NodeType.js";
 export class SelectAllChildrenContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return designItem.hasChildren;
@@ -5,7 +6,7 @@ export class SelectAllChildrenContextMenu {
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [{
                 title: 'Select all Children', action: () => {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()));
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()).filter(x => x.nodeType == NodeType.Element));
                 }
             }];
     }

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -1,3 +1,6 @@
+import { IPoint } from "../../../../interfaces/IPoint";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IPlacementService } from "../../../services/placementService/IPlacementService";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ITool } from "./ITool";
 import { ServiceContainer } from "../../../services/ServiceContainer.js";
@@ -21,5 +24,6 @@ export declare class PointerTool implements ITool {
     private _resetTool;
     private _pointerActionTypeDrawSelection;
     private _pointerActionTypeDragOrSelect;
+    static FindPossibleContainer(designItem: IDesignItem, designItems: IDesignItem[], event: IPoint): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService];
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -185,39 +185,7 @@ export class PointerTool {
                             let newContainerElementDesignItem = null;
                             let newContainerService = null;
                             if (canLeave) {
-                                const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
-                                for (let e of elementsFromPoint) {
-                                    if (e == this._actionStartedDesignItem.element) {
-                                        continue;
-                                    }
-                                    else if (e == this._actionStartedDesignItem.parent.element) {
-                                        break;
-                                    }
-                                    else if (e == designerCanvas.rootDesignItem.element) {
-                                        newContainerElementDesignItem = designerCanvas.rootDesignItem;
-                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                        break;
-                                    }
-                                    else if (false) {
-                                        //check we don't try to move a item over one of its children..
-                                    }
-                                    else {
-                                        newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                        if (newContainerService) {
-                                            if (newContainerService.canEnter(newContainerElementDesignItem, this._actionStartedDesignItems)) {
-                                                break;
-                                            }
-                                            else {
-                                                newContainerElementDesignItem = null;
-                                                newContainerService = null;
-                                                continue;
-                                            }
-                                        }
-                                    }
-                                }
+                                [newContainerElementDesignItem, newContainerService] = PointerTool.FindPossibleContainer(this._actionStartedDesignItem, this._actionStartedDesignItems, event);
                                 //if we found a new enterable container create extensions 
                                 if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
@@ -284,5 +252,44 @@ export class PointerTool {
                 }
         }
     }
+    static FindPossibleContainer(designItem, designItems, event) {
+        let newContainerElementDesignItem = null;
+        let newContainerService = null;
+        const designerCanvas = designItem.instanceServiceContainer.designerCanvas;
+        const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+        for (let e of elementsFromPoint) {
+            if (e == designItem.element) {
+                continue;
+            }
+            else if (e == designItem.parent.element) {
+                break;
+            }
+            else if (e == designerCanvas.rootDesignItem.element) {
+                newContainerElementDesignItem = designerCanvas.rootDesignItem;
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                break;
+            }
+            else if (false) {
+                //check we don't try to move a item over one of its children..
+            }
+            else {
+                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                if (newContainerService) {
+                    if (newContainerService.canEnter(newContainerElementDesignItem, designItems)) {
+                        break;
+                    }
+                    else {
+                        newContainerElementDesignItem = null;
+                        newContainerService = null;
+                        continue;
+                    }
+                }
+            }
+        }
+        return [newContainerElementDesignItem, newContainerService];
+    }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export type { IElementsJson } from "./elements/services/elementsService/IElement
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";
+export * from "./elements/services/elementsService/WebcomponentManifestElementsService.js";
 export type { IHtmlWriterService } from "./elements/services/htmlWriterService/IHtmlWriterService.js";
 export type { IHtmlWriterOptions } from "./elements/services/htmlWriterService/IHtmlWriterOptions.js";
 export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
@@ -71,6 +72,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
@@ -139,6 +141,8 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";

package/dist/index.js

@@ -26,6 +26,7 @@ export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";
+export * from "./elements/services/elementsService/WebcomponentManifestElementsService.js";
 export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
@@ -45,6 +46,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/selectionService/SelectionService.js";
@@ -99,6 +101,8 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.102",
+  "version": "0.0.105",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",