@node-projects/web-component-designer 0.1.0 → 0.1.2

package/dist/elements/services/eventsService/EventsService.d.ts

@@ -0,0 +1,49 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IEvent } from "./IEvent.js";
+import { IEventsService } from "./IEventsService.js";
+export declare class EventsService implements IEventsService {
+    constructor();
+    protected _allEvents: IEvent[];
+    protected _windowEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _allElements: IEvent[];
+    protected _focusableEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _form: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _simpleMouseEvents: IEvent[];
+    protected _mouseEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _pointerEvents: IEvent[];
+    protected _touchEvents: IEvent[];
+    protected _dragEvents: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _clipboard: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    protected _details: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
+    isHandledElement(designItem: IDesignItem): boolean;
+    getPossibleEvents(designItem: IDesignItem): IEvent[];
+    getEvent(name: string): IEvent;
+}

package/dist/elements/services/eventsService/EventsService.js

@@ -0,0 +1,103 @@
+export class EventsService {
+    constructor() {
+        this._allEvents = [...this._windowEvents, ...this._form, ...this._simpleMouseEvents, ...this._mouseEvents, ...this._pointerEvents, ...this._touchEvents, ...this._allElements, ...this._focusableEvents, ...this._dragEvents, ...this._clipboard, ...this._dragEvents];
+    }
+    _allEvents;
+    _windowEvents = [
+        { name: "afterprint", propertyName: "onafterprint", eventObjectName: "Event" },
+        { name: "beforeprint", propertyName: "onbeforeprint", eventObjectName: "Event" },
+        { name: "beforeunload", propertyName: "onbeforeunload", eventObjectName: "Event" },
+        { name: "error", propertyName: "onerror", eventObjectName: "Event" },
+        { name: "load", propertyName: "onload", eventObjectName: "Event" },
+        { name: "hashchange", propertyName: "onhashchange", eventObjectName: "Event" },
+        { name: "message", propertyName: "onmessage", eventObjectName: "Event" },
+        { name: "offline", propertyName: "onoffline", eventObjectName: "Event" },
+        { name: "online", propertyName: "ononline", eventObjectName: "Event" },
+        { name: "pageshow", propertyName: "onpageshow", eventObjectName: "Event" },
+        { name: "popstate", propertyName: "onpopstate", eventObjectName: "Event" },
+        { name: "resize", propertyName: "onresize", eventObjectName: "Event" },
+        { name: "storage", propertyName: "onstorage", eventObjectName: "Event" },
+        { name: "unload", propertyName: "onunload", eventObjectName: "Event" }
+    ];
+    _allElements = [
+        { name: "contextmenu", propertyName: "oncontextmenu", eventObjectName: "PointerEvent" }
+    ];
+    _focusableEvents = [
+        { name: "blur", propertyName: "onblur", eventObjectName: "FocusEvent" },
+        { name: "focus", propertyName: "onfocus", eventObjectName: "FocusEvent" },
+        { name: "keydown", propertyName: "onkeydown", eventObjectName: "KeyboardEvent" },
+        { name: "keyup", propertyName: "onkeyup", eventObjectName: "KeyboardEvent" }
+    ];
+    _form = [
+        { name: "beforeinput", propertyName: "onbeforeinput", eventObjectName: "InputEvent" },
+        { name: "input", propertyName: "oninput", eventObjectName: "InputEvent" },
+        { name: "change", propertyName: "onchange", eventObjectName: "Event" },
+        { name: "invalid", propertyName: "oninvalid", eventObjectName: "Event" },
+        { name: "reset", propertyName: "onreset", eventObjectName: "Event" },
+        { name: "select", propertyName: "onselect", eventObjectName: "Event" },
+        { name: "submit", propertyName: "onsubmit", eventObjectName: "SubmitEvent" }
+    ];
+    _simpleMouseEvents = [
+        { name: "click", propertyName: "onclick", eventObjectName: "PointerEvent" },
+        { name: "dblclick", propertyName: "ondblclick", eventObjectName: "MouseEvent" },
+        { name: "wheel", propertyName: "onwheel", eventObjectName: "WheelEvent" },
+        { name: "scroll", propertyName: "onscroll", eventObjectName: "Event" },
+    ];
+    _mouseEvents = [
+        { name: "mousedown", propertyName: "onmousedown", eventObjectName: "MouseEvent" },
+        { name: "mouseup", propertyName: "onmouseup", eventObjectName: "MouseEvent" },
+        { name: "mousemove", propertyName: "onmousemove", eventObjectName: "MouseEvent" },
+        { name: "mouseover", propertyName: "onmouseover", eventObjectName: "MouseEvent" },
+        { name: "mouseout", propertyName: "onmouseout", eventObjectName: "MouseEvent" }
+    ];
+    _pointerEvents = [
+        { name: "pointerdown", propertyName: "onpointerdown", eventObjectName: "PointerEvent" },
+        { name: "pointerup", propertyName: "onpointerup", eventObjectName: "PointerEvent" },
+        { name: "pointerenter", propertyName: "onpointerenter", eventObjectName: "PointerEvent" },
+        { name: "pointerleave", propertyName: "onpointerleave", eventObjectName: "PointerEvent" },
+        { name: "pointermove", propertyName: "onpointermove", eventObjectName: "PointerEvent" },
+        { name: "pointerover", propertyName: "onpointerover", eventObjectName: "PointerEvent" },
+        { name: "pointerout", propertyName: "onpointerout", eventObjectName: "PointerEvent" },
+        { name: "pointercancel", propertyName: "onpointercancel", eventObjectName: "PointerEvent" }
+    ];
+    _touchEvents = [
+        { name: "touchstart", propertyName: "ontouchstart", eventObjectName: "TouchEvent" },
+        { name: "touchend", propertyName: "ontouchend", eventObjectName: "TouchEvent" },
+        { name: "touchmove", propertyName: "ontouchmove", eventObjectName: "TouchEvent" },
+        { name: "touchcancel", propertyName: "ontouchcancel", eventObjectName: "TouchEvent" }
+    ];
+    _dragEvents = [
+        { name: "drag", propertyName: "ondrag", eventObjectName: "DragEvent" },
+        { name: "dragend", propertyName: "ondragend", eventObjectName: "DragEvent" },
+        { name: "dragenter", propertyName: "ondragenter", eventObjectName: "DragEvent" },
+        { name: "dragleave", propertyName: "ondragleave", eventObjectName: "DragEvent" },
+        { name: "dragover", propertyName: "ondragover", eventObjectName: "DragEvent" },
+        { name: "dragstart", propertyName: "ondragstart", eventObjectName: "DragEvent" },
+        { name: "drop", propertyName: "ondrop", eventObjectName: "DragEvent" }
+    ];
+    _clipboard = [
+        { name: "copy", propertyName: "oncopy", eventObjectName: "ClipboardEvent" },
+        { name: "cut", propertyName: "oncut", eventObjectName: "ClipboardEvent" },
+        { name: "paste", propertyName: "onpaste", eventObjectName: "ClipboardEvent" }
+    ];
+    _details = [
+        { name: "toggle", propertyName: "ontoggle", eventObjectName: "Event" }
+    ];
+    isHandledElement(designItem) {
+        return true;
+    }
+    getPossibleEvents(designItem) {
+        if (designItem.element instanceof HTMLInputElement ||
+            designItem.element instanceof HTMLTextAreaElement ||
+            designItem.element instanceof HTMLSelectElement) {
+            let events = [...this._form, ...this._simpleMouseEvents, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
+            return events;
+        }
+        let events = [...this._simpleMouseEvents, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
+        return events;
+    }
+    getEvent(name) {
+        let evt = this._allEvents.find(x => x.name == name);
+        return evt ?? { name, propertyName: 'on' + name, eventObjectName: 'Event' };
+    }
+}

package/dist/elements/services/eventsService/IEvent.d.ts

@@ -0,0 +1,5 @@
+export interface IEvent {
+    name: string;
+    propertyName?: string;
+    eventObjectName?: string;
+}

package/dist/elements/services/eventsService/IEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/eventsService/IEventsService.d.ts

@@ -0,0 +1,7 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IEvent } from "./IEvent.js";
+export interface IEventsService {
+    isHandledElement(designItem: IDesignItem): boolean;
+    getPossibleEvents(designItem: IDesignItem): IEvent[];
+    getEvent(name: string): IEvent;
+}

package/dist/elements/services/eventsService/IEventsService.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+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, parseSnippet: boolean): Promise<IDesignItem[]>;
+    createDesignItems(elements: NodeListOf<ChildNode> | Node[] | HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
+    private _createDesignItemsRecursive;
+}

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

@@ -0,0 +1,18 @@
+import { DesignItem } from '../../item/DesignItem.js';
+export class DefaultHtmlParserService {
+    async parse(html, serviceContainer, instanceServiceContainer, parseSnippet) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        return this.createDesignItems(doc.body.childNodes, serviceContainer, instanceServiceContainer);
+    }
+    createDesignItems(elements, serviceContainer, instanceServiceContainer) {
+        let res = [];
+        for (let el of elements) {
+            res.push(this._createDesignItemsRecursive(el, serviceContainer, instanceServiceContainer));
+        }
+        return res;
+    }
+    _createDesignItemsRecursive(node, serviceContainer, instanceServiceContainer) {
+        return DesignItem.createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer);
+    }
+}

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

@@ -0,0 +1,7 @@
+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, parseSnippet: boolean): Promise<IDesignItem[]>;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { ITextWriter } from '../../helper/ITextWriter.js';
+export declare abstract class AbstractHtmlWriterService implements IHtmlWriterService {
+    options: IHtmlWriterOptions;
+    constructor(options?: IHtmlWriterOptions);
+    abstract write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean): any;
+    writeAttributes(indentedTextWriter: ITextWriter, designItem: IDesignItem): void;
+    writeStyles(indentedTextWriter: ITextWriter, designItem: IDesignItem): void;
+}

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

@@ -0,0 +1,71 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+export class AbstractHtmlWriterService {
+    options;
+    constructor(options) {
+        this.options = options ?? {};
+        this.options.beautifyOutput ??= true;
+        this.options.compressCssToShorthandProperties ??= true;
+        this.options.writeDesignerProperties ??= true;
+        this.options.parseJsonInAttributes ??= true;
+        this.options.jsonWriteMode ??= 'min';
+    }
+    writeAttributes(indentedTextWriter, designItem) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes()) {
+                indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        if (this.options.parseJsonInAttributes &&
+                            ((a[1].startsWith('{') && !a[1].startsWith('{{') && a[1].endsWith('}')) ||
+                                (a[1].startsWith('[') && !a[1].startsWith('[[') && a[1].endsWith(']')))) {
+                            try {
+                                let j = JSON.parse(a[1]);
+                                let txt;
+                                if (this.options.jsonWriteMode == 'beauty')
+                                    txt = JSON.stringify(j, null, 2);
+                                else
+                                    txt = JSON.stringify(j);
+                                indentedTextWriter.write(a[0] + '=\'' + DomConverter.normalizeAttributeValue(txt, true) + '\'');
+                                continue;
+                            }
+                            catch { }
+                        }
+                        const content = DomConverter.normalizeAttributeValue(a[1]);
+                        if (content.indexOf('"')) {
+                            const contentSingle = DomConverter.normalizeAttributeValue(a[1], true);
+                            if (contentSingle.length < content.length)
+                                indentedTextWriter.write(a[0] + '=\'' + contentSingle + '\'');
+                            else
+                                indentedTextWriter.write(a[0] + '="' + content + '"');
+                        }
+                        else
+                            indentedTextWriter.write(a[0] + '="' + content + '"');
+                    }
+                }
+                else if (!a[1])
+                    indentedTextWriter.write(a[0]);
+                else {
+                    //TODO: writing of bindings, really ???
+                }
+            }
+        }
+    }
+    writeStyles(indentedTextWriter, designItem) {
+        if (designItem.hasStyles) {
+            indentedTextWriter.write(' style="');
+            let styles = designItem.styles();
+            if (this.options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(new Map(styles));
+            for (const s of styles) {
+                if (s[0]) {
+                    indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            indentedTextWriter.write('"');
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export declare class FormatingHtmlWriterService implements IHtmlWriterService {
+    options: IHtmlWriterOptions;
+    constructor(options?: IHtmlWriterOptions);
+    private writeAttributes;
+    private writeStyles;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeNewlineAndIntend;
+    private _writeInternal;
+    getContainerType(element: HTMLElement): ElementContainerType;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean): void;
+}
+export {};

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

@@ -0,0 +1,142 @@
+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';
+var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+// const defaultDisplayNoneContainerDisplayType: ElementContainerType = ElementContainerType.complex;
+export class FormatingHtmlWriterService {
+    options;
+    constructor(options) {
+        this.options = options ?? {};
+        this.options.beautifyOutput ??= true;
+        this.options.compressCssToShorthandProperties ??= true;
+        this.options.writeDesignerProperties ??= true;
+        this.options.parseJsonInAttributes ??= true;
+        this.options.jsonWriteMode ??= 'min';
+    }
+    writeAttributes(writeContext, designItem) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes()) {
+                writeContext.indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        writeContext.indentedTextWriter.write(a[0]);
+                    else
+                        writeContext.indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                }
+                else if (!a[1])
+                    writeContext.indentedTextWriter.write(a[0]);
+                else {
+                }
+            }
+        }
+    }
+    writeStyles(writeContext, designItem) {
+        if (designItem.hasStyles) {
+            writeContext.indentedTextWriter.write(' style="');
+            let styles = designItem.styles();
+            if (writeContext.options.compressCssToShorthandProperties)
+                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]) + ';');
+                }
+            }
+            writeContext.indentedTextWriter.write('"');
+        }
+    }
+    _writeTextNode(writeContext, designItem) {
+        writeContext.lastElementDisplayType = ElementDisplayType.inline;
+        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+        if (content) {
+            writeContext.indentedTextWriter.write(content);
+        }
+    }
+    _writeCommentNode(writeContext, designItem) {
+        writeContext.indentedTextWriter.write('<!--' + designItem.content + '-->');
+    }
+    _writeElementNode(writeContext, designItem) {
+        //    const cs = getComputedStyle(designItem.element);
+        //cs.whiteSpace === 'pre'
+        //isInPre
+        //is in inline?
+        const currentElementDisplayType = getElementDisplaytype(designItem.element);
+        writeContext.lastElementDisplayType = currentElementDisplayType;
+        writeContext.indentedTextWriter.write('<' + designItem.name);
+        this.writeAttributes(writeContext, designItem);
+        this.writeStyles(writeContext, designItem);
+        writeContext.indentedTextWriter.write('>');
+        let contentSingleTextNode = false;
+        if (designItem.hasChildren) {
+            const children = designItem.children();
+            contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+            if (contentSingleTextNode) {
+                this._writeInternal(writeContext, designItem.firstChild);
+            }
+            else {
+                let previousContainerDisplayType = writeContext.containerDisplayType;
+                writeContext.containerDisplayType = this.getContainerType(designItem.element);
+                writeContext.indentedTextWriter.levelRaise();
+                this._writeDesignItemList(currentElementDisplayType, writeContext, children);
+                writeContext.indentedTextWriter.levelShrink();
+                writeContext.containerDisplayType = previousContainerDisplayType;
+            }
+        }
+        else if (designItem.hasContent) {
+            writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+        }
+        if (!DomConverter.IsSelfClosingElement(designItem.name)) {
+            if (currentElementDisplayType === ElementDisplayType.block && designItem.hasChildren && !contentSingleTextNode) {
+                this._writeNewlineAndIntend(writeContext);
+            }
+            //write newline & intend ???
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+            if (currentElementDisplayType !== ElementDisplayType.none) {
+                writeContext.lastElementDisplayType = currentElementDisplayType;
+            }
+        }
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            if (writeContext.lastElementDisplayType == null) {
+                //first entry, do nothing
+            }
+            else if (writeContext.containerDisplayType === ElementContainerType.complex)
+                this._writeNewlineAndIntend(writeContext);
+            else if (writeContext.lastElementDisplayType !== ElementDisplayType.inline /*|| currentElementDisplayType !== ElementDisplayType.inline*/)
+                this._writeNewlineAndIntend(writeContext);
+            this._writeInternal(writeContext, c);
+        }
+    }
+    _writeNewlineAndIntend(writeContext) {
+        writeContext.indentedTextWriter.writeNewline();
+        writeContext.indentedTextWriter.writeIndent();
+    }
+    _writeInternal(writeContext, designItem) {
+        const start = writeContext.indentedTextWriter.position;
+        if (designItem.nodeType === NodeType.TextNode)
+            this._writeTextNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Comment)
+            this._writeCommentNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Element)
+            this._writeElementNode(writeContext, designItem);
+        if (writeContext.designItemsAssignmentList) {
+            writeContext.designItemsAssignmentList.set(designItem, { start: start, length: writeContext.indentedTextWriter.position - start - 1 });
+        }
+    }
+    getContainerType(element) {
+        const display = window.getComputedStyle(element).display;
+        if (display === 'block' || display === "inline-block" || display == '')
+            return ElementContainerType.block;
+        return ElementContainerType.complex;
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline) {
+        const context = { indentedTextWriter, options: this.options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}

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

@@ -0,0 +1,13 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+export declare class HtmlWriterService extends AbstractHtmlWriterService {
+    constructor(options?: IHtmlWriterOptions);
+    private _conditionalyWriteIndent;
+    private _conditionalyWriteIndentBefore;
+    private _conditionalyWriteNewline;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean): void;
+    private internalWrite;
+    private writeTextNode;
+}

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

@@ -0,0 +1,116 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { NodeType } from '../../item/NodeType.js';
+import { isEmptyTextNode, isInline, isInlineAfter } from '../../helper/ElementHelper.js';
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+export class HtmlWriterService extends AbstractHtmlWriterService {
+    constructor(options) {
+        super(options);
+    }
+    _conditionalyWriteIndent(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
+            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
+            (designItem.element instanceof SVGElement))
+            indentedTextWriter.writeIndent();
+    }
+    _conditionalyWriteIndentBefore(indentedTextWriter, designItem) {
+        if ((designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
+            (designItem.element instanceof SVGElement))
+            indentedTextWriter.writeIndent();
+    }
+    _conditionalyWriteNewline(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
+            (designItem.element instanceof SVGElement))
+            indentedTextWriter.writeNewline();
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline, updatePositions = false) {
+        for (const d of designItems) {
+            this.internalWrite(indentedTextWriter, d, updatePositions);
+        }
+    }
+    //todo special case for style/script nodes, keep whitespace
+    internalWrite(indentedTextWriter, designItem, updatePositions) {
+        let start = indentedTextWriter.position;
+        let end = indentedTextWriter.position;
+        if (designItem.nodeType == NodeType.TextNode) {
+            if (isEmptyTextNode(designItem.element) &&
+                ((designItem.element.previousSibling instanceof HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
+                    (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
+            }
+            else
+                this.writeTextNode(indentedTextWriter, designItem, true);
+            end = indentedTextWriter.position;
+        }
+        else if (designItem.nodeType == NodeType.Comment) {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            start = indentedTextWriter.position;
+            indentedTextWriter.write('<!--' + designItem.content + '-->');
+            end = indentedTextWriter.position;
+            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        else {
+            this._conditionalyWriteIndentBefore(indentedTextWriter, designItem);
+            start = indentedTextWriter.position;
+            indentedTextWriter.write('<' + designItem.name);
+            this.writeAttributes(indentedTextWriter, designItem);
+            this.writeStyles(indentedTextWriter, designItem);
+            indentedTextWriter.write('>');
+            let contentSingleTextNode = false;
+            if (designItem.hasChildren) {
+                const children = designItem.children();
+                contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+                if (contentSingleTextNode) {
+                    const notrim = designItem.name == 'script' || designItem.name == 'style' || designItem.name == 'pre';
+                    this.writeTextNode(indentedTextWriter, designItem, false, !notrim);
+                }
+                else {
+                    if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
+                        indentedTextWriter.writeNewline();
+                        indentedTextWriter.levelRaise();
+                    }
+                    for (const c of children) {
+                        this.internalWrite(indentedTextWriter, c, updatePositions);
+                        let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
+                        if (childSingleTextNode)
+                            if (!indentedTextWriter.isLastCharNewline())
+                                this._conditionalyWriteNewline(indentedTextWriter, c);
+                    }
+                    if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
+                        indentedTextWriter.levelShrink();
+                        if (!indentedTextWriter.isLastCharNewline())
+                            indentedTextWriter.writeNewline();
+                        indentedTextWriter.writeIndent();
+                    }
+                }
+            }
+            else if (designItem.hasContent) {
+                indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+                //this._conditionalyWriteNewline(indentedTextWriter, designItem);
+            }
+            end = indentedTextWriter.position;
+            if (!DomConverter.IsSelfClosingElement(designItem.name))
+                indentedTextWriter.write('</' + designItem.name + '>');
+            end = indentedTextWriter.position;
+            //if (!contentSingleTextNode)
+            if (!indentedTextWriter.isLastCharNewline() && (!designItem.parent || !isInlineAfter(designItem.parent.element)))
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        if (updatePositions && designItem.instanceServiceContainer.designItemDocumentPositionService) {
+            designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: start, length: end - start });
+        }
+    }
+    writeTextNode(indentedTextWriter, designItem, indentAndNewline, trim = true) {
+        let content = DomConverter.normalizeContentValue(designItem.content);
+        if (trim)
+            content = content.trim();
+        if (content) {
+            if (indentAndNewline)
+                this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write(content);
+            if (indentAndNewline)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+export interface IHtmlWriterOptions {
+    beautifyOutput?: boolean;
+    compressCssToShorthandProperties?: boolean;
+    writeDesignerProperties?: boolean;
+    parseJsonInAttributes?: boolean;
+    jsonWriteMode?: 'min' | 'beauty';
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ITextWriter } from '../../helper/ITextWriter.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+export interface IHtmlWriterService {
+    options: IHtmlWriterOptions;
+    write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export interface IStringPosition {
+    start: number;
+    length: number;
+}

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

@@ -0,0 +1 @@
+export {};

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

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