@node-projects/web-component-designer 0.1.144 → 0.1.146

package/dist/elements/documentContainer.d.ts

@@ -42,6 +42,8 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer, content?: string);
     refreshInSplitView(): Promise<void>;
+    get currentView(): 'designer' | 'split' | 'code' | 'preview';
+    set currentView(view: 'designer' | 'split' | 'code' | 'preview');
     designerSelectionChanged(e: ISelectionChangedEvent): void;
     designerContentChanged(): void;
     dispose(): void;

package/dist/elements/documentContainer.js

@@ -85,6 +85,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this._designerDiv.title = 'Designer';
         this._designerDiv.appendChild(this.designerView);
         this.designerView.initialize(this._serviceContainer);
+        this.designerView.instanceServiceContainer.documentContainer = this;
         this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
         this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
@@ -125,6 +126,27 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         }
         this._disableChangeNotificationEditor = false;
     }
+    get currentView() {
+        if (this._tabControl.selectedIndex == tabIndex.designer)
+            return 'designer';
+        if (this._tabControl.selectedIndex == tabIndex.split)
+            return 'split';
+        if (this._tabControl.selectedIndex == tabIndex.code)
+            return 'code';
+        if (this._tabControl.selectedIndex == tabIndex.preview)
+            return 'preview';
+        return null;
+    }
+    set currentView(view) {
+        if (view == 'designer')
+            this._tabControl.selectedIndex = tabIndex.designer;
+        if (view == 'split')
+            this._tabControl.selectedIndex = tabIndex.split;
+        if (view == 'code')
+            this._tabControl.selectedIndex = tabIndex.code;
+        if (view == 'preview')
+            this._tabControl.selectedIndex = tabIndex.preview;
+    }
     designerSelectionChanged(e) {
         if (this._tabControl.selectedIndex === tabIndex.split) {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;

package/dist/elements/services/InstanceServiceContainer.d.ts

@@ -6,6 +6,7 @@ import { IDesignContext } from '../widgets/designerView/IDesignContext.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
 import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
+import { DocumentContainer } from '../documentContainer.js';
 interface InstanceServiceNameMap {
     "undoService": IUndoService;
     "selectionService": ISelectionService;
@@ -17,6 +18,7 @@ export declare class InstanceServiceContainer extends BaseServiceContainer<Insta
     designContext: IDesignContext;
     readonly designerCanvas: IDesignerCanvas;
     designer: any;
+    documentContainer: DocumentContainer;
     constructor(designerCanvas: IDesignerCanvas);
     get undoService(): IUndoService;
     get selectionService(): ISelectionService;

package/dist/elements/services/InstanceServiceContainer.js

@@ -4,6 +4,7 @@ export class InstanceServiceContainer extends BaseServiceContainer {
     designContext = new DesignContext();
     designerCanvas;
     designer; //usable to assign designer from outside
+    documentContainer; //usable to assign designer from outside
     constructor(designerCanvas) {
         super();
         this.designerCanvas = designerCanvas;

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

@@ -5,6 +5,7 @@ import { ValueType } from './ValueType.js';
 import { BindingTarget } from '../../item/BindingTarget.js';
 import { IBinding } from '../../item/IBinding.js';
 import { IPropertyGroup } from './IPropertyGroup.js';
+import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js';
 export declare enum RefreshMode {
     none = 0,
     full = 1,
@@ -22,4 +23,5 @@ export interface IPropertiesService extends IService {
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): any;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+    getContextMenu(designItems: IDesignItem[], property: IProperty): IContextMenuItem[];
 }

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

@@ -0,0 +1,7 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export declare abstract class AbstractCssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    constructor();
+}

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

@@ -0,0 +1,10 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class AbstractCssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    constructor() {
+        super(false);
+    }
+}

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

@@ -5,6 +5,7 @@ import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IBinding } from '../../../item/IBinding.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
+import { IContextMenuItem } from '../../../helper/contextMenu/IContextMenuItem.js';
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
     constructor(recreateElementsOnPropertyChange?: boolean);
     protected _recreateElementsOnPropertyChange: boolean;
@@ -26,4 +27,5 @@ export declare abstract class AbstractPropertiesService implements IPropertiesSe
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
     protected static recreateElements(service: IPropertiesService, designItems: IDesignItem[]): void;
+    getContextMenu(designItems: IDesignItem[], property: IProperty): IContextMenuItem[];
 }

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

@@ -271,4 +271,47 @@ export class AbstractPropertiesService {
             d.replaceNode(element);
         }
     }
+    getContextMenu(designItems, property) {
+        const ctxMenuItems = [
+            {
+                title: 'clear', action: (e) => {
+                    property.service.clearValue(designItems, property, 'value');
+                    designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                }
+            },
+            {
+                title: 'edit as text', action: (e, _1, _2, menu) => {
+                    menu.close();
+                    setTimeout(() => {
+                        const oldValue = property.service.getValue(designItems, property);
+                        let value = prompt(`edit value of '${property.name}' as string:`, oldValue);
+                        if (value && value != oldValue) {
+                            property.service.setValue(designItems, property, value);
+                        }
+                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                    }, 10);
+                }
+            },
+        ];
+        if (designItems[0].serviceContainer.config.openBindingsEditor) {
+            ctxMenuItems.push(...[
+                { title: '-' },
+                {
+                    title: 'edit binding', action: () => {
+                        let target = property.service.getPropertyTarget(designItems[0], property);
+                        let binding = property.service.getBinding(designItems, property);
+                        designItems[0].serviceContainer.config.openBindingsEditor(property, designItems, binding, target);
+                    }
+                },
+                {
+                    title: 'clear binding', action: () => {
+                        property.service.clearValue(designItems, property, 'binding');
+                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                    }
+                }
+            ]);
+        }
+        ;
+        return ctxMenuItems;
+    }
 }

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

@@ -1,11 +1,12 @@
-import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
 import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { ValueType } from '../ValueType.js';
 import { IBinding } from "../../../item/IBinding.js";
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class AttributesPropertiesService implements IPropertiesService {
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+export declare class AttributesPropertiesService extends AbstractPropertiesService {
     name: string;
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     isHandledElement(designItem: IDesignItem): boolean;

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

@@ -4,7 +4,7 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
 import { AbstractPropertiesService } from './AbstractPropertiesService.js';
-export class AttributesPropertiesService {
+export class AttributesPropertiesService extends AbstractPropertiesService {
     name = "attributes";
     getRefreshMode(designItem) {
         return RefreshMode.fullOnValueChange;

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

@@ -3,10 +3,10 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
-export declare class CssCurrentPropertiesService extends CommonPropertiesService {
+import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
+export declare class CssCurrentPropertiesService extends AbstractCssPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     constructor();
     isHandledElement(designItem: IDesignItem): boolean;

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

@@ -1,17 +1,17 @@
 import { PropertyType } from '../PropertyType.js';
 import { RefreshMode } from '../IPropertiesService.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { NodeType } from '../../../item/NodeType.js';
 import cssProperties from "./CssProperties.json" with { type: 'json' };
 import { BindingTarget } from '../../../item/BindingTarget.js';
+import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
 const localName = '<local>';
-export class CssCurrentPropertiesService extends CommonPropertiesService {
+export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.fullOnValueChange;
     }
     constructor() {
-        super(false);
+        super();
         this.name = 'styles';
     }
     isHandledElement(designItem) {
@@ -87,7 +87,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
             if (designItems[0].hasStyle(property.name))
                 return ValueType.none;
             //TODO: we need to check if this is the dec. with the highest specifity
-            return ValueType.all;
+            return ValueType.fromStylesheet;
         }
         return super.isSet(designItems, property);
     }

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

@@ -2,10 +2,10 @@ import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
-export declare class CssCustomPropertiesService extends CommonPropertiesService {
+import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
+export declare class CssCustomPropertiesService extends AbstractCssPropertiesService {
     removeInheritedCustomProperties: boolean;
     constructor(removeInheritedCustomProperties?: boolean);
     getRefreshMode(designItem: IDesignItem): RefreshMode;

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

@@ -1,12 +1,12 @@
 import { PropertyType } from '../PropertyType.js';
 import { RefreshMode } from '../IPropertiesService.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
-export class CssCustomPropertiesService extends CommonPropertiesService {
+import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
+export class CssCustomPropertiesService extends AbstractCssPropertiesService {
     removeInheritedCustomProperties;
     constructor(removeInheritedCustomProperties = true) {
-        super(false);
+        super();
         this.name = 'customProperties';
         this.removeInheritedCustomProperties = removeInheritedCustomProperties;
     }

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

@@ -0,0 +1,25 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    layout: {
+        common: string[];
+        font: string[];
+        layout: string[];
+    };
+    grid: string[];
+    gridChild: string[];
+    flex: string[];
+    flexChild: string[];
+    svg: string[];
+    constructor(name: 'layout' | 'grid' | 'gridChild' | 'flex' | 'flexChild' | 'svg');
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    _getPropertyDef(name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

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

@@ -0,0 +1,126 @@
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js';
+import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js';
+import cssProperties from "./CssProperties.json" with { type: 'json' };
+export class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    //metrics
+    layout = {
+        "common": [
+            "display",
+            "color",
+            "background-color",
+            "box-sizing",
+            "border",
+            "box-shadow",
+            "opacity",
+            "position",
+        ],
+        "font": [
+            "font-family",
+            "font-size",
+            "font-weight",
+        ],
+        "layout": [
+            "inset",
+            "margin",
+            "border",
+            "padding",
+            "overflow",
+            "metrics"
+        ]
+    };
+    grid = [
+        "display",
+        "position",
+        "grid-template-columns",
+        "grid-template-rows",
+        "column-gap",
+        "row-gap",
+        "align-content",
+        "justify-content",
+        "align-items",
+        "justify-items",
+    ];
+    gridChild = [
+        "grid-row",
+        "grid-column",
+        "assigned-row-column",
+        "align-self",
+        "justify-self"
+    ];
+    flex = [
+        "display",
+        "position",
+        "flex-direction",
+        "flex-wrap",
+        "align-content",
+        "justify-content",
+        "align-items"
+    ];
+    flexChild = [
+        "align-self",
+        "justify-self"
+    ];
+    svg = [
+        "fill",
+        "fill-rule",
+        "fill-opacity",
+        "stroke",
+        "stroke-width",
+        "stroke-dasharray",
+        "stroke-dashoffset",
+        "stroke-opacity"
+    ];
+    constructor(name) {
+        super(false);
+        this.name = name;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return this._getPropertyDef(name);
+    }
+    getProperties(designItem) {
+        const propNames = this[this.name];
+        if (Array.isArray(propNames)) {
+            const propertiesList = propNames.map(x => this._getPropertyDef(x));
+            return propertiesList;
+        }
+        else {
+            let grps = [];
+            for (let g in propNames) {
+                let grp = { name: g, properties: propNames[g].map(x => this._getPropertyDef(x)) };
+                grps.push(grp);
+            }
+            return grps;
+        }
+    }
+    _getPropertyDef(name) {
+        const camelName = PropertiesHelper.dashToCamelCase(name);
+        switch (camelName) {
+            case 'assignedRowColumn':
+                return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new GridAssignedRowColumnPropertyEditor(p) };
+            case 'metrics':
+                return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new MetricsPropertyEditor(p) };
+            default:
+                return {
+                    name,
+                    type: cssProperties[camelName]?.type ?? 'string',
+                    values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                    service: this,
+                    propertyType: PropertyType.cssValue
+                };
+        }
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
+}

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

@@ -1,10 +1,10 @@
 import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class CssPropertiesService extends CommonPropertiesService {
+import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
+export declare class CssPropertiesService extends AbstractCssPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     layout: {
         common: string[];

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

@@ -1,12 +1,12 @@
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
 import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js';
 import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js';
 import cssProperties from "./CssProperties.json" with { type: 'json' };
-export class CssPropertiesService extends CommonPropertiesService {
+import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
+export class CssPropertiesService extends AbstractCssPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.none;
     }
@@ -79,7 +79,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         "stroke-opacity"
     ];
     constructor(name) {
-        super(false);
+        super();
         this.name = name;
     }
     isHandledElement(designItem) {

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -3,6 +3,8 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js';
+import { IProperty } from '../../services/propertiesService/IProperty.js';
+import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js';
 export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _serviceContainer;
     private _designerTabControl;
@@ -15,11 +17,14 @@ export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _selectionChangedHandler;
     propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean;
     propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void;
+    propertyContextMenuProvider: (designItems: IDesignItem[], property: IProperty) => IContextMenuItem[];
     static readonly style: CSSStyleSheet;
     static readonly properties: {
         serviceContainer: ObjectConstructor;
         instanceServiceContainer: ObjectConstructor;
         selectedItems: ArrayConstructor;
+        propertyGroupHover: FunctionConstructor;
+        propertyGroupClick: FunctionConstructor;
     };
     constructor();
     set serviceContainer(value: ServiceContainer);

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -14,6 +14,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _selectionChangedHandler;
     propertyGroupHover;
     propertyGroupClick;
+    propertyContextMenuProvider;
     static style = css `
     :host {
       display: block;
@@ -31,7 +32,9 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     static properties = {
         serviceContainer: Object,
         instanceServiceContainer: Object,
-        selectedItems: Array
+        selectedItems: Array,
+        propertyGroupHover: Function,
+        propertyGroupClick: Function
     };
     constructor() {
         super();
@@ -75,6 +78,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                     lst.title = p.name;
                     lst.propertyGroupHover = this.propertyGroupHover;
                     lst.propertyGroupClick = this.propertyGroupClick;
+                    lst.propertyContextMenuProvider = this.propertyContextMenuProvider;
                     this._designerTabControl.appendChild(lst);
                     this._propertyGridPropertyLists.push(lst);
                     this._propertyGridPropertyListsDict[p.name] = lst;

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.d.ts

@@ -5,6 +5,7 @@ import { IPropertyEditor } from '../../services/propertiesService/IPropertyEdito
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
 import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js';
+import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js';
 export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     private _div;
     private _propertyMap;
@@ -13,6 +14,7 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     private _designItems;
     propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean;
     propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void;
+    propertyContextMenuProvider: (designItems: IDesignItem[], property: IProperty) => IContextMenuItem[];
     get propertiesService(): IPropertiesService;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer);
@@ -24,7 +26,6 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     private _onDragOver;
     private _onDrop;
     openContextMenu(event: MouseEvent, property: IProperty): void;
-    static openContextMenu(event: MouseEvent, designItems: IDesignItem[], property: IProperty): void;
     designItemsChanged(designItems: IDesignItem[]): void;
     refreshForDesignItems(items: IDesignItem[]): void;
     static refreshIsSetElementAndEditorForDesignItems(isSetElement: HTMLElement, property: IProperty, items: IDesignItem[], propertiesService: IPropertiesService, editor?: IPropertyEditor): void;

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -12,6 +12,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _designItems;
     propertyGroupHover;
     propertyGroupClick;
+    propertyContextMenuProvider;
     get propertiesService() {
         return this._propertiesService;
     }
@@ -312,49 +313,11 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     openContextMenu(event, property) {
-        PropertyGridPropertyList.openContextMenu(event, this._designItems, property);
-    }
-    static openContextMenu(event, designItems, property) {
-        const ctxMenuItems = [
-            {
-                title: 'clear', action: (e) => {
-                    property.service.clearValue(designItems, property, 'value');
-                    designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
-                }
-            },
-            {
-                title: 'edit as text', action: (e, _1, _2, menu) => {
-                    menu.close();
-                    setTimeout(() => {
-                        const oldValue = property.service.getValue(designItems, property);
-                        let value = prompt(`edit value of '${property.name}' as string:`, oldValue);
-                        if (value && value != oldValue) {
-                            property.service.setValue(designItems, property, value);
-                        }
-                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
-                    }, 10);
-                }
-            },
-        ];
-        if (designItems[0].serviceContainer.config.openBindingsEditor) {
-            ctxMenuItems.push(...[
-                { title: '-' },
-                {
-                    title: 'edit binding', action: () => {
-                        let target = property.service.getPropertyTarget(designItems[0], property);
-                        let binding = property.service.getBinding(designItems, property);
-                        designItems[0].serviceContainer.config.openBindingsEditor(property, designItems, binding, target);
-                    }
-                },
-                {
-                    title: 'clear binding', action: () => {
-                        property.service.clearValue(designItems, property, 'binding');
-                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
-                    }
-                }
-            ]);
-        }
-        ;
+        let ctxMenuItems;
+        if (this.propertyContextMenuProvider)
+            ctxMenuItems = this.propertyContextMenuProvider(this._designItems, property);
+        if (!ctxMenuItems)
+            ctxMenuItems = property.service.getContextMenu(this._designItems, property);
         ContextMenu.show(ctxMenuItems, event);
     }
     designItemsChanged(designItems) {

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -1,13 +1,14 @@
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { PropertyGrid } from './PropertyGrid.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
+    propertyGrid: PropertyGrid;
     private _type;
     private _id;
     private _content;
-    private _pg;
     private _selectionChangedHandler;
     private _instanceServiceContainer;
     private _idRect;
@@ -18,4 +19,5 @@ export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAp
     constructor();
     set serviceContainer(value: ServiceContainer);
     set instanceServiceContainer(value: InstanceServiceContainer);
+    private _openContextMenu;
 }

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -3,6 +3,7 @@ import { sleep } from '../../helper/Helper.js';
 import { NodeType } from '../../item/NodeType.js';
 import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
 import { ContentAndIdPropertiesService } from '../../services/propertiesService/services/ContentAndIdPropertiesService.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
@@ -54,10 +55,10 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     <span id="contentSpan" class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-web-component-designer-property-grid id="pg"></node-projects-web-component-designer-property-grid>`;
+    propertyGrid;
     _type;
     _id;
     _content;
-    _pg;
     _selectionChangedHandler;
     _instanceServiceContainer;
     _idRect;
@@ -71,7 +72,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._type = this._getDomElement('type');
         this._id = this._getDomElement('id');
         this._content = this._getDomElement('content');
-        this._pg = this._getDomElement('pg');
+        this.propertyGrid = this._getDomElement('pg');
         this._idRect = this._getDomElement('idRect');
         this._contentRect = this._getDomElement('contentRect');
         this._innerRect = this._getDomElement('innerRect');
@@ -85,17 +86,17 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._idRect.oncontextmenu = (event) => {
             event.preventDefault();
             if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
-                PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
+                this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
         };
         this._contentRect.oncontextmenu = (event) => {
             event.preventDefault();
             if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
-                PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
+                this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
         };
         this._innerRect.oncontextmenu = (event) => {
             event.preventDefault();
             if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
-                PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
+                this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
         };
         this._id.onkeydown = e => {
             if (e.key == 'Enter')
@@ -132,13 +133,13 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         };
     }
     set serviceContainer(value) {
-        this._pg.serviceContainer = value;
+        this.propertyGrid.serviceContainer = value;
     }
     set instanceServiceContainer(value) {
         this._instanceServiceContainer = value;
         this._selectionChangedHandler?.dispose();
         this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
-            this._pg.instanceServiceContainer = value;
+            this.propertyGrid.instanceServiceContainer = value;
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
             if (this._instanceServiceContainer.selectionService?.primarySelection?.isRootItem) {
                 this._configButton.style.display = 'none';
@@ -183,7 +184,15 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
             }
         });
-        this._pg.instanceServiceContainer = value;
+        this.propertyGrid.instanceServiceContainer = value;
+    }
+    _openContextMenu(event, designItems, property) {
+        let ctxMenuItems;
+        if (this.propertyGrid.propertyContextMenuProvider)
+            ctxMenuItems = this.propertyGrid.propertyContextMenuProvider(designItems, property);
+        if (!ctxMenuItems)
+            ctxMenuItems = property.service.getContextMenu(designItems, property);
+        ContextMenu.show(ctxMenuItems, event);
     }
 }
 customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader);

package/dist/index.d.ts

@@ -109,6 +109,7 @@ export * from "./elements/services/propertiesService/propertyEditors/special/Met
 export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/AttachedPropertiesService.js";
+export * from "./elements/services/propertiesService/services/AbstractCssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/BasicWebcomponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";

package/dist/index.js

@@ -68,6 +68,7 @@ export * from "./elements/services/propertiesService/propertyEditors/special/Met
 export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/AttachedPropertiesService.js";
+export * from "./elements/services/propertiesService/services/AbstractCssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/BasicWebcomponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.144",
+  "version": "0.1.146",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",