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

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

@@ -1,24 +1,24 @@
-import { IPropertiesService } from "./propertiesService/IPropertiesService";
-import { IPlacementService } from './placementService/IPlacementService';
-import { IElementsService } from './elementsService/IElementsService';
-import { IInstanceService } from './instanceService/IInstanceService';
-import { IEditorTypesService } from './propertiesService/IEditorTypesService';
-import { BaseServiceContainer } from './BaseServiceContainer';
-import { IHtmlWriterService } from './htmlWriterService/IHtmlWriterService';
-import { ICodeView } from "../widgets/codeView/ICodeView";
-import { IHtmlParserService } from "./htmlParserService/IHtmlParserService";
-import { IIntializationService } from "./initializationService/IIntializationService";
-import { IDemoView } from '../widgets/demoView/IDemoView';
-import { ITool } from "../widgets/designerView/tools/ITool";
-import { ExtensionType } from "../widgets/designerView/extensions/ExtensionType";
-import { IDesignerExtensionProvider } from "../widgets/designerView/extensions/IDesignerExtensionProvider";
-import { NamedTools } from "../widgets/designerView/tools/NamedTools";
-import { IContextMenuExtension } from "../widgets/designerView/extensions/contextMenu/IContextMenuExtension";
-import { GlobalContext } from './GlobalContext';
-import { IBindingService } from "./bindingsService/IBindingService";
-import { IElementAtPointService } from './elementAtPointService/IElementAtPointService';
+import { IPropertiesService } from './propertiesService/IPropertiesService.js';
+import { IPlacementService } from './placementService/IPlacementService.js';
+import { IElementsService } from './elementsService/IElementsService.js';
+import { IInstanceService } from './instanceService/IInstanceService.js';
+import { IEditorTypesService } from './propertiesService/IEditorTypesService.js';
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { IHtmlWriterService } from './htmlWriterService/IHtmlWriterService.js';
+import { ICodeView } from '../widgets/codeView/ICodeView.js';
+import { IHtmlParserService } from './htmlParserService/IHtmlParserService.js';
+import { IIntializationService } from './initializationService/IIntializationService.js';
+import { IDemoView } from '../widgets/demoView/IDemoView.js';
+import { ITool } from '../widgets/designerView/tools/ITool.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
+import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
+import { IContextMenuExtension } from '../widgets/designerView/extensions/contextMenu/IContextMenuExtension.js';
+import { GlobalContext } from './GlobalContext.js';
+import { IBindingService } from './bindingsService/IBindingService.js';
+import { IElementAtPointService } from './elementAtPointService/IElementAtPointService.js';
 import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
-import { IDragDropService } from './dragDropService/IDragDropService';
+import { IDragDropService } from './dragDropService/IDragDropService.js';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
@@ -27,12 +27,12 @@ import { IDemoProviderService } from "./demoProviderService/IDemoProviderService
 import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";
 import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
-import { IElementInteractionService } from './elementInteractionService/IElementInteractionService';
+import { IElementInteractionService } from './elementInteractionService/IElementInteractionService.js';
 import { IProperty } from "./propertiesService/IProperty.js";
 import { IDesignItem } from "../item/IDesignItem.js";
-import { IBinding } from "../item/IBinding";
-import { BindingTarget } from "../item/BindingTarget";
-import { IPropertyGroupsService } from "./propertiesService/IPropertyGroupsService";
+import { IBinding } from '../item/IBinding.js';
+import { BindingTarget } from '../item/BindingTarget.js';
+import { IPropertyGroupsService } from './propertiesService/IPropertyGroupsService.js';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -67,6 +67,9 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
+    readonly options: {
+        zoomDesignerBackground: boolean;
+    };
     readonly designerTools: Map<string | NamedTools, ITool>;
     get bindingService(): IBindingService;
     get bindableObjectsServices(): IBindableObjectsService[];

package/dist/elements/services/ServiceContainer.js

@@ -1,7 +1,7 @@
-import { BaseServiceContainer } from './BaseServiceContainer';
-import { DemoView } from '../widgets/demoView/demoView';
-import { GlobalContext } from './GlobalContext';
-import { CodeViewSimple } from "../widgets/codeView/code-view-simple";
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { DemoView } from '../widgets/demoView/demoView.js';
+import { GlobalContext } from './GlobalContext.js';
+import { CodeViewSimple } from '../widgets/codeView/code-view-simple.js';
 export class ServiceContainer extends BaseServiceContainer {
     config = {
         codeViewWidget: CodeViewSimple,
@@ -21,6 +21,9 @@ export class ServiceContainer extends BaseServiceContainer {
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
+    options = {
+        zoomDesignerBackground: true
+    };
     designerTools = new Map();
     get bindingService() {
         return this.getLastService('bindingService');

package/dist/elements/services/bindableObjectsService/IBindableObject.d.ts

@@ -1,4 +1,4 @@
-import { BindableObjectType } from "./BindableObjectType";
+import { BindableObjectType } from './BindableObjectType.js';
 export interface IBindableObject<T> {
     readonly type: BindableObjectType;
     readonly name: string;

package/dist/elements/services/bindableObjectsService/IBindableObjectsService.d.ts

@@ -1,4 +1,4 @@
-import { IBindableObject } from "./IBindableObject";
+import { IBindableObject } from './IBindableObject.js';
 export interface IBindableObjectsService {
     readonly name: string;
     getBindableObject(fullName: string): Promise<IBindableObject<any>>;

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.d.ts

@@ -1,6 +1,6 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from '../../item/IBinding';
-import { IBindingService } from "./IBindingService";
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { IBindingService } from './IBindingService.js';
 import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
     static type: string;

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

@@ -1,11 +1,11 @@
-import { BindingMode } from '../../item/BindingMode';
+import { BindingMode } from '../../item/BindingMode.js';
 import { BindingTarget } from "../../item/BindingTarget.js";
-import { PropertiesHelper } from "../propertiesService/services/PropertiesHelper";
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
 export class BaseCustomWebcomponentBindingsService {
     static type = 'base-custom-webcomponent-binding';
     getBindings(designItem) {
         let bindings = null;
-        for (let a of designItem.attributes) {
+        for (let a of designItem.attributes()) {
             const name = a[0];
             const value = a[1];
             if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {

package/dist/elements/services/bindingsService/IBindingService.d.ts

@@ -1,6 +1,6 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "../../item/IBinding";
-import { BindingTarget } from "../../item/BindingTarget";
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { BindingTarget } from '../../item/BindingTarget.js';
 /**
  * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
  * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the

package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts

@@ -1,6 +1,6 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "../../item/IBinding";
-import { IBindingService } from "./IBindingService";
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { IBindingService } from './IBindingService.js';
 import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class SpecialTagsBindingService implements IBindingService {
     static type: string;

package/dist/elements/services/contentService/ContentService.d.ts

@@ -1,6 +1,6 @@
-import { IContentService } from './IContentService';
+import { IContentService } from './IContentService.js';
 import { IContentChanged } from './IContentChanged';
-import { IDesignItem } from '../../item/IDesignItem';
+import { IDesignItem } from '../../item/IDesignItem.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export declare class ContentService implements IContentService {
     constructor(rootElement: IDesignItem);

package/dist/elements/services/contentService/IContentChanged.d.ts

@@ -1,5 +1,10 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-export interface IContentChanged {
-    changeType: "added" | "removed" | "moved" | 'parsed';
-    designItems?: IDesignItem[];
+interface IContentChangedParsed {
+    changeType: 'parsed';
 }
+interface IContentChangedWithDesignItems {
+    changeType: "added" | "removed" | "moved";
+    designItems: IDesignItem[];
+}
+export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems;
+export {};

package/dist/elements/services/contentService/IContentService.d.ts

@@ -1,5 +1,5 @@
-import { IContentChanged } from './IContentChanged';
-import { IDesignItem } from '../../item/IDesignItem';
+import { IContentChanged } from './IContentChanged.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface IContentService {
     readonly onContentChanged: TypedEvent<IContentChanged>;

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

@@ -1,7 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
 import { ICopyPasteService } from "./ICopyPasteService.js";
-import { ServiceContainer } from '../ServiceContainer';
-import { InstanceServiceContainer } from '../InstanceServiceContainer';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
 import { IRect } from "../../../interfaces/IRect.js";
 export declare const positionsJsonMime = "web text/positions";
 export declare class CopyPasteService implements ICopyPasteService {

package/dist/elements/services/dragDropService/DragDropService.js

@@ -1,4 +1,4 @@
-import { DesignItem } from '../../item/DesignItem';
+import { DesignItem } from '../../item/DesignItem.js';
 import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
 export class DragDropService {
     dragOver(event) {

package/dist/elements/services/elementAtPointService/ElementAtPointService.d.ts

@@ -1,6 +1,6 @@
-import { IElementAtPointService } from './IElementAtPointService';
-import { IDesignerCanvas } from '../../..';
-import { IPoint } from '../../../interfaces/IPoint';
+import { IElementAtPointService } from './IElementAtPointService.js';
+import { IPoint } from '../../../interfaces/IPoint.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class ElementAtPointService implements IElementAtPointService {
     getElementAtPoint(designerView: IDesignerCanvas, point: IPoint): any;
 }

package/dist/elements/services/elementAtPointService/IElementAtPointService.d.ts

@@ -1,6 +1,6 @@
-import { IService } from "../IService";
-import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas';
-import { IPoint } from "../../../interfaces/IPoint";
+import { IService } from '../IService.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+import { IPoint } from '../../../interfaces/IPoint.js';
 export interface IElementAtPointService extends IService {
     getElementAtPoint(designerView: IDesignerCanvas, point: IPoint): any;
 }

package/dist/elements/services/elementInteractionService/IElementInteractionService.d.ts

@@ -1,5 +1,5 @@
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
-import { IService } from "../IService";
+import { IService } from '../IService.js';
 export interface IElementInteractionService extends IService {
     stopEventHandling(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
 }

package/dist/elements/services/elementsService/IElementDefinition.d.ts

@@ -1,4 +1,4 @@
-import { IBinding } from "../../item/IBinding";
+import { IBinding } from '../../item/IBinding.js';
 export interface IElementDefinition {
     tag: string;
     name?: string;

package/dist/elements/services/elementsService/IElementsJson.d.ts

@@ -1,4 +1,4 @@
-import { IElementDefinition } from './IElementDefinition';
+import { IElementDefinition } from './IElementDefinition.js';
 export interface IElementsJson {
     "imports"?: string[];
     "elements": (string | IElementDefinition)[];

package/dist/elements/services/elementsService/IElementsService.d.ts

@@ -1,5 +1,5 @@
-import { IService } from "../IService";
-import { IElementDefinition } from './IElementDefinition';
+import { IService } from '../IService.js';
+import { IElementDefinition } from './IElementDefinition.js';
 export interface IElementsService extends IService {
     readonly name: string;
     getElements(): Promise<IElementDefinition[]>;

package/dist/elements/services/elementsService/JsonFileElementsService.d.ts

@@ -1,5 +1,5 @@
-import { IElementsService } from './IElementsService';
-import { IElementDefinition } from './IElementDefinition';
+import { IElementsService } from './IElementsService.js';
+import { IElementDefinition } from './IElementDefinition.js';
 export declare class JsonFileElementsService implements IElementsService {
     private _name;
     get name(): string;

package/dist/elements/services/elementsService/PreDefinedElementsService.d.ts

@@ -1,6 +1,6 @@
-import { IElementsService } from './IElementsService';
-import { IElementsJson } from './IElementsJson';
-import { IElementDefinition } from './IElementDefinition';
+import { IElementsService } from './IElementsService.js';
+import { IElementsJson } from './IElementsJson.js';
+import { IElementDefinition } from './IElementDefinition.js';
 export declare class PreDefinedElementsService implements IElementsService {
     private _name;
     get name(): string;

package/dist/elements/services/htmlParserService/DefaultHtmlParserService.d.ts

@@ -1,9 +1,9 @@
-import { IDesignItem } from "../../..";
-import { InstanceServiceContainer } from "../InstanceServiceContainer";
-import { ServiceContainer } from "../ServiceContainer";
-import { IHtmlParserService } from "./IHtmlParserService";
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export declare class DefaultHtmlParserService implements IHtmlParserService {
     parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    createDesignItems(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
+    createDesignItems(elements: NodeListOf<ChildNode> | Node[] | HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
     private _createDesignItemsRecursive;
 }

package/dist/elements/services/htmlParserService/DefaultHtmlParserService.js

@@ -1,9 +1,9 @@
-import { DesignItem } from '../../item/DesignItem';
+import { DesignItem } from '../../item/DesignItem.js';
 export class DefaultHtmlParserService {
     async parse(html, serviceContainer, instanceServiceContainer) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
-        return this.createDesignItems(doc.body.children, serviceContainer, instanceServiceContainer);
+        return this.createDesignItems(doc.body.childNodes, serviceContainer, instanceServiceContainer);
     }
     createDesignItems(elements, serviceContainer, instanceServiceContainer) {
         let res = [];
@@ -12,7 +12,7 @@ export class DefaultHtmlParserService {
         }
         return res;
     }
-    _createDesignItemsRecursive(element, serviceContainer, instanceServiceContainer) {
-        return DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer);
+    _createDesignItemsRecursive(node, serviceContainer, instanceServiceContainer) {
+        return DesignItem.createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer);
     }
 }

package/dist/elements/services/htmlParserService/IHtmlParserService.d.ts

@@ -1,7 +1,7 @@
-import { IService } from '../IService';
-import type { ServiceContainer } from '../ServiceContainer';
-import type { InstanceServiceContainer } from '../InstanceServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
+import { IService } from '../IService.js';
+import type { ServiceContainer } from '../ServiceContainer.js';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export interface IHtmlParserService extends IService {
     parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
 }

package/dist/elements/services/htmlParserService/LitElementParserService.d.ts

@@ -1,7 +1,7 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer";
-import { ServiceContainer } from "../ServiceContainer";
-import { IHtmlParserService } from "./IHtmlParserService";
-import { IDesignItem } from '../../item/IDesignItem';
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export declare class LitElementParserService implements IHtmlParserService {
     private _parserUrl;
     private _esprimaUrl;

package/dist/elements/services/htmlParserService/LitElementParserService.js

@@ -1,6 +1,6 @@
-import { DesignItem } from '../../item/DesignItem';
-import { CssAttributeParser } from "../../helper/CssAttributeParser";
-import { newElementFromString } from "../../helper/ElementHelper";
+import { DesignItem } from '../../item/DesignItem.js';
+import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
 // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
 // attributes from their DOM, so you loose Data
 export class LitElementParserService {
@@ -55,7 +55,7 @@ export class LitElementParserService {
             let attr = item.attributes;
             for (let a in attr) {
                 if (a !== 'style') {
-                    designItem.attributes.set(a, attr[a]);
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
                     if (manualCreatedElement) {
                         element.setAttribute(a, attr[a]);
                     }
@@ -74,7 +74,7 @@ export class LitElementParserService {
                 let styleParser = new CssAttributeParser();
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
-                    designItem.styles.set(s.name, s.value);
+                    designItem._withoutUndoSetStyle(s.name, s.value);
                     if (manualCreatedElement) {
                         element.style[s.name] = s.value;
                     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.d.ts

@@ -1,7 +1,7 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer";
-import { ServiceContainer } from "../ServiceContainer";
-import { IHtmlParserService } from "./IHtmlParserService";
-import { IDesignItem } from '../../item/IDesignItem';
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export declare class NodeHtmlParserService implements IHtmlParserService {
     private _parserUrl;
     constructor(parserUrl?: string);

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -1,6 +1,6 @@
-import { DesignItem } from '../../item/DesignItem';
-import { CssAttributeParser } from "../../helper/CssAttributeParser";
-import { newElementFromString } from "../../helper/ElementHelper";
+import { DesignItem } from '../../item/DesignItem.js';
+import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
 // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
 // attributes from their DOM, so you loose Data
 export class NodeHtmlParserService {
@@ -45,7 +45,7 @@ export class NodeHtmlParserService {
             let attr = item.attributes;
             for (let a in attr) {
                 if (a !== 'style') {
-                    designItem.attributes.set(a, attr[a]);
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
                     if (manualCreatedElement) {
                         element.setAttribute(a, attr[a]);
                     }
@@ -64,7 +64,7 @@ export class NodeHtmlParserService {
                 let styleParser = new CssAttributeParser();
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
-                    designItem.styles.set(s.name, s.value);
+                    designItem._withoutUndoSetStyle(s.name, s.value);
                     if (manualCreatedElement) {
                         element.style[s.name] = s.value;
                     }

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

@@ -4,7 +4,7 @@ import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper
 export class AbstractHtmlWriterService {
     writeAttributes(indentedTextWriter, designItem, options) {
         if (designItem.hasAttributes) {
-            for (const a of designItem.attributes) {
+            for (const a of designItem.attributes()) {
                 indentedTextWriter.write(' ');
                 if (typeof a[1] === 'string') {
                     if (a[1] === "")
@@ -48,9 +48,9 @@ export class AbstractHtmlWriterService {
     writeStyles(indentedTextWriter, designItem, options) {
         if (designItem.hasStyles) {
             indentedTextWriter.write(' style="');
-            let styles = designItem.styles;
+            let styles = designItem.styles();
             if (options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(styles);
+                styles = CssCombiner.combine(new Map(styles));
             for (const s of styles) {
                 if (s[0]) {
                     indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');

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

@@ -12,7 +12,7 @@ var ElementContainerType;
 export class FormatingHtmlWriterService {
     writeAttributes(writeContext, designItem) {
         if (designItem.hasAttributes) {
-            for (const a of designItem.attributes) {
+            for (const a of designItem.attributes()) {
                 writeContext.indentedTextWriter.write(' ');
                 if (typeof a[1] === 'string') {
                     if (a[1] === "")
@@ -30,9 +30,9 @@ export class FormatingHtmlWriterService {
     writeStyles(writeContext, designItem) {
         if (designItem.hasStyles) {
             writeContext.indentedTextWriter.write(' style="');
-            let styles = designItem.styles;
+            let styles = designItem.styles();
             if (writeContext.options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(styles);
+                styles = CssCombiner.combine(new Map(styles));
             for (const s of styles) {
                 if (s[0]) {
                     writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');

package/dist/elements/services/htmlWriterService/LitTsElementWriterService.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterService } from './IHtmlWriterService';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
 export declare class LitTsElementWriterService implements IHtmlWriterService {
     write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
     static head: string;

package/dist/elements/services/htmlWriterService/SimpleHtmlWriterService.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterService } from './IHtmlWriterService';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
 import { ElementDisplayType } from '../../helper/ElementHelper.js';
 export declare enum ElementContainerType {
     block = 0,

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

@@ -1,7 +1,7 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { NodeType } from '../../item/NodeType.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
 import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
 export var ElementContainerType;
 (function (ElementContainerType) {
@@ -11,7 +11,7 @@ export var ElementContainerType;
 export class SimpleHtmlWriterService {
     writeAttributes(writeContext, designItem) {
         if (designItem.hasAttributes) {
-            for (const a of designItem.attributes) {
+            for (const a of designItem.attributes()) {
                 writeContext.indentedTextWriter.write(' ');
                 if (typeof a[1] === 'string') {
                     if (a[1] === "")
@@ -29,9 +29,9 @@ export class SimpleHtmlWriterService {
     writeStyles(writeContext, designItem) {
         if (designItem.hasStyles) {
             writeContext.indentedTextWriter.write(' style="');
-            let styles = designItem.styles;
+            let styles = designItem.styles();
             if (writeContext.options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(styles);
+                styles = CssCombiner.combine(new Map(styles));
             for (const s of styles) {
                 if (s[0]) {
                     writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');

package/dist/elements/services/initializationService/IIntializationService.d.ts

@@ -1,4 +1,4 @@
-import { IDesignItem } from '../../item/IDesignItem';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export interface IIntializationService {
     init(designItem: IDesignItem): void;
 }

package/dist/elements/services/instanceService/DefaultInstanceService.d.ts

@@ -1,8 +1,8 @@
-import { IInstanceService } from './IInstanceService';
-import { IElementDefinition } from '../elementsService/IElementDefinition';
-import type { ServiceContainer } from '../ServiceContainer';
-import type { InstanceServiceContainer } from '../InstanceServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
+import { IInstanceService } from './IInstanceService.js';
+import { IElementDefinition } from '../elementsService/IElementDefinition.js';
+import type { ServiceContainer } from '../ServiceContainer.js';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export declare class DefaultInstanceService implements IInstanceService {
     getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
 }

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -1,6 +1,6 @@
-import { DesignItem } from '../../item/DesignItem';
-import { encodeXMLChars } from '../../helper/XmlHelper';
-import { newElementFromString } from '../../helper/ElementHelper';
+import { DesignItem } from '../../item/DesignItem.js';
+import { encodeXMLChars } from '../../helper/XmlHelper.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
 export class DefaultInstanceService {
     async getElement(definition, serviceContainer, instanceServiceContainer) {
         if (definition.import) {

package/dist/elements/services/instanceService/IInstanceService.d.ts

@@ -1,8 +1,8 @@
-import { IService } from '../IService';
-import { IElementDefinition } from '../elementsService/IElementDefinition';
-import type { ServiceContainer } from '../ServiceContainer';
-import type { InstanceServiceContainer } from '../InstanceServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
+import { IService } from '../IService.js';
+import { IElementDefinition } from '../elementsService/IElementDefinition.js';
+import type { ServiceContainer } from '../ServiceContainer.js';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 export interface IInstanceService extends IService {
     getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
 }

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -1,10 +1,10 @@
-import { BindingTarget } from "../../item/BindingTarget";
-import { IElementDefinition } from "../elementsService/IElementDefinition";
-import { IElementsService } from "../elementsService/IElementsService";
-import { IPropertiesService, RefreshMode } from "../propertiesService/IPropertiesService";
-import { IProperty } from "../propertiesService/IProperty";
-import { IDesignItem } from "../../item/IDesignItem";
-import { AbstractPropertiesService } from "../propertiesService/services/AbstractPropertiesService";
+import { BindingTarget } from '../../item/BindingTarget.js';
+import { IElementDefinition } from '../elementsService/IElementDefinition.js';
+import { IElementsService } from '../elementsService/IElementsService.js';
+import { IPropertiesService, RefreshMode } from '../propertiesService/IPropertiesService.js';
+import { IProperty } from '../propertiesService/IProperty.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
 export declare class WebcomponentManifestParserService extends AbstractPropertiesService implements IElementsService, IPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     private _name;