@node-projects/web-component-designer 0.0.28 → 0.0.32

package/debug.log

@@ -0,0 +1,8 @@
+[0823/112712.281:ERROR:registration_protocol_win.cc(103)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0907/074645.949:ERROR:registration_protocol_win.cc(103)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0910/083941.590:ERROR:registration_protocol_win.cc(103)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0919/084817.864:ERROR:registration_protocol_win.cc(103)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0928/190147.234:ERROR:registration_protocol_win.cc(103)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0930/210040.588:ERROR:registration_protocol_win.cc(103)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0107/215230.051:ERROR:registration_protocol_win.cc(102)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)
+[0108/121546.570:ERROR:registration_protocol_win.cc(102)] CreateFile: Das System kann die angegebene Datei nicht finden. (0x2)

package/dist/elements/controls/DesignerTabControl.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 export declare type DesignerTabControlIndexChangedEventArgs = {
     newIndex: number;
     oldIndex?: number;
@@ -9,8 +9,12 @@ export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend
     private _contentObserver;
     private _panels;
     private _headerDiv;
+    private _moreDiv;
+    private _moreContainer;
+    private _elementMap;
     static readonly style: CSSStyleSheet;
     constructor();
+    private _showHideHeaderItems;
     connectedCallback(): void;
     get selectedIndex(): number;
     set selectedIndex(value: number);

package/dist/elements/controls/DesignerTabControl.js

@@ -1,8 +1,9 @@
-import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
 export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         this._selectedIndex = -1;
+        this._elementMap = new WeakMap();
         this.onSelectedTabChanged = new TypedEvent();
         this._contentObserver = new MutationObserver(() => {
             this._createItems();
@@ -13,12 +14,45 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         this._headerDiv = document.createElement("div");
         this._headerDiv.className = 'header';
         outerDiv.appendChild(this._headerDiv);
+        this._moreDiv = document.createElement("div");
+        this._moreDiv.className = "header header-more";
+        this._moreDiv.innerText = "<<";
+        outerDiv.appendChild(this._moreDiv);
+        this._moreContainer = document.createElement("div");
+        this._moreContainer.className = "more-container";
+        this._moreContainer.style.visibility = "hidden";
+        outerDiv.appendChild(this._moreContainer);
+        this._moreDiv.onclick = () => {
+            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
+                this._moreContainer.style.visibility = 'visible';
+            else
+                this._moreContainer.style.visibility = "hidden";
+        };
         this._panels = document.createElement("div");
         this._panels.className = 'panels';
         outerDiv.appendChild(this._panels);
         let _slot = document.createElement("slot");
         _slot.name = 'panels';
         this._panels.appendChild(_slot);
+        const resizeObserver = new ResizeObserver(entries => {
+            this._showHideHeaderItems();
+        });
+        resizeObserver.observe(this._headerDiv);
+    }
+    _showHideHeaderItems() {
+        this._moreContainer.style.visibility = "hidden";
+        let w = 0;
+        DomHelper.removeAllChildnodes(this._moreContainer);
+        DomHelper.removeAllChildnodes(this._headerDiv);
+        for (let item of this.children) {
+            let htmlItem = item;
+            const tabHeaderDiv = this._elementMap.get(htmlItem);
+            this._moreContainer.appendChild(tabHeaderDiv);
+            if (w < this._headerDiv.clientWidth) {
+                this._headerDiv.appendChild(tabHeaderDiv);
+                w += tabHeaderDiv.clientWidth;
+            }
+        }
     }
     connectedCallback() {
         this._createItems();
@@ -35,7 +69,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     set selectedIndex(value) {
         let old = this._selectedIndex;
         this._selectedIndex = value;
-        if (this._headerDiv.children.length)
+        if (this.children.length)
             this._selectedIndexChanged(old);
     }
     disconnectedCallback() {
@@ -55,10 +89,13 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
                 this._selectedIndex = j;
                 if (this._headerDiv.children.length)
                     this._selectedIndexChanged(old, true);
+                this._moreContainer.style.visibility = 'hidden';
             };
+            this._elementMap.set(htmlItem, tabHeaderDiv);
             this._headerDiv.appendChild(tabHeaderDiv);
             i++;
         }
+        this._showHideHeaderItems();
         this._selectedIndexChanged();
     }
     _selectedIndexChanged(oldIndex, viaClick = false) {
@@ -66,16 +103,25 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             const element = this.children[index];
             if (index == this._selectedIndex) {
                 element.slot = "panels";
-                this._headerDiv.children[index].classList.add('selected');
-                if (element.activated)
-                    element.activated();
+                const el = this.children[index];
+                const headerEl = this._elementMap.get(el);
+                if (headerEl) {
+                    headerEl.classList.add('selected');
+                    if (element.activated)
+                        element.activated();
+                }
             }
             else {
                 element.removeAttribute("slot");
-                this._headerDiv.children[index].classList.remove('selected');
+                const el = this.children[index];
+                const headerEl = this._elementMap.get(el);
+                if (headerEl) {
+                    headerEl.classList.remove('selected');
+                }
             }
         }
         this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
+        this._moreContainer.style.visibility = 'hidden';
     }
 }
 DesignerTabControl.style = css `
@@ -86,6 +132,7 @@ DesignerTabControl.style = css `
             display: flex; 
             flex-direction: column; 
             height: 100%;
+            position: relative;
         }
         .header {
             display: inline-flex; 
@@ -93,14 +140,46 @@ DesignerTabControl.style = css `
             flex-direction: row; 
             cursor: pointer; 
             height: 30px;
+            width: calc(100% - 30px);
             background-color: var(--dark-grey, #232733);
             overflow-x: auto;
             scrollbar-width: none;  /* Firefox */
         }
+        .header-more {
+            right: 0;
+            top: 0;
+            width: 30px;
+            position: absolute;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: cursive;
+        }
+        .header-more:hover {
+            background: var(--light-grey, #383f52);
+        }
+        .more-container {
+            z-index: 1;
+            user-select: none; 
+            background-color: var(--dark-grey, #232733);
+            right: 0;
+            top: 30px;
+            position: absolute;
+            color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            cursor: pointer;
+        }
+        .more-container .tab-header { 
+            width: 100%;
+        }
         .header::-webkit-scrollbar { 
             display: none;  /* Safari and Chrome */
         }
         .tab-header {
+            height: 30px;
             font-family: Arial;
             display: flex;
             justify-content: center;
@@ -114,17 +193,16 @@ DesignerTabControl.style = css `
             font-weight: 500;
             line-height: 1.5;
             letter-spacing: 1px;
-            
         }
         .tab-header:hover {
             background: var(--light-grey, #383f52);
         }
         .selected {
-            pointer-events: none;
             background: var(--medium-grey, #2f3545);
             box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
         }
         .panels {
+            z-index: 0;
             background: var(--medium-grey, #2f3545);
             height: calc(100% - 30px);
         }

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

@@ -1,7 +1,6 @@
-import { IBinding } from "../services/bindingsService/IBinding";
 export declare class CssCombiner {
     private static _helperElement;
-    static combine(styles: Map<string, string | IBinding>, globalStyles?: Map<string, string>): Map<string, string | IBinding>;
+    static combine(styles: Map<string, string>, globalStyles?: Map<string, string>): Map<string, string>;
     private static combineBorder;
     private static combineMargin;
     private static combinePadding;

package/dist/elements/helper/CssPropertiesList.js

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

package/dist/elements/item/Binding.d.ts

@@ -0,0 +1,14 @@
+import { BindingMode } from "./BindingMode";
+import { BindingTarget } from "./BindingTarget";
+export interface IBinding {
+    bindableObjectNames?: string[];
+    expression?: string;
+    mode?: BindingMode;
+    target?: BindingTarget;
+    invert?: boolean;
+    converter?: string;
+    changedEvent?: string;
+    nullSafe?: boolean;
+    rawName?: string;
+    rawValue?: string;
+}

package/dist/elements/item/Binding.js

@@ -0,0 +1,4 @@
+export class Binding {
+}
+export class ExtendedBinding extends Binding {
+}

package/dist/elements/item/BindingMode.d.ts

@@ -0,0 +1,4 @@
+export declare enum BindingMode {
+    oneWay = "oneWay",
+    twoWay = "twoWay"
+}

package/dist/elements/item/BindingMode.js

@@ -0,0 +1,5 @@
+export var BindingMode;
+(function (BindingMode) {
+    BindingMode["oneWay"] = "oneWay";
+    BindingMode["twoWay"] = "twoWay";
+})(BindingMode || (BindingMode = {}));

package/dist/elements/item/BindingTarget.d.ts

@@ -0,0 +1,8 @@
+export declare enum BindingTarget {
+    property = "property",
+    attribute = "attribute",
+    class = "class",
+    css = "css",
+    event = "event",
+    content = "content"
+}

package/dist/elements/item/BindingTarget.js

@@ -0,0 +1,9 @@
+export var BindingTarget;
+(function (BindingTarget) {
+    BindingTarget["property"] = "property";
+    BindingTarget["attribute"] = "attribute";
+    BindingTarget["class"] = "class";
+    BindingTarget["css"] = "css";
+    BindingTarget["event"] = "event";
+    BindingTarget["content"] = "content"; //innertext or html... mhmmm
+})(BindingTarget || (BindingTarget = {}));

package/dist/elements/item/DesignItem.d.ts

@@ -5,7 +5,6 @@ import { ChangeGroup } from '../services/undoService/ChangeGroup';
 import { NodeType } from './NodeType';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension';
-import { IBinding } from '../services/bindingsService/IBinding.js';
 export declare class DesignItem implements IDesignItem {
     node: Node;
     serviceContainer: ServiceContainer;
@@ -14,9 +13,9 @@ export declare class DesignItem implements IDesignItem {
     replaceNode(newNode: Node): void;
     get nodeType(): NodeType;
     get hasAttributes(): boolean;
-    attributes: Map<string, string | IBinding>;
+    attributes: Map<string, string>;
     get hasStyles(): boolean;
-    styles: Map<string, string | IBinding>;
+    styles: Map<string, string>;
     private static _designItemMap;
     get element(): Element;
     get name(): string;
@@ -51,10 +50,8 @@ export declare class DesignItem implements IDesignItem {
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;
-    setStyle(name: keyof CSSStyleDeclaration, value?: string | IBinding | null): void;
+    setStyle(name: keyof CSSStyleDeclaration, value?: string | null): void;
     removeStyle(name: keyof CSSStyleDeclaration): void;
-    setAttribute(name: string, value?: string | IBinding | null): void;
+    setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
-    setProperty(name: string, value?: string | null): void;
-    removeProperty(name: string, value?: string | null): void;
 }

package/dist/elements/item/DesignItem.js

@@ -1,7 +1,6 @@
 import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
-import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
@@ -236,19 +235,5 @@ export class DesignItem {
         const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
-    setProperty(name, value) {
-        const propService = this.serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this));
-        const property = propService.getProperty(this, name);
-        const oldValue = propService.getValue([this], property);
-        const action = new PropertyChangeAction(this, property, value, oldValue);
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    removeProperty(name, value) {
-        const propService = this.serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this));
-        const property = propService.getProperty(this, name);
-        const oldValue = propService.getValue([this], property);
-        const action = new PropertyChangeAction(this, property, undefined, oldValue);
-        this.instanceServiceContainer.undoService.execute(action);
-    }
 }
 DesignItem._designItemMap = new WeakMap();

package/dist/elements/item/IBinding copy.d.ts

@@ -0,0 +1,14 @@
+import { BindingMode } from "./BindingMode";
+import { BindingTarget } from "./BindingTarget";
+export interface IBinding {
+    bindableObjectNames?: string[];
+    expression?: string;
+    mode?: BindingMode;
+    target?: BindingTarget;
+    invert?: boolean;
+    converter?: string;
+    changedEvent?: string;
+    nullSafe?: boolean;
+    rawName?: string;
+    rawValue?: string;
+}

package/dist/elements/item/IBinding copy.js

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

package/dist/elements/item/IBinding.d.ts

@@ -0,0 +1,15 @@
+import { BindingMode } from "./BindingMode";
+import { BindingTarget } from "./BindingTarget";
+export interface IBinding {
+    targetName?: string;
+    target?: BindingTarget;
+    rawName?: string;
+    rawValue?: string;
+    type?: string;
+    expression?: string;
+    bindableObjectNames?: string[];
+    mode?: BindingMode;
+    invert?: boolean;
+    changedEvent?: string;
+    nullSafe?: boolean;
+}

package/dist/elements/item/IBinding.js

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

package/dist/elements/item/IDesignItem.d.ts

@@ -4,16 +4,15 @@ import { ChangeGroup } from "../services/undoService/ChangeGroup";
 import { NodeType } from './NodeType';
 import { ExtensionType } from "../widgets/designerView/extensions/ExtensionType";
 import { IDesignerExtension } from "../widgets/designerView/extensions/IDesignerExtension";
-import { IBinding } from "../services/bindingsService/IBinding";
 export interface IDesignItem {
     replaceNode(newNode: Node): any;
     readonly nodeType: NodeType;
     readonly name: string;
     readonly id: string;
     readonly hasAttributes: boolean;
-    readonly attributes: Map<string, string | IBinding>;
+    readonly attributes: Map<string, string>;
     readonly hasStyles: boolean;
-    readonly styles: Map<string, string | IBinding>;
+    readonly styles: Map<string, string>;
     readonly hasChildren: boolean;
     children(): IterableIterator<IDesignItem>;
     readonly childCount: number;
@@ -33,9 +32,9 @@ export interface IDesignItem {
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
-    setStyle(name: keyof CSSStyleDeclaration, value?: string | IBinding | null): any;
+    setStyle(name: keyof CSSStyleDeclaration, value?: string | null): any;
     removeStyle(name: keyof CSSStyleDeclaration): any;
-    setAttribute(name: string, value?: string | IBinding | null): any;
+    setAttribute(name: string, value?: string | null): any;
     removeAttribute(name: string): any;
     hideAtDesignTime: boolean;
     hideAtRunTime: boolean;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -35,7 +35,6 @@ import { TextTool } from '../widgets/designerView/tools/TextTool.js';
 import { GrayOutExtensionProvider } from '../widgets/designerView/extensions/GrayOutExtensionProvider.js';
 import { AltToEnterContainerExtensionProvider } from '../widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js';
 import { InvisibleDivExtensionProvider } from '../widgets/designerView/extensions/InvisibleDivExtensionProvider.js';
-//import { PolymerBindingsService } from './bindingsService/PolymerBindingsService.js';
 import { ItemsBelowContextMenu } from '../widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js';
 import { GridPlacementService } from './placementService/GridPlacementService.js';
 import { ElementAtPointService } from './elementAtPointService/ElementAtPointService';
@@ -44,7 +43,6 @@ import { SnaplinesProviderService } from './placementService/SnaplinesProviderSe
 import { PrepareElementsForDesignerService } from './instanceService/PrepareElementsForDesignerService';
 import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
-import { BaseCustomeWebcomponentBindingsService } from './bindingsService/BaseCustomeWebcomponentBindingsService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -60,7 +58,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("containerService", new FlexBoxPlacementService());
     serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
-    serviceContainer.register("bindingService", new BaseCustomeWebcomponentBindingsService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
     serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
     serviceContainer.register("dragDropService", new DragDropService());

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

@@ -0,0 +1,8 @@
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from '../../item/IBinding';
+import { IBindingService } from "./IBindingService";
+export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
+    static type: string;
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+}

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

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

package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService copy.d.ts

@@ -0,0 +1,9 @@
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from "./IBinding";
+import { IBindingService } from "./IBindingService";
+export declare class PolymerBindingsService implements IBindingService {
+    writeBindingMode: 'direct';
+    parseBindings(designItem: IDesignItem): void;
+    writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean;
+}

package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService copy.js

@@ -0,0 +1,31 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter";
+import { BindingMode } from './BindingMode';
+export class PolymerBindingsService {
+    constructor() {
+        this.writeBindingMode = 'direct';
+    }
+    parseBindings(designItem) {
+        for (let a of designItem.attributes.entries()) {
+            if (typeof a[1] == 'string' && (a[1].startsWith("[[") || a[1].startsWith("{{"))) {
+                let bnd = {};
+                if (a[1].startsWith("[["))
+                    bnd.mode = BindingMode.oneWay;
+                else
+                    bnd.mode = BindingMode.twoWay;
+                bnd.invert = a[1][3] == '!';
+                bnd.expression = a[1];
+                let nm = a[0];
+                if (nm.endsWith('$')) {
+                    bnd.escapeAttribute = true;
+                    nm = nm.slice(0, -1);
+                    designItem.attributes.delete(a[0]);
+                }
+                designItem.attributes.set(nm, bnd);
+            }
+        }
+    }
+    writeBinding(indentedTextWriter, designItem, type, keyValuePair) {
+        indentedTextWriter.write(keyValuePair[0] + '="' + (keyValuePair[1].mode == BindingMode.oneWay ? '[[' : '{{') + DomConverter.normalizeAttributeValue(keyValuePair[1].expression) + (keyValuePair[1].mode == BindingMode.oneWay ? ']]' : ']]') + '"');
+        return true;
+    }
+}

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

@@ -1,6 +1,6 @@
 import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
 import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "./IBinding";
+import { IBinding } from "../../item/IBinding";
 import { IBindingService } from "./IBindingService";
 export declare class BaseCustomeWebcomponentBindingsService implements IBindingService {
     writeBindingMode: 'direct';

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

@@ -1,5 +1,5 @@
 import { DomConverter } from "../../widgets/designerView/DomConverter";
-import { BindingMode } from './BindingMode';
+import { BindingMode } from '../../item/BindingMode';
 import { BindingTarget } from './BindingTarget';
 export class BaseCustomeWebcomponentBindingsService {
     constructor() {

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

@@ -1,14 +1,11 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
 import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "./IBinding";
+import { IBinding } from "../../item/IBinding";
 /**
  * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
  * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
  * htmlParserService
  */
 export interface IBindingService {
-    writeBindingMode: 'none' | 'direct' | 'afterElement';
-    parseBindingAttribute(attributeName: string, value: string): IBinding;
-    parseBindingCss(attributeName: string, value: string): IBinding;
-    writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean;
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
 }

package/dist/elements/services/bindingsService/PolymerBindingsService copy.d.ts

@@ -0,0 +1,9 @@
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from "./IBinding";
+import { IBindingService } from "./IBindingService";
+export declare class PolymerBindingsService implements IBindingService {
+    writeBindingMode: 'direct';
+    parseBindings(designItem: IDesignItem): void;
+    writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean;
+}

package/dist/elements/services/bindingsService/PolymerBindingsService copy.js

@@ -0,0 +1,31 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter";
+import { BindingMode } from './BindingMode';
+export class PolymerBindingsService {
+    constructor() {
+        this.writeBindingMode = 'direct';
+    }
+    parseBindings(designItem) {
+        for (let a of designItem.attributes.entries()) {
+            if (typeof a[1] == 'string' && (a[1].startsWith("[[") || a[1].startsWith("{{"))) {
+                let bnd = {};
+                if (a[1].startsWith("[["))
+                    bnd.mode = BindingMode.oneWay;
+                else
+                    bnd.mode = BindingMode.twoWay;
+                bnd.invert = a[1][3] == '!';
+                bnd.expression = a[1];
+                let nm = a[0];
+                if (nm.endsWith('$')) {
+                    bnd.escapeAttribute = true;
+                    nm = nm.slice(0, -1);
+                    designItem.attributes.delete(a[0]);
+                }
+                designItem.attributes.set(nm, bnd);
+            }
+        }
+    }
+    writeBinding(indentedTextWriter, designItem, type, keyValuePair) {
+        indentedTextWriter.write(keyValuePair[0] + '="' + (keyValuePair[1].mode == BindingMode.oneWay ? '[[' : '{{') + DomConverter.normalizeAttributeValue(keyValuePair[1].expression) + (keyValuePair[1].mode == BindingMode.oneWay ? ']]' : ']]') + '"');
+        return true;
+    }
+}