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

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

@@ -2,6 +2,7 @@ import { ServiceContainer } from '../../services/ServiceContainer.js';
 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';
 export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _serviceContainer;
     private _designerTabControl;
@@ -12,6 +13,8 @@ export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _nodeReplacedCb;
     private _instanceServiceContainer;
     private _selectionChangedHandler;
+    propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean;
+    propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void;
     static readonly style: CSSStyleSheet;
     static readonly properties: {
         serviceContainer: ObjectConstructor;

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

@@ -12,6 +12,8 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _nodeReplacedCb;
     _instanceServiceContainer;
     _selectionChangedHandler;
+    propertyGroupHover;
+    propertyGroupClick;
     static style = css `
     :host {
       display: block;
@@ -71,6 +73,8 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                 if (!lst) {
                     lst = new PropertyGridPropertyList(this.serviceContainer);
                     lst.title = p.name;
+                    lst.propertyGroupHover = this.propertyGroupHover;
+                    lst.propertyGroupClick = this.propertyGroupClick;
                     this._designerTabControl.appendChild(lst);
                     this._propertyGridPropertyLists.push(lst);
                     this._propertyGridPropertyListsDict[p.name] = lst;

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

@@ -4,12 +4,15 @@ import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-web
 import { IPropertyEditor } from '../../services/propertiesService/IPropertyEditor.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
+import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js';
 export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     private _div;
     private _propertyMap;
     private _serviceContainer;
     private _propertiesService;
     private _designItems;
+    propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean;
+    propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void;
     get propertiesService(): IPropertiesService;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer);

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

@@ -10,6 +10,8 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _propertiesService;
     _designItems;
+    propertyGroupHover;
+    propertyGroupClick;
     get propertiesService() {
         return this._propertiesService;
     }
@@ -85,12 +87,22 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       font-size: 10px;
       font-family: monospace;
     }
+    .group-header[clickable]:hover {
+      cursor:pointer;
+      color: orange;
+      text-decoration: underline;
+    }
     .group-desc {
       display: inline-flex;
       flex-direction: row-reverse;
       font-size: 10px;
       text-decoration: underline;
     }
+    .group-desc[clickable]:hover {
+      cursor:pointer;
+      color: orange;
+      text-decoration: underline;
+    }
     .dragOverProperty {
       outline: 2px dashed orange;
       outline-offset: -2px;
@@ -139,6 +151,28 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             let desc = document.createElement('span');
             desc.innerHTML = g.description ?? '';
             desc.className = 'group-desc';
+            if (this.propertyGroupHover) {
+                header.onmouseenter = () => {
+                    if (this.propertyGroupHover(g, 'name'))
+                        header.setAttribute('clickable', '');
+                    else
+                        header.removeAttribute('clickable');
+                };
+                header.onclick = () => {
+                    if (this.propertyGroupClick)
+                        this.propertyGroupClick(g, 'name');
+                };
+                desc.onmouseenter = () => {
+                    if (this.propertyGroupHover(g, 'desc'))
+                        desc.setAttribute('clickable', '');
+                    else
+                        desc.removeAttribute('clickable');
+                };
+                desc.onclick = () => {
+                    if (this.propertyGroupClick)
+                        this.propertyGroupClick(g, 'desc');
+                };
+            }
             this._div.appendChild(desc);
             this.createPropertyEditors(g.properties);
         }

package/package.json

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