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

package/dist/elements/helper/CssCombiner.js

@@ -1,6 +1,7 @@
 export class CssCombiner {
     static _helperElement = document.createElement('div');
     //todo: inset, flex flow, place content...
+    //flex => flex-grow, flex-shrink, flex-basis
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
         e.setAttribute('style', '');

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

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

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

@@ -66,4 +66,7 @@ export class BaseCustomWebcomponentBindingsService {
         designItem.setAttribute(nm, value);
         return true;
     }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
 }

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

@@ -1,5 +1,6 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from "../../item/IBinding";
+import { BindingTarget } from "../../item/BindingTarget";
 /**
  * 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
@@ -8,4 +9,5 @@ import { IBinding } from "../../item/IBinding";
 export interface IBindingService {
     getBindings(designItem: IDesignItem): IBinding[];
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

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

@@ -1,6 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from "../../item/IBinding";
 import { IBindingService } from "./IBindingService";
+import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class SpecialTagsBindingService implements IBindingService {
     static type: string;
     _bindingTagName: string;
@@ -11,4 +12,5 @@ export declare class SpecialTagsBindingService implements IBindingService {
     getBindings(designItem: IDesignItem): IBinding[];
     private _parseBindingElement;
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

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

@@ -37,4 +37,7 @@ export class SpecialTagsBindingService {
     setBinding(designItem, binding) {
         return true;
     }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
 }

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

@@ -2,11 +2,13 @@ import { IProperty } from './IProperty';
 import { IService } from '../IService';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ValueType } from './ValueType';
+import { BindingTarget } from '../../item/BindingTarget';
 export interface IPropertiesService extends IService {
     readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[];
     getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     setValue(designItems: IDesignItem[], property: IProperty, value: any): any;
     clearValue(designItems: IDesignItem[], property: IProperty): any;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;

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

@@ -2,12 +2,14 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class AttributesPropertiesService implements IPropertiesService {
     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;

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

@@ -1,4 +1,5 @@
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export class AttributesPropertiesService {
     name = "attributes";
     isHandledElement(designItem) {
@@ -19,6 +20,9 @@ export class AttributesPropertiesService {
     }
     setValue(designItems, property, value) {
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.attribute;
+    }
     clearValue(designItems, property) {
     }
     isSet(designItems, property) {

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

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class CommonPropertiesService implements IPropertiesService {
     private commonProperties;
     name: string;
@@ -9,6 +10,7 @@ export declare class CommonPropertiesService implements IPropertiesService {
     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;

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

@@ -47,10 +47,16 @@ export class CommonPropertiesService {
             }
         }
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
     clearValue(designItems, property) {
         for (let d of designItems) {
             d.attributes.delete(property.name);
             d.element.removeAttribute(property.name);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
         }
     }
     isSet(designItems, property) {

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

@@ -2,6 +2,7 @@ import { IPropertiesService } from '../IPropertiesService';
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from '../ValueType';
+import { BindingTarget } from '../../../item/BindingTarget.js';
 export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
@@ -13,6 +14,7 @@ export declare class CssPropertiesService implements IPropertiesService {
     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;

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

@@ -226,10 +226,16 @@ export class CssPropertiesService {
         }
         cg.commit();
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
     clearValue(designItems, property) {
         for (let d of designItems) {
             d.styles.delete(property.name);
             d.element.style[property.name] = '';
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
         }
     }
     isSet(designItems, property) {

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

@@ -22,6 +22,6 @@ export class PropertiesHelper {
         return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
     }
     static dashToCamelCase(text) {
-        return text.replace(/-([a-z])/i, (i) => i[1].toUpperCase());
+        return text.replace(/-([a-z])/g, (i) => i[1].toUpperCase());
     }
 }

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

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class UnkownElementPropertiesService implements IPropertiesService {
     readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
@@ -9,6 +10,7 @@ export declare class UnkownElementPropertiesService implements IPropertiesServic
     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;

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

@@ -1,5 +1,6 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
+import { BindingTarget } from "../../../item/BindingTarget";
 export class UnkownElementPropertiesService {
     name = "unkown";
     isHandledElement(designItem) {
@@ -44,11 +45,17 @@ export class UnkownElementPropertiesService {
             cg.undo();
         }
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
     clearValue(designItems, property) {
         const attributeName = PropertiesHelper.camelToDashCase(property.name);
         for (let d of designItems) {
             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);
         }
     }

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export * from "./elements/services/propertiesService/DefaultEditorTypesService.j
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
+export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";

package/dist/index.js

@@ -32,6 +32,7 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
+export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";

package/package.json

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

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.d.ts

@@ -1,7 +0,0 @@
-import { IDesignerCanvas } from "./IDesignerCanvas.js";
-import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
-import { DesignerView } from './designerView';
-export declare class DesignerViewUseOverlayScollbars implements IDesignViewConfigButtonsProvider {
-    constructor();
-    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
-}

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.js

@@ -1,13 +0,0 @@
-//todo, element moving does not work atm, needs to be fixed
-export class DesignerViewUseOverlayScollbars {
-    constructor() {
-    }
-    provideButtons(designerView, designerCanvas) {
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
-        designerCanvas.shadowRoot.appendChild(externalCss);
-        //@ts-ignore
-        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
-        return [];
-    }
-}