@node-projects/web-component-designer 0.0.290 → 0.0.292

package/dist/elements/helper/NpmPackageHacks.json

@@ -5,6 +5,10 @@
     "@microsoft/fast-components": {
         "script": "let res = await import('@microsoft/fast-components');\nres.provideFASTDesignSystem().register(res.allComponents);"
     },
+    "@zooplus/zoo-web-components": {
+        "script": "let res = await import('@zooplus/zoo-web-components');\nres.registerComponents(res);",
+        "style": ":root {\n--primary-mid: #3C9700;\n--primary-light: #66B100;\n--primary-dark: #286400;\n--primary-ultralight: #EBF4E5;\n--secondary-mid: #FF6200;\n--secondary-light: #F80;\n--secondary-dark: #CC4E00;\n--info-ultralight: #ECF5FA;\n--info-mid: #459FD0;\n--warning-ultralight: #FDE8E9;\n--warning-mid: #ED1C24;\n}"
+    },
     "@material/web": {
         "import": "@material/web/all.js"
     }

package/dist/elements/helper/NpmPackageLoader.d.ts

@@ -8,6 +8,7 @@ export declare class NpmPackageLoader {
     static patchCustomElementsRegistryToHandleErrors(): void;
     loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<{
         html: string;
+        style: string;
     }>;
     loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
     addToImportmap(baseUrl: string, packageJsonObj: {

package/dist/elements/helper/NpmPackageLoader.js

@@ -209,6 +209,9 @@ export class NpmPackageLoader {
         if (packageHacks[pkg]?.html) {
             retVal.html = (packageHacks[pkg]?.html).replaceAll("${baseUrl}", baseUrl);
         }
+        if (packageHacks[pkg]?.style) {
+            retVal.style = (packageHacks[pkg]?.style).replaceAll("${baseUrl}", baseUrl);
+        }
         return retVal;
     }
     async loadDependency(dependency, version, reportState) {

package/dist/elements/item/DesignItem.js

@@ -10,6 +10,7 @@ import { DeleteAction } from '../services/undoService/transactionItems/DeleteAct
 import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 import { AbstractStylesheetService } from '../services/stylesheetService/AbstractStylesheetService.js';
 import { TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
+import { TextContentChangeAction } from '../services/undoService/transactionItems/TextContentChangeAction.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -205,7 +206,7 @@ export class DesignItem {
     }
     //abstract text content to own property. so only change via designer api will use it.
     get hasContent() {
-        return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
+        return this.nodeType == NodeType.TextNode || (this.nodeType == NodeType.Comment && this.element.textContent != "") || (this._childArray.length === 0 && this.content !== null);
     }
     get content() {
         if (!this.hasChildren)
@@ -224,6 +225,10 @@ export class DesignItem {
             this.remove();
             parent.insertChild(di, idx);
         }
+        else if (this.nodeType == NodeType.Comment) {
+            const action = new TextContentChangeAction(this, value, this.content);
+            this.instanceServiceContainer.undoService.execute(action);
+        }
         else
             this.insertChild(di);
         grp.commit();

package/dist/elements/services/dragDropService/DragDropService.js

@@ -1,5 +1,4 @@
 import { DesignItem } from '../../item/DesignItem.js';
-import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
 import { ExtensionType } from "../../widgets/designerView/extensions/ExtensionType.js";
 import { dragDropFormatNameElementDefinition } from "../../../Constants.js";
 export class DragDropService {
@@ -37,7 +36,6 @@ export class DragDropService {
         let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
         if (!newContainer)
             newContainer = designerCanvas.rootDesignItem;
-        //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 designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
@@ -50,7 +48,6 @@ export class DragDropService {
         const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
         containerService.place(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
         containerService.finishPlace(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
-        designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
         requestAnimationFrame(() => {
             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]);
             grp.commit();

package/dist/elements/services/eventsService/EventsService.d.ts

@@ -2,16 +2,48 @@ import { IDesignItem } from "../../item/IDesignItem.js";
 import { IEvent } from "./IEvent.js";
 import { IEventsService } from "./IEventsService.js";
 export declare class EventsService implements IEventsService {
-    protected _windowEvents: string[];
-    protected _allElements: string[];
-    protected _focusableEvents: string[];
-    protected _form: string[];
-    protected _mouseEvents: string[];
-    protected _pointerEvents: string[];
-    protected _touchEvents: string[];
-    protected _dragEvents: string[];
-    protected _clipboard: string[];
-    protected _details: string[];
+    constructor();
+    protected _allEvents: IEvent[];
+    protected _windowEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _allElements: IEvent[];
+    protected _focusableEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _form: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _simpleMouseEvents: IEvent[];
+    protected _mouseEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _pointerEvents: IEvent[];
+    protected _touchEvents: IEvent[];
+    protected _dragEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _clipboard: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _details: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
     isHandledElement(designItem: IDesignItem): boolean;
     getPossibleEvents(designItem: IDesignItem): IEvent[];
+    getEvent(name: string): IEvent;
 }

package/dist/elements/services/eventsService/EventsService.js

@@ -1,91 +1,103 @@
 export class EventsService {
+    constructor() {
+        this._allEvents = [...this._windowEvents, ...this._form, ...this._simpleMouseEvents, ...this._mouseEvents, ...this._pointerEvents, ...this._touchEvents, ...this._allElements, ...this._focusableEvents, ...this._dragEvents, ...this._clipboard, ...this._dragEvents];
+    }
+    _allEvents;
     _windowEvents = [
-        "afterprint",
-        "beforeprint",
-        "beforeunload",
-        "error",
-        "hashchange",
-        "load",
-        "message",
-        "offline",
-        "online",
-        "pageshow",
-        "popstate",
-        "resize",
-        "storage",
-        "unload"
+        { name: "afterprint", propertyName: "onafterprint", eventObjectName: "Event" },
+        { name: "beforeprint", propertyName: "onbeforeprint", eventObjectName: "Event" },
+        { name: "beforeunload", propertyName: "onbeforeunload", eventObjectName: "Event" },
+        { name: "error", propertyName: "onerror", eventObjectName: "Event" },
+        { name: "load", propertyName: "onload", eventObjectName: "Event" },
+        { name: "hashchange", propertyName: "onhashchange", eventObjectName: "Event" },
+        { name: "message", propertyName: "onmessage", eventObjectName: "Event" },
+        { name: "offline", propertyName: "onoffline", eventObjectName: "Event" },
+        { name: "online", propertyName: "ononline", eventObjectName: "Event" },
+        { name: "pageshow", propertyName: "onpageshow", eventObjectName: "Event" },
+        { name: "popstate", propertyName: "onpopstate", eventObjectName: "Event" },
+        { name: "resize", propertyName: "onresize", eventObjectName: "Event" },
+        { name: "storage", propertyName: "onstorage", eventObjectName: "Event" },
+        { name: "unload", propertyName: "onunload", eventObjectName: "Event" }
     ];
     _allElements = [
-        "contextmenu",
+        { name: "contextmenu", propertyName: "oncontextmenu", eventObjectName: "PointerEvent" }
     ];
     _focusableEvents = [
-        "blur",
-        "focus",
-        "keydown",
-        "keypress",
-        "keyup"
+        { name: "blur", propertyName: "onblur", eventObjectName: "FocusEvent" },
+        { name: "focus", propertyName: "onfocus", eventObjectName: "FocusEvent" },
+        { name: "keydown", propertyName: "onkeydown", eventObjectName: "KeyboardEvent" },
+        { name: "keyup", propertyName: "onkeyup", eventObjectName: "KeyboardEvent" }
     ];
     _form = [
-        "change",
-        "input",
-        "invalid",
-        "reset",
-        "search",
-        "select",
-        "submit"
+        { name: "beforeinput", propertyName: "onbeforeinput", eventObjectName: "InputEvent" },
+        { name: "input", propertyName: "oninput", eventObjectName: "InputEvent" },
+        { name: "change", propertyName: "onchange", eventObjectName: "Event" },
+        { name: "invalid", propertyName: "oninvalid", eventObjectName: "Event" },
+        { name: "reset", propertyName: "onreset", eventObjectName: "Event" },
+        { name: "select", propertyName: "onselect", eventObjectName: "Event" },
+        { name: "submit", propertyName: "onsubmit", eventObjectName: "SubmitEvent" }
+    ];
+    _simpleMouseEvents = [
+        { name: "click", propertyName: "onclick", eventObjectName: "PointerEvent" },
+        { name: "dblclick", propertyName: "ondblclick", eventObjectName: "MouseEvent" },
+        { name: "wheel", propertyName: "onwheel", eventObjectName: "WheelEvent" },
+        { name: "scroll", propertyName: "onscroll", eventObjectName: "Event" },
     ];
     _mouseEvents = [
-        "click",
-        "dblclick",
-        "mousedown",
-        "mouseup",
-        "mousemove",
-        "mouseover",
-        "mouseout",
-        "mousewheel",
-        "wheel"
+        { name: "mousedown", propertyName: "onmousedown", eventObjectName: "MouseEvent" },
+        { name: "mouseup", propertyName: "onmouseup", eventObjectName: "MouseEvent" },
+        { name: "mousemove", propertyName: "onmousemove", eventObjectName: "MouseEvent" },
+        { name: "mouseover", propertyName: "onmouseover", eventObjectName: "MouseEvent" },
+        { name: "mouseout", propertyName: "onmouseout", eventObjectName: "MouseEvent" }
     ];
     _pointerEvents = [
-        "pointerdown",
-        "pointerup",
-        "pointerenter",
-        "pointerleave",
-        "pointermove",
-        "pointerover",
-        "pointerout",
-        "pointercancel"
+        { name: "pointerdown", propertyName: "onpointerdown", eventObjectName: "PointerEvent" },
+        { name: "pointerup", propertyName: "onpointerup", eventObjectName: "PointerEvent" },
+        { name: "pointerenter", propertyName: "onpointerenter", eventObjectName: "PointerEvent" },
+        { name: "pointerleave", propertyName: "onpointerleave", eventObjectName: "PointerEvent" },
+        { name: "pointermove", propertyName: "onpointermove", eventObjectName: "PointerEvent" },
+        { name: "pointerover", propertyName: "onpointerover", eventObjectName: "PointerEvent" },
+        { name: "pointerout", propertyName: "onpointerout", eventObjectName: "PointerEvent" },
+        { name: "pointercancel", propertyName: "onpointercancel", eventObjectName: "PointerEvent" }
     ];
     _touchEvents = [
-        "touchstart",
-        "touchend",
-        "touchmove",
-        "touchcancel"
+        { name: "touchstart", propertyName: "ontouchstart", eventObjectName: "TouchEvent" },
+        { name: "touchend", propertyName: "ontouchend", eventObjectName: "TouchEvent" },
+        { name: "touchmove", propertyName: "ontouchmove", eventObjectName: "TouchEvent" },
+        { name: "touchcancel", propertyName: "ontouchcancel", eventObjectName: "TouchEvent" }
     ];
     _dragEvents = [
-        "drag",
-        "dragend",
-        "dragenter",
-        "dragleave",
-        "dragover",
-        "dragstart",
-        "drop",
-        "scroll"
+        { name: "drag", propertyName: "ondrag", eventObjectName: "DragEvent" },
+        { name: "dragend", propertyName: "ondragend", eventObjectName: "DragEvent" },
+        { name: "dragenter", propertyName: "ondragenter", eventObjectName: "DragEvent" },
+        { name: "dragleave", propertyName: "ondragleave", eventObjectName: "DragEvent" },
+        { name: "dragover", propertyName: "ondragover", eventObjectName: "DragEvent" },
+        { name: "dragstart", propertyName: "ondragstart", eventObjectName: "DragEvent" },
+        { name: "drop", propertyName: "ondrop", eventObjectName: "DragEvent" }
     ];
     _clipboard = [
-        "copy",
-        "cut",
-        "paste"
+        { name: "copy", propertyName: "oncopy", eventObjectName: "ClipboardEvent" },
+        { name: "cut", propertyName: "oncut", eventObjectName: "ClipboardEvent" },
+        { name: "paste", propertyName: "onpaste", eventObjectName: "ClipboardEvent" }
     ];
     _details = [
-        "toggle"
+        { name: "toggle", propertyName: "ontoggle", eventObjectName: "Event" }
     ];
     isHandledElement(designItem) {
         return true;
     }
     getPossibleEvents(designItem) {
-        //Todo: create corret events list for all std. elements
-        let lst = [...this._mouseEvents, ...this._allElements, ...this._focusableEvents];
-        let events = lst.map(x => ({ name: x, propertyName: 'on' + x }));
+        if (designItem.element instanceof HTMLInputElement ||
+            designItem.element instanceof HTMLTextAreaElement ||
+            designItem.element instanceof HTMLSelectElement) {
+            let events = [...this._form, ...this._simpleMouseEvents, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
+            return events;
+        }
+        let events = [...this._simpleMouseEvents, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
         return events;
     }
+    getEvent(name) {
+        let evt = this._allEvents.find(x => x.name == name);
+        return evt ?? { name, propertyName: 'on' + name, eventObjectName: 'Event' };
+    }
 }

package/dist/elements/services/eventsService/IEvent.d.ts

@@ -1,4 +1,5 @@
 export interface IEvent {
     name: string;
     propertyName?: string;
+    eventObjectName?: string;
 }

package/dist/elements/services/eventsService/IEventsService.d.ts

@@ -3,4 +3,5 @@ import { IEvent } from "./IEvent.js";
 export interface IEventsService {
     isHandledElement(designItem: IDesignItem): boolean;
     getPossibleEvents(designItem: IDesignItem): IEvent[];
+    getEvent(name: string): IEvent;
 }

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

@@ -121,6 +121,7 @@ export class DefaultPlacementService {
     enterContainer(container, items) {
         let filterdItems = filterChildPlaceItems(items);
         for (let i of filterdItems) {
+            container.insertChild(i);
             if (i.lastContainerSize) {
                 if (!i.hasStyle('width'))
                     i.setStyle('width', i.lastContainerSize.width + 'px');

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

@@ -6,6 +6,7 @@ export class FlexBoxPlacementService {
     }
     enterContainer(container, items) {
         for (let i of items) {
+            container.insertChild(i);
             i.removeStyle("position");
             i.removeStyle("left");
             i.removeStyle("top");

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

@@ -8,6 +8,7 @@ export class GridPlacementService {
     }
     enterContainer(container, items) {
         for (let i of items) {
+            container.insertChild(i);
             i.removeStyle("position");
             i.removeStyle("left");
             i.removeStyle("top");

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

@@ -1,3 +1,4 @@
+import { NodeType } from '../../item/NodeType.js';
 import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
 import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
 import { CommonPropertiesService } from './services/CommonPropertiesService.js';
@@ -35,6 +36,8 @@ export class PropertyTabsService {
     getPropertygroups(designItems) {
         if (designItems == null || designItems.length == 0)
             return [];
+        if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
+            return [];
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         let lst = this._pgList;

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

@@ -17,7 +17,7 @@ export class CssCustomPropertiesService extends CommonPropertiesService {
         return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
     }
     getProperties(designItem) {
-        if (!designItem.element.computedStyleMap)
+        if (!designItem?.element?.computedStyleMap)
             return null;
         let rootMap = Array.from(designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
         let props = Array.from(designItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));

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

@@ -0,0 +1,10 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export declare class UnkownElementsPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,28 @@
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+export class UnkownElementsPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperties(designItem) {
+        let list = Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
+        let props = [];
+        for (let p of list) {
+            let desc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(designItem.element), p);
+            if (desc.get || desc.set) {
+                let v = designItem.element[p];
+                if (typeof v == 'boolean')
+                    props.push({ name: p, type: 'boolean', service: this, propertyType: PropertyType.propertyAndAttribute });
+                else if (typeof v == 'number')
+                    props.push({ name: p, type: 'bonumberolean', service: this, propertyType: PropertyType.propertyAndAttribute });
+                else
+                    props.push({ name: p, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
+            }
+        }
+        return props;
+    }
+}

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

@@ -0,0 +1,24 @@
+/// <reference types="node" />
+import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { ValueType } from '../ValueType.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { IBinding } from '../../../item/IBinding.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare abstract class AbstractPropertiesService implements IPropertiesService {
+    _stylesCache: Map<IDesignItem, Set<string>>;
+    _cacheClearTimer: NodeJS.Timeout;
+    abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
+    abstract isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}

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

@@ -0,0 +1,198 @@
+import { ValueType } from '../ValueType.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { NodeType } from '../../../item/NodeType.js';
+export class AbstractPropertiesService {
+    _stylesCache = new Map;
+    _cacheClearTimer;
+    _notifyChangedProperty(designItem, property, value) {
+    }
+    getProperty(designItem, name) {
+        let properties = this.getProperties(designItem);
+        if ('properties' in properties[0]) {
+            return properties.flatMap(x => x.properties).find(x => x.name == name);
+        }
+        else
+            return properties.find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
+    }
+    setValue(designItems, property, value) {
+        const cg = designItems[0].openGroup("property changed: " + property.name + " to " + value);
+        for (let d of designItems) {
+            if (property.propertyType == PropertyType.cssValue) {
+                d.updateStyleInSheetOrLocal(property.name, value);
+                //unkown css property names do not trigger the mutation observer of property grid, 
+                //fixed by assinging stle again to the attribute
+                d.element.setAttribute('style', d.element.getAttribute('style'));
+            }
+            else {
+                let attributeName = property.attributeName;
+                if (!attributeName)
+                    attributeName = PropertiesHelper.camelToDashCase(property.name);
+                if (property.type === 'object') {
+                    const json = JSON.stringify(value);
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, json);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = value;
+                }
+                else if (property.type == 'boolean' && !value) {
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.removeAttribute(attributeName);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = false;
+                }
+                else if (property.type == 'boolean' && value) {
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, "");
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = true;
+                }
+                else {
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, value.toString());
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = value;
+                }
+            }
+            this._notifyChangedProperty(d, property, value);
+        }
+        cg.commit();
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
+    clearValue(designItems, property, clearType) {
+        const cg = designItems[0].openGroup("property cleared: " + property.name);
+        for (let d of designItems) {
+            if (clearType != 'binding') {
+                if (property.propertyType == PropertyType.cssValue) {
+                    d.removeStyle(property.name);
+                }
+                else {
+                    let attributeName = property.attributeName;
+                    if (!attributeName)
+                        attributeName = PropertiesHelper.camelToDashCase(property.name);
+                    d.removeAttribute(attributeName);
+                }
+            }
+            if (clearType != 'value') {
+                d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                    return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+                });
+            }
+            this._notifyChangedProperty(d, property, undefined);
+        }
+        cg.commit();
+    }
+    isSet(designItems, property) {
+        let all = true;
+        let some = false;
+        if (designItems != null && designItems.length !== 0) {
+            let attributeName = property.attributeName;
+            if (!attributeName)
+                attributeName = PropertiesHelper.camelToDashCase(property.name);
+            for (let x of designItems) {
+                let has = false;
+                if (property.propertyType == PropertyType.cssValue)
+                    has = x.hasStyle(property.name);
+                else
+                    has = x.hasAttribute(attributeName);
+                all = all && has;
+                some = some || has;
+                if (!all && some)
+                    break;
+            }
+            ;
+            //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 (property.propertyType == PropertyType.cssValue) {
+                if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
+                    return ValueType.bound;
+            }
+            else {
+                if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
+                    return ValueType.bound;
+            }
+            if (!all && property.propertyType == PropertyType.cssValue) {
+                let styles = this._stylesCache.get(designItems[0]);
+                if (!styles) {
+                    styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name));
+                    this._stylesCache.set(designItems[0], styles);
+                    clearTimeout(this._cacheClearTimer);
+                    this._cacheClearTimer = setTimeout(() => this._stylesCache.clear(), 30);
+                }
+                let cssValue = styles.has(property.name);
+                if (cssValue)
+                    return ValueType.fromStylesheet;
+            }
+        }
+        else
+            return ValueType.none;
+        return all ? ValueType.all : some ? ValueType.some : ValueType.none;
+    }
+    getValue(designItems, property) {
+        if (designItems != null && designItems.length !== 0) {
+            if (property.propertyType == PropertyType.cssValue) {
+                let lastValue = designItems[0].getStyle(property.name);
+                for (const d of designItems) {
+                    let value = d.getStyle(property.name);
+                    if (value != lastValue) {
+                        lastValue = null;
+                        break;
+                    }
+                }
+                return lastValue;
+            }
+            else {
+                let attributeName = property.attributeName;
+                if (!attributeName)
+                    attributeName = PropertiesHelper.camelToDashCase(property.name);
+                if (property.type == 'boolean')
+                    return designItems[0].hasAttribute(attributeName);
+                let lastValue = designItems[0].getAttribute(attributeName);
+                /*
+                for (const x of designItems) {
+                  let value = x.attributes.get(attributeName);
+                  if (value != lastValue) {
+                    lastValue = null;
+                    break;
+                  }
+                }
+                */
+                return lastValue;
+            }
+        }
+        return null;
+    }
+    getBinding(designItems, property) {
+        //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 (property.propertyType == PropertyType.cssValue) {
+            return bindings.find(x => (x.target == BindingTarget.css) && x.targetName == property.name);
+        }
+        else {
+            return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
+        }
+    }
+    getUnsetValue(designItems, property) {
+        if (property.propertyType == PropertyType.cssValue) {
+            if (designItems != null && designItems.length !== 0) {
+                if (designItems[0].nodeType == NodeType.Element) {
+                    let v = window.getComputedStyle(designItems[0].element)[property.name];
+                    return v;
+                }
+            }
+            return null;
+        }
+        else
+            return property.defaultValue;
+    }
+}

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

@@ -34,7 +34,8 @@ export class WebcomponentManifestPropertiesService extends AbstractPropertiesSer
                                     if (declaration.attributes)
                                         pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
                                     const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
-                                    properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
+                                    if (d.name)
+                                        properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
                                 }
                             }
                             this._propertiesList[e.name] = properties;

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

@@ -0,0 +1,15 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.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;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    name: string;
+    newValue: any;
+    oldValue: any;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.js

@@ -0,0 +1,70 @@
+export class AttributeChangeAction {
+    constructor(designItem, name, newValue, oldValue) {
+        this.title = "Change Attribute " + name + " of <" + designItem.name + ">";
+        this.designItem = designItem;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        if (this.oldValue == null) {
+            this.designItem._withoutUndoRemoveAttribute(this.name);
+            try {
+                this.designItem.element.removeAttribute(this.name);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
+        else {
+            this.designItem._withoutUndoSetAttribute(this.name, this.oldValue);
+            if (this.name != "draggable") {
+                try {
+                    if (typeof this.oldValue === 'string')
+                        this.designItem.element.setAttribute(this.name, this.oldValue);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    }
+    do() {
+        if (this.newValue == null) {
+            this.designItem._withoutUndoRemoveAttribute(this.name);
+            try {
+                this.designItem.element.removeAttribute(this.name);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
+        else {
+            this.designItem._withoutUndoSetAttribute(this.name, this.newValue);
+            if (this.name != "draggable") {
+                try {
+                    if (typeof this.newValue === 'string')
+                        this.designItem.element.setAttribute(this.name, this.newValue);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) {
+            this.newValue = other.newValue;
+            return true;
+        }
+        return false;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IBinding } from '../../../item/IBinding.js';
+export declare class TextContentChangeAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newValue: string | IBinding | null, oldValue: string | IBinding | null);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newValue: any;
+    oldValue: any;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/TextContentChangeAction.js

@@ -0,0 +1,24 @@
+export class TextContentChangeAction {
+    constructor(designItem, newValue, oldValue) {
+        this.title = "Change TextContent from '" + oldValue + "' to '" + newValue + "'";
+        this.designItem = designItem;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        this.designItem.element.textContent = this.oldValue;
+    }
+    do() {
+        this.designItem.element.textContent = this.newValue;
+    }
+    designItem;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/widgets/debugView/debug-view.js

@@ -1,6 +1,8 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
 import { DesignItem } from "../../item/DesignItem.js";
 function generateSelector(element) {
+    if (!element)
+        return '';
     let selector, tag = element.nodeName.toLowerCase();
     if (element.id) {
         selector = '#' + element.getAttribute('id');
@@ -193,7 +195,7 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         if (this._ready) {
             requestAnimationFrame(() => {
                 let element = designItem?.element;
-                if (element) {
+                if (element && element.nodeType != 8) {
                     if (element.nodeType == 3)
                         element = element.parentNode;
                     this.computedStyle = getComputedStyle(element);

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

@@ -1,8 +1,9 @@
 import { SelectionDefaultExtension } from './SelectionDefaultExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from '../../../item/NodeType.js';
 export class SelectionDefaultExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return true;
+        return designItem.nodeType != NodeType.Comment;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new SelectionDefaultExtension(extensionManager, designerView, designItem);

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

@@ -207,16 +207,18 @@ export class PointerTool {
                     }
                     if (!this._actionStartedDesignItem)
                         return;
+                    if (!this._changeGroup)
+                        this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements");
                     if (event.ctrlKey && !this._copiedItemsInserted) {
+                        this._changeGroup.title = "Copy Elements";
                         this._copiedItemsInserted = true;
-                        if (!this._changeGroup)
-                            this._changeGroup = designerCanvas.rootDesignItem.openGroup("Copy Elements");
                         for (let i = 0; i < this._clonedItems.length; i++) {
                             this._actionStartedDesignItems[i].insertAdjacentElement(this._clonedItems[i], 'beforebegin');
                         }
                         designerCanvas.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this._clonedItems });
                     }
                     else if (!event.ctrlKey && this._copiedItemsInserted) {
+                        this._changeGroup.title = "Move Elements";
                         for (let d of this._clonedItems) {
                             d.remove();
                         }
@@ -270,8 +272,6 @@ export class PointerTool {
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
-                                for (let di of this._actionStartedDesignItems)
-                                    newContainerElementDesignItem._insertChildInternal(di); //todo -> maybe in enter container???
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
                                 newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);

package/dist/index.d.ts

@@ -119,6 +119,7 @@ export * from "./elements/services/propertiesService/services/AbstractProperties
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssCustomPropertiesService.js";
+export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/propertiesService/PropertyTabsService.js";
@@ -140,6 +141,7 @@ export * from "./elements/services/undoService/transactionItems/InsertAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
 export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
+export * from "./elements/services/undoService/transactionItems/TextContentChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export type { IService } from "./elements/services/IService.js";

package/dist/index.js

@@ -79,6 +79,7 @@ export * from "./elements/services/propertiesService/services/AbstractProperties
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssCustomPropertiesService.js";
+export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/propertiesService/PropertyTabsService.js";
@@ -95,6 +96,7 @@ export * from "./elements/services/undoService/transactionItems/InsertAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
 export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
+export * from "./elements/services/undoService/transactionItems/TextContentChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";

package/package.json

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