@node-projects/web-component-designer 0.0.262 → 0.0.264

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

@@ -13,7 +13,7 @@ export declare abstract class AbstractPropertiesService implements IPropertiesSe
     abstract getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    clearValue(designItems: IDesignItem[], property: IProperty, clearType?: 'all' | 'binding' | 'value'): void;
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;

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

@@ -60,7 +60,7 @@ export class AbstractPropertiesService {
     getPropertyTarget(designItem, property) {
         return BindingTarget.property;
     }
-    clearValue(designItems, property, clearType = 'all') {
+    clearValue(designItems, property, clearType) {
         const cg = designItems[0].openGroup("property cleared: " + property.name);
         for (let d of designItems) {
             if (clearType != 'binding') {

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

@@ -8,11 +8,12 @@ export declare class ContentAndIdPropertiesService extends AbstractPropertiesSer
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     contentProperty: IProperty;
     idProperty: IProperty;
+    innerHtmlProperty: IProperty;
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType?: 'all' | 'binding' | 'value'): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
 }

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

@@ -19,6 +19,12 @@ export class ContentAndIdPropertiesService extends AbstractPropertiesService {
         service: this,
         propertyType: PropertyType.propertyAndAttribute
     };
+    innerHtmlProperty = {
+        name: "innerHTML",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.property
+    };
     name = "content";
     isHandledElement(designItem) {
         return true;
@@ -27,18 +33,28 @@ export class ContentAndIdPropertiesService extends AbstractPropertiesService {
         return name == 'id' ? this.idProperty : this.contentProperty;
     }
     getProperties(designItem) {
-        return [this.idProperty, this.contentProperty];
+        return [this.idProperty, this.contentProperty, this.innerHtmlProperty];
     }
-    clearValue(designItems, property) {
-        if (property.name == this.contentProperty.name) {
-            designItems[0].clearChildren();
+    clearValue(designItems, property, clearType = 'all') {
+        if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) {
+            for (let d of designItems) {
+                if (clearType != 'binding') {
+                    d.clearChildren();
+                }
+                if (clearType != 'value') {
+                    d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                        return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+                    });
+                }
+                this._notifyChangedProperty(d, property, undefined);
+            }
         }
         else {
-            super.clearValue(designItems, property);
+            super.clearValue(designItems, property, clearType);
         }
     }
     isSet(designItems, property) {
-        if (property.name == this.contentProperty.name) {
+        if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) {
             let all = true;
             let some = false;
             if (designItems != null && designItems.length !== 0) {
@@ -60,7 +76,7 @@ export class ContentAndIdPropertiesService extends AbstractPropertiesService {
         return super.isSet(designItems, property);
     }
     getValue(designItems, property) {
-        if (property.name == this.contentProperty.name) {
+        if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) {
             return designItems[0].element.textContent;
         }
         return super.getValue(designItems, property);

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

@@ -18,7 +18,7 @@ export declare class CssCurrentPropertiesService extends CommonPropertiesService
     clearValue(designItems: IDesignItem[], property: IProperty & {
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;
-    }): void;
+    }, clearType: 'all' | 'binding' | 'value'): void;
     getValue(designItems: IDesignItem[], property: IProperty & {
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;

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

@@ -76,12 +76,12 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
             d.element.setAttribute('style', d.element.getAttribute('style'));
         }
     }
-    clearValue(designItems, property) {
+    clearValue(designItems, property, clearType) {
         if (property.styleRule?.selector !== null && property.styleDeclaration) {
             designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration.name);
             return;
         }
-        super.clearValue(designItems, property);
+        super.clearValue(designItems, property, clearType);
     }
     getValue(designItems, property) {
         if (property.styleRule?.selector && property.styleDeclaration)

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

@@ -251,10 +251,10 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     static refreshIsSetElementAndEditorForDesignItems(isSetElement, property, items, propertiesService, editor) {
-        if (items) {
+        if (items && items.length) {
             let s = propertiesService.isSet(items, property);
             let v = propertiesService.getValue(items, property);
-            isSetElement.title = s;
+            isSetElement.title = property.name + ': ' + s;
             if (s == ValueType.none) {
                 isSetElement.style.background = '';
                 v = propertiesService.getUnsetValue(items, property);

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

@@ -12,6 +12,7 @@ export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAp
     private _instanceServiceContainer;
     private _idRect;
     private _contentRect;
+    private _innerRect;
     private _propertiesService;
     constructor();
     set serviceContainer(value: ServiceContainer);

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

@@ -15,7 +15,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     }
     div.root {
       display: grid;
-      grid-template-columns: 15px auto 1fr;
+      grid-template-columns: 15px  15px auto 1fr;
       padding: 3px 6px;
       font-family: monospace; 
       align-items: center;
@@ -44,10 +44,11 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     `;
     static template = html `
   <div class="root">
-    <span style="grid-column: span 2;" class="desc">Type:</span><span id="type"></span>
-    <div id="idRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
-    <span class="desc">Id:</span><input type="text" id="id">
-    <div id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
+    <span style="grid-column: span 3;" class="desc">Type:</span><span id="type"></span>
+    <div title="id" id="idRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
+    <span style="grid-column: span 2;" class="desc">Id:</span><input type="text" id="id">
+    <div title="innerHTML" id="innerRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
+    <div title="textContent" id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
     <span class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-property-grid id="pg"></node-projects-property-grid>
@@ -60,6 +61,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     _instanceServiceContainer;
     _idRect;
     _contentRect;
+    _innerRect;
     _propertiesService;
     constructor() {
         super();
@@ -70,6 +72,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._pg = this._getDomElement('pg');
         this._idRect = this._getDomElement('idRect');
         this._contentRect = this._getDomElement('contentRect');
+        this._innerRect = this._getDomElement('innerRect');
         this._propertiesService = new ContentAndIdPropertiesService();
         this._idRect.oncontextmenu = (event) => {
             event.preventDefault();
@@ -79,6 +82,10 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             event.preventDefault();
             PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
         };
+        this._innerRect.oncontextmenu = (event) => {
+            event.preventDefault();
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
+        };
         this._id.onkeydown = e => {
             if (e.key == 'Enter')
                 this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
@@ -131,6 +138,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             this._content.title = this._content.value;
             PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
             PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
         });
     }
 }

package/package.json

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