@node-projects/web-component-designer 0.0.48 → 0.0.52

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/designerView/extensions/contextMenu/CopyPasteContextMenu.d.ts

@@ -1,8 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class CopyPasteContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js

@@ -1,6 +1,6 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class CopyPasteContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return true;
     }
     provideContextMenuItems(event, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.d.ts

@@ -1,7 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
+export declare type ContextmenuInitiator = 'designer' | 'treeView' | 'other';
 export interface IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): any;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): any;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.d.ts

@@ -1,9 +1,9 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class ItemsBelowContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
     private _select;
     private _searchForItemsBelow;

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js

@@ -1,7 +1,7 @@
 import { DesignItem } from "../../../../item/DesignItem";
 export class ItemsBelowContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
-        return true;
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
     }
     provideContextMenuItems(event, designerView, designItem) {
         const lstItems = this._searchForItemsBelow(event, designerView);
@@ -31,7 +31,8 @@ export class ItemsBelowContextMenu {
                         break;
                     if (el !== designerView.overlayLayer && el.parentElement !== designerView.overlayLayer && el.getRootNode() === designerView.shadowRoot)
                         lstEl.push(el);
-                    backupPEventsMap.set(el, el.style.pointerEvents);
+                    if (!backupPEventsMap.has(el))
+                        backupPEventsMap.set(el, el.style.pointerEvents);
                     el.style.pointerEvents = 'none';
                     const oldEl = el;
                     el = designerView.elementFromPoint(event.x, event.y);

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.d.ts

@@ -1,9 +1,9 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class MultipleItemsSelectedContextMenu implements IContextMenuExtension {
     orderIndex: number;
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -1,6 +1,6 @@
 export class MultipleItemsSelectedContextMenu {
     orderIndex = 60;
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
             return true;
         }

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.d.ts

@@ -1,8 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class ZMoveContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js

@@ -1,6 +1,6 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class ZMoveContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return true;
     }
     provideContextMenuItems(event, designerView, designItem) {

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/dist/elements/widgets/treeView/treeViewExtended.d.ts

@@ -3,6 +3,7 @@ import { ITreeView } from './ITreeView';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
 export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
     private _treeDiv;
     private _tree;
@@ -19,6 +20,7 @@ export declare class TreeViewExtended extends BaseCustomWebComponentConstructorA
     _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     ready(): Promise<void>;
     createTree(rootItem: IDesignItem): void;
     set instanceServiceContainer(value: InstanceServiceContainer);

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -1,6 +1,7 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../item/NodeType';
 import { assetsPath } from '../../../Constants';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
@@ -135,6 +136,17 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         designItem.hideAtRunTime = !designItem.hideAtRunTime;
         this._showHideAtRunTimeState(img, designItem);
     }
+    showDesignItemContextMenu(designItem, event) {
+        event.preventDefault();
+        const mnuItems = [];
+        for (let cme of designItem.serviceContainer.designerContextMenuExtensions) {
+            if (cme.shouldProvideContextmenu(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView')) {
+                mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem));
+            }
+        }
+        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        return ctxMnu;
+    }
     async ready() {
         //this._treeDiv.classList.add('fancytree-connectors');
         $(this._treeDiv).fancytree({
@@ -158,6 +170,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 if (node.tr.children[0]) {
                     let designItem = node.data.ref;
                     if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
+                        node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
                         let d = document.createElement("div");
                         d.className = "cmd";
                         let img = document.createElement('img');

package/dist/index.d.ts

@@ -133,7 +133,7 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
-export type { IContextMenuExtension } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
+export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/package.json

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

package/dist/elements/controls/ImageButtonListSelector copy.d.ts

@@ -1,17 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ImageButtonListSelectorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
-    property: string;
-    unsetValue: string;
-    _updateValue(): void;
-    ready(): void;
-}

package/dist/elements/controls/ImageButtonListSelector copy.js

@@ -1,82 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    constructor() {
-        super(...arguments);
-        this.valueChanged = new TypedEvent();
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
-    }
-    _updateValue() {
-        if (this.value) {
-            this._getDomElement('value').innerText = this.value;
-            this._getDomElement('value').classList.add('value-set');
-        }
-        else {
-            this._getDomElement('value').classList.remove('value-set');
-        }
-        const slot = this._getDomElement('slot');
-        for (let e of slot.assignedElements()) {
-            if (e.dataset.value == this.value)
-                e.style.background = "cornflowerblue";
-            else
-                e.style.background = "";
-        }
-    }
-    ready() {
-        var _a, _b;
-        this._parseAttributesToProperties();
-        const slot = this._getDomElement('slot');
-        slot.onclick = (e) => {
-            const path = e.composedPath();
-            for (let e of slot.assignedElements()) {
-                if (path.indexOf(e) >= 0) {
-                    this.value = e.dataset.value;
-                }
-            }
-        };
-        this._getDomElement('property').innerText = (_a = this.property) !== null && _a !== void 0 ? _a : '';
-        this._getDomElement('value').innerText = (_b = this.unsetValue) !== null && _b !== void 0 ? _b : '';
-        this._updateValue();
-    }
-}
-ImageButtonListSelector.style = css `
-    div {
-      font-size: 10px;
-      color: white;
-    }
-    #property {
-      color: #00aff0;
-    }
-    #value {
-      color: lightgray;
-    }
-    #value.value-set {
-      color: wheat;
-    }
-    .container {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-    }
-    ::slotted(button) {
-      min-width: 24px;
-      height: 24px;
-      padding: 1px;
-      background: white;
-      border: 1px solid lightgray;
-    }
-  `;
-ImageButtonListSelector.template = html `
-    <div>
-      <div><span id="property"></span>: <span id="value"></span></div>
-      <div class="container"><slot id="slot"></slot></div>
-    </div>
-  `;
-customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/NumericInput.js

@@ -1 +0,0 @@
-"use strict";

package/dist/elements/controls/ThicknessEditor copy.d.ts

@@ -1,33 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ThicknessEditorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _leftInput;
-    private _topInput;
-    private _rightInput;
-    private _bottomInput;
-    private _valueLeft;
-    get valueLeft(): string;
-    set valueLeft(value: string);
-    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    private _valueTop;
-    get valueTop(): string;
-    set valueTop(value: string);
-    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    private _valueRight;
-    get valueRight(): string;
-    set valueRight(value: string);
-    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    private _valueBottom;
-    get valueBottom(): string;
-    set valueBottom(value: string);
-    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    property: string;
-    unsetValue: string;
-    _updateValue(): void;
-    ready(): void;
-}

package/dist/elements/controls/ThicknessEditor copy.js

@@ -1,145 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-  :host {
-    margin: 4px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  #container {
-    display: grid;
-    grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px);
-    grid-template-rows: auto;
-    grid-template-areas: 
-          "  .   top     ."
-          "left middle right"
-          "  .  bottom   .";
-    column-gap: 2px;
-    row-gap: 2px;
-  }
-  input {
-    width: 20px;
-    text-align: center;
-    font-size: 10px;
-    height: 20px;
-    padding: 0;
-  }
-  #left {
-    grid-area: left;
-    justify-self: end;
-  }
-  #top {
-    grid-area: top;
-    align-self: end;
-    justify-self: center;
-  }
-  #right {
-    grid-area: right;
-    justify-self: start;
-  }
-  #bottom {
-    grid-area: bottom;
-    align-self: start;
-    justify-self: center;
-  }
-  #rect {
-    grid-area: middle;
-    border: 1px solid black;
-    background: lightgray;
-  }
-  `;
-    static template = html `
-    <div id="container">
-      <input id="left">
-      <input id="top">
-      <input id="right">
-      <input id="bottom">
-      <div id="rect"></div>
-    </div>
-  `;
-    _leftInput;
-    _topInput;
-    _rightInput;
-    _bottomInput;
-    _valueLeft;
-    get valueLeft() {
-        return this._valueLeft;
-    }
-    set valueLeft(value) {
-        const oldValue = this._valueLeft;
-        this._valueLeft = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueLeftChanged = new TypedEvent();
-    _valueTop;
-    get valueTop() {
-        return this._valueTop;
-    }
-    set valueTop(value) {
-        const oldValue = this._valueTop;
-        this._valueTop = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueTopChanged = new TypedEvent();
-    _valueRight;
-    get valueRight() {
-        return this._valueRight;
-    }
-    set valueRight(value) {
-        const oldValue = this._valueRight;
-        this._valueRight = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueRightChanged = new TypedEvent();
-    _valueBottom;
-    get valueBottom() {
-        return this._valueBottom;
-    }
-    set valueBottom(value) {
-        const oldValue = this._valueBottom;
-        this._valueBottom = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueBottomChanged = new TypedEvent();
-    property;
-    unsetValue;
-    _updateValue() {
-        this._leftInput.value = this.valueLeft;
-        this._topInput.value = this.valueTop;
-        this._rightInput.value = this.valueRight;
-        this._bottomInput.value = this._valueBottom;
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this._leftInput = this._getDomElement('left');
-        this._topInput = this._getDomElement('top');
-        this._rightInput = this._getDomElement('right');
-        this._bottomInput = this._getDomElement('bottom');
-        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueLeft = this._leftInput.value; };
-        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueTop = this._topInput.value; };
-        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueRight = this._rightInput.value; };
-        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueBottom = this._bottomInput.value; };
-        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
-        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
-        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
-        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
-        this._updateValue();
-    }
-}
-customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/helper/CssPropertiesList.js

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,14 +0,0 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
-export interface IBinding {
-    bindableObjectNames?: string[];
-    expression?: string;
-    mode?: BindingMode;
-    target?: BindingTarget;
-    invert?: boolean;
-    converter?: string;
-    changedEvent?: string;
-    nullSafe?: boolean;
-    rawName?: string;
-    rawValue?: string;
-}

package/dist/elements/item/Binding.js

@@ -1,4 +0,0 @@
-export class Binding {
-}
-export class ExtendedBinding extends Binding {
-}

package/dist/elements/item/IBinding copy.d.ts

@@ -1,14 +0,0 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
-export interface IBinding {
-    bindableObjectNames?: string[];
-    expression?: string;
-    mode?: BindingMode;
-    target?: BindingTarget;
-    invert?: boolean;
-    converter?: string;
-    changedEvent?: string;
-    nullSafe?: boolean;
-    rawName?: string;
-    rawValue?: string;
-}