@node-projects/web-component-designer 0.1.152 → 0.1.153

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

@@ -20,10 +20,18 @@ export declare class PropertyGroupsService implements IPropertyGroupsService {
         name: string;
         propertiesService: IPropertiesService;
     }[];
+    protected _grid: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     protected _flexChild: {
         name: string;
         propertiesService: IPropertiesService;
     }[];
+    protected _flex: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     getPropertygroups(designItems: IDesignItem[]): {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -11,8 +11,6 @@ export class PropertyGroupsService {
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
-        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
     ];
     _pgList = [
         { name: 'properties', propertiesService: null },
@@ -22,8 +20,6 @@ export class PropertyGroupsService {
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
-        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
     ];
     _svgPgList = [
         { name: 'properties', propertiesService: null },
@@ -38,28 +34,46 @@ export class PropertyGroupsService {
     _gridChild = [
         { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
     ];
+    _grid = [
+        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
+    ];
     _flexChild = [
         { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
     ];
+    _flex = [
+        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
+    ];
     getPropertygroups(designItems) {
         if (designItems == null || designItems.length == 0)
             return [];
         if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
             return [];
-        if (designItems[0].isRootItem)
-            return this._rootPgList;
+        if (designItems[0].isRootItem) {
+            const style = designItems[0].getComputedStyle();
+            let lst = this._rootPgList;
+            if (style.display.includes('grid'))
+                lst = [...lst, ...this._grid];
+            else if (style.display.includes('flex'))
+                lst = [...lst, ...this._flex];
+            return lst;
+        }
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         let lst = this._pgList;
         if (designItems[0].element instanceof SVGElement)
             lst = this._svgPgList;
+        const style = designItems[0].getComputedStyle();
+        if (style.display.includes('grid'))
+            lst = [...lst, ...this._grid];
+        else if (style.display.includes('flex'))
+            lst = [...lst, ...this._flex];
         if (designItems[0].parent) {
             const parentStyle = designItems[0].parent.getComputedStyle();
             if (parentStyle.display.includes('grid'))
-                lst = [...lst, this._gridChild[0]];
+                lst = [...lst, ...this._gridChild];
             else if (parentStyle.display.includes('flex'))
-                lst = [...lst, this._flexChild[0]];
+                lst = [...lst, ...this._flexChild];
         }
-        return lst; //.filter(x => x.propertiesService.isHandledElement(designItems[0]));
+        return lst;
     }
 }

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

@@ -8,11 +8,6 @@ export class CommonPropertiesService extends AbstractPropertiesService {
     //@ts-ignore
     commonProperties = [
         {
-            name: "id",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
             name: "class",
             type: "string",
             service: this,

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

@@ -88,6 +88,15 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                 if (lst.createElements(items[0]))
                     visibleDict.add(p.name);
             }
+            let parentEl = this._designerTabControl;
+            for (const v of visibleDict) {
+                let el = this._propertyGridPropertyListsDict[v];
+                if (parentEl === this._designerTabControl)
+                    parentEl.insertAdjacentElement('afterbegin', el);
+                else
+                    parentEl.insertAdjacentElement('afterend', el);
+                parentEl = el;
+            }
             for (let p of this._propertyGridPropertyLists) {
                 if (visibleDict.has(p.title))
                     p.style.display = 'block';

package/package.json

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