@node-projects/web-component-designer 0.0.184 → 0.0.186

package/dist/elements/helper/IndentedTextWriter copy.js

@@ -1,34 +0,0 @@
-export class IndentedTextWriter {
-    _textHolder = '';
-    indent = 4;
-    level = 0;
-    get position() {
-        return this._textHolder.length;
-    }
-    isLastCharNewline() {
-        return this._textHolder[this._textHolder.length - 1] === '\n';
-    }
-    levelRaise() {
-        this.level++;
-    }
-    levelShrink() {
-        this.level--;
-    }
-    write(text) {
-        this._textHolder += text;
-    }
-    writeLine(text) {
-        this.writeIndent();
-        this._textHolder += text;
-        this.writeNewline();
-    }
-    writeIndent() {
-        this._textHolder += ''.padEnd(this.level * this.indent, ' ');
-    }
-    writeNewline() {
-        this._textHolder += '\n';
-    }
-    getString() {
-        return this._textHolder;
-    }
-}

package/dist/elements/helper/SimpleTextWriter copy.d.ts

@@ -1,12 +0,0 @@
-export declare class SimpleTextWriter {
-    private _textHolder;
-    get position(): number;
-    isLastCharNewline(): boolean;
-    levelRaise(): void;
-    levelShrink(): void;
-    write(text: string): void;
-    writeLine(text: string): void;
-    writeIndent(): void;
-    writeNewline(): void;
-    getString(): string;
-}

package/dist/elements/helper/SimpleTextWriter copy.js

@@ -1,26 +0,0 @@
-export class SimpleTextWriter {
-    _textHolder = '';
-    get position() {
-        return this._textHolder.length;
-    }
-    isLastCharNewline() {
-        return this._textHolder[this._textHolder.length - 1] === '\n';
-    }
-    levelRaise() {
-    }
-    levelShrink() {
-    }
-    write(text) {
-        this._textHolder += text;
-    }
-    writeLine(text) {
-        this._textHolder += text;
-    }
-    writeIndent() {
-    }
-    writeNewline() {
-    }
-    getString() {
-        return this._textHolder;
-    }
-}

package/dist/elements/services/htmlParserService/LitElementParserService copy.d.ts

@@ -1,12 +0,0 @@
-import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
-import { ServiceContainer } from '../ServiceContainer.js';
-import { IHtmlParserService } from './IHtmlParserService.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-export declare class LitElementParserService implements IHtmlParserService {
-    private _parserUrl;
-    private _esprimaUrl;
-    constructor(parserUrl?: string, esprimaUrl?: string);
-    parse(module: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    private _parseDiv;
-    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
-}

package/dist/elements/services/htmlParserService/LitElementParserService copy.js

@@ -1,120 +0,0 @@
-import { DesignItem } from '../../item/DesignItem.js';
-import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
-import { newElementFromString } from '../../helper/ElementHelper.js';
-import * as esprima from "esprima-next/dist/esm/esprima";
-function* getChildNodes(node) {
-    switch (node.type) {
-        case esprima.Syntax.Program:
-            yield node.body;
-            break;
-        case esprima.Syntax.ClassDeclaration:
-            yield node.body;
-            break;
-        case esprima.Syntax.MethodDefinition:
-            yield node.value;
-            break;
-    }
-}
-// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
-// attributes from their DOM, so you loose Data
-export class LitElementParserService {
-    _parserUrl;
-    _esprimaUrl;
-    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js', esprimaUrl = '../../../../../esprima-next/dist/esm/esprima.js') {
-        this._parserUrl = parserUrl;
-        this._esprimaUrl = esprimaUrl;
-    }
-    async parse(module, serviceContainer, instanceServiceContainer) {
-        let esprima = await import(this._esprimaUrl);
-        const parsedModule = esprima.parseModule(module);
-        const classDecl = parsedModule.body.find(x => x.type == esprima.Syntax.ClassDeclaration);
-        const renderMethod = classDecl.body.body.find(x => x.type == esprima.Syntax.MethodDefinition && x.key.name == 'render');
-        const renderMethodStatement = renderMethod.value.body.body[0];
-        const taggedTemplate = renderMethodStatement.argument;
-        const templateLiteral = taggedTemplate.quasi;
-        const html = templateLiteral.quasis.map(x => x.value.raw).join();
-        //@ts-ignore
-        let parser = await import(this._parserUrl);
-        const parsed = parser.parse(html, { comment: true });
-        let designItems = [];
-        for (let p of parsed.childNodes) {
-            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
-            if (di != null)
-                designItems.push(di);
-            else
-                console.warn("NodeHtmlParserService - could not parse element", p);
-        }
-        return designItems;
-    }
-    _parseDiv = document.createElement("div");
-    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
-        let designItem = null;
-        if (item.nodeType == 1) {
-            let element;
-            let manualCreatedElement = false;
-            if (!namespace)
-                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
-            if (!element) {
-                if (namespace)
-                    element = document.createElementNS(namespace, item.rawTagName);
-                else
-                    element = document.createElement(item.rawTagName);
-                manualCreatedElement = true;
-            }
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
-            let hideAtDesignTime = false;
-            let hideAtRunTime = false;
-            let lockAtDesignTime = false;
-            let style = '';
-            let attr = item.attributes;
-            for (let a in attr) {
-                if (a !== 'style') {
-                    designItem._withoutUndoSetAttribute(a, attr[a]);
-                    if (manualCreatedElement) {
-                        element.setAttribute(a, attr[a]);
-                    }
-                    if (a === 'node-projects-hide-at-design-time')
-                        hideAtDesignTime = true;
-                    else if (a === 'node-projects-hide-at-run-time')
-                        hideAtRunTime = true;
-                    else if (a === 'node-projects-lock-at-design-time')
-                        lockAtDesignTime = true;
-                }
-                else {
-                    style = attr[a];
-                }
-            }
-            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
-                let styleParser = new CssAttributeParser();
-                styleParser.parse(style);
-                for (let s of styleParser.entries) {
-                    designItem._withoutUndoSetStyle(s.name, s.value);
-                    if (manualCreatedElement) {
-                        element.style[s.name] = s.value;
-                    }
-                }
-            }
-            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
-                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
-            }
-            designItem.hideAtDesignTime = hideAtDesignTime;
-            designItem.hideAtRunTime = hideAtRunTime;
-            designItem.lockAtDesignTime = lockAtDesignTime;
-            element.draggable = false; //even if it should be true, for better designer exp.
-            for (let c of item.childNodes) {
-                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
-                designItem._insertChildInternal(di);
-            }
-        }
-        else if (item.nodeType == 3) {
-            this._parseDiv.innerHTML = item.rawText;
-            let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
-        }
-        else if (item.nodeType == 8) {
-            let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
-        }
-        return designItem;
-    }
-}

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

@@ -1,22 +0,0 @@
-import { IPropertiesService } from './IPropertiesService.js';
-import { IPropertyEditor } from './IPropertyEditor.js';
-import { PropertyType } from './PropertyType.js';
-export interface IProperty {
-    name: string;
-    renamable?: boolean;
-    propertyName?: string;
-    attributeName?: string;
-    description?: string;
-    type?: 'addNew' | 'json' | 'color' | 'date' | 'number' | 'list' | 'enum' | 'boolean' | 'img-lis' | 'thickness' | 'css-length' | 'string' | string;
-    default?: any;
-    min?: number;
-    max?: number;
-    step?: number;
-    values?: string[];
-    enumValues?: [name: string, value: string | number][];
-    createEditor?: (property: IProperty) => IPropertyEditor;
-    value?: any;
-    service: IPropertiesService;
-    defaultValue?: any;
-    propertyType: PropertyType;
-}

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

@@ -1,8 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPropertiesService } from './IPropertiesService.js';
-export interface IPropertyGroupsService {
-    getPropertygroups(designItems: IDesignItem[]): {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-}

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

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

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

@@ -1,17 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPropertiesService } from './IPropertiesService.js';
-import { IPropertyGroupsService } from './IPropertyGroupsService.js';
-export declare class PropertyGroupsService implements IPropertyGroupsService {
-    protected _pgList: {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-    protected _svgPgList: {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-    getPropertygroups(designItems: IDesignItem[]): {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-}

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

@@ -1,29 +0,0 @@
-import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
-import { CommonPropertiesService } from './services/CommonPropertiesService.js';
-import { CssPropertiesService } from './services/CssPropertiesService.js';
-export class PropertyGroupsService {
-    _pgList = [
-        { name: 'properties', propertiesService: null },
-        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
-        { name: 'common', propertiesService: new CommonPropertiesService() },
-        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
-        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
-        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
-    ];
-    _svgPgList = [
-        { name: 'properties', propertiesService: null },
-        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
-        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
-        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-    ];
-    getPropertygroups(designItems) {
-        if (designItems == null || designItems.length == 0)
-            return [];
-        this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
-        this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
-        if (designItems[0].element instanceof SVGElement)
-            return this._svgPgList;
-        return this._pgList;
-    }
-}

package/dist/elements/services/propertiesService/propertyEditors/MetricsEditor.js

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

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

@@ -1,7 +0,0 @@
-import { IProperty } from '../IProperty';
-import { IDesignItem } from '../../../item/IDesignItem';
-import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService";
-export declare abstract class AbstractBasePropertiesService extends UnkownElementPropertiesService {
-    getProperties(designItem: IDesignItem): IProperty[];
-    protected parseProperties(list: any): IProperty[];
-}

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

@@ -1,44 +0,0 @@
-import { PropertiesHelper } from './PropertiesHelper';
-import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService";
-import { PropertyType } from '../PropertyType';
-export class AbstractBasePropertiesService extends UnkownElementPropertiesService {
-    getProperties(designItem) {
-        if (!this.isHandledElement(designItem))
-            return null;
-        return this.parseProperties(designItem.element.constructor.properties);
-    }
-    parseProperties(list) {
-        let properties = [];
-        for (const name in list) {
-            const polymerProperty = list[name];
-            let type = polymerProperty;
-            if (polymerProperty.type)
-                type = polymerProperty.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: "object", 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;
-    }
-}

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.d.ts

@@ -1,18 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { BindingTarget } from '../../../item/BindingTarget.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class CssPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
-    layout: IProperty[];
-    grid: IProperty[];
-    flex: IProperty[];
-    constructor(name: 'styles' | 'layout' | 'grid' | 'flex');
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
-}

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.js

@@ -1,221 +0,0 @@
-import { BindingTarget } from '../../../item/BindingTarget.js';
-import { PropertyType } from '../PropertyType.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { RefreshMode } from '../IPropertiesService.js';
-export class CssPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem) {
-        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
-    }
-    layout = [
-        {
-            name: "display",
-            type: "list",
-            values: ["block", "inline", "inline-block", "flex", "inline-flex", "contents", "grid", "inline-grid", "inherit", "initial", "none"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        },
-        {
-            name: "color",
-            type: "color",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "background-color",
-            type: "color",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "box-sizing",
-            type: "list",
-            values: ["border-box", "content-box"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "border",
-            type: "string",
-            default: "0px none rbg(0,0,0)",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "box-shadow",
-            type: "string",
-            default: "none",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "opacity",
-            type: "number",
-            min: 0,
-            max: 1,
-            step: 0.1,
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "metrics",
-            type: "metrics",
-            service: this,
-            propertyType: PropertyType.complex
-        }, {
-            name: "position",
-            type: "list",
-            values: ["static", "relative", "absolute"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "font-size",
-            type: "css-length",
-            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,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    grid = [
-        {
-            name: "display",
-            type: "list",
-            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "position",
-            type: "list",
-            values: ["static", "relative", "absolute"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "grid-template-columns",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "grid-template-rows",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "column-gap",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "row-gap",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "align-content",
-            type: "img-list",
-            values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "justify-content",
-            type: "img-list",
-            values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "align-items",
-            type: "img-list",
-            values: ["center", "start", "end", "stretch", "baseline"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "justify-items",
-            type: "img-list",
-            values: ["center", "start", "end", "stretch"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    flex = [
-        {
-            name: "display",
-            type: "list",
-            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "position",
-            type: "list",
-            values: ["static", "relative", "absolute"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "flex-direction",
-            type: "img-list",
-            values: ["row", "column"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "flex-wrap",
-            type: "img-list",
-            values: ["nowrap", "wrap"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "align-content",
-            type: "img-list",
-            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
-            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,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "align-items",
-            type: "img-list",
-            values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    constructor(name) {
-        super();
-        this.name = name;
-    }
-    isHandledElement(designItem) {
-        return true;
-    }
-    getProperty(designItem, name) {
-        if (this.name == 'styles') {
-            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
-        }
-        return this[this.name][name];
-    }
-    getProperties(designItem) {
-        if (this.name == 'styles') {
-            if (!designItem)
-                return [];
-            let styles = designItem.getAllStyles();
-            let arr = styles.map(x => ({ name: x.selector ?? '<local>', description: x.stylesheetName ?? '', properties: [
-                    ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue })),
-                    { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex }
-                ]
-            }));
-            //let arr: IProperty[] = Array.from(designItem.styles(), ([key, value])  => ({ name: key, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue }));
-            //arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
-            return arr;
-        }
-        return this[this.name];
-    }
-    getPropertyTarget(designItem, property) {
-        return BindingTarget.css;
-    }
-    setValue(designItems, property, value) {
-        if (this.name == 'styles') {
-            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
-        }
-        else {
-            super.setValue(designItems, property, value);
-        }
-    }
-}

package/dist/elements/services/propertiesService/services/CssPropertiesService copy.d.ts

@@ -1,18 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { BindingTarget } from '../../../item/BindingTarget.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class CssPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
-    layout: IProperty[];
-    grid: IProperty[];
-    flex: IProperty[];
-    constructor(name: 'styles' | 'layout' | 'grid' | 'flex');
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
-}