@node-projects/web-component-designer 0.0.84 → 0.0.85

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

@@ -1,12 +1,12 @@
-import { IElementsService } from './IElementsService';
-import { IElementDefinition } from './IElementDefinition';
-export declare class JsonFileElementsService implements IElementsService {
-    private _name;
-    get name(): string;
-    private _elementList;
-    private _resolveStored;
-    private _rejectStored;
-    getElements(): Promise<IElementDefinition[]>;
-    constructor(name: string, file: string);
-    private isIElementDefintion;
-}
+import { IElementsService } from './IElementsService';
+import { IElementDefinition } from './IElementDefinition';
+export declare class JsonFileElementsService implements IElementsService {
+    private _name;
+    get name(): string;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    getElements(): Promise<IElementDefinition[]>;
+    constructor(name: string, file: string);
+    private isIElementDefintion;
+}

package/dist/elements/services/elementsService/JsonFileElementsService.js

@@ -1,45 +1,45 @@
-import { LazyLoader } from '@node-projects/base-custom-webcomponent';
-// Reads a Json File and provides the Elements listed there
-export class JsonFileElementsService {
-    _name;
-    get name() { return this._name; }
-    _elementList;
-    _resolveStored;
-    _rejectStored;
-    getElements() {
-        if (this._elementList)
-            return Promise.resolve(this._elementList);
-        if (!this._resolveStored) {
-            this._resolveStored = [];
-            this._rejectStored = [];
-        }
-        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
-    }
-    constructor(name, file) {
-        this._name = name;
-        LazyLoader.LoadText(file).then(data => {
-            let parsed = JSON.parse(data);
-            this._elementList = [];
-            parsed.elements.forEach(element => {
-                if (this.isIElementDefintion(element))
-                    this._elementList.push(element);
-                else
-                    this._elementList.push({ tag: element });
-            });
-            if (this._resolveStored) {
-                this._resolveStored.forEach(x => x(this._elementList));
-                this._resolveStored = null;
-                this._rejectStored = null;
-            }
-        }).catch(err => {
-            if (this._rejectStored) {
-                this._rejectStored.forEach(x => x(err));
-                this._resolveStored = null;
-                this._rejectStored = null;
-            }
-        });
-    }
-    isIElementDefintion(object) {
-        return object != null && object.tag != null;
-    }
-}
+import { LazyLoader } from '@node-projects/base-custom-webcomponent';
+// Reads a Json File and provides the Elements listed there
+export class JsonFileElementsService {
+    _name;
+    get name() { return this._name; }
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    getElements() {
+        if (this._elementList)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    constructor(name, file) {
+        this._name = name;
+        LazyLoader.LoadText(file).then(data => {
+            let parsed = JSON.parse(data);
+            this._elementList = [];
+            parsed.elements.forEach(element => {
+                if (this.isIElementDefintion(element))
+                    this._elementList.push(element);
+                else
+                    this._elementList.push({ tag: element });
+            });
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }).catch(err => {
+            if (this._rejectStored) {
+                this._rejectStored.forEach(x => x(err));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        });
+    }
+    isIElementDefintion(object) {
+        return object != null && object.tag != null;
+    }
+}

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

@@ -1,11 +1,11 @@
-import { IElementsService } from './IElementsService';
-import { IElementsJson } from './IElementsJson';
-import { IElementDefinition } from './IElementDefinition';
-export declare class PreDefinedElementsService implements IElementsService {
-    private _name;
-    get name(): string;
-    private _elementList;
-    getElements(): Promise<IElementDefinition[]>;
-    constructor(name: string, data: IElementsJson);
-    private isIElementDefintion;
-}
+import { IElementsService } from './IElementsService';
+import { IElementsJson } from './IElementsJson';
+import { IElementDefinition } from './IElementDefinition';
+export declare class PreDefinedElementsService implements IElementsService {
+    private _name;
+    get name(): string;
+    private _elementList;
+    getElements(): Promise<IElementDefinition[]>;
+    constructor(name: string, data: IElementsJson);
+    private isIElementDefintion;
+}

package/dist/elements/services/elementsService/PreDefinedElementsService.js

@@ -1,21 +1,21 @@
-export class PreDefinedElementsService {
-    _name;
-    get name() { return this._name; }
-    _elementList;
-    getElements() {
-        return Promise.resolve(this._elementList);
-    }
-    constructor(name, data) {
-        this._name = name;
-        this._elementList = [];
-        data.elements.forEach(element => {
-            if (this.isIElementDefintion(element))
-                this._elementList.push(element);
-            else
-                this._elementList.push({ tag: element });
-        });
-    }
-    isIElementDefintion(object) {
-        return object != null && object.tag != null;
-    }
-}
+export class PreDefinedElementsService {
+    _name;
+    get name() { return this._name; }
+    _elementList;
+    getElements() {
+        return Promise.resolve(this._elementList);
+    }
+    constructor(name, data) {
+        this._name = name;
+        this._elementList = [];
+        data.elements.forEach(element => {
+            if (this.isIElementDefintion(element))
+                this._elementList.push(element);
+            else
+                this._elementList.push({ tag: element });
+        });
+    }
+    isIElementDefintion(object) {
+        return object != null && object.tag != null;
+    }
+}

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";
-export declare class DefaultHtmlParserService implements IHtmlParserService {
-    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    createDesignItems(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
-    private _createDesignItemsRecursive;
-}
+import { IDesignItem } from "../../..";
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+export declare class DefaultHtmlParserService implements IHtmlParserService {
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    createDesignItems(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
+    private _createDesignItemsRecursive;
+}

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

@@ -1,18 +1,18 @@
-import { DesignItem } from '../../item/DesignItem';
-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);
-    }
-    createDesignItems(elements, serviceContainer, instanceServiceContainer) {
-        let res = [];
-        for (let el of elements) {
-            res.push(this._createDesignItemsRecursive(el, serviceContainer, instanceServiceContainer));
-        }
-        return res;
-    }
-    _createDesignItemsRecursive(element, serviceContainer, instanceServiceContainer) {
-        return DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer);
-    }
-}
+import { DesignItem } from '../../item/DesignItem';
+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);
+    }
+    createDesignItems(elements, serviceContainer, instanceServiceContainer) {
+        let res = [];
+        for (let el of elements) {
+            res.push(this._createDesignItemsRecursive(el, serviceContainer, instanceServiceContainer));
+        }
+        return res;
+    }
+    _createDesignItemsRecursive(element, serviceContainer, instanceServiceContainer) {
+        return DesignItem.createDesignItemFromInstance(element, 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';
-export interface IHtmlParserService extends IService {
-    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-}
+import { IService } from '../IService';
+import type { ServiceContainer } from '../ServiceContainer';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+export interface IHtmlParserService extends IService {
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+}

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

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

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

@@ -1,11 +1,11 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer";
-import { ServiceContainer } from "../ServiceContainer";
-import { IHtmlParserService } from "./IHtmlParserService";
-import { IDesignItem } from '../../item/IDesignItem';
-export declare class NodeHtmlParserService implements IHtmlParserService {
-    private _parserUrl;
-    constructor(parserUrl?: string);
-    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    private _parseDiv;
-    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
-}
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    private _parserUrl;
+    constructor(parserUrl?: string);
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

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

@@ -1,87 +1,87 @@
-import { DesignItem } from '../../item/DesignItem';
-import { CssAttributeParser } from "../../helper/CssAttributeParser";
-import { newElementFromString } from "../../helper/ElementHelper";
-// 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 {
-    _parserUrl;
-    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
-        this._parserUrl = parserUrl;
-    }
-    async parse(html, serviceContainer, instanceServiceContainer) {
-        //@ts-ignore
-        let parser = await import(this._parserUrl);
-        const parsed = parser.parse(html, { comment: true });
-        let designItems = [];
-        for (let p of parsed.childNodes) {
-            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
-            if (di != null)
-                designItems.push(di);
-            else
-                console.warn("NodeHtmlParserService - could not parse element", p);
-        }
-        return designItems;
-    }
-    _parseDiv = document.createElement("div");
-    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
-        let designItem = null;
-        if (item.nodeType == 1) {
-            let element;
-            if (!namespace)
-                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
-            if (!element) {
-                if (namespace)
-                    element = document.createElementNS(namespace, item.rawTagName);
-                else
-                    element = document.createElement(item.rawTagName);
-            }
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
-            let hideAtDesignTime = false;
-            let hideAtRunTime = false;
-            let lockAtDesignTime = false;
-            let style = '';
-            let attr = item.attributes;
-            for (let a in attr) {
-                if (a !== 'style') {
-                    designItem.setAttribute(a, attr[a]);
-                    if (a === 'node-projects-hide-at-design-time')
-                        hideAtDesignTime = true;
-                    else if (a === 'node-projects-hide-at-run-time')
-                        hideAtRunTime = true;
-                    else if (a === 'node-projects-lock-at-design-time')
-                        lockAtDesignTime = true;
-                }
-                else {
-                    style = attr[a];
-                }
-            }
-            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
-                let styleParser = new CssAttributeParser();
-                styleParser.parse(style);
-                for (let s of styleParser.entries) {
-                    designItem.setStyle(s.name, s.value);
-                }
-            }
-            if (element instanceof HTMLElement || element instanceof SVGElement)
-                element.style.pointerEvents = 'auto';
-            designItem.hideAtDesignTime = hideAtDesignTime;
-            designItem.hideAtRunTime = hideAtRunTime;
-            designItem.lockAtDesignTime = lockAtDesignTime;
-            element.draggable = false; //even if it should be true, for better designer exp.
-            for (let c of item.childNodes) {
-                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
-                designItem._insertChildInternal(di);
-            }
-        }
-        else if (item.nodeType == 3) {
-            this._parseDiv.innerHTML = item.rawText;
-            let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
-        }
-        else if (item.nodeType == 8) {
-            let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
-        }
-        return designItem;
-    }
-}
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// 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 {
+    _parserUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
+        this._parserUrl = parserUrl;
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem.setStyle(s.name, s.value);
+                }
+            }
+            if (element instanceof HTMLElement || element instanceof SVGElement)
+                element.style.pointerEvents = 'auto';
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem._insertChildInternal(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

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

@@ -1,10 +1,10 @@
-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 abstract class AbstractHtmlWriterService implements IHtmlWriterService {
-    abstract write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
-    writeAttributes(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
-    writeStyles(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
-}
+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 abstract class AbstractHtmlWriterService implements IHtmlWriterService {
+    abstract write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    writeAttributes(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+    writeStyles(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+}

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

@@ -1,62 +1,62 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { CssCombiner } from '../../helper/CssCombiner.js';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
-export class AbstractHtmlWriterService {
-    writeAttributes(indentedTextWriter, designItem, options) {
-        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 (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 (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, options) {
-        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('"');
-        }
-    }
-}
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+export class AbstractHtmlWriterService {
+    writeAttributes(indentedTextWriter, designItem, options) {
+        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 (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 (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('&quot;')) {
+                            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, options) {
+        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('"');
+        }
+    }
+}