@node-projects/web-component-designer 0.0.141 → 0.0.143

package/README.md

@@ -1,6 +1,6 @@
 # web-component-designer
 
-```This is a preview version. It's already useable but big refactorings could still happen.```
+```It#s now considered beta. It works, we use it in production, but there are many more features to come```
 
 A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.
 Meanwhile polymer is not used anymore.
@@ -9,7 +9,15 @@ Meanwhile polymer is not used anymore.
 
 ## NPM Package
 
-At the moment there is no npm package available, but there will be one as soon as the software has reached RC status.
+https://www.npmjs.com/package/@node-projects/web-component-designer
+
+     npm i @node-projects/web-component-designer
+
+## Browser support
+
+  - At the moment Chrome, and Firefox Nightly with Experimental Import Assertions enabled.
+  But when import Assertions are landing in Safari and Firefox they will work again.
+  And you could transpile them away in the meantime.
 
 ## Demo
 

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

@@ -1,7 +1,7 @@
-import { IDesignerCanvas } from "../..";
+import { IDesignerCanvas, IDesignItem } from "../..";
 import { Orientation } from "../../enums/Orientation";
 export declare abstract class ArrangeHelper {
-    static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas): void;
+    static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas, arrangeElements: IDesignItem[]): void;
     private static arrange;
     private static formGroup;
 }

package/dist/elements/helper/ArrangeHelper.js

@@ -1,60 +1,86 @@
 import { Orientation } from "../../enums/Orientation";
 export class ArrangeHelper {
-    static arrangeElements(orientation, designerCanvas) {
+    static arrangeElements(orientation, designerCanvas, arrangeElements) {
         switch (orientation) {
             case Orientation.TOP: {
                 const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas);
-                const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
-                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    this.arrange(elem, 'top', top);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.y != selectedCoordinates.y) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let top = primaryCoordinates.y - parent.y;
+                        this.arrange(elem, 'top', top + "px");
+                    }
                 }
                 grp.commit();
                 break;
             }
             case Orientation.RIGHT: {
                 const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
-                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
-                const right = Math.floor(arrElement.x + arrElement.width);
-                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    this.arrange(elem, 'left', (right - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width)) + "px");
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.x != selectedCoordinates.x) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let right = primaryCoordinates.x - parent.x;
+                        this.arrange(elem, 'left', right + "px");
+                    }
                 }
                 grp.commit();
                 break;
             }
             case Orientation.BOTTOM:
                 const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
-                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
-                const top = Math.floor(arrElement.y + arrElement.height);
-                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    this.arrange(elem, 'top', (top - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height)) + "px");
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.y != selectedCoordinates.y) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let bottom = primaryCoordinates.y - parent.y;
+                        this.arrange(elem, 'top', bottom + "px");
+                    }
                 }
                 grp.commit();
                 break;
             case Orientation.LEFT: {
                 const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
-                const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
-                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    this.arrange(elem, 'left', left);
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.x != selectedCoordinates.x) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let left = primaryCoordinates.x - parent.x;
+                        this.arrange(elem, 'left', left + "px");
+                    }
                 }
                 grp.commit();
                 break;
             }
             case Orientation.VERTICAL_CENTER: {
                 const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas);
-                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
-                const ver_center = arrElement.y + arrElement.height / 2;
-                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    this.arrange(elem, 'top', (ver_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height) / 2) + "px");
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.y != selectedCoordinates.y) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let center = primaryCoordinates.y - parent.y + (primaryCoordinates.height / 2) - (selectedCoordinates.height / 2);
+                        this.arrange(elem, 'top', center + "px");
+                    }
                 }
                 grp.commit();
                 break;
             }
             case Orientation.HORIZONTAL_CENTER: {
                 const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas);
-                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
-                const hor_center = arrElement.x + (arrElement.width / 2);
-                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    this.arrange(elem, 'left', (hor_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width) / 2) + "px");
+                const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
+                for (let elem of arrangeElements) {
+                    let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
+                    if (primaryCoordinates.x != selectedCoordinates.x) {
+                        let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
+                        let center = primaryCoordinates.x - parent.x + (primaryCoordinates.width / 2) - (selectedCoordinates.width / 2);
+                        this.arrange(elem, 'left', center + "px");
+                    }
                 }
                 grp.commit();
                 break;

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

@@ -5,6 +5,7 @@ export declare enum ElementDisplayType {
     block = 2
 }
 export declare function isInline(element: HTMLElement): boolean;
+export declare function isInlineAfter(element: HTMLElement): boolean;
 export declare function getElementDisplaytype(element: HTMLElement): ElementDisplayType;
 export declare function isEmptyTextNode(node: Node): boolean;
 export declare function getActiveElement(): Element;

package/dist/elements/helper/ElementHelper.js

@@ -13,6 +13,9 @@ export var ElementDisplayType;
 export function isInline(element) {
     return element != null && window.getComputedStyle(element).display.startsWith('inline');
 }
+export function isInlineAfter(element) {
+    return element != null && window.getComputedStyle(element).display == 'inline';
+}
 export function getElementDisplaytype(element) {
     const display = window.getComputedStyle(element).display;
     return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;

package/dist/elements/services/ServiceContainer.js

@@ -1,10 +1,10 @@
 import { BaseServiceContainer } from './BaseServiceContainer';
-import { CodeViewMonaco } from "../widgets/codeView/code-view-monaco";
 import { DemoView } from '../widgets/demoView/demoView';
 import { GlobalContext } from './GlobalContext';
+import { CodeViewSimple } from "../widgets/codeView/code-view-simple";
 export class ServiceContainer extends BaseServiceContainer {
     config = {
-        codeViewWidget: CodeViewMonaco,
+        codeViewWidget: CodeViewSimple,
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();

package/dist/elements/services/htmlWriterService/HtmlWriterService.d.ts

@@ -5,6 +5,7 @@ import { IStringPosition } from './IStringPosition.js';
 import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
 export declare class HtmlWriterService extends AbstractHtmlWriterService {
     private _conditionalyWriteIndent;
+    private _conditionalyWriteIndentBefore;
     private _conditionalyWriteNewline;
     write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
     private internalWrite;

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -1,17 +1,23 @@
 import { DomConverter } from '../../widgets/designerView/DomConverter.js';
 import { NodeType } from '../../item/NodeType.js';
-import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
+import { isEmptyTextNode, isInline, isInlineAfter } from '../../helper/ElementHelper.js';
 import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
 export class HtmlWriterService extends AbstractHtmlWriterService {
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
-        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+        if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
             (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
             (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
             (designItem.element instanceof SVGElement))
             indentedTextWriter.writeIndent();
     }
+    _conditionalyWriteIndentBefore(indentedTextWriter, designItem) {
+        if ((designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
+            (designItem.element instanceof SVGElement))
+            indentedTextWriter.writeIndent();
+    }
     _conditionalyWriteNewline(indentedTextWriter, designItem) {
-        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+        if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
             (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
             (designItem.element instanceof SVGElement))
             indentedTextWriter.writeNewline();
@@ -25,7 +31,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
         let start = indentedTextWriter.position;
         if (designItem.nodeType == NodeType.TextNode) {
             if (isEmptyTextNode(designItem.element) &&
-                ((designItem.element.previousSibling instanceof HTMLElement && !isInline(designItem.element.previousSibling)) ||
+                ((designItem.element.previousSibling instanceof HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
                     (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
             }
             else
@@ -37,7 +43,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         else {
-            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            this._conditionalyWriteIndentBefore(indentedTextWriter, designItem);
             indentedTextWriter.write('<' + designItem.name);
             this.writeAttributes(indentedTextWriter, designItem, options);
             this.writeStyles(indentedTextWriter, designItem, options);
@@ -50,7 +56,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                     this.writeTextNode(indentedTextWriter, designItem, false);
                 }
                 else {
-                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element) || (designItem.element instanceof SVGElement)) {
+                    if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
                         indentedTextWriter.writeNewline();
                         indentedTextWriter.levelRaise();
                     }
@@ -61,7 +67,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                             if (!indentedTextWriter.isLastCharNewline())
                                 this._conditionalyWriteNewline(indentedTextWriter, c);
                     }
-                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element) || (designItem.element instanceof SVGElement)) {
+                    if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
                         indentedTextWriter.levelShrink();
                         if (!indentedTextWriter.isLastCharNewline())
                             indentedTextWriter.writeNewline();
@@ -76,7 +82,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             if (!DomConverter.IsSelfClosingElement(designItem.name))
                 indentedTextWriter.write('</' + designItem.name + '>');
             //if (!contentSingleTextNode)
-            if (!indentedTextWriter.isLastCharNewline())
+            if (!indentedTextWriter.isLastCharNewline() && (!designItem.parent || !isInlineAfter(designItem.parent.element)))
                 this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         if (designItemsAssignmentList) {

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

@@ -4,8 +4,9 @@ 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 {
+import { AbstractPropertiesService } from "../propertiesService/services/AbstractPropertiesService";
+export declare class WebcomponentManifestParserService extends AbstractPropertiesService implements IElementsService, IPropertiesService {
+    listNeedsRefresh(designItem: IDesignItem): boolean;
     private _name;
     get name(): string;
     private _packageData;

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

@@ -1,7 +1,10 @@
 import { BindingTarget } from "../../item/BindingTarget";
 import { PropertyType } from "../propertiesService/PropertyType";
-import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
-export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+import { AbstractPropertiesService } from "../propertiesService/services/AbstractPropertiesService";
+export class WebcomponentManifestParserService extends AbstractPropertiesService {
+    listNeedsRefresh(designItem) {
+        return false;
+    }
     _name;
     get name() { return this._name; }
     _packageData;

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -36,22 +36,22 @@ export class DefaultModelCommandService {
         else if (command.type == CommandType.moveToFront)
             sel.parent.insertChild(sel);
         else if (command.type == CommandType.arrangeTop) {
-            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas);
+            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
         }
         else if (command.type == CommandType.arrangeRight) {
-            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas);
+            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
         }
         else if (command.type == CommandType.arrangeLeft) {
-            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas);
+            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
         }
         else if (command.type == CommandType.arrangeBottom) {
-            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas);
+            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
         }
         else if (command.type == CommandType.arrangeCenter) {
-            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas);
+            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
         }
         else if (command.type == CommandType.arrangeMiddle) {
-            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas);
+            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
         }
         else if (command.type == CommandType.unifyHeight) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');

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

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty';
+import { IDesignItem } from '../../../item/IDesignItem';
+import { AbstractPropertiesService } from "./AbstractPropertiesService";
+export declare abstract class AbstractPolymerLikePropertiesService extends AbstractPropertiesService {
+    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    protected parseProperties(list: any): IProperty[];
+}

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

@@ -0,0 +1,47 @@
+import { PropertiesHelper } from './PropertiesHelper';
+import { AbstractPropertiesService } from "./AbstractPropertiesService";
+import { PropertyType } from '../PropertyType';
+export class AbstractPolymerLikePropertiesService extends AbstractPropertiesService {
+    listNeedsRefresh(designItem) {
+        return false;
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        return this.parseProperties(designItem.element.constructor.properties);
+    }
+    parseProperties(list) {
+        let properties = [];
+        for (const name in list) {
+            const polymerProperty = list[name];
+            let type = polymerProperty;
+            if (polymerProperty.type)
+                type = polymerProperty.type;
+            if (type === String) {
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Object) {
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Number) {
+                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, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Boolean) {
+                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, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+        }
+        return properties;
+    }
+}

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

@@ -0,0 +1,20 @@
+import { IPropertiesService } from "../IPropertiesService";
+import { IProperty } from '../IProperty';
+import { IDesignItem } from '../../../item/IDesignItem';
+import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
+import { IBinding } from "../../../item/IBinding";
+export declare abstract class AbstractPropertiesService implements IPropertiesService {
+    abstract listNeedsRefresh(designItem: IDesignItem): boolean;
+    abstract isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    abstract getProperties(designItem: IDesignItem): IProperty[];
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    clearValue(designItems: IDesignItem[], property: IProperty): 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/AbstractPropertiesService.js

@@ -0,0 +1,162 @@
+import { ValueType } from "../ValueType";
+import { PropertiesHelper } from './PropertiesHelper';
+import { BindingTarget } from "../../../item/BindingTarget";
+import { PropertyType } from "../PropertyType";
+import { NodeType } from "../../../item/NodeType";
+export class AbstractPropertiesService {
+    _notifyChangedProperty(designItem, property, value) {
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    setValue(designItems, property, value) {
+        const cg = designItems[0].openGroup("properties changed");
+        for (let d of designItems) {
+            if (property.propertyType == PropertyType.cssValue) {
+                d.styles.set(property.name, value);
+                d.element.style[property.name] = value;
+            }
+            else {
+                let attributeName = property.attributeName;
+                if (!attributeName)
+                    attributeName = PropertiesHelper.camelToDashCase(property.name);
+                if (property.type === 'object') {
+                    const json = JSON.stringify(value);
+                    d.attributes.set(attributeName, json);
+                    d.element.setAttribute(attributeName, json);
+                }
+                else if (property.type == 'boolean' && !value) {
+                    d.attributes.delete(attributeName);
+                    d.element.removeAttribute(attributeName);
+                }
+                else if (property.type == 'boolean' && value) {
+                    d.attributes.set(attributeName, "");
+                    d.element.setAttribute(attributeName, "");
+                }
+                else {
+                    d.attributes.set(attributeName, value);
+                    d.element.setAttribute(attributeName, value);
+                }
+            }
+            this._notifyChangedProperty(d, property, value);
+        }
+        cg.commit();
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
+    clearValue(designItems, property) {
+        const cg = designItems[0].openGroup("properties cleared");
+        for (let d of designItems) {
+            if (property.propertyType == PropertyType.cssValue) {
+                d.styles.delete(property.name);
+                d.element.style[property.name] = '';
+            }
+            else {
+                let attributeName = property.attributeName;
+                if (!attributeName)
+                    attributeName = PropertiesHelper.camelToDashCase(property.name);
+                d.attributes.delete(attributeName);
+                d.element.removeAttribute(attributeName);
+            }
+            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);
+            designItems.forEach((x) => {
+                let has = false;
+                if (property.propertyType == PropertyType.cssValue)
+                    has = x.styles.has(property.name);
+                else
+                    has = x.attributes.has(attributeName);
+                all = all && has;
+                some = some || has;
+            });
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (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;
+            }
+        }
+        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].styles.get(property.name);
+                for (const x of designItems) {
+                    let value = x.styles.get(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].attributes.has(attributeName);
+                let lastValue = designItems[0].attributes.get(attributeName);
+                /*
+                for (const x of designItems) {
+                  let value = x.attributes.get(attributeName);
+                  if (value != lastValue) {
+                    lastValue = null;
+                    break;
+                  }
+                }
+                */
+                return lastValue;
+            }
+        }
+        return null;
+    }
+    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);
+        }
+    }
+    //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
+    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/BaseCustomWebComponentPropertiesService.d.ts

@@ -1,7 +1,7 @@
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { AbstractBasePropertiesService } from './AbstractBasePropertiesService';
-export declare class BaseCustomWebComponentPropertiesService extends AbstractBasePropertiesService {
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService';
+export declare class BaseCustomWebComponentPropertiesService extends AbstractPolymerLikePropertiesService {
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;

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

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, BaseCustomWebComponentConstructorAppend, BaseCustomWebComponentConstructorAppendLazyReady } from '@node-projects/base-custom-webcomponent';
-import { AbstractBasePropertiesService } from './AbstractBasePropertiesService';
-export class BaseCustomWebComponentPropertiesService extends AbstractBasePropertiesService {
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService';
+export class BaseCustomWebComponentPropertiesService extends AbstractPolymerLikePropertiesService {
     name = "baseCustomWebComponent";
     isHandledElement(designItem) {
         return designItem.element instanceof BaseCustomWebComponentLazyAppend ||

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

@@ -1,21 +1,11 @@
-import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { ValueType } from "../ValueType";
-import { BindingTarget } from "../../../item/BindingTarget";
-import { IBinding } from "../../../item/IBinding";
-export declare class CommonPropertiesService implements IPropertiesService {
+import { AbstractPropertiesService } from "./AbstractPropertiesService";
+export declare class CommonPropertiesService extends AbstractPropertiesService {
     listNeedsRefresh(designItem: IDesignItem): boolean;
     private commonProperties;
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    clearValue(designItems: IDesignItem[], property: IProperty): 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;
 }