@node-projects/web-component-designer 0.1.0 → 0.1.1

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

@@ -0,0 +1,137 @@
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js';
+import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js';
+//TODO: remove this code when import asserts are supported
+let cssProperties;
+//@ts-ignore
+if (window.importShim) {
+    const cssPropertiesUrl = import.meta.resolve('./CssProperties.json');
+    //@ts-ignore
+    cssProperties = await importShim(cssPropertiesUrl, { assert: { type: 'json' } });
+}
+else
+    //@ts-ignore
+    cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+if (cssProperties.default)
+    cssProperties = cssProperties.default;
+export class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    //metrics
+    layout = {
+        "common": [
+            "display",
+            "color",
+            "background-color",
+            "box-sizing",
+            "border",
+            "box-shadow",
+            "opacity",
+            "position",
+        ],
+        "font": [
+            "font-family",
+            "font-size",
+            "font-weight",
+        ],
+        "layout": [
+            "inset",
+            "margin",
+            "border",
+            "padding",
+            "overflow",
+            "metrics"
+        ]
+    };
+    grid = [
+        "display",
+        "position",
+        "grid-template-columns",
+        "grid-template-rows",
+        "column-gap",
+        "row-gap",
+        "align-content",
+        "justify-content",
+        "align-items",
+        "justify-items",
+    ];
+    gridChild = [
+        "grid-row",
+        "grid-column",
+        "assigned-row-column",
+        "align-self",
+        "justify-self"
+    ];
+    flex = [
+        "display",
+        "position",
+        "flex-direction",
+        "flex-wrap",
+        "align-content",
+        "justify-content",
+        "align-items"
+    ];
+    flexChild = [
+        "align-self",
+        "justify-self"
+    ];
+    svg = [
+        "fill",
+        "fill-rule",
+        "fill-opacity",
+        "stroke",
+        "stroke-width",
+        "stroke-dash-array",
+        "stroke-opacity"
+    ];
+    constructor(name) {
+        super();
+        this.name = name;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return this._getPropertyDef(name);
+    }
+    getProperties(designItem) {
+        const propNames = this[this.name];
+        if (Array.isArray(propNames)) {
+            const propertiesList = propNames.map(x => this._getPropertyDef(x));
+            return propertiesList;
+        }
+        else {
+            let grps = [];
+            for (let g in propNames) {
+                let grp = { name: g, properties: propNames[g].map(x => this._getPropertyDef(x)) };
+                grps.push(grp);
+            }
+            return grps;
+        }
+    }
+    _getPropertyDef(name) {
+        const camelName = PropertiesHelper.dashToCamelCase(name);
+        switch (camelName) {
+            case 'assignedRowColumn':
+                return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new GridAssignedRowColumnPropertyEditor(p) };
+            case 'metrics':
+                return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new MetricsPropertyEditor(p) };
+            default:
+                return {
+                    name,
+                    type: cssProperties[camelName]?.type ?? 'string',
+                    values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                    service: this,
+                    propertyType: PropertyType.cssValue
+                };
+        }
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { PropertyType } from '../PropertyType.js';
+export interface IJsonPropertyDefinition {
+    name: string;
+    propertyName?: string;
+    attributeName?: string;
+    description?: string;
+    type?: string;
+    default?: any;
+    min?: number;
+    max?: number;
+    step?: number;
+    values?: string[];
+    enumValues?: [name: string, value: string | number][];
+    value?: any;
+    defaultValue?: any;
+    propertyType?: PropertyType.cssValue;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { IJsonPropertyDefinition } from './IJsonPropertyDefinition.js';
+export interface IJsonPropertyDefinitions {
+    [key: string]: IJsonPropertyDefinition[];
+}

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

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

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

@@ -0,0 +1,15 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IJsonPropertyDefinitions } from './IJsonPropertyDefinitions.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class ListPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    name: string;
+    private _propertys;
+    constructor(propertyDefinitions: IJsonPropertyDefinitions);
+    isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,45 @@
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class ListPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    name = "list";
+    _propertys = new Map();
+    constructor(propertyDefinitions) {
+        super();
+        for (let e in propertyDefinitions) {
+            let parr = [];
+            this._propertys.set(e, parr);
+            for (let p in propertyDefinitions[e]) {
+                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,
+                    min: pdef.min,
+                    max: pdef.max,
+                    step: pdef.step,
+                    values: pdef.values,
+                    enumValues: pdef.enumValues,
+                    value: pdef.value,
+                    defaultValue: pdef.defaultValue,
+                    service: this,
+                    propertyType: pdef.propertyType ?? PropertyType.propertyAndAttribute
+                });
+            }
+        }
+    }
+    isHandledElement(designItem) {
+        return this._propertys.has(designItem.element.localName);
+    }
+    _notifyChangedProperty(designItem, property, value) {
+    }
+    getProperties(designItem) {
+        return this._propertys.get(designItem.element.localName);
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class Lit2PropertiesService extends AbstractPolymerLikePropertiesService {
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+}

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

@@ -0,0 +1,51 @@
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+import { PropertyType } from '../PropertyType.js';
+export class Lit2PropertiesService extends AbstractPolymerLikePropertiesService {
+    name = "lit2";
+    isHandledElement(designItem) {
+        let prop = designItem.element.constructor.elementProperties;
+        if (prop)
+            return true;
+        return false;
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        let properties = [];
+        for (const p of designItem.element.constructor.elementProperties.entries()) {
+            let name = p[0];
+            const litProperty = p[1];
+            let type = litProperty;
+            if (litProperty.type)
+                type = litProperty.type;
+            if (type === String) {
+                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, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Number) {
+                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, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Boolean) {
+                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, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+        }
+        return properties;
+    }
+    _notifyChangedProperty(designItem, property, value) {
+    }
+}

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

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+export declare class LitElementPropertiesService extends AbstractPolymerLikePropertiesService {
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+}

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

@@ -0,0 +1,17 @@
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+export class LitElementPropertiesService extends AbstractPolymerLikePropertiesService {
+    name = "lit";
+    isHandledElement(designItem) {
+        let proto = designItem.element.constructor.__proto__;
+        while (proto != null) {
+            if (proto.name == 'LitElement')
+                return true;
+            if (proto.name == undefined || proto.name == 'HTMLElement' || proto.name == 'Element' || proto.name == 'Node' || proto.name == 'HTMLElement')
+                return false;
+            proto = proto.__proto__;
+        }
+        return false;
+    }
+    _notifyChangedProperty(designItem, property, value) {
+    }
+}

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

@@ -0,0 +1,21 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class NativeElementsPropertiesService extends CommonPropertiesService {
+    private inputProperties;
+    private textareaProperties;
+    private selectProperties;
+    private buttonProperties;
+    private anchorProperties;
+    private divProperties;
+    private imgProperties;
+    private iframeProperties;
+    private formElementProperties;
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,211 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class NativeElementsPropertiesService extends CommonPropertiesService {
+    inputProperties = [
+        {
+            name: "type",
+            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",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "min",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "max",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    textareaProperties = [
+        {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "maxlength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "cols",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "rows",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "resize",
+            type: "list",
+            values: ["both", "none", "horizontal", "vertical"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    selectProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "size",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "multiple",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    formElementProperties = [
+        {
+            name: "autofocus",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "required",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "native";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'input':
+            case 'textarea':
+            case 'select':
+            case 'button':
+            case 'a':
+            case 'div':
+            case 'span':
+            case 'br':
+            case 'img':
+            case 'iframe':
+                return true;
+        }
+        return false;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        switch (designItem.element.localName) {
+            case 'input':
+                return [...this.inputProperties, ...this.formElementProperties];
+            case 'textarea':
+                return [...this.textareaProperties, ...this.formElementProperties];
+            case 'select':
+                return [...this.selectProperties, ...this.formElementProperties];
+            case 'button':
+                return [...this.buttonProperties, ...this.formElementProperties];
+            case 'a':
+                return this.anchorProperties;
+            case 'div':
+                return this.divProperties;
+            case 'img':
+                return this.imgProperties;
+            case 'iframe':
+                return this.iframeProperties;
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+export declare class PolymerPropertiesService extends AbstractPolymerLikePropertiesService {
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+}

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

@@ -0,0 +1,10 @@
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+export class PolymerPropertiesService extends AbstractPolymerLikePropertiesService {
+    name = "polymer";
+    isHandledElement(designItem) {
+        return designItem.element.constructor.polymerElementVersion != null;
+    }
+    _notifyChangedProperty(designItem, property, value) {
+        designItem.element.set(property.name, value);
+    }
+}

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

@@ -0,0 +1,6 @@
+export declare class PropertiesHelper {
+    static isTypescriptEnum(value: any): boolean;
+    static getTypescriptEnumEntries(value: any): [name: string, value: string | number][];
+    static camelToDashCase(text: string): string;
+    static dashToCamelCase(text: string): string;
+}

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

@@ -0,0 +1,27 @@
+export class PropertiesHelper {
+    static isTypescriptEnum(value) {
+        if (value && typeof value === 'object' && value.constructor == Object) {
+            for (let k in value) {
+                const tp = typeof value[k];
+                if (tp !== 'string' && tp !== 'number')
+                    return false;
+            }
+            return true;
+        }
+        return false;
+    }
+    static getTypescriptEnumEntries(value) {
+        let ret = [];
+        for (let k in value) {
+            if (isNaN(k))
+                ret.push([k, value[k]]);
+        }
+        return ret;
+    }
+    static camelToDashCase(text) {
+        return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+    }
+    static dashToCamelCase(text) {
+        return text.replace(/-([a-z])/g, (i) => i[1].toUpperCase());
+    }
+}

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

@@ -0,0 +1,16 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class SVGElementsPropertiesService extends CommonPropertiesService {
+    private rectProperties;
+    private lineProperties;
+    private ellipseProperties;
+    private pathProperties;
+    private svgProperties;
+    private defaultProperties;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}