@node-projects/web-component-designer 0.0.49 → 0.0.50

package/dist/elements/helper/GridHelper.d.ts

@@ -0,0 +1,16 @@
+import { IDesignItem } from "../item/IDesignItem.js";
+export declare function CalculateGridInformation(designItem: IDesignItem): {
+    cells?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        name: string;
+    }[][];
+    gaps?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
+};

package/dist/elements/helper/GridHelper.js

@@ -0,0 +1,107 @@
+export function CalculateGridInformation(designItem) {
+    let itemRect = designItem.element.getBoundingClientRect();
+    const computedStyle = getComputedStyle(designItem.element);
+    const rows = computedStyle.gridTemplateRows.split(' ');
+    const columns = computedStyle.gridTemplateColumns.split(' ');
+    let y = 0;
+    let xGap = 0;
+    let yGap = 0;
+    let rw = 0;
+    let xOffset = itemRect.x - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
+    let yOffset = itemRect.y - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
+    let gridA = null;
+    if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
+        gridA = computedStyle.gridTemplateAreas.split('\"');
+    if (computedStyle.columnGap && computedStyle.columnGap != 'normal')
+        xGap = Number.parseFloat(computedStyle.columnGap.replace('px', ''));
+    if (computedStyle.rowGap && computedStyle.rowGap != 'normal')
+        yGap = Number.parseFloat(computedStyle.rowGap.replace('px', ''));
+    let gesX = 0;
+    let gesY = 0;
+    for (let c of columns) {
+        const currX = Number.parseFloat(c.replace('px', ''));
+        gesX += currX + xGap;
+    }
+    gesX -= xGap;
+    for (let r of rows) {
+        const currY = Number.parseFloat(r.replace('px', ''));
+        gesY += currY + yGap;
+    }
+    gesY -= yGap;
+    if (computedStyle.justifyContent == 'center') {
+        xOffset += (itemRect.width - gesX) / 2;
+    }
+    else if (computedStyle.justifyContent == 'end') {
+        xOffset += itemRect.width - gesX;
+    }
+    else if (computedStyle.justifyContent == 'space-between') {
+        xGap += (itemRect.width - gesX) / (columns.length - 1);
+    }
+    else if (computedStyle.justifyContent == 'space-around') {
+        let gp = (itemRect.width - gesX) / (columns.length * 2);
+        xGap += gp * 2;
+        xOffset += gp;
+    }
+    else if (computedStyle.justifyContent == 'space-evenly') {
+        let gp = (itemRect.width - gesX) / (columns.length + 1);
+        xGap += gp;
+        xOffset += gp;
+    }
+    if (computedStyle.alignContent == 'center') {
+        xOffset += (itemRect.height - gesY) / 2;
+    }
+    else if (computedStyle.alignContent == 'end') {
+        xOffset += itemRect.height - gesY;
+    }
+    else if (computedStyle.alignContent == 'space-between') {
+        yGap += (itemRect.height - gesY) / (rows.length - 1);
+    }
+    else if (computedStyle.alignContent == 'space-around') {
+        let gp = (itemRect.height - gesY) / (rows.length * 2);
+        yGap += gp * 2;
+        yOffset += gp;
+    }
+    else if (computedStyle.alignContent == 'space-evenly') {
+        let gp = (itemRect.height - gesY) / (rows.length + 1);
+        yGap += gp;
+        yOffset += gp;
+    }
+    const retVal = { cells: [], gaps: [] };
+    for (let xIdx = 0; xIdx < rows.length; xIdx++) {
+        const r = rows[xIdx];
+        let areas = null;
+        if (gridA) {
+            areas = gridA[rw + 1].split(' ');
+        }
+        let x = 0;
+        let cl = 0;
+        const currY = Number.parseFloat(r.replace('px', ''));
+        let cellList = [];
+        retVal.cells.push(cellList);
+        for (let yIdx = 0; yIdx < columns.length; yIdx++) {
+            const c = columns[yIdx];
+            if (x > 0 && xGap) {
+                retVal.gaps.push({ x: x + xOffset, y: y + yOffset, width: xGap, height: currY });
+                x += xGap;
+            }
+            const currX = Number.parseFloat(c.replace('px', ''));
+            if (y > 0 && yGap) {
+                retVal.gaps.push({ x: x + xOffset, y: y + yOffset - yGap, width: currX, height: yGap });
+            }
+            let name = null;
+            if (areas) {
+                const nm = areas[cl].trim();
+                if (nm != '.') {
+                    name = nm;
+                }
+            }
+            const cell = { x: x + xOffset, y: y + yOffset, width: currX, height: currY, name: name };
+            cellList.push(cell);
+            x += currX;
+            cl++;
+        }
+        y += currY + yGap;
+        rw += 2;
+    }
+    return retVal;
+}

package/dist/elements/helper/Helper.d.ts

@@ -1,3 +1,6 @@
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IRect } from "../../interfaces/IRect.js";
 export declare function sleep(ms: any): Promise<unknown>;
 export declare function exportData(blob: Blob, fileName: string): Promise<void>;
 export declare function dataURItoBlob(dataURI: any): Blob;
+export declare function pointInRect(point: IPoint, rect: IRect): boolean;

package/dist/elements/helper/Helper.js

@@ -21,3 +21,6 @@ export function dataURItoBlob(dataURI) {
     }
     return new Blob([new Uint8Array(array)], { type: mime });
 }
+export function pointInRect(point, rect) {
+    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}

package/dist/elements/item/DesignItem.d.ts

@@ -5,7 +5,9 @@ import { ChangeGroup } from '../services/undoService/ChangeGroup';
 import { NodeType } from './NodeType';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension';
+import { ISize } from '../../interfaces/ISize.js';
 export declare class DesignItem implements IDesignItem {
+    lastContainerSize: ISize;
     node: Node;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -51,8 +53,8 @@ export declare class DesignItem implements IDesignItem {
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;
-    setStyle(name: keyof CSSStyleDeclaration, value?: string | null): void;
-    removeStyle(name: keyof CSSStyleDeclaration): void;
+    setStyle(name: string, value?: string | null): void;
+    removeStyle(name: string): void;
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
 }

package/dist/elements/item/DesignItem.js

@@ -1,14 +1,15 @@
 import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
-//import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
+import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
 export class DesignItem {
+    lastContainerSize;
     node;
     serviceContainer;
     instanceServiceContainer;
@@ -241,11 +242,13 @@ export class DesignItem {
         return designItem;
     }
     setStyle(name, value) {
-        const action = new CssStyleChangeAction(this, name, value, this.styles.get(name));
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, value, this.styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeStyle(name) {
-        const action = new CssStyleChangeAction(this, name, '', this.styles.get(name));
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, '', this.styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     setAttribute(name, value) {

package/dist/elements/item/IDesignItem.d.ts

@@ -4,7 +4,9 @@ import { ChangeGroup } from "../services/undoService/ChangeGroup";
 import { NodeType } from './NodeType';
 import { ExtensionType } from "../widgets/designerView/extensions/ExtensionType";
 import { IDesignerExtension } from "../widgets/designerView/extensions/IDesignerExtension";
+import { ISize } from "../../interfaces/ISize.js";
 export interface IDesignItem {
+    lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
     readonly nodeType: NodeType;
     readonly name: string;

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -53,12 +53,7 @@ export class HtmlWriterService {
                     styles = CssCombiner.combine(styles);
                 for (const s of styles) {
                     if (s[0]) {
-                        if (typeof s[1] === 'string') {
-                            indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
-                        }
-                        else {
-                            //TODO: writing of bindings
-                        }
+                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
                     }
                 }
                 indentedTextWriter.write('"');

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -82,6 +82,12 @@ export class DefaultPlacementService {
         }
     }
     enterContainer(container, items) {
+        for (let i of items) {
+            if (i.lastContainerSize) {
+                i.setStyle('width', i.lastContainerSize.width + 'px');
+                i.setStyle('height', i.lastContainerSize.height + 'px');
+            }
+        }
     }
     leaveContainer(container, items) {
     }

package/dist/elements/services/placementService/GridPlacementService.js

@@ -1,7 +1,24 @@
+import { CalculateGridInformation } from '../../helper/GridHelper.js';
+import { pointInRect } from '../../helper/Helper.js';
 export class GridPlacementService {
     enterContainer(container, items) {
+        for (let i of items) {
+            i.removeStyle("position");
+            i.removeStyle("left");
+            i.removeStyle("top");
+            i.removeStyle("right");
+            i.removeStyle("width");
+            i.removeStyle("height");
+            i.removeStyle("transform");
+        }
     }
     leaveContainer(container, items) {
+        for (let i of items) {
+            if (!i.lastContainerSize) {
+                const rect = i.element.getBoundingClientRect();
+                i.lastContainerSize = { width: rect.width, height: rect.height };
+            }
+        }
     }
     serviceForContainer(container) {
         if (container.element.style.display == 'grid' || container.element.style.display == 'inline-grid')
@@ -15,14 +32,48 @@ export class GridPlacementService {
         return true;
     }
     getElementOffset(container, designItem) {
-        //TODO: offset could be bigger, when it was in a other cell???
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         return null;
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = CalculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        const posElement = placementView.getNormalizedElementCoordinates(items[0].element);
+        let row = 0;
+        let column = 0;
+        if (!pointInRect(pos, posElement)) {
+            row = 0;
+            for (let cellRow of gridInformation.cells) {
+                column = 0;
+                for (let cell of cellRow) {
+                    if (pointInRect(pos, cell)) {
+                        items[0].element.style.gridColumn = column + 1;
+                        items[0].element.style.gridRow = row + 1;
+                    }
+                    column++;
+                }
+                row++;
+            }
+        }
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = CalculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        let row = 0;
+        let column = 0;
+        row = 0;
+        for (let cellRow of gridInformation.cells) {
+            column = 0;
+            for (let cell of cellRow) {
+                if (pointInRect(pos, cell)) {
+                    items[0].setStyle('grid-column', column + 1);
+                    items[0].setStyle('grid-row', row + 1);
+                }
+                column++;
+            }
+            row++;
+        }
     }
 }

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.d.ts

@@ -1,13 +1,13 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
 export declare class CssStyleChangeAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, name: keyof CSSStyleDeclaration, newValue: any, oldValue: any);
+    constructor(designItem: IDesignItem, name: string, newValue: any, oldValue: any);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
     designItem: IDesignItem;
-    name: keyof CSSStyleDeclaration;
+    name: string;
     newValue: any;
     oldValue: any;
     mergeWith(other: ITransactionItem): boolean;

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

@@ -1,7 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
 export declare class DomConverter {
-    static normalizeAttributeValue(value: string): string;
+    static normalizeAttributeValue(value: string | number): string;
     static normalizeContentValue(value: string): string;
     static IsSelfClosingElement(tag: string): boolean;
     static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;

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

@@ -1,6 +1,8 @@
 import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
 export class DomConverter {
     static normalizeAttributeValue(value) {
+        if (typeof value === 'number')
+            value = value.toString();
         if (value)
             return value.replaceAll('"', '"');
         return value;

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

@@ -7,6 +7,7 @@ import { IExtensionManager } from "./extensions/IExtensionManger";
 import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
+import { IRect } from "../../../interfaces/IRect.js";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -22,6 +23,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;

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

@@ -12,6 +12,7 @@ import { IExtensionManager } from "./extensions/IExtensionManger";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
+import { IRect } from "../../../interfaces/IRect.js";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -69,7 +70,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
-    getNormalizedElementCoordinates(element: Element): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;

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

@@ -489,7 +489,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     getNormalizedElementCoordinates(element) {
         const targetRect = element.getBoundingClientRect();
-        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y };
+        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y, width: targetRect.width, height: targetRect.height };
     }
     getNormalizedOffsetInElement(event, element) {
         const normEvt = this.getNormalizedEventCoordinates(event);

package/dist/elements/widgets/designerView/extensions/GridExtension.js

@@ -1,3 +1,4 @@
+import { CalculateGridInformation } from "../../../helper/GridHelper.js";
 import { AbstractExtension } from "./AbstractExtension";
 import { OverlayLayer } from "./OverlayLayer.js";
 export class GridExtension extends AbstractExtension {
@@ -5,105 +6,18 @@ export class GridExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        const rows = computedStyle.gridTemplateRows.split(' ');
-        const columns = computedStyle.gridTemplateColumns.split(' ');
-        let y = 0;
-        let xGap = 0;
-        let yGap = 0;
-        let rw = 0;
-        let xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-        let yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
-        let gridA = null;
-        if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
-            gridA = computedStyle.gridTemplateAreas.split('\"');
-        if (computedStyle.columnGap && computedStyle.columnGap != 'normal')
-            xGap = Number.parseFloat(computedStyle.columnGap.replace('px', ''));
-        if (computedStyle.rowGap && computedStyle.rowGap != 'normal')
-            yGap = Number.parseFloat(computedStyle.rowGap.replace('px', ''));
-        let gesX = 0;
-        let gesY = 0;
-        for (let c of columns) {
-            const currX = Number.parseFloat(c.replace('px', ''));
-            gesX += currX + xGap;
-        }
-        gesX -= xGap;
-        for (let r of rows) {
-            const currY = Number.parseFloat(r.replace('px', ''));
-            gesY += currY + yGap;
-        }
-        gesY -= yGap;
-        if (computedStyle.justifyContent == 'center') {
-            xOffset += (itemRect.width - gesX) / 2;
-        }
-        else if (computedStyle.justifyContent == 'end') {
-            xOffset += itemRect.width - gesX;
-        }
-        else if (computedStyle.justifyContent == 'space-between') {
-            xGap += (itemRect.width - gesX) / (columns.length - 1);
-        }
-        else if (computedStyle.justifyContent == 'space-around') {
-            let gp = (itemRect.width - gesX) / (columns.length * 2);
-            xGap += gp * 2;
-            xOffset += gp;
-        }
-        else if (computedStyle.justifyContent == 'space-evenly') {
-            let gp = (itemRect.width - gesX) / (columns.length + 1);
-            xGap += gp;
-            xOffset += gp;
-        }
-        if (computedStyle.alignContent == 'center') {
-            xOffset += (itemRect.height - gesY) / 2;
-        }
-        else if (computedStyle.alignContent == 'end') {
-            xOffset += itemRect.height - gesY;
-        }
-        else if (computedStyle.alignContent == 'space-between') {
-            yGap += (itemRect.height - gesY) / (rows.length - 1);
-        }
-        else if (computedStyle.alignContent == 'space-around') {
-            let gp = (itemRect.height - gesY) / (rows.length * 2);
-            yGap += gp * 2;
-            yOffset += gp;
-        }
-        else if (computedStyle.alignContent == 'space-evenly') {
-            let gp = (itemRect.height - gesY) / (rows.length + 1);
-            yGap += gp;
-            yOffset += gp;
-        }
-        for (let xIdx = 0; xIdx < rows.length; xIdx++) {
-            const r = rows[xIdx];
-            let areas = null;
-            if (gridA) {
-                areas = gridA[rw + 1].split(' ');
-            }
-            let x = 0;
-            let cl = 0;
-            const currY = Number.parseFloat(r.replace('px', ''));
-            for (let yIdx = 0; yIdx < columns.length; yIdx++) {
-                const c = columns[yIdx];
-                if (x > 0 && xGap) {
-                    this._drawRect(x + xOffset, y + yOffset, xGap, currY, 'svg-grid-gap', null, OverlayLayer.Background);
-                    x += xGap;
-                }
-                const currX = Number.parseFloat(c.replace('px', ''));
-                if (y > 0 && yGap) {
-                    this._drawRect(x + xOffset, y + yOffset - yGap, currX, yGap, 'svg-grid-gap', null, OverlayLayer.Background);
-                }
-                if (areas) {
-                    const nm = areas[cl].trim();
-                    if (nm != '.') {
-                        const text = this._drawText(nm, x + xOffset, y + yOffset, 'svg-grid-area', null, OverlayLayer.Background);
-                        text.setAttribute("dominant-baseline", "hanging");
-                    }
+        const gridInformation = CalculateGridInformation(this.extendedItem);
+        for (let gap of gridInformation.gaps) {
+            this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', null, OverlayLayer.Background);
+        }
+        for (let cellRow of gridInformation.cells) {
+            for (let cell of cellRow) {
+                this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', null, OverlayLayer.Background);
+                if (cell.name) {
+                    const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
+                    text.setAttribute("dominant-baseline", "hanging");
                 }
-                this._drawRect(x + xOffset, y + yOffset, currX, currY, 'svg-grid', null, OverlayLayer.Background);
-                x += currX;
-                cl++;
             }
-            y += currY + yGap;
-            rw += 2;
         }
     }
     refresh() {

package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js

@@ -50,8 +50,8 @@ export class TransformOriginExtension extends AbstractExtension {
                     const newY = (dy + y);
                     const przX = Math.round(newX / rect.width * 10000) / 100; //round to 2 decimal places
                     const przY = Math.round(newY / rect.height * 10000) / 100;
-                    //this.extendedItem.setStyle('transformOrigin',newX + 'px ' + newY + 'px');
-                    this.extendedItem.setStyle('transformOrigin', przX + '% ' + przY + '%');
+                    //this.extendedItem.setStyle('transform-origin',newX + 'px ' + newY + 'px');
+                    this.extendedItem.setStyle('transform-origin', przX + '% ' + przY + '%');
                     this.refresh();
                     this._startPos = null;
                 }

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

@@ -12,7 +12,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     div {
       display: grid;
       grid-template-columns: auto 1fr;
-      padding: 6px;
+      padding: 3px 6px;
       font-family: monospace; 
       align-items: center;
     }

package/package.json

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