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

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

@@ -0,0 +1,93 @@
+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';
+export var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+export class SimpleHtmlWriterService {
+    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);
+        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();
+            this._writeDesignItemList(currentElementDisplayType, writeContext, children);
+        }
+        else if (designItem.hasContent) {
+            writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+        }
+        if (!DomConverter.IsSelfClosingElement(designItem.name)) {
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+            if (currentElementDisplayType !== ElementDisplayType.none) {
+                writeContext.lastElementDisplayType = currentElementDisplayType;
+            }
+        }
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            this._writeInternal(writeContext, c);
+        }
+    }
+    _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 });
+        }
+    }
+    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/initializationService/DefaultIntializationService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IIntializationService } from './IIntializationService';
+export declare class DefaultIntializationService implements IIntializationService {
+    init(designItem: IDesignItem): void;
+    initializeIframe(iframe: HTMLIFrameElement): void;
+}

package/dist/elements/services/initializationService/DefaultIntializationService.js

@@ -0,0 +1,22 @@
+export class DefaultIntializationService {
+    init(designItem) {
+        if (designItem.name == 'iframe') {
+            this.initializeIframe(designItem.element);
+        }
+    }
+    initializeIframe(iframe) {
+        iframe.contentDocument.body.style.pointerEvents = 'none';
+        function cloneIframeEvent(event) {
+            var clRect = iframe.getBoundingClientRect();
+            let data = { ...event };
+            data.clientX = event.clientX + clRect.left;
+            data.clientY = event.clientY + clRect.top;
+            var evt = new PointerEvent(event.type, data); //new CustomEvent('pointerdown', {bubbles: true, cancelable: false});
+            iframe.dispatchEvent(evt);
+        }
+        iframe.contentWindow.addEventListener('pointerdown', cloneIframeEvent);
+        iframe.contentWindow.addEventListener('pointermove', cloneIframeEvent);
+        iframe.contentWindow.addEventListener('pointerup', cloneIframeEvent);
+    }
+    ;
+}

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

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

package/dist/elements/services/initializationService/IIntializationService copy.js

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

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

@@ -53,7 +53,7 @@ export class DefaultInstanceService {
         if (definition.defaultProperties) {
             let propertiesService = null;
             if (definition.type) {
-                propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.name == definition.type);
+                propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.isHandledElement(designItem));
             }
             let properties = propertiesService.getProperties(designItem);
             for (let a in definition.defaultProperties) {

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

@@ -0,0 +1,26 @@
+import { IDesignItem } from "../../..";
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { ValueType } from "../propertiesService/ValueType";
+export declare class WebcomponentManifestParserService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, file: string);
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): void;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): void;
+}

package/dist/elements/services/manifestLoaders/WebcomponentManifestParserService.js

@@ -0,0 +1,69 @@
+export class WebcomponentManifestParserService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, file) {
+        this._name = name;
+        import(file, { assert: { type: 'json' } }).then(module => {
+            this._packageData = module.default;
+            this._elementList = [];
+            for (let m of this._packageData.modules) {
+                for (let e of m.exports) {
+                    if (e.kind == 'custom-element-definition') {
+                        this._elementList.push({ tag: e.name });
+                    }
+                }
+                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;
+            }
+        });
+    }
+    async getElements() {
+        if (this._packageData)
+            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); });
+    }
+    isHandledElement(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperties(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperty(designItem, name) {
+        throw new Error("Method not implemented.");
+    }
+    getPropertyTarget(designItem, property) {
+        throw new Error("Method not implemented.");
+    }
+    setValue(designItems, property, value) {
+        throw new Error("Method not implemented.");
+    }
+    clearValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    isSet(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getUnsetValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+}

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

@@ -0,0 +1,25 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { IDesignItem } from "../../item/IDesignItem";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -0,0 +1,92 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { PropertyType } from "../propertiesService/PropertyType";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
+        super();
+        this._name = name;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    async getElements() {
+        if (this._packageData)
+            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); });
+    }
+    isHandledElement(designItem) {
+        return this._elementList.find(x => x.tag == designItem.name) != null;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

package/dist/elements/services/propertiesService/DefaultEditorTypesService.js

@@ -49,7 +49,6 @@ export class DefaultEditorTypesService {
                     return new ThicknessPropertyEditor(property);
                 }
             case "css-length":
-            case "thickness":
             case "string":
             default:
                 {

package/dist/elements/services/propertiesService/IPropertiesService.d.ts

@@ -4,7 +4,6 @@ import { IDesignItem } from '../../item/IDesignItem';
 import { ValueType } from './ValueType';
 import { BindingTarget } from '../../item/BindingTarget';
 export interface IPropertiesService extends IService {
-    readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[];
     getProperty(designItem: IDesignItem, name: string): IProperty;

package/dist/elements/services/propertiesService/IProperty.d.ts

@@ -1,9 +1,12 @@
 import { IPropertiesService } from './IPropertiesService';
 import { IPropertyEditor } from './IPropertyEditor';
+import { PropertyType } from './PropertyType';
 export interface IProperty {
     name: string;
+    propertyName?: string;
+    attributeName?: string;
     description?: string;
-    type?: string;
+    type?: 'json' | 'color' | 'date' | 'number' | 'list' | 'enum' | 'boolean' | 'img-lis' | 'thickness' | 'css-length' | 'string' | string;
     default?: any;
     min?: number;
     max?: number;
@@ -14,4 +17,5 @@ export interface IProperty {
     value?: any;
     service: IPropertiesService;
     defaultValue?: any;
+    propertyType: PropertyType;
 }

package/dist/elements/services/propertiesService/PropertyType.d.ts

@@ -0,0 +1,6 @@
+export declare enum PropertyType {
+    property = "property",
+    attribute = "attribute",
+    propertyAndAttribute = "propertyAndAttribute",
+    cssValue = "cssvalue"
+}

package/dist/elements/services/propertiesService/PropertyType.js

@@ -0,0 +1,7 @@
+export var PropertyType;
+(function (PropertyType) {
+    PropertyType["property"] = "property";
+    PropertyType["attribute"] = "attribute";
+    PropertyType["propertyAndAttribute"] = "propertyAndAttribute";
+    PropertyType["cssValue"] = "cssvalue";
+})(PropertyType || (PropertyType = {}));

package/dist/elements/services/propertiesService/services/AbstractBasePropertiesService.js

@@ -1,5 +1,6 @@
 import { PropertiesHelper } from './PropertiesHelper';
 import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService";
+import { PropertyType } from '../PropertyType';
 export class AbstractBasePropertiesService extends UnkownElementPropertiesService {
     getProperties(designItem) {
         if (!this.isHandledElement(designItem))
@@ -14,27 +15,27 @@ export class AbstractBasePropertiesService extends UnkownElementPropertiesServic
             if (polymerProperty.type)
                 type = polymerProperty.type;
             if (type === String) {
-                let property = { name: name, type: "string", service: this };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Object) {
-                let property = { name: name, type: "object", service: this };
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Number) {
-                let property = { name: name, type: "number", service: this };
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Date) {
-                let property = { name: name, type: "date", service: this };
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Boolean) {
-                let property = { name: name, type: "boolean", service: this };
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (PropertiesHelper.isTypescriptEnum(type)) {
-                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this };
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
         }

package/dist/elements/services/propertiesService/services/AttributesPropertiesService.js

@@ -1,18 +1,19 @@
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
+import { PropertyType } from "../PropertyType";
 export class AttributesPropertiesService {
     name = "attributes";
     isHandledElement(designItem) {
         return true;
     }
     getProperty(designItem, name) {
-        return { name: name, type: 'string', service: this };
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute };
     }
     getProperties(designItem) {
         if (designItem) {
             let p = [];
             for (let a of designItem.attributes.keys()) {
-                p.push({ name: a, type: 'string', service: this });
+                p.push({ name: a, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
             }
             return p;
         }

package/dist/elements/services/propertiesService/services/CommonPropertiesService.js

@@ -1,24 +1,31 @@
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
+import { PropertyType } from "../PropertyType";
 export class CommonPropertiesService {
     //@ts-ignore
     commonProperties = [
         {
             name: "id",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "class",
             type: "string",
-            service: this
+            service: this,
+            attributeName: "class",
+            propertyName: "className",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "title",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "tabindex",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     name = "common";