@node-projects/web-component-designer 0.0.26 → 0.0.30

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 `
@@ -93,14 +139,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 +192,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/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/GlobalContext.d.ts

@@ -1,9 +1,12 @@
 import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { ITool } from "../widgets/designerView/tools/ITool";
+import { ServiceContainer } from './ServiceContainer';
 export declare class GlobalContext {
+    private _serviceContainer;
     private _tool;
     private _strokeColor;
     private _fillBrush;
+    constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
     get tool(): ITool;
     readonly onToolChanged: TypedEvent<PropertyChangedArgs<ITool>>;

package/dist/elements/services/GlobalContext.js

@@ -2,13 +2,14 @@
 //Service container should not be something with changeing information, so global context is for tool and color (and maybe more)
 import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
 export class GlobalContext {
-    constructor() {
+    constructor(serviceContainer) {
         this._strokeColor = 'black';
         this._fillBrush = 'transparent';
         this.onToolChanged = new TypedEvent();
         this.finishedWithTool = () => this.tool = null;
         this.onStrokeColorChanged = new TypedEvent();
         this.onFillBrushChanged = new TypedEvent();
+        this._serviceContainer = serviceContainer;
     }
     set tool(tool) {
         if (this._tool !== tool) {
@@ -17,6 +18,8 @@ export class GlobalContext {
                 oldTool.dispose();
             this._tool = tool;
             this.onToolChanged.emit(new PropertyChangedArgs(tool, oldTool));
+            if (this._tool)
+                this._tool.activated(this._serviceContainer);
         }
     }
     get tool() {

package/dist/elements/services/ServiceContainer.js

@@ -10,7 +10,7 @@ export class ServiceContainer extends BaseServiceContainer {
             demoViewWidget: DemoView
         };
         this.designerExtensions = new Map();
-        this.globalContext = new GlobalContext();
+        this.globalContext = new GlobalContext(this);
         this.designerTools = new Map();
     }
     get bindingService() {

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.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/SpecialTagsBindingService.d.ts

@@ -0,0 +1,14 @@
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from "../../item/IBinding";
+import { IBindingService } from "./IBindingService";
+export declare class SpecialTagsBindingService implements IBindingService {
+    static type: string;
+    _bindingTagName: string;
+    _elementIdAttribute: string;
+    _propertyNameAttribute: string;
+    _isStyleNameAttribute: string;
+    constructor();
+    getBindings(designItem: IDesignItem): IBinding[];
+    private _parseBindingElement;
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+}

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

@@ -0,0 +1,40 @@
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { BindingMode } from "../../item/BindingMode.js";
+/* Service wich read binings from special HTMl elements -> like tag-binding */
+export class SpecialTagsBindingService {
+    constructor() {
+        this._bindingTagName = "visu-tagbinding";
+        this._elementIdAttribute = "elemnt-id";
+        this._propertyNameAttribute = "property";
+        this._isStyleNameAttribute = "is-style";
+    }
+    getBindings(designItem) {
+        const bindings = [];
+        const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName);
+        for (let b of directBindings) {
+            bindings.push(this._parseBindingElement(b));
+        }
+        if (designItem.id) {
+            const nameBindings = designItem.instanceServiceContainer.contentService.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]");
+            for (let b of nameBindings) {
+                const bnd = this._parseBindingElement(b);
+                bnd.targetId = designItem.id;
+                bindings.push(bnd);
+            }
+        }
+        return null;
+    }
+    _parseBindingElement(b) {
+        let bnd = { targetName: b.getAttribute(this._propertyNameAttribute) };
+        bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property;
+        bnd.invert = b.hasAttribute('negative-logic');
+        bnd.rawValue = b.outerHTML;
+        bnd.type = SpecialTagsBindingService.type;
+        bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay;
+        return bnd;
+    }
+    setBinding(designItem, binding) {
+        return true;
+    }
+}
+SpecialTagsBindingService.type = 'visu-tagbinding-binding';

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

@@ -0,0 +1,7 @@
+"use strict";
+//read vue bindings:
+//v-bind:class
+//v-bind:style
+//v-if
+//v-else
+//v-show