npm - @node-projects/web-component-designer - Versions diffs - 0.0.75 → 0.0.76 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # web-component-designer
-## Caution - this is a preview Version, a RC is planed for Q3/2021
+## Caution - this is a preview Version, a RC is planed for January 2022
 A HTML WebComponent for Designing Webcomponents and HTML Pages.
@@ -81,4 +81,4 @@ Your addition to your index.html should look like this:
 The Library uses Images from the Chrome Dev Tools, see
 https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src
 and
-https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE
+https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE

package/dist/elements/services/BaseServiceContainer.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export declare class BaseServiceContainer<NameMap> {
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];
     getServices<K extends keyof NameMap>(service: K): NameMap[K][];
     register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
+    registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
     forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
     getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];
 }

package/dist/elements/services/BaseServiceContainer.js CHANGED Viewed

@@ -14,6 +14,13 @@ export class BaseServiceContainer {
             this._services.set(name, []);
         this._services.get(name).push(service);
     }
+    registerMultiple(names, service) {
+        for (const name of names) {
+            if (!this._services.has(name))
+                this._services.set(name, []);
+            this._services.get(name).push(service);
+        }
+    }
     forSomeServicesTillResult(service, callback) {
         let services = this.getServices(service);
         if (services == null) {

package/dist/elements/services/demoProviderService/DemoProviderService.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class DemoProviderService {
             }
             doc.write("document.body.style.display='';");
             doc.write('</script>');
-            doc.write('<body style="display:none">' + code + '</body>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
             doc.close();
         });
     }

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,23 @@
+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;
+    constructor(name: string, file: string);
+    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 ADDED Viewed

@@ -0,0 +1,80 @@
+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;
+    constructor(name, file) {
+        super();
+        this._name = name;
+        let path = file.split('/').slice(0, -1).join('/');
+        import(file, { assert: { type: 'json' } }).then(module => {
+            this._packageData = module.default;
+            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: path + '/' + 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;
+                                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;
+                }
+            }
+        }).catch(err => {
+            if (this._rejectStored) {
+                this._rejectStored.forEach(x => x(err));
+                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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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";

package/dist/elements/services/propertiesService/services/CssPropertiesService.js CHANGED Viewed

@@ -1,85 +1,103 @@
 import { ValueType } from '../ValueType';
 import { NodeType } from '../../../item/NodeType';
 import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType';
 export class CssPropertiesService {
     //@ts-ignore
     styles = [
         {
             name: "color",
             type: "color",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "background-color",
             type: "color",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "box-sizing",
             type: "list",
             values: ["border-box", "content-box"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "border",
             type: "string",
             default: "0px none rbg(0,0,0)",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "box-shadow",
             type: "string",
             default: "none",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "opacity",
             type: "number",
             min: 0,
             max: 1,
             step: 0.1,
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "padding",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "margin",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "left",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "top",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "right",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "bottom",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "width",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "height",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "font-size",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "font-weight",
             type: "list",
             values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     //@ts-ignore
@@ -88,24 +106,29 @@ export class CssPropertiesService {
             name: "display",
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "inset",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "margin",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "padding",
             type: "thickness",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     //@ts-ignore
@@ -114,48 +137,58 @@ export class CssPropertiesService {
             name: "display",
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "grid-template-columns",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "grid-template-rows",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "column-gap",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "row-gap",
             type: "css-length",
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-content",
             type: "img-list",
             values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "justify-content",
             type: "img-list",
             values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-items",
             type: "img-list",
             values: ["center", "start", "end", "stretch", "baseline"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "justify-items",
             type: "img-list",
             values: ["center", "start", "end", "stretch"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     //@ts-ignore
@@ -164,37 +197,44 @@ export class CssPropertiesService {
             name: "display",
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "flex-direction",
             type: "img-list",
             values: ["row", "column"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "flex-wrap",
             type: "img-list",
             values: ["nowrap", "wrap"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-content",
             type: "img-list",
             values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "justify-content",
             type: "img-list",
             values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }, {
             name: "align-items",
             type: "img-list",
             values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
-            service: this
+            service: this,
+            propertyType: PropertyType.cssValue
         }
     ];
     name;
@@ -206,7 +246,7 @@ export class CssPropertiesService {
     }
     getProperty(designItem, name) {
         if (this.name == 'set-styles') {
-            return { name: name, type: 'string', service: this };
+            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
         }
         return this[this.name][name];
     }
@@ -214,7 +254,7 @@ export class CssPropertiesService {
         if (this.name == 'set-styles') {
             if (!designItem)
                 return [];
-            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this }));
+            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
         }
         return this[this.name];
     }

package/dist/elements/services/propertiesService/services/IJsonPropertyDefinition.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
+import { PropertyType } from "../PropertyType";
 export interface IJsonPropertyDefinition {
     name: string;
+    propertyName?: string;
+    attributeName?: string;
     description?: string;
     type?: string;
     default?: any;
@@ -10,4 +13,5 @@ export interface IJsonPropertyDefinition {
     enumValues?: [name: string, value: string | number][];
     value?: any;
     defaultValue?: any;
+    propertyType?: PropertyType.cssValue;
 }

package/dist/elements/services/propertiesService/services/ListPropertiesService.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { UnkownElementPropertiesService } from './UnkownElementPropertiesService';
+import { PropertyType } from '../PropertyType';
 export class ListPropertiesService extends UnkownElementPropertiesService {
     name = "list";
     _propertys = new Map();
@@ -11,6 +12,8 @@ export class ListPropertiesService extends UnkownElementPropertiesService {
                 let pdef = propertyDefinitions[e][p];
                 parr.push({
                     name: pdef.name,
+                    propertyName: pdef.propertyName,
+                    attributeName: pdef.attributeName,
                     description: pdef.description,
                     type: pdef.type,
                     default: pdef.default,
@@ -21,7 +24,8 @@ export class ListPropertiesService extends UnkownElementPropertiesService {
                     enumValues: pdef.enumValues,
                     value: pdef.value,
                     defaultValue: pdef.defaultValue,
-                    service: this
+                    service: this,
+                    propertyType: pdef.propertyType ?? PropertyType.propertyAndAttribute
                 });
             }
         }

package/dist/elements/services/propertiesService/services/Lit2PropertiesService.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { AbstractBasePropertiesService } from "./AbstractBasePropertiesService";
 import { PropertiesHelper } from './PropertiesHelper';
+import { PropertyType } from '../PropertyType';
 export class Lit2PropertiesService extends AbstractBasePropertiesService {
     name = "lit2";
     isHandledElement(designItem) {
@@ -19,27 +20,27 @@ export class Lit2PropertiesService extends AbstractBasePropertiesService {
             if (litProperty.type)
                 type = litProperty.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: "string", service: this };
+                let property = { name: name, type: "string", 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/NativeElementsPropertiesService.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
+import { PropertyType } from '../PropertyType';
 export class NativeElementsPropertiesService extends CommonPropertiesService {
     //@ts-ignore
     inputProperties = [
@@ -7,23 +8,28 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "list",
             values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
             service: this,
-            defaultValue: "text"
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "value",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "checked",
             type: "boolean",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "min",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "max",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     buttonProperties = [
@@ -32,43 +38,50 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "list",
             values: ["button", "submit", "reset"],
             service: this,
-            defaultValue: "button"
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "value",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "disabled",
             type: "boolean",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     anchorProperties = [
         {
             name: "href",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     divProperties = [
         {
             name: "title",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     imgProperties = [
         {
             name: "src",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     iframeProperties = [
         {
             name: "src",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     name = "native";

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts CHANGED Viewed

@@ -3,8 +3,7 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
-export declare class UnkownElementPropertiesService implements IPropertiesService {
-    readonly name: string;
+export declare abstract class UnkownElementPropertiesService implements IPropertiesService {
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
 import { BindingTarget } from "../../../item/BindingTarget";
+//@ts-ignore
 export class UnkownElementPropertiesService {
-    name = "unkown";
     isHandledElement(designItem) {
         return true;
     }

package/dist/elements/services/webcomponentManifestParserService/WebcomponentManifestParserService.1.d.ts ADDED Viewed

File without changes

package/dist/elements/services/webcomponentManifestParserService/WebcomponentManifestParserService.1.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";

package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.d.ts ADDED Viewed

@@ -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/webcomponentManifestParserService/webcomponentManifestParserService.js ADDED Viewed

@@ -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/widgets/designerView/designerCanvas.js CHANGED Viewed

@@ -73,6 +73,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       position: relative;
       transform: translateZ(0);
       overflow: hidden;
+      font-family: initial;
+      font-size: initial;
+      font-weight: initial;
+      font-style: initial;
+      line-height: initial;
     }
     * {
       touch-action: none;

package/dist/elements/widgets/paletteView/paletteTreeView.js CHANGED Viewed

@@ -101,14 +101,19 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
                 title: s.name,
                 folder: true
             });
-            let elements = await s.getElements();
-            for (let e of elements) {
-                newNode.addChildren({
-                    title: e.name ?? e.tag,
-                    folder: false,
-                    //@ts-ignore
-                    ref: e
-                });
+            try {
+                let elements = await s.getElements();
+                for (let e of elements) {
+                    newNode.addChildren({
+                        title: e.name ?? e.tag,
+                        folder: false,
+                        //@ts-ignore
+                        ref: e
+                    });
+                }
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
             }
             //@ts-ignore
             newNode.updateCounters();

package/dist/elements/widgets/paletteView/paletteView.js CHANGED Viewed

@@ -20,11 +20,16 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
     }
     async loadControls(serviceContainer, elementsServices) {
         for (const s of elementsServices) {
-            let elements = await s.getElements();
-            let paletteElement = new PaletteElements();
-            paletteElement.title = s.name;
-            this._designerTabControl.appendChild(paletteElement);
-            paletteElement.loadElements(serviceContainer, elements);
+            try {
+                let elements = await s.getElements();
+                let paletteElement = new PaletteElements();
+                paletteElement.title = s.name;
+                this._designerTabControl.appendChild(paletteElement);
+                paletteElement.loadElements(serviceContainer, elements);
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
         }
     }
 }

package/dist/index.d.ts CHANGED Viewed

@@ -54,6 +54,7 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
+export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
@@ -69,6 +70,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";

package/dist/index.js CHANGED Viewed

@@ -31,6 +31,7 @@ export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
@@ -42,6 +43,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -24,6 +24,7 @@
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
     "codemirror": "^5.65.0",
+    "custom-elements-manifest": "^1.0.0",
     "esprima-next": "^5.7.0",
     "html2canvas": "*",
     "jest": "^27.4.5",