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

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

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

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

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

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

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

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

@@ -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.js

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

package/dist/elements/services/webcomponentManifestParserService/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/webcomponentManifestParserService/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/widgets/demoView/IDemoView.d.ts

@@ -1,5 +1,5 @@
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
 import { ServiceContainer } from '../../services/ServiceContainer';
 export interface IDemoView {
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
 }

package/dist/elements/widgets/demoView/demoView.d.ts

@@ -7,5 +7,5 @@ export declare class DemoView extends BaseCustomWebComponentLazyAppend implement
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -29,9 +29,9 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    async display(serviceContainer, instanceServiceContainer, code) {
+    async display(serviceContainer, instanceServiceContainer, code, style) {
         this._loading.hidden = false;
-        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);
         this._loading.hidden = true;
     }
 }

package/dist/elements/widgets/designerView/DomConverter.js

@@ -19,7 +19,6 @@ export class DomConverter {
             tag === 'col' ||
             tag === 'embed' ||
             tag === 'hr' ||
-            tag === 'iframe' ||
             tag === 'img' ||
             tag === 'input' ||
             tag === 'keygen' ||
@@ -33,12 +32,7 @@ export class DomConverter {
     static ConvertToString(designItems, designItemsAssignmentList) {
         let itw = new IndentedTextWriter();
         let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true };
-        for (let d of designItems) {
-            d.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
-                if (s.canWrite(d))
-                    s.write(itw, d, options, designItemsAssignmentList);
-            });
-        }
+        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
         return itw.getString();
     }
 }

package/dist/elements/widgets/designerView/designerCanvas.js

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