@node-projects/web-component-designer 0.0.253 → 0.0.255

package/dist/elements/item/DesignItem.js

@@ -473,6 +473,8 @@ export class DesignItem {
         }
     }
     getPlacementService(style) {
+        if (this.nodeType != NodeType.Element)
+            return null;
         style ??= getComputedStyle(this.element);
         return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
     }

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

@@ -7,7 +7,6 @@ import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
 import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
 import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
-import { MetricsPropertyEditor } from './propertyEditors/MetricsPropertyEditor.js';
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -49,10 +48,6 @@ export class DefaultEditorTypesService {
                 {
                     return new ThicknessPropertyEditor(property);
                 }
-            case "metrics":
-                {
-                    return new MetricsPropertyEditor(property);
-                }
             case "css-length":
             case "string":
             default:

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

@@ -10,6 +10,14 @@ export declare class PropertyTabsService implements IPropertyTabsService {
         name: string;
         propertiesService: IPropertiesService;
     }[];
+    protected _gridChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _flexChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     getPropertygroups(designItems: IDesignItem[]): {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -19,13 +19,25 @@ export class PropertyTabsService {
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
         { name: 'svg', propertiesService: new CssPropertiesService("svg") },
     ];
+    _gridChild = [
+        { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
+    ];
+    _flexChild = [
+        { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
+    ];
     getPropertygroups(designItems) {
         if (designItems == null || designItems.length == 0)
             return [];
         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)
-            return this._svgPgList;
-        return this._pgList;
+            lst = this._svgPgList;
+        const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+        if (parentStyle.display.includes('grid'))
+            lst = [...lst, this._gridChild[0]];
+        else if (parentStyle.display.includes('flex'))
+            lst = [...lst, this._flexChild[0]];
+        return lst;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    _root: HTMLDivElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.js

@@ -0,0 +1,45 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
+    _root;
+    constructor(property) {
+        super(property);
+        this._root = document.createElement('div');
+        this._root.style.display = 'grid';
+        this._root.style.padding = '4px 0px';
+        this._root.style.boxSizing = 'border-box';
+        this._root.style.minHeight = '50px';
+        this.element = this._root;
+    }
+    refreshValue(valueType, value) {
+        this._root.innerHTML = "";
+        if (this.designItems != null && this.designItems.length) {
+            let styleContainer = getComputedStyle(this.designItems[0].element.parentElement);
+            let style = getComputedStyle(this.designItems[0].element);
+            let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
+            let cntRow = styleContainer.gridTemplateRows.split(' ').length;
+            this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+            this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+            let rowStart = parseInt(style.gridRowStart);
+            let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
+            rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
+            let colStart = parseInt(style.gridColumnStart);
+            let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
+            colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
+            for (let p = 1; p <= cntRow; p++) {
+                for (let n = 1; n <= cntCol; n++) {
+                    const b = document.createElement('button');
+                    b.style.minHeight = '10px';
+                    b.onclick = () => {
+                        let grp = this.designItems[0].openGroup('Change grid row/column');
+                        this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
+                        this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
+                        grp.commit();
+                    };
+                    if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
+                        b.style.backgroundColor = 'coral';
+                    this._root.appendChild(b);
+                }
+            }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/GridRowColumnPropertyEditor.d.ts

@@ -0,0 +1,10 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class GridRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    _root: HTMLDivElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+    designItemsChanged(designItems: IDesignItem[]): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/GridRowColumnPropertyEditor.js

@@ -0,0 +1,25 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class GridRowColumnPropertyEditor extends BasePropertyEditor {
+    _root;
+    constructor(property) {
+        super(property);
+        this._root = document.createElement('div');
+        this.element = this._root;
+    }
+    refreshValue(valueType, value) {
+    }
+    designItemsChanged(designItems) {
+        super.designItemsChanged(designItems);
+        this._root.innerHTML == "";
+        if (this.designItems != null && this.designItems.length) {
+            let style = getComputedStyle(this.designItems[0].element);
+            let cntCol = style.gridTemplateColumns.split(' ').length;
+            let cntRow = style.gridTemplateRows.split(' ').length;
+            this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+            this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+            for (let n = 0; n < cntCol * cntRow; n++) {
+                this._root.appendChild(document.createElement('button'));
+            }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class JsonPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    static template: HTMLTemplateElement;
+    _input: HTMLInputElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.js

@@ -0,0 +1,21 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { html } from '@node-projects/base-custom-webcomponent';
+export class JsonPropertyEditor extends BasePropertyEditor {
+    static template = html `
+    <div style="display: flex;">
+      <input id="input" type="text">
+      <button style="width: 30px;">...</button>
+    </div>
+  `;
+    _input;
+    constructor(property) {
+        super(property);
+        let el = JsonPropertyEditor.template.content.cloneNode(true);
+        this._input = el.getElementById('input');
+        this._input.onchange = (e) => this._valueChanged(this._input.value);
+        this.element = el;
+    }
+    refreshValue(valueType, value) {
+        this._input.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../../IProperty.js';
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { ValueType } from '../../ValueType.js';
+export declare class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    _root: HTMLDivElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js

@@ -0,0 +1,46 @@
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
+    //Todo: multiple cell selection, grid area support, span support
+    _root;
+    constructor(property) {
+        super(property);
+        this._root = document.createElement('div');
+        this._root.style.display = 'grid';
+        this._root.style.padding = '4px 0px';
+        this._root.style.boxSizing = 'border-box';
+        this._root.style.minHeight = '50px';
+        this.element = this._root;
+    }
+    refreshValue(valueType, value) {
+        this._root.innerHTML = "";
+        if (this.designItems != null && this.designItems.length) {
+            let styleContainer = getComputedStyle(this.designItems[0].element.parentElement);
+            let style = getComputedStyle(this.designItems[0].element);
+            let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
+            let cntRow = styleContainer.gridTemplateRows.split(' ').length;
+            this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+            this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+            let rowStart = parseInt(style.gridRowStart);
+            let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
+            rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
+            let colStart = parseInt(style.gridColumnStart);
+            let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
+            colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
+            for (let p = 1; p <= cntRow; p++) {
+                for (let n = 1; n <= cntCol; n++) {
+                    const b = document.createElement('button');
+                    b.style.minHeight = '10px';
+                    b.onclick = () => {
+                        let grp = this.designItems[0].openGroup('Change grid row/column');
+                        this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
+                        this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
+                        grp.commit();
+                    };
+                    if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
+                        b.style.backgroundColor = 'coral';
+                    this._root.appendChild(b);
+                }
+            }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../../IProperty.js';
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { ValueType } from '../../ValueType.js';
+import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
+export declare class MetricsPropertyEditor extends BasePropertyEditor<MetricsEditor> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js

@@ -0,0 +1,15 @@
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
+export class MetricsPropertyEditor extends BasePropertyEditor {
+    //Todo: metrics editor does not work at all yet
+    constructor(property) {
+        super(property);
+        const selector = new MetricsEditor();
+        selector.property = property.name;
+        //selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        //this.element.valueLeft = value;
+    }
+}

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

@@ -8,11 +8,14 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     layout: string[];
     grid: string[];
+    gridChild: string[];
     flex: string[];
+    flexChild: string[];
     svg: string[];
-    constructor(name: 'layout' | 'grid' | 'flex' | 'svg');
+    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.js

@@ -3,6 +3,8 @@ 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';
 //TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
@@ -36,7 +38,8 @@ export class CssPropertiesService extends CommonPropertiesService {
         "margin",
         "border",
         "padding",
-        "overflow"
+        "overflow",
+        "metrics"
     ];
     grid = [
         "display",
@@ -48,7 +51,14 @@ export class CssPropertiesService extends CommonPropertiesService {
         "align-content",
         "justify-content",
         "align-items",
-        "justify-items"
+        "justify-items",
+    ];
+    gridChild = [
+        "grid-row",
+        "grid-column",
+        "assigned-row-column",
+        "align-self",
+        "justify-self"
     ];
     flex = [
         "display",
@@ -59,6 +69,10 @@ export class CssPropertiesService extends CommonPropertiesService {
         "justify-content",
         "align-items"
     ];
+    flexChild = [
+        "align-self",
+        "justify-self"
+    ];
     svg = [
         "fill",
         "fill-rule",
@@ -80,18 +94,26 @@ export class CssPropertiesService extends CommonPropertiesService {
     }
     getProperties(designItem) {
         const propNames = this[this.name];
-        const propertiesList = propNames.map(x => {
-            const camelName = PropertiesHelper.dashToCamelCase(x);
-            return {
-                name: x,
-                type: cssProperties[camelName]?.type ?? 'string',
-                values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
-                service: this,
-                propertyType: PropertyType.cssValue
-            };
-        });
+        const propertiesList = propNames.map(x => this._getPropertyDef(x));
         return propertiesList;
     }
+    _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/selectionService/SelectionService.js

@@ -10,7 +10,7 @@ export class SelectionService {
         this._undoSelectionChanges = undoSelectionChanges;
     }
     setSelectedElements(designItems) {
-        if (this.selectedElements != designItems) {
+        if (this.selectedElements != designItems && !(this.selectedElements.length === 0 && (designItems == null || designItems.length === 0))) {
             if (this._undoSelectionChanges) {
                 const action = new SelectionChangedAction(this.selectedElements, designItems, this);
                 this._designerCanvas.instanceServiceContainer.undoService.execute(action);

package/dist/elements/widgets/debugView/debug-view.js

@@ -189,14 +189,16 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
             requestAnimationFrame(() => {
                 let element = designItem?.element;
                 if (element) {
-                    this.computedStyle = getComputedStyle(designItem.element);
-                    this.selectedElementOffsetParent = designItem.element.offsetParent;
+                    if (element.nodeType == 3)
+                        element = element.parentNode;
+                    this.computedStyle = getComputedStyle(element);
+                    this.selectedElementOffsetParent = element.offsetParent;
                     if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {
                         this.selectedElementOffsetParentText = null;
                         this.selectedElementOffsetParent = null;
                     }
                     else
-                        this.selectedElementOffsetParentText = generateSelector(designItem.element.offsetParent);
+                        this.selectedElementOffsetParentText = generateSelector(element.offsetParent);
                     if (element && element.nodeType === 1) {
                         const closest = getClosestStackingContext(element);
                         this.createsStackingContext = element === closest.node;

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

@@ -41,11 +41,11 @@ export class ExtensionManager {
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
             this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
-            if (selectionChangedEvent.selectedElements[0].getPlacementService().isEnterableContainer(selectionChangedEvent.selectedElements[0]))
+            if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0]))
                 this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
             const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
-            if (primaryContainer.getPlacementService().isEnterableContainer(primaryContainer))
+            if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
                 this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);

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

@@ -64,44 +64,48 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         return this._selectedItems;
     }
     set selectedItems(items) {
-        this._selectedItems = items;
-        const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(items);
-        const visibleDict = new Set();
-        for (let p of pgGroups) {
-            let lst = this._propertyGridPropertyListsDict[p.name];
-            if (!lst) {
-                lst = new PropertyGridPropertyList(this.serviceContainer);
-                lst.title = p.name;
-                this._designerTabControl.appendChild(lst);
-                this._propertyGridPropertyLists.push(lst);
-                this._propertyGridPropertyListsDict[p.name] = lst;
+        if (this._selectedItems != items) {
+            this._selectedItems = items;
+            const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(items);
+            const visibleDict = new Set();
+            for (let p of pgGroups) {
+                let lst = this._propertyGridPropertyListsDict[p.name];
+                if (!lst) {
+                    lst = new PropertyGridPropertyList(this.serviceContainer);
+                    lst.title = p.name;
+                    this._designerTabControl.appendChild(lst);
+                    this._propertyGridPropertyLists.push(lst);
+                    this._propertyGridPropertyListsDict[p.name] = lst;
+                }
+                lst.setPropertiesService(p.propertiesService);
+                lst.createElements(items[0]);
+                visibleDict.add(p.name);
             }
-            lst.setPropertiesService(p.propertiesService);
-            lst.createElements(items[0]);
-            visibleDict.add(p.name);
-        }
-        this._designerTabControl.refreshItems();
-        if (this._designerTabControl.selectedIndex < 0)
-            this._designerTabControl.selectedIndex = 0;
-        for (let p of this._propertyGridPropertyLists) {
-            if (visibleDict.has(p.title))
-                p.style.display = 'block';
-            else
-                p.style.display = 'none';
-        }
-        for (const a of this._propertyGridPropertyLists) {
-            a.designItemsChanged(items);
-        }
-        if (items) {
-            if (items.length == 1) {
-                for (const a of this._propertyGridPropertyLists) {
-                    a.refreshForDesignItems(items);
+            for (let p of this._propertyGridPropertyLists) {
+                if (visibleDict.has(p.title))
+                    p.style.display = 'block';
+                else
+                    p.style.display = 'none';
+            }
+            this._designerTabControl.refreshItems();
+            if (this._designerTabControl.selectedIndex < 0)
+                this._designerTabControl.selectedIndex = 0;
+            for (const a of this._propertyGridPropertyLists) {
+                if (visibleDict.has(a.title))
+                    a.designItemsChanged(items);
+            }
+            if (items) {
+                if (items.length == 1) {
+                    for (const a of this._propertyGridPropertyLists) {
+                        if (visibleDict.has(a.title))
+                            a.refreshForDesignItems(items);
+                    }
+                    this._observeItems();
                 }
-                this._observeItems();
             }
-        }
-        else {
-            this._itemsObserver.disconnect();
+            else {
+                this._itemsObserver.disconnect();
+            }
         }
     }
     _observeItems() {

package/dist/index.d.ts

@@ -90,11 +90,12 @@ export * from "./elements/services/propertiesService/propertyEditors/DatePropert
 export * from "./elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js";
-export * from "./elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/TextPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";

package/dist/index.js

@@ -55,11 +55,12 @@ export * from "./elements/services/propertiesService/propertyEditors/DatePropert
 export * from "./elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js";
-export * from "./elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/TextPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.253",
+  "version": "0.0.255",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -24,8 +24,8 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.4.8",
-    "ace-builds": "^1.23.4",
+    "@types/node": "^20.4.9",
+    "ace-builds": "^1.24.0",
     "codemirror": "^5.0.0",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",