@node-projects/web-component-designer 0.0.155 → 0.0.157

package/dist/commandHandling/IUiCommand.d.ts

@@ -1,4 +1,4 @@
-import { CommandType } from "./CommandType";
+import { CommandType } from './CommandType.js';
 export interface IUiCommand {
     type: CommandType;
     special?: string;

package/dist/commandHandling/IUiCommandHandler.d.ts

@@ -1,4 +1,4 @@
-import { IUiCommand } from './IUiCommand';
+import { IUiCommand } from './IUiCommand.js';
 export interface IUiCommandHandler {
     executeCommand: (command: IUiCommand) => void;
     canExecuteCommand: (command: IUiCommand) => boolean;

package/dist/elements/documentContainer.d.ts

@@ -1,12 +1,12 @@
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { DesignerView } from "./widgets/designerView/designerView";
-import { ServiceContainer } from "./services/ServiceContainer";
-import { InstanceServiceContainer } from "./services/InstanceServiceContainer";
-import { ICodeView } from '../elements/widgets/codeView/ICodeView';
-import { IDemoView } from './widgets/demoView/IDemoView';
-import { IUiCommandHandler } from "../commandHandling/IUiCommandHandler";
-import { IUiCommand } from "../commandHandling/IUiCommand";
-import { IDisposable } from "../interfaces/IDisposable";
+import { DesignerView } from './widgets/designerView/designerView.js';
+import { ServiceContainer } from './services/ServiceContainer.js';
+import { InstanceServiceContainer } from './services/InstanceServiceContainer.js';
+import { ICodeView } from './widgets/codeView/ICodeView.js';
+import { IDemoView } from './widgets/demoView/IDemoView.js';
+import { IUiCommandHandler } from '../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../commandHandling/IUiCommand.js';
+import { IDisposable } from '../interfaces/IDisposable.js';
 import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
 export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
     designerView: DesignerView;

package/dist/elements/documentContainer.js

@@ -1,7 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { DesignerTabControl } from "./controls/DesignerTabControl";
-import { DesignerView } from "./widgets/designerView/designerView";
-import { SimpleSplitView } from './controls/SimpleSplitView';
+import { DesignerTabControl } from './controls/DesignerTabControl.js';
+import { DesignerView } from './widgets/designerView/designerView.js';
+import { SimpleSplitView } from './controls/SimpleSplitView.js';
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;

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

@@ -1,5 +1,6 @@
-import { IDesignerCanvas, IDesignItem } from "../..";
-import { Orientation } from "../../enums/Orientation";
+import { Orientation } from '../../enums/Orientation.js';
+import { IDesignItem } from '../item/IDesignItem.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 export declare abstract class ArrangeHelper {
     static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas, arrangeElements: IDesignItem[]): void;
     private static arrange;

package/dist/elements/helper/ArrangeHelper.js

@@ -1,4 +1,4 @@
-import { Orientation } from "../../enums/Orientation";
+import { Orientation } from '../../enums/Orientation.js';
 export class ArrangeHelper {
     static arrangeElements(orientation, designerCanvas, arrangeElements) {
         switch (orientation) {

package/dist/elements/helper/ElementHelper.js

@@ -11,12 +11,18 @@ export var ElementDisplayType;
     ElementDisplayType[ElementDisplayType["block"] = 2] = "block";
 })(ElementDisplayType || (ElementDisplayType = {}));
 export function isInline(element) {
+    if (element instanceof SVGElement)
+        return false;
     return element != null && window.getComputedStyle(element).display.startsWith('inline');
 }
 export function isInlineAfter(element) {
-    return element != null && window.getComputedStyle(element).display == 'inline';
+    if (element instanceof SVGElement)
+        return false;
+    return element != null && window.getComputedStyle(element).display.startsWith('inline');
 }
 export function getElementDisplaytype(element) {
+    if (element instanceof SVGElement)
+        return ElementDisplayType.block;
     const display = window.getComputedStyle(element).display;
     return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
 }
@@ -44,12 +50,16 @@ export function getParentElementIncludingSlots(element) {
     return element.parentElement;
 }
 export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element) {
-    var offsetLeft = 0;
-    var offsetTop = 0;
+    let offsetLeft = 0;
+    let offsetTop = 0;
     while (element) {
         if (element instanceof SVGSVGElement) {
+            //todo - fix without transformation
+            let t = element.style.transform;
+            element.style.transform = '';
             const bcEl = element.getBoundingClientRect();
             const bcPar = element.parentElement.getBoundingClientRect();
+            element.style.transform = t;
             offsetLeft += bcEl.left - bcPar.left;
             offsetTop += bcEl.top - bcPar.top;
             element = element.parentElement;
@@ -58,7 +68,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             let bbox = element.getBBox();
             offsetLeft += bbox.x;
             offsetTop += bbox.y;
-            element = element.parentElement;
+            element = element.ownerSVGElement;
         }
         else {
             offsetLeft += element.offsetLeft;

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

@@ -1,4 +1,4 @@
-import { ITextWriter } from './ITextWriter';
+import { ITextWriter } from './ITextWriter.js';
 export declare class IndentedTextWriter implements ITextWriter {
     private _textHolder;
     readonly indent: number;

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

@@ -1,4 +1,4 @@
-import { ITextWriter } from './ITextWriter';
+import { ITextWriter } from './ITextWriter.js';
 export declare class SimpleTextWriter implements ITextWriter {
     private _textHolder;
     get position(): number;

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

@@ -0,0 +1 @@
+export declare function isVisualSvgElement(element: SVGElement): boolean;

package/dist/elements/helper/SvgHelper.js

@@ -0,0 +1,13 @@
+export function isVisualSvgElement(element) {
+    let el = element;
+    while (el) {
+        if (el instanceof SVGSVGElement)
+            return true;
+        if (el instanceof SVGDefsElement)
+            return false;
+        if (el instanceof SVGMetadataElement)
+            return false;
+        el = el.parentElement;
+    }
+    return true;
+}

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

@@ -1,2 +1,2 @@
-import { IDesignItem } from "../item/IDesignItem";
+import { IDesignItem } from '../item/IDesignItem.js';
 export declare function switchContainer(items: IDesignItem[], newContainer: IDesignItem, resizeNewContainer?: boolean, newContainerOffset?: number): void;

package/dist/elements/helper/TransformHelper.js

@@ -96,15 +96,18 @@ export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransfo
 export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor) {
     let actualElement = element;
     let actualElementMatrix;
+    let newElementMatrix;
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor) {
         const newElement = getParentElementIncludingSlots(actualElement);
         actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
+        newElementMatrix = new DOMMatrix(getComputedStyle(newElement).transform);
+        newElementMatrix.m41 = newElementMatrix.m42 = 0;
         if (actualElement == element) {
-            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(new DOMMatrix(getComputedStyle(newElement).transform));
+            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
         }
         else if (newElement != ancestor || !excludeAncestor) {
-            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(new DOMMatrix(getComputedStyle(newElement).transform));
+            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
         }
         actualElement = newElement;
     }
@@ -118,8 +121,10 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
         const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
-        parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
-        parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+        if (actualElement == element) {
+            parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
+            parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+        }
         const parentElementTransformOriginToPointVector = new DOMPointReadOnly(-parentElementTransformOrigin.x + (element == actualElement ? point.x : byParentTransformedPointRelatedToCanvas.x), -parentElementTransformOrigin.y + (element == actualElement ? point.y : byParentTransformedPointRelatedToCanvas.y));
         parentElementTransformOriginToPointVectorTransformed = parentElementTransformOriginToPointVector.matrixTransform(new DOMMatrix(getComputedStyle(parentElement).transform));
         byParentTransformedPointRelatedToCanvas = new DOMPoint(parentElementTransformOrigin.x + parentElementTransformOriginToPointVectorTransformed.x, parentElementTransformOrigin.y + parentElementTransformOriginToPointVectorTransformed.y);

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "./IContextMenuItem";
+import { IContextMenuItem } from './IContextMenuItem.js';
 export interface IContextMenuOptions {
     defaultIcon?: string;
     subIcon?: string;

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

@@ -1,5 +1,5 @@
 import { css } from "@node-projects/base-custom-webcomponent";
-import { sleep } from "../Helper";
+import { sleep } from '../Helper.js';
 export class ContextMenu {
     static _contextMenuCss = css `
 	  .context_menu {

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

@@ -1,10 +1,10 @@
-import { ServiceContainer } from '../services/ServiceContainer';
-import { IDesignItem } from './IDesignItem';
-import { InstanceServiceContainer } from '../services/InstanceServiceContainer';
-import { ChangeGroup } from '../services/undoService/ChangeGroup';
-import { NodeType } from './NodeType';
-import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
-import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension';
+import { ServiceContainer } from '../services/ServiceContainer.js';
+import { IDesignItem } from './IDesignItem.js';
+import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
+import { ChangeGroup } from '../services/undoService/ChangeGroup.js';
+import { NodeType } from './NodeType.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from '../../interfaces/ISize.js';
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
@@ -15,10 +15,20 @@ export declare class DesignItem implements IDesignItem {
     clone(): Promise<IDesignItem>;
     replaceNode(newNode: Node): void;
     get nodeType(): NodeType;
+    private _attributes;
     get hasAttributes(): boolean;
-    attributes: Map<string, string>;
+    hasAttribute(name: string): boolean;
+    getAttribute(name: string): string;
+    attributes(): Generator<[string, string], void, unknown>;
+    _withoutUndoSetAttribute(name: string, value: string): void;
+    _withoutUndoRemoveAttribute(name: string): void;
+    private _styles;
     get hasStyles(): boolean;
-    styles: Map<string, string>;
+    hasStyle(name: string): boolean;
+    getStyle(name: string): string;
+    styles(): Generator<[string, string], void, unknown>;
+    _withoutUndoSetStyle(name: string, value: string): void;
+    _withoutUndoRemoveStyle(name: string): void;
     private static _designItemMap;
     get element(): Element;
     get name(): string;

package/dist/elements/item/DesignItem.js

@@ -1,12 +1,12 @@
-import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
-import { NodeType } from './NodeType';
-import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
-import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
+import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction.js';
+import { NodeType } from './NodeType.js';
+import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
-import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction';
-import { DeleteAction } from '../..';
-import { DomConverter } from '../widgets/designerView/DomConverter';
+import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
+import { DomConverter } from '../widgets/designerView/DomConverter.js';
+import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -33,14 +33,48 @@ export class DesignItem {
             return NodeType.TextNode;
         return NodeType.Element;
     }
+    _attributes;
     get hasAttributes() {
-        return this.attributes.size > 0;
+        return this._attributes.size > 0;
     }
-    attributes;
+    hasAttribute(name) {
+        return this._attributes.has(name);
+    }
+    getAttribute(name) {
+        return this._attributes.get(name);
+    }
+    *attributes() {
+        for (let s of this._attributes) {
+            yield s;
+        }
+    }
+    _withoutUndoSetAttribute(name, value) {
+        this._attributes.set(name, value);
+    }
+    _withoutUndoRemoveAttribute(name) {
+        this._attributes.delete(name);
+    }
+    _styles;
     get hasStyles() {
-        return this.styles.size > 0;
+        return this._styles.size > 0;
+    }
+    hasStyle(name) {
+        return this._styles.has(name);
+    }
+    getStyle(name) {
+        return this._styles.get(name);
+    }
+    *styles() {
+        for (let s of this._styles) {
+            yield s;
+        }
+    }
+    _withoutUndoSetStyle(name, value) {
+        this._styles.set(name, value);
+    }
+    _withoutUndoRemoveStyle(name) {
+        this._styles.delete(name);
     }
-    styles;
     static _designItemMap = new WeakMap();
     get element() {
         return this.node;
@@ -140,12 +174,12 @@ export class DesignItem {
     set hideAtDesignTime(value) {
         this._hideAtDesignTime = value;
         if (value)
-            this.attributes.set(hideAtDesignTimeAttributeName, "");
+            this._attributes.set(hideAtDesignTimeAttributeName, "");
         else
-            this.attributes.delete(hideAtDesignTimeAttributeName);
+            this._attributes.delete(hideAtDesignTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
-                this.element.style.display = this.styles.get('display') ?? "";
+                this.element.style.display = this._styles.get('display') ?? "";
             else
                 this.element.style.display = 'none';
         }
@@ -157,12 +191,12 @@ export class DesignItem {
     set hideAtRunTime(value) {
         this._hideAtRunTime = value;
         if (value)
-            this.attributes.set(hideAtRunTimeAttributeName, "");
+            this._attributes.set(hideAtRunTimeAttributeName, "");
         else
-            this.attributes.delete(hideAtRunTimeAttributeName);
+            this._attributes.delete(hideAtRunTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
-                this.element.style.opacity = this.styles.get('opacity') ?? "";
+                this.element.style.opacity = this._styles.get('opacity') ?? "";
             else
                 this.element.style.opacity = '0.3';
         }
@@ -174,9 +208,9 @@ export class DesignItem {
     set lockAtDesignTime(value) {
         this._lockAtDesignTime = value;
         if (value)
-            this.attributes.set(lockAtDesignTimeAttributeName, "");
+            this._attributes.set(lockAtDesignTimeAttributeName, "");
         else
-            this.attributes.delete(lockAtDesignTimeAttributeName);
+            this._attributes.delete(lockAtDesignTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
                 this.element.style.pointerEvents = 'auto';
@@ -189,7 +223,7 @@ export class DesignItem {
         if (designItem.nodeType == NodeType.Element) {
             for (let a of designItem.element.attributes) {
                 if (a.name !== 'style') {
-                    designItem.attributes.set(a.name, a.value);
+                    designItem._attributes.set(a.name, a.value);
                     if (a.name === hideAtDesignTimeAttributeName)
                         designItem._hideAtDesignTime = true;
                     if (a.name === hideAtRunTimeAttributeName)
@@ -204,7 +238,7 @@ export class DesignItem {
                 if (st) {
                     cssParser.parse(st);
                     for (let e of cssParser.entries) {
-                        designItem.styles.set(e.name, e.value);
+                        designItem._styles.set(e.name, e.value);
                     }
                 }
                 if (!designItem._lockAtDesignTime) {
@@ -230,8 +264,8 @@ export class DesignItem {
         this.node = node;
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = instanceServiceContainer;
-        this.attributes = new Map();
-        this.styles = new Map();
+        this._attributes = new Map();
+        this._styles = new Map();
         DesignItem._designItemMap.set(node, this);
     }
     openGroup(title) {
@@ -257,20 +291,20 @@ export class DesignItem {
     }
     setStyle(name, value) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        const action = new CssStyleChangeAction(this, nm, value, this.styles.get(nm));
+        const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeStyle(name) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        const action = new CssStyleChangeAction(this, nm, '', this.styles.get(nm));
+        const action = new CssStyleChangeAction(this, nm, '', this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     setAttribute(name, value) {
-        const action = new AttributeChangeAction(this, name, value, this.attributes.get(name));
+        const action = new AttributeChangeAction(this, name, value, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeAttribute(name) {
-        const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
+        const action = new AttributeChangeAction(this, name, null, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
     // Internal implementations wich don't use undo/redo
@@ -289,6 +323,7 @@ export class DesignItem {
             this.node.insertBefore(designItem.node, el.element);
             this._childArray.splice(index, 0, designItem);
         }
+        //todo: is this still needed???
         if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
             designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
     }

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

@@ -1,5 +1,5 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
+import { BindingMode } from './BindingMode.js';
+import { BindingTarget } from './BindingTarget.js';
 export interface IBinding {
     targetName?: string;
     target?: BindingTarget;

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

@@ -1,9 +1,9 @@
-import { ServiceContainer } from "../services/ServiceContainer";
-import { InstanceServiceContainer } from '../services/InstanceServiceContainer';
-import { ChangeGroup } from "../services/undoService/ChangeGroup";
-import { NodeType } from './NodeType';
-import { ExtensionType } from "../widgets/designerView/extensions/ExtensionType";
-import { IDesignerExtension } from "../widgets/designerView/extensions/IDesignerExtension";
+import { ServiceContainer } from '../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
+import { ChangeGroup } from '../services/undoService/ChangeGroup.js';
+import { NodeType } from './NodeType.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from "../../interfaces/ISize.js";
 export interface IDesignItem {
     lastContainerSize: ISize;
@@ -14,9 +14,7 @@ export interface IDesignItem {
     id: string;
     readonly isRootItem: boolean;
     readonly hasAttributes: boolean;
-    readonly attributes: Map<string, string>;
     readonly hasStyles: boolean;
-    readonly styles: Map<string, string>;
     readonly hasChildren: boolean;
     children(): IterableIterator<IDesignItem>;
     readonly childCount: number;
@@ -24,6 +22,10 @@ export interface IDesignItem {
     readonly parent: IDesignItem;
     _insertChildInternal(designItem: IDesignItem, index?: number): any;
     _removeChildInternal(designItem: IDesignItem): any;
+    _withoutUndoSetStyle(name: string, value: string): any;
+    _withoutUndoRemoveStyle(name: string): any;
+    _withoutUndoSetAttribute(name: string, value: string): any;
+    _withoutUndoRemoveAttribute(name: string): any;
     indexOf(designItem: IDesignItem): number;
     insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): any;
     insertChild(designItem: IDesignItem, index?: number): any;
@@ -42,8 +44,14 @@ export interface IDesignItem {
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string): ChangeGroup;
+    styles(): Iterable<[name: string, value: string]>;
+    getStyle(name: string): any;
+    hasStyle(name: string): any;
     setStyle(name: string, value?: string | null): any;
     removeStyle(name: string): any;
+    attributes(): Iterable<[name: string, value: string]>;
+    getAttribute(name: string): any;
+    hasAttribute(name: string): any;
     setAttribute(name: string, value?: string | null): any;
     removeAttribute(name: string): any;
     hideAtDesignTime: boolean;

package/dist/elements/loader/OldCustomElementsManifestLoader.d.ts

@@ -1,4 +1,4 @@
-import { ServiceContainer } from '../services/ServiceContainer';
+import { ServiceContainer } from '../services/ServiceContainer.js';
 export declare class OldCustomElementsManifestLoader {
     static loadManifest(serviceContainer: ServiceContainer, nodeModule: string, options?: {
         name?: string;

package/dist/elements/loader/OldCustomElementsManifestLoader.js

@@ -1,6 +1,6 @@
 import { LazyLoader } from '@node-projects/base-custom-webcomponent';
-import { PreDefinedElementsService } from '../services/elementsService/PreDefinedElementsService';
-import { ListPropertiesService } from '../services/propertiesService/services/ListPropertiesService';
+import { PreDefinedElementsService } from '../services/elementsService/PreDefinedElementsService.js';
+import { ListPropertiesService } from '../services/propertiesService/services/ListPropertiesService.js';
 export class OldCustomElementsManifestLoader {
     static async loadManifest(serviceContainer, nodeModule, options) {
         const nodePath = './node_modules/';

package/dist/elements/services/BaseServiceContainer.d.ts

@@ -1,4 +1,4 @@
-import { IService } from './IService';
+import { IService } from './IService.js';
 export declare class BaseServiceContainer<NameMap> {
     protected _services: Map<string, IService[]>;
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -37,16 +37,16 @@ import { AltToEnterContainerExtensionProvider } from '../widgets/designerView/ex
 import { InvisibleDivExtensionProvider } from '../widgets/designerView/extensions/InvisibleDivExtensionProvider.js';
 import { ItemsBelowContextMenu } from '../widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js';
 import { GridPlacementService } from './placementService/GridPlacementService.js';
-import { ElementAtPointService } from './elementAtPointService/ElementAtPointService';
-import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService';
-import { SnaplinesProviderService } from './placementService/SnaplinesProviderService';
-import { DragDropService } from './dragDropService/DragDropService';
+import { ElementAtPointService } from './elementAtPointService/ElementAtPointService.js';
+import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService.js';
+import { SnaplinesProviderService } from './placementService/SnaplinesProviderService.js';
+import { DragDropService } from './dragDropService/DragDropService.js';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
-import { CopyPasteService } from './copyPasteService/CopyPasteService';
-import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService';
-import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
-import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
-import { DemoProviderService } from './demoProviderService/DemoProviderService';
+import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
+import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
+import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider.js';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.js';
+import { DemoProviderService } from './demoProviderService/DemoProviderService.js';
 //import { CursorLinePointerExtensionProvider } from '../widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
@@ -57,7 +57,7 @@ import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/
 import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js';
 import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js';
 import { RotateLeftAndRight } from '../widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js';
-import { SelectAllChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu';
+import { SelectAllChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js';
 import { PointerToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js';
 import { SeperatorToolProvider } from '../widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js';
 import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js';

package/dist/elements/services/GlobalContext.d.ts

@@ -1,6 +1,6 @@
 import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { ITool } from "../widgets/designerView/tools/ITool";
-import { ServiceContainer } from './ServiceContainer';
+import { ITool } from '../widgets/designerView/tools/ITool.js';
+import { ServiceContainer } from './ServiceContainer.js';
 export declare class GlobalContext {
     private _serviceContainer;
     private _tool;

package/dist/elements/services/InstanceServiceContainer.d.ts

@@ -1,8 +1,8 @@
-import { ISelectionService } from './selectionService/ISelectionService';
-import { IUndoService } from './undoService/IUndoService';
-import { BaseServiceContainer } from './BaseServiceContainer';
-import { IContentService } from './contentService/IContentService';
-import { IDesignContext } from '../widgets/designerView/IDesignContext';
+import { ISelectionService } from './selectionService/ISelectionService.js';
+import { IUndoService } from './undoService/IUndoService.js';
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { IContentService } from './contentService/IContentService.js';
+import { IDesignContext } from '../widgets/designerView/IDesignContext.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 interface InstanceServiceNameMap {
     "undoService": IUndoService;

package/dist/elements/services/InstanceServiceContainer.js

@@ -1,5 +1,5 @@
-import { BaseServiceContainer } from './BaseServiceContainer';
-import { DesignContext } from '../widgets/designerView/DesignContext';
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { DesignContext } from '../widgets/designerView/DesignContext.js';
 export class InstanceServiceContainer extends BaseServiceContainer {
     designContext = new DesignContext();
     designerCanvas;