@node-projects/web-component-designer 0.0.75 → 0.0.79

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

@@ -0,0 +1,118 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
+var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+export class HtmlWriterService {
+    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(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 currentElementDisplayType = getElementDisplaytype(designItem.element);
+        writeContext.lastElementDisplayType = currentElementDisplayType;
+        writeContext.indentedTextWriter.write('<' + designItem.name);
+        this.writeAttributes(writeContext, designItem);
+        this.writeStyles(writeContext, designItem);
+        writeContext.indentedTextWriter.write('>');
+        if (designItem.hasChildren) {
+            const children = designItem.children();
+            const 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))
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+        //if (writeContext.writerState === WriterState.block)
+        //this._writeNewlineAndIntend(writeContext);
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            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, options, designItemsAssignmentList) {
+        const context = { indentedTextWriter, options, lastElementDisplayType: ElementDisplayType.none, containerDisplayType: ElementContainerType.block, designItemsAssignmentList };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}

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

@@ -4,9 +4,9 @@ import { IHtmlWriterOptions } from './IHtmlWriterOptions';
 import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
 import { IStringPosition } from './IStringPosition';
 export declare class HtmlWriterService implements IHtmlWriterService {
-    canWrite(designItem: IDesignItem): boolean;
     private _conditionalyWriteIndent;
     private _conditionalyWriteNewline;
-    write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    private internalWrite;
     private writeTextNode;
 }

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

@@ -2,14 +2,12 @@ import { DomConverter } from '../../widgets/designerView/DomConverter';
 import { CssCombiner } from '../../helper/CssCombiner';
 import { NodeType } from '../../item/NodeType';
 import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
-import { isInline } from '../../helper/ElementHelper.js';
+import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
 export class HtmlWriterService {
-    canWrite(designItem) {
-        return true;
-    }
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
-            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)))
+            (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))))
             indentedTextWriter.writeIndent();
     }
     _conditionalyWriteNewline(indentedTextWriter, designItem) {
@@ -17,10 +15,20 @@ export class HtmlWriterService {
             (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
             indentedTextWriter.writeNewline();
     }
-    write(indentedTextWriter, designItem, options, designItemsAssignmentList) {
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        for (const d of designItems) {
+            this.internalWrite(indentedTextWriter, d, options, designItemsAssignmentList);
+        }
+    }
+    internalWrite(indentedTextWriter, designItem, options, designItemsAssignmentList) {
         let start = indentedTextWriter.position;
         if (designItem.nodeType == NodeType.TextNode) {
-            this.writeTextNode(indentedTextWriter, designItem, true);
+            if (isEmptyTextNode(designItem.element) &&
+                ((designItem.element.previousSibling instanceof HTMLElement && !isInline(designItem.element.previousSibling)) ||
+                    (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
+            }
+            else
+                this.writeTextNode(indentedTextWriter, designItem, true);
         }
         else if (designItem.nodeType == NodeType.Comment) {
             this._conditionalyWriteIndent(indentedTextWriter, designItem);
@@ -59,24 +67,30 @@ export class HtmlWriterService {
                 indentedTextWriter.write('"');
             }
             indentedTextWriter.write('>');
+            let contentSingleTextNode = false;
             if (designItem.hasChildren) {
                 const children = designItem.children();
-                const singleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
-                if (singleTextNode) {
+                contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+                if (contentSingleTextNode) {
                     this.writeTextNode(indentedTextWriter, designItem, false);
                 }
                 else {
-                    indentedTextWriter.writeNewline();
-                    indentedTextWriter.levelRaise();
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                        indentedTextWriter.writeNewline();
+                        indentedTextWriter.levelRaise();
+                    }
                     for (const c of children) {
-                        c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
-                            if (s.canWrite(c)) {
-                                s.write(indentedTextWriter, c, options, designItemsAssignmentList);
-                            }
-                        });
+                        this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
+                        let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
+                        if (childSingleTextNode)
+                            indentedTextWriter.writeNewline();
+                    }
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                        indentedTextWriter.levelShrink();
+                        if (!indentedTextWriter.isLastCharNewline())
+                            indentedTextWriter.writeNewline();
+                        indentedTextWriter.writeIndent();
                     }
-                    indentedTextWriter.levelShrink();
-                    indentedTextWriter.writeIndent();
                 }
             }
             else if (designItem.hasContent) {
@@ -84,7 +98,8 @@ export class HtmlWriterService {
             }
             if (!DomConverter.IsSelfClosingElement(designItem.name))
                 indentedTextWriter.write('</' + designItem.name + '>');
-            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+            if (!contentSingleTextNode)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         if (designItemsAssignmentList) {
             designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });

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

@@ -1,8 +1,7 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
 export interface IHtmlWriterService {
-    canWrite(designItem: IDesignItem): boolean;
-    write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
 }

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

@@ -0,0 +1,14 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+export declare class LitTsElementWriterService implements IHtmlWriterService {
+    static head: string;
+    static footer: string;
+    canWrite(designItem: IDesignItem): boolean;
+    private _conditionalyWriteIndent;
+    private _conditionalyWriteNewline;
+    write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    private writeTextNode;
+}

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

@@ -0,0 +1,123 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { isInline } from '../../helper/ElementHelper.js';
+//todo :
+//write style...
+//needs InternalBindinsgStorrageService -> keeps bindings
+export class LitTsElementWriterService {
+    static head = `import { LitElement, html } from "lit-element";
+
+class $$className extends LitElement {
+  render() {
+    return html\``;
+    static footer = `\`;
+  }
+}
+
+export default $$className;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '$$elementName': $$className;
+  }
+}`;
+    canWrite(designItem) {
+        return true;
+    }
+    _conditionalyWriteIndent(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)))
+            indentedTextWriter.writeIndent();
+    }
+    _conditionalyWriteNewline(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
+            indentedTextWriter.writeNewline();
+    }
+    write(indentedTextWriter, designItem, options, designItemsAssignmentList) {
+        let start = indentedTextWriter.position;
+        if (designItem.nodeType == NodeType.TextNode) {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            this.writeTextNode(indentedTextWriter, designItem, true);
+        }
+        else if (designItem.nodeType == NodeType.Comment) {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write('<!--' + designItem.content + '-->');
+            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        else {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write('<' + designItem.name);
+            if (designItem.hasAttributes) {
+                for (const a of designItem.attributes) {
+                    indentedTextWriter.write(' ');
+                    if (typeof a[1] === 'string') {
+                        if (a[1] === "")
+                            indentedTextWriter.write(a[0]);
+                        else
+                            indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                    }
+                    else if (!a[1])
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        //TODO: writing of bindings
+                    }
+                }
+            }
+            if (designItem.hasStyles) {
+                indentedTextWriter.write(' style="');
+                let styles = designItem.styles;
+                if (options.compressCssToShorthandProperties)
+                    styles = CssCombiner.combine(styles);
+                for (const s of styles) {
+                    if (s[0]) {
+                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                    }
+                }
+                indentedTextWriter.write('"');
+            }
+            indentedTextWriter.write('>');
+            if (designItem.hasChildren) {
+                const children = designItem.children();
+                const singleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+                if (singleTextNode) {
+                    this.writeTextNode(indentedTextWriter, designItem, false);
+                }
+                else {
+                    indentedTextWriter.writeNewline();
+                    indentedTextWriter.levelRaise();
+                    for (const c of children) {
+                        c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
+                            if (s.canWrite(c)) {
+                                s.write(indentedTextWriter, c, options, designItemsAssignmentList);
+                            }
+                        });
+                    }
+                    indentedTextWriter.levelShrink();
+                    indentedTextWriter.writeIndent();
+                }
+            }
+            else if (designItem.hasContent) {
+                indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+            }
+            if (!DomConverter.IsSelfClosingElement(designItem.name))
+                indentedTextWriter.write('</' + designItem.name + '>');
+            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        if (designItemsAssignmentList) {
+            designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
+        }
+    }
+    writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
+        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+        if (content) {
+            if (indentAndNewline)
+                this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write(content);
+            if (indentAndNewline)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+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/LitTsElementWriterService.js

@@ -0,0 +1,43 @@
+//needs InternalBindinsgStorrageService -> keeps bindings
+export class LitTsElementWriterService {
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        throw new Error('Method not implemented.');
+    }
+    static head = `import { html, css, LitElement, CSSResultArray } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+@customElement('$$elementName')
+class $$className extends LitElement {
+  static get styles(): CSSResultArray {
+    return [
+      css\`
+$$css
+      \`,
+    ];
+  }
+
+  //@property({ type: String }) btnStyle: QingButtonStyle = '';
+  //@property({ type: Boolean, reflect: true }) selected = false;
+
+  //private buttonElement: HTMLButtonElement | null = null;
+
+  /*firstUpdated() {
+    if (!this.shadowRoot) {
+      throw new Error('Unexpected undefined shadowRoot');
+    }
+    this.buttonElement = this.shadowRoot.querySelector('button');
+  }*/
+
+  render() {
+    return html\`$$html\`;
+  }
+}
+
+export default $$className;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '$$elementName': $$className;
+  }
+}`;
+}

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

@@ -0,0 +1,22 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export declare class FormatingHtmlWriterService implements IHtmlWriterService {
+    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, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+}
+export {};

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

@@ -0,0 +1,125 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+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.complex;
+export class FormatingHtmlWriterService {
+    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(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 currentElementDisplayType = getElementDisplaytype(designItem.element);
+        writeContext.lastElementDisplayType = currentElementDisplayType;
+        writeContext.indentedTextWriter.write('<' + designItem.name);
+        this.writeAttributes(writeContext, designItem);
+        this.writeStyles(writeContext, designItem);
+        writeContext.indentedTextWriter.write('>');
+        if (designItem.hasChildren) {
+            const children = designItem.children();
+            const 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)) {
+            //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, options, designItemsAssignmentList) {
+        const context = { indentedTextWriter, options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block, designItemsAssignmentList };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}

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

@@ -0,0 +1,27 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+import { ElementDisplayType } from '../../helper/ElementHelper.js';
+export declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export interface IWriteContext {
+    options: IHtmlWriterOptions;
+    indentedTextWriter: IndentedTextWriter;
+    lastElementDisplayType: ElementDisplayType | null;
+    containerDisplayType: ElementContainerType;
+    designItemsAssignmentList?: Map<IDesignItem, IStringPosition>;
+}
+export declare class SimpleHtmlWriterService implements IHtmlWriterService {
+    protected writeAttributes(writeContext: IWriteContext, designItem: IDesignItem): void;
+    protected writeStyles(writeContext: IWriteContext, designItem: IDesignItem): void;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeInternal;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+}