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

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

@@ -1,137 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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 copy.d.ts

@@ -1,8 +0,0 @@
-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 copy.js

@@ -1,10 +0,0 @@
-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/PolymerPropertiesService.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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[];
-}