@node-projects/web-component-designer 0.0.72 → 0.0.76

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

@@ -1,18 +1,19 @@
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
+import { PropertyType } from "../PropertyType";
 export class AttributesPropertiesService {
     name = "attributes";
     isHandledElement(designItem) {
         return true;
     }
     getProperty(designItem, name) {
-        return { name: name, type: 'string', service: this };
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute };
     }
     getProperties(designItem) {
         if (designItem) {
             let p = [];
             for (let a of designItem.attributes.keys()) {
-                p.push({ name: a, type: 'string', service: this });
+                p.push({ name: a, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
             }
             return p;
         }

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

@@ -1,24 +1,31 @@
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
+import { PropertyType } from "../PropertyType";
 export class CommonPropertiesService {
     //@ts-ignore
     commonProperties = [
         {
             name: "id",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "class",
             type: "string",
-            service: this
+            service: this,
+            attributeName: "class",
+            propertyName: "className",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "title",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "tabindex",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     name = "common";

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

@@ -1,85 +1,103 @@
 import { ValueType } from '../ValueType';
 import { NodeType } from '../../../item/NodeType';
 import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType';
 export class CssPropertiesService {
     //@ts-ignore
     styles = [
         {
             name: "color",
             type: "color",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "background-color",
             type: "color",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "box-sizing",
             type: "list",
             values: ["border-box", "content-box"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "border",
             type: "string",
             default: "0px none rbg(0,0,0)",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "box-shadow",
             type: "string",
             default: "none",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "opacity",
             type: "number",
             min: 0,
             max: 1,
             step: 0.1,
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "padding",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "margin",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "left",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "top",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "right",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "bottom",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "width",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "height",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "font-size",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "font-weight",
             type: "list",
             values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     //@ts-ignore
@@ -88,24 +106,29 @@ export class CssPropertiesService {
             name: "display",
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "inset",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "margin",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "padding",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     //@ts-ignore
@@ -114,48 +137,58 @@ export class CssPropertiesService {
             name: "display",
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "grid-template-columns",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "grid-template-rows",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "column-gap",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "row-gap",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-content",
             type: "img-list",
             values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "justify-content",
             type: "img-list",
             values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-items",
             type: "img-list",
             values: ["center", "start", "end", "stretch", "baseline"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "justify-items",
             type: "img-list",
             values: ["center", "start", "end", "stretch"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     //@ts-ignore
@@ -164,37 +197,44 @@ export class CssPropertiesService {
             name: "display",
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "flex-direction",
             type: "img-list",
             values: ["row", "column"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "flex-wrap",
             type: "img-list",
             values: ["nowrap", "wrap"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-content",
             type: "img-list",
             values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "justify-content",
             type: "img-list",
             values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-items",
             type: "img-list",
             values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     name;
@@ -206,7 +246,7 @@ export class CssPropertiesService {
     }
     getProperty(designItem, name) {
         if (this.name == 'set-styles') {
-            return { name: name, type: 'string', service: this };
+            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
         }
         return this[this.name][name];
     }
@@ -214,7 +254,7 @@ export class CssPropertiesService {
         if (this.name == 'set-styles') {
             if (!designItem)
                 return [];
-            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this }));
+            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
         }
         return this[this.name];
     }

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

@@ -1,5 +1,8 @@
+import { PropertyType } from "../PropertyType";
 export interface IJsonPropertyDefinition {
     name: string;
+    propertyName?: string;
+    attributeName?: string;
     description?: string;
     type?: string;
     default?: any;
@@ -10,4 +13,5 @@ export interface IJsonPropertyDefinition {
     enumValues?: [name: string, value: string | number][];
     value?: any;
     defaultValue?: any;
+    propertyType?: PropertyType.cssValue;
 }

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

@@ -1,4 +1,5 @@
 import { UnkownElementPropertiesService } from './UnkownElementPropertiesService';
+import { PropertyType } from '../PropertyType';
 export class ListPropertiesService extends UnkownElementPropertiesService {
     name = "list";
     _propertys = new Map();
@@ -11,6 +12,8 @@ export class ListPropertiesService extends UnkownElementPropertiesService {
                 let pdef = propertyDefinitions[e][p];
                 parr.push({
                     name: pdef.name,
+                    propertyName: pdef.propertyName,
+                    attributeName: pdef.attributeName,
                     description: pdef.description,
                     type: pdef.type,
                     default: pdef.default,
@@ -21,7 +24,8 @@ export class ListPropertiesService extends UnkownElementPropertiesService {
                     enumValues: pdef.enumValues,
                     value: pdef.value,
                     defaultValue: pdef.defaultValue,
-                    service: this
+                    service: this,
+                    propertyType: pdef.propertyType ?? PropertyType.propertyAndAttribute
                 });
             }
         }

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

@@ -1,5 +1,6 @@
 import { AbstractBasePropertiesService } from "./AbstractBasePropertiesService";
 import { PropertiesHelper } from './PropertiesHelper';
+import { PropertyType } from '../PropertyType';
 export class Lit2PropertiesService extends AbstractBasePropertiesService {
     name = "lit2";
     isHandledElement(designItem) {
@@ -19,27 +20,27 @@ export class Lit2PropertiesService extends AbstractBasePropertiesService {
             if (litProperty.type)
                 type = litProperty.type;
             if (type === String) {
-                let property = { name: name, type: "string", service: this };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Object) {
-                let property = { name: name, type: "string", service: this };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Number) {
-                let property = { name: name, type: "number", service: this };
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Date) {
-                let property = { name: name, type: "date", service: this };
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Boolean) {
-                let property = { name: name, type: "boolean", service: this };
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (PropertiesHelper.isTypescriptEnum(type)) {
-                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this };
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
         }

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

@@ -1,4 +1,5 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
+import { PropertyType } from '../PropertyType';
 export class NativeElementsPropertiesService extends CommonPropertiesService {
     //@ts-ignore
     inputProperties = [
@@ -7,23 +8,28 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "list",
             values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
             service: this,
-            defaultValue: "text"
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "value",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "checked",
             type: "boolean",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "min",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "max",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     buttonProperties = [
@@ -32,43 +38,50 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "list",
             values: ["button", "submit", "reset"],
             service: this,
-            defaultValue: "button"
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "value",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "disabled",
             type: "boolean",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     anchorProperties = [
         {
             name: "href",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     divProperties = [
         {
             name: "title",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     imgProperties = [
         {
             name: "src",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     iframeProperties = [
         {
             name: "src",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     name = "native";

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

@@ -3,8 +3,7 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
-export declare class UnkownElementPropertiesService implements IPropertiesService {
-    readonly name: string;
+export declare abstract class UnkownElementPropertiesService implements IPropertiesService {
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;

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

@@ -1,8 +1,8 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
 import { BindingTarget } from "../../../item/BindingTarget";
+//@ts-ignore
 export class UnkownElementPropertiesService {
-    name = "unkown";
     isHandledElement(designItem) {
         return true;
     }

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

@@ -1,14 +1,12 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { IExtensionManager } from '../../../widgets/designerView/extensions/IExtensionManger';
 export declare class DeleteAction implements ITransactionItem {
-    constructor(deletedItems: IDesignItem[], extensionManager: IExtensionManager);
+    constructor(deletedItems: IDesignItem[]);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
     deletedItems: IDesignItem[];
-    extensionManager: IExtensionManager;
     private _parentItems;
     private _parentIndexes;
     mergeWith(other: ITransactionItem): boolean;

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

@@ -1,9 +1,8 @@
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class DeleteAction {
-    constructor(deletedItems, extensionManager) {
+    constructor(deletedItems) {
         this.title = "Delete Items";
         this.deletedItems = deletedItems;
-        this.extensionManager = extensionManager;
     }
     title;
     get affectedItems() {
@@ -11,7 +10,7 @@ export class DeleteAction {
     }
     undo() {
         for (let n = 0; n < this.deletedItems.length; n++) {
-            this._parentItems[n].insertChild(this.deletedItems[n], this._parentIndexes[n]);
+            this._parentItems[n]._insertChildInternal(this.deletedItems[n], this._parentIndexes[n]);
         }
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this.deletedItems });
     }
@@ -25,11 +24,9 @@ export class DeleteAction {
         for (let n = 0; n < this.deletedItems.length; n++) {
             this.deletedItems[n].remove();
         }
-        this.extensionManager.removeExtensions(this.deletedItems);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
     }
     deletedItems;
-    extensionManager;
     _parentItems;
     _parentIndexes;
     mergeWith(other) {

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

@@ -14,7 +14,7 @@ export class InsertAction {
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {
-        this.designItem.insertChild(this.newItem, this.index);
+        this.designItem._insertChildInternal(this.newItem, this.index);
         const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
         if (prepService)
             requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));

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

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+export declare class InsertChildAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newParent: IDesignItem;
+    newIndex: number;
+    oldParent: IDesignItem;
+    oldIndex: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

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

@@ -0,0 +1,31 @@
+export class InsertChildAction {
+    constructor(designItem, newParent, newIndex) {
+        this.title = "Move Item";
+        this.designItem = designItem;
+        this.newParent = newParent;
+        this.newIndex = newIndex;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem, this.newParent, this.oldParent];
+    }
+    undo() {
+        this.oldParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        this.oldParent = this.designItem.parent;
+        this.oldIndex = this.designItem.parent.indexOf(this.designItem);
+        this.newParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newParent;
+    newIndex;
+    oldParent;
+    oldIndex;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/webcomponentManifestParserService/WebcomponentManifestParserService.1.js

@@ -0,0 +1 @@
+"use strict";