@node-projects/web-component-designer 0.0.235 → 0.0.237

package/dist/elements/controls/DesignerTabControl.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
-class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     _selectedIndex = -1;
     //private _contentObserver: MutationObserver;
     _panels;
@@ -234,5 +234,4 @@ class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     }
     onSelectedTabChanged = new TypedEvent();
 }
-export { DesignerTabControl };
 customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     div {
       font-size: 10px;
@@ -78,5 +78,4 @@ class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
         this._updateValue();
     }
 }
-export { ImageButtonListSelector };
 customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/MetricsEditor.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
+export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
 :host {
   justify-content: center;
@@ -122,5 +122,4 @@ span {
         }
     }
 }
-export { MetricsEditor };
 customElements.define('node-projects-metrics-editor', MetricsEditor);

package/dist/elements/controls/NumericPopup.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
     }
@@ -36,5 +36,4 @@ class NumericPopup extends BaseCustomWebComponentConstructorAppend {
     ready() {
     }
 }
-export { NumericPopup };
 customElements.define('node-projects-numeric-popup', NumericPopup);

package/dist/elements/controls/NumericStyleInput.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
+export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
     }
@@ -53,5 +53,4 @@ class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
     _updateValue() {
     }
 }
-export { NumericStyleInput };
 customElements.define('node-projects-numeric-style-input', NumericStyleInput);

package/dist/elements/controls/SimpleSplitView.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
       display: block;
@@ -64,5 +64,4 @@ class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
         });
     }
 }
-export { SimpleSplitView };
 customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/controls/ThicknessEditor.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
   :host {
     margin: 4px;
@@ -142,5 +142,4 @@ class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
         this._updateValue();
     }
 }
-export { ThicknessEditor };
 customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/documentContainer.js

@@ -157,12 +157,18 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this.demoView.executeCommand(command);
     }
     canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
-            return this.designerView?.canExecuteCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
-            return this.codeView?.canExecuteCommand(command);
-        else if (this._tabControl.selectedIndex === 3)
-            return this.demoView?.canExecuteCommand(command);
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2) {
+            if (this.designerView?.canExecuteCommand)
+                return this.designerView.canExecuteCommand(command);
+        }
+        else if (this._tabControl.selectedIndex === 1) {
+            if (this.codeView?.canExecuteCommand)
+                return this.codeView.canExecuteCommand(command);
+        }
+        else if (this._tabControl.selectedIndex === 3) {
+            if (this.demoView?.canExecuteCommand)
+                return this.demoView.canExecuteCommand(command);
+        }
         return false;
     }
     set content(value) {

package/dist/elements/helper/CssCombiner.js

@@ -1,4 +1,4 @@
-class CssCombiner {
+export class CssCombiner {
     static _helperElement = document.createElement('div');
     //todo: inset, flex flow, place content...
     //flex => flex-grow, flex-shrink, flex-basis
@@ -295,4 +295,3 @@ class CssCombiner {
         return true;
     }
 }
-export { CssCombiner };

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -1,5 +1,5 @@
 import { css } from "@node-projects/base-custom-webcomponent";
-class ContextMenu {
+export class ContextMenu {
     static _contextMenuCss = css `
 	  .context_menu {
 		position: fixed;
@@ -306,7 +306,6 @@ class ContextMenu {
         setTimeout(() => window.removeEventListener("contextmenu", this._windowDown), 10);
     }
 }
-export { ContextMenu };
 class ContextUtil {
     static getSizes(obj) {
         let lis = obj.getElementsByTagName('li');

package/dist/elements/item/DesignItem.js

@@ -13,7 +13,7 @@ import { cssFromString } from '@node-projects/base-custom-webcomponent';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
-class DesignItem {
+export class DesignItem {
     lastContainerSize;
     parsedNode;
     node;
@@ -462,4 +462,3 @@ class DesignItem {
         }
     }
 }
-export { DesignItem };

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -1,7 +1,7 @@
 import { BindingMode } from '../../item/BindingMode.js';
 import { BindingTarget } from "../../item/BindingTarget.js";
 import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
-class BaseCustomWebcomponentBindingsService {
+export class BaseCustomWebcomponentBindingsService {
     static type = 'base-custom-webcomponent-binding';
     getBindings(designItem) {
         let bindings = null;
@@ -71,4 +71,3 @@ class BaseCustomWebcomponentBindingsService {
         return true;
     }
 }
-export { BaseCustomWebcomponentBindingsService };

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -2,7 +2,7 @@ import { BindingTarget } from "../../item/BindingTarget.js";
 import { BindingMode } from "../../item/BindingMode.js";
 /* Service wich read binings from special HTMl elements -> like tag-binding */
 //TODO: refactor so we could use it
-class SpecialTagsBindingService {
+export class SpecialTagsBindingService {
     static type = 'visu-tagbinding-binding';
     _bindingTagName = "visu-tagbinding";
     _elementIdAttribute = "elemnt-id";
@@ -42,4 +42,3 @@ class SpecialTagsBindingService {
         return true;
     }
 }
-export { SpecialTagsBindingService };

package/dist/elements/services/copyPasteService/CopyPasteAsJsonService.d.ts

@@ -0,0 +1,9 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { ICopyPasteService } from "./ICopyPasteService.js";
+import { ServiceContainer } from '../ServiceContainer.js';
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IRect } from "../../../interfaces/IRect.js";
+export declare class CopyPasteAsJsonService implements ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
+}

package/dist/elements/services/copyPasteService/CopyPasteAsJsonService.js

@@ -0,0 +1,44 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
+export class CopyPasteAsJsonService {
+    async copyItems(designItems) {
+        const copyText = DomConverter.ConvertToString(designItems, false);
+        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+        let data = { html: copyText, positions: positions };
+        copyToClipboard([["application/json", JSON.stringify(data)]]);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        let data = '';
+        let html = '';
+        let positions = null;
+        const items = await getFromClipboard();
+        if (items != null) {
+            try {
+                data = await (await items[0].getType('text/html'))?.text();
+            }
+            catch { }
+            if (!data)
+                try {
+                    data = await (await items[0].getType('text/plain'))?.text();
+                }
+                catch { }
+            try {
+                data = await (await items[0].getType('application/json'))?.text();
+            }
+            catch { }
+        }
+        else {
+            data = await getTextFromClipboard();
+        }
+        if (data.startsWith('{')) {
+            let dataObj = JSON.parse(data);
+            html = dataObj.html;
+            positions = dataObj.positions;
+        }
+        else {
+            html = data;
+        }
+        const parserService = serviceContainer.htmlParserService;
+        return [await parserService.parse(html, serviceContainer, instanceServiceContainer, true), positions];
+    }
+}

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

@@ -1,5 +1,5 @@
 //needs InternalBindinsgStorrageService -> keeps bindings
-class LitTsElementWriterService {
+export class LitTsElementWriterService {
     write(indentedTextWriter, designItems, rootContainerKeepInline, options) {
         throw new Error('Method not implemented.');
     }
@@ -41,4 +41,3 @@ declare global {
   }
 }`;
 }
-export { LitTsElementWriterService };

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

@@ -1,6 +1,6 @@
 import { BasePropertyEditor } from './BasePropertyEditor.js';
 import { html } from '@node-projects/base-custom-webcomponent';
-class JsonPropertyEditor extends BasePropertyEditor {
+export class JsonPropertyEditor extends BasePropertyEditor {
     static template = html `
     <div style="display: flex;">
       <input id="input" type="text">
@@ -19,4 +19,3 @@ class JsonPropertyEditor extends BasePropertyEditor {
         this._input.value = value;
     }
 }
-export { JsonPropertyEditor };

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

@@ -1,5 +1,5 @@
 import { html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
+export class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <div style="display: flex;">
       <input id="input" type="text">
@@ -11,4 +11,3 @@ class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
         //codeview
     }
 }
-export { JsonPropertyPopupEditor };

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

@@ -14,6 +14,8 @@ if (window.importShim) {
 else
     //@ts-ignore
     cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+if (cssProperties.default)
+    cssProperties = cssProperties.default;
 const localName = '<local>';
 export class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {

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

@@ -14,6 +14,8 @@ if (window.importShim) {
 else
     //@ts-ignore
     cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+if (cssProperties.default)
+    cssProperties = cssProperties.default;
 export class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.none;

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -129,6 +129,9 @@ export class AbstractStylesheetService {
                     }
                 }
                 t += '{' + cssText + '}';
+                /*if (rule.cssRules) {
+                    t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+                }*/
             }
         }
         return t;

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameBindingObject } from '../../../Constants.js';
-class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
+export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     _treeDiv;
     _tree;
     static style = css `
@@ -104,5 +104,4 @@ class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-export { BindableObjectsBrowser };
 customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -12,7 +12,7 @@ export var valueType;
     valueType["number"] = "number";
     valueType["boolean"] = "boolean";
 })(valueType || (valueType = {}));
-class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     * { font-size: 16px; }
     .list { 
@@ -50,5 +50,4 @@ class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         super();
     }
 }
-export { BindingsEditor };
 customElements.define('node-projects-bindings-editor', BindingsEditor);

package/dist/elements/widgets/codeView/code-view-ace.js

@@ -14,7 +14,7 @@ class CodeViewAceCompleter {
         }
     }
 }
-class CodeViewAce extends BaseCustomWebComponentLazyAppend {
+export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
@@ -130,5 +130,4 @@ class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         this._aceEditor.scrollToLine(point1.row);
     }
 }
-export { CodeViewAce };
 customElements.define('node-projects-code-view-ace', CodeViewAce);

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType.js';
-class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
+export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
@@ -101,5 +101,4 @@ class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
         this._codeMirrorEditor.setSelection(point1, point2);
     }
 }
-export { CodeViewCodeMirror };
 customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType.js';
-class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
+export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     static _initalized;
     dispose() {
         this._monacoEditor?.dispose();
@@ -192,5 +192,4 @@ class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-export { CodeViewMonaco };
 customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

package/dist/elements/widgets/codeView/code-view-simple.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
+export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
     dispose() {
     }
     canvasElement;
@@ -52,5 +52,4 @@ class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
         this._text.setSelectionRange(position.start, position.start + position.length);
     }
 }
-export { CodeViewSimple };
 customElements.define('node-projects-code-view-simple', CodeViewSimple);

package/dist/elements/widgets/demoView/demoView.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-class DemoView extends BaseCustomWebComponentLazyAppend {
+export class DemoView extends BaseCustomWebComponentLazyAppend {
     _placeholder;
     _loading;
     static style = css `
@@ -39,5 +39,4 @@ class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.hidden = true;
     }
 }
-export { DemoView };
 customElements.define('node-projects-demo-view', DemoView);

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

@@ -23,12 +23,14 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     clickOverlay: HTMLDivElement;
     private _activeTool;
     gridSize: number;
+    pasteOffset: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;
     snapLines: Snaplines;
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
     eatEvents: Element;
+    private _currentPasteOffset;
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;

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

@@ -20,7 +20,7 @@ import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
 import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
-class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
+export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
     instanceServiceContainer;
@@ -30,12 +30,14 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _activeTool;
     // IPlacementView
     gridSize = 10;
+    pasteOffset = 10;
     alignOnGrid = false;
     alignOnSnap = true;
     snapLines;
     overlayLayer;
     rootDesignItem;
     eatEvents;
+    _currentPasteOffset = this.pasteOffset;
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
@@ -460,14 +462,17 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
     }
     async handleCopyCommand() {
+        this._currentPasteOffset = this.pasteOffset;
         this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection;
         await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand(disableRestoreOfPositions) {
         const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
+        let lastCopiedPrimaryItemBackup = this._lastCopiedPrimaryItem;
+        let nextPasteOffset = this._currentPasteOffset + this.pasteOffset;
         let pasteContainer = this.rootDesignItem;
-        let pCon = this._lastCopiedPrimaryItem?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
+        let pCon = lastCopiedPrimaryItemBackup?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
         while (pCon != null) {
             const containerStyle = getComputedStyle(pCon.element);
             let newContainerService;
@@ -490,8 +495,8 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 let pos = positions ? positions[i] : null;
                 this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
                 if (!disableRestoreOfPositions && pos && di.nodeType == NodeType.Element) {
-                    di.setStyle('left', (pos.x - containerPos.x + 10) + 'px');
-                    di.setStyle('top', (pos.y - containerPos.y + 10) + 'px');
+                    di.setStyle('left', (pos.x - containerPos.x + this._currentPasteOffset) + 'px');
+                    di.setStyle('top', (pos.y - containerPos.y + this._currentPasteOffset) + 'px');
                 }
             }
             const intializationService = this.serviceContainer.intializationService;
@@ -503,6 +508,8 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         grp.commit();
         this.snapLines.clearSnaplines();
+        this._lastCopiedPrimaryItem = lastCopiedPrimaryItemBackup;
+        this._currentPasteOffset = nextPasteOffset;
     }
     handleDeleteCommand() {
         let items = this.instanceServiceContainer.selectionService.selectedElements;
@@ -520,6 +527,7 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.instanceServiceContainer.register("selectionService", selectionService(this));
             this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
                 this._lastCopiedPrimaryItem = null;
+                this._currentPasteOffset = this.pasteOffset;
             });
         }
         const designItemDocumentPositionService = this.serviceContainer.getLastService('designItemDocumentPositionService');
@@ -782,6 +790,7 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return [newContainerElementDesignItem, newContainerService];
     }
     async _onDrop(event) {
+        this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._lastDdElement = null;
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
@@ -1161,5 +1170,4 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.canvasOffsetUnzoomed = newCanvasOffset;
     }
 }
-export { DesignerCanvas };
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -4,7 +4,7 @@ import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
 import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
-class DesignerView extends BaseCustomWebComponentConstructorAppend {
+export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     _sVert;
     _sHor;
     get serviceContainer() {
@@ -334,5 +334,4 @@ class DesignerView extends BaseCustomWebComponentConstructorAppend {
         return designerCanvas;
     }
 }
-export { DesignerView };
 customElements.define('node-projects-designer-view', DesignerView);

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -2,7 +2,7 @@ import { html } from "@node-projects/base-custom-webcomponent";
 import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
-class EditTextExtension extends AbstractExtension {
+export class EditTextExtension extends AbstractExtension {
     static template = html `
     <div style="height: 24px; display: flex;">
       <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
@@ -93,4 +93,3 @@ class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.focus();
     }
 }
-export { EditTextExtension };

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js

@@ -3,7 +3,7 @@ import { TextTool } from '../../tools/TextTool.js';
 import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
-class EditTextWithStyloExtension extends AbstractExtension {
+export class EditTextWithStyloExtension extends AbstractExtension {
     _contentEditedBound;
     _blurBound;
     static template = html `
@@ -85,4 +85,3 @@ class EditTextWithStyloExtension extends AbstractExtension {
         this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
     }
 }
-export { EditTextWithStyloExtension };

package/dist/elements/widgets/designerView/overlay/EditTextOverlay.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
+export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
     static style = css ``;
     static template = html `
     <div>
@@ -7,4 +7,3 @@ class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
     </div>
   `;
 }
-export { EditTextOverlay };

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

@@ -1,6 +1,6 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
-class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <svg id="svg" style="pointer-events: none;">
       <defs id="defs"></defs>
@@ -199,5 +199,4 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         return existingEls;
     }
 }
-export { OverlayLayerView };
 customElements.define(OverlayLayerView.is, OverlayLayerView);

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -6,7 +6,7 @@ import { CommandType } from "../../../../../commandHandling/CommandType.js";
 //import "./popups/DrawToolPopup.js";
 //import "./popups/SelectorToolsPopup.js";
 import { DesignerToolbarButton } from './DesignerToolbarButton.js';
-class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
+export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
     static style = css `
         node-projects-designer-tools-buttons {
             height: 100%;
@@ -83,5 +83,4 @@ class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
         this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
     }
 }
-export { DesignerToolbar };
 customElements.define('node-projects-designer-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
+export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     div {
       width: 24px;
@@ -59,5 +59,4 @@ class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-export { DesignerToolbarButton };
 customElements.define('node-projects-designer-toolbar-button', DesignerToolbarButton);

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -1,6 +1,6 @@
 import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
 import { assetsPath } from "../../../../../../Constants.js";
-class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
     static style = css `
       .container {
           width: 220px;
@@ -99,5 +99,4 @@ class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-export { DrawToolPopup };
 customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
-class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
+export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
     static style = css ``;
     static template = html `
         <div class="imgdiv">
@@ -18,5 +18,4 @@ class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-export { Html2CanvasMiniatureView };
 customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -1,7 +1,7 @@
 import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { DrawElementTool } from '../designerView/tools/DrawElementTool.js';
-class PaletteElements extends BaseCustomWebComponentLazyAppend {
+export class PaletteElements extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -79,27 +79,42 @@ class PaletteElements extends BaseCustomWebComponentLazyAppend {
                     }
                 }
                 else if (!elementDefintion.import) {
-                    let elem = document.createElement(elementDefintion.tag);
-                    if (elementDefintion.defaultContent)
-                        elem.innerHTML = elementDefintion.defaultContent;
-                    if (elementDefintion.defaultWidth)
-                        elem.style.width = elementDefintion.defaultWidth;
-                    if (elementDefintion.defaultHeight)
-                        elem.style.height = elementDefintion.defaultHeight;
-                    elem.style.position = "absolute";
-                    if (elementDefintion.defaultWidth)
-                        elem.style.top = "-" + (parseInt(elementDefintion.defaultHeight) + 500) + 'px';
-                    else
-                        elem.style.top = "-500px";
-                    if (elementDefintion.defaultWidth)
-                        elem.style.left = "-" + (parseInt(elementDefintion.defaultWidth) + 500) + 'px';
-                    else
-                        elem.style.left = "-500px";
-                    document.body.appendChild(elem);
-                    let rect = elem.getBoundingClientRect();
-                    if (rect.width > 0 && rect.height > 0)
-                        e.dataTransfer.setDragImage(elem, 0, 0);
-                    requestAnimationFrame(() => document.body.removeChild(elem));
+                    try {
+                        let elem = document.createElement(elementDefintion.tag);
+                        if (elementDefintion.defaultContent)
+                            elem.innerHTML = elementDefintion.defaultContent;
+                        if (elementDefintion.defaultWidth)
+                            elem.style.width = elementDefintion.defaultWidth;
+                        if (elementDefintion.defaultHeight)
+                            elem.style.height = elementDefintion.defaultHeight;
+                        if (elementDefintion.defaultAttributes) {
+                            for (let a in elementDefintion.defaultAttributes) {
+                                elem.setAttribute(a, elementDefintion.defaultAttributes[a]);
+                            }
+                        }
+                        if (elementDefintion.defaultStyles) {
+                            for (let s in elementDefintion.defaultStyles) {
+                                elem.style[s] = elementDefintion.defaultStyles[s];
+                            }
+                        }
+                        elem.style.position = "absolute";
+                        if (elementDefintion.defaultWidth)
+                            elem.style.top = "-" + (parseInt(elementDefintion.defaultHeight) + 500) + 'px';
+                        else
+                            elem.style.top = "-500px";
+                        if (elementDefintion.defaultWidth)
+                            elem.style.left = "-" + (parseInt(elementDefintion.defaultWidth) + 500) + 'px';
+                        else
+                            elem.style.left = "-500px";
+                        document.body.appendChild(elem);
+                        let rect = elem.getBoundingClientRect();
+                        if (rect.width > 0 && rect.height > 0)
+                            e.dataTransfer.setDragImage(elem, 0, 0);
+                        requestAnimationFrame(() => document.body.removeChild(elem));
+                    }
+                    catch (err) {
+                        console.warn("error creating gost elment", err);
+                    }
                 }
             };
             button.ondragend = (e) => {
@@ -121,5 +136,4 @@ class PaletteElements extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-export { PaletteElements };
 customElements.define('node-projects-palette-elements', PaletteElements);

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -1,6 +1,6 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
-class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
+export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
     _filter;
@@ -134,5 +134,4 @@ class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-export { PaletteTreeView };
 customElements.define('node-projects-palette-tree-view', PaletteTreeView);

package/dist/elements/widgets/paletteView/paletteView.js

@@ -2,7 +2,7 @@ import '../../controls/DesignerTabControl.js';
 import { PaletteElements } from './paletteElements.js';
 import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-class PaletteView extends BaseCustomWebComponentLazyAppend {
+export class PaletteView extends BaseCustomWebComponentLazyAppend {
     selected = 'native';
     _designerTabControl;
     static style = css `
@@ -35,5 +35,4 @@ class PaletteView extends BaseCustomWebComponentLazyAppend {
         this._designerTabControl.refreshItems();
     }
 }
-export { PaletteView };
 customElements.define('node-projects-palette-view', PaletteView);

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

@@ -2,7 +2,7 @@ import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
 import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
-class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _designerTabControl;
     _selectedItems;
@@ -109,5 +109,4 @@ class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
     }
 }
-export { PropertyGrid };
 customElements.define('node-projects-property-grid', PropertyGrid);

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

@@ -1,7 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
 import { NodeType } from '../../item/NodeType.js';
-class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -114,5 +114,4 @@ class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-export { PropertyGridWithHeader };
 customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);

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

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { DesignItem } from '../../item/DesignItem.js';
-class TreeView extends BaseCustomWebComponentLazyAppend {
+export class TreeView extends BaseCustomWebComponentLazyAppend {
     _items;
     _index;
     _previouslySelected;
@@ -239,5 +239,4 @@ class TreeView extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-export { TreeView };
 customElements.define('node-projects-tree-view', TreeView);

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

@@ -4,7 +4,7 @@ import { assetsPath } from '../../../Constants.js';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { switchContainer } from '../../helper/SwitchContainerHelper.js';
 import { DomConverter } from '../designerView/DomConverter.js';
-class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
+export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
     _filter;
@@ -363,5 +363,4 @@ class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         });
     }
 }
-export { TreeViewExtended };
 customElements.define('node-projects-tree-view-extended', TreeViewExtended);

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from "./elements/services/contentService/ContentService.js";
 export type { IContentChanged } from "./elements/services/contentService/IContentChanged.js";
 export type { IContentService } from "./elements/services/contentService/IContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
+export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";

package/dist/index.js

@@ -26,6 +26,7 @@ export * from "./elements/services/placementService/SnaplinesProviderService.js"
 export * from "./elements/services/elementAtPointService/ElementAtPointService.js";
 export * from "./elements/services/contentService/ContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
+export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.235",
+  "version": "0.0.237",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -21,12 +21,12 @@
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.1.5",
     "@papyrs/stylo": "^0.0.45",
-    "@types/codemirror": "^5.60.7",
+    "@types/codemirror": "^5.60.8",
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.2.1",
-    "ace-builds": "^1.21.1",
+    "@types/node": "^20.3.1",
+    "ace-builds": "^1.22.1",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
@@ -35,9 +35,9 @@
     "jquery": "^3.7.0",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.32",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "^0.39.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.3",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {