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

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

@@ -0,0 +1,195 @@
+import { ValueType } from '../ValueType.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { NodeType } from '../../../item/NodeType.js';
+export class AbstractPropertiesService {
+    _stylesCache = new Map;
+    _cacheClearTimer;
+    _notifyChangedProperty(designItem, property, value) {
+    }
+    getProperty(designItem, name) {
+        let properties = this.getProperties(designItem);
+        if ('properties' in properties[0]) {
+            return properties.flatMap(x => x.properties).find(x => x.name == name);
+        }
+        else
+            return properties.find(x => x.name == name);
+    }
+    setValue(designItems, property, value) {
+        const cg = designItems[0].openGroup("property changed: " + property.name + " to " + value);
+        for (let d of designItems) {
+            if (property.propertyType == PropertyType.cssValue) {
+                d.updateStyleInSheetOrLocal(property.name, value);
+                //unkown css property names do not trigger the mutation observer of property grid, 
+                //fixed by assinging stle again to the attribute
+                d.element.setAttribute('style', d.element.getAttribute('style'));
+            }
+            else {
+                let attributeName = property.attributeName;
+                if (!attributeName)
+                    attributeName = PropertiesHelper.camelToDashCase(property.name);
+                if (property.type === 'object') {
+                    const json = JSON.stringify(value);
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, json);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = value;
+                }
+                else if (property.type == 'boolean' && !value) {
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.removeAttribute(attributeName);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = false;
+                }
+                else if (property.type == 'boolean' && value) {
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, "");
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = true;
+                }
+                else {
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, value.toString());
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = value;
+                }
+            }
+            this._notifyChangedProperty(d, property, value);
+        }
+        cg.commit();
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
+    clearValue(designItems, property, clearType) {
+        const cg = designItems[0].openGroup("property cleared: " + property.name);
+        for (let d of designItems) {
+            if (clearType != 'binding') {
+                if (property.propertyType == PropertyType.cssValue) {
+                    d.removeStyle(property.name);
+                }
+                else {
+                    let attributeName = property.attributeName;
+                    if (!attributeName)
+                        attributeName = PropertiesHelper.camelToDashCase(property.name);
+                    d.removeAttribute(attributeName);
+                }
+            }
+            if (clearType != 'value') {
+                d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                    return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+                });
+            }
+            this._notifyChangedProperty(d, property, undefined);
+        }
+        cg.commit();
+    }
+    isSet(designItems, property) {
+        let all = true;
+        let some = false;
+        if (designItems != null && designItems.length !== 0) {
+            let attributeName = property.attributeName;
+            if (!attributeName)
+                attributeName = PropertiesHelper.camelToDashCase(property.name);
+            for (let x of designItems) {
+                let has = false;
+                if (property.propertyType == PropertyType.cssValue)
+                    has = x.hasStyle(property.name);
+                else
+                    has = x.hasAttribute(attributeName);
+                all = all && has;
+                some = some || has;
+                if (!all && some)
+                    break;
+            }
+            ;
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (property.propertyType == PropertyType.cssValue) {
+                if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
+                    return ValueType.bound;
+            }
+            else {
+                if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
+                    return ValueType.bound;
+            }
+            if (!all && property.propertyType == PropertyType.cssValue) {
+                let styles = this._stylesCache.get(designItems[0]);
+                if (!styles) {
+                    styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name));
+                    this._stylesCache.set(designItems[0], styles);
+                    clearTimeout(this._cacheClearTimer);
+                    this._cacheClearTimer = setTimeout(() => this._stylesCache.clear(), 30);
+                }
+                let cssValue = styles.has(property.name);
+                if (cssValue)
+                    return ValueType.fromStylesheet;
+            }
+        }
+        else
+            return ValueType.none;
+        return all ? ValueType.all : some ? ValueType.some : ValueType.none;
+    }
+    getValue(designItems, property) {
+        if (designItems != null && designItems.length !== 0) {
+            if (property.propertyType == PropertyType.cssValue) {
+                let lastValue = designItems[0].getStyle(property.name);
+                for (const d of designItems) {
+                    let value = d.getStyle(property.name);
+                    if (value != lastValue) {
+                        lastValue = null;
+                        break;
+                    }
+                }
+                return lastValue;
+            }
+            else {
+                let attributeName = property.attributeName;
+                if (!attributeName)
+                    attributeName = PropertiesHelper.camelToDashCase(property.name);
+                if (property.type == 'boolean')
+                    return designItems[0].hasAttribute(attributeName);
+                let lastValue = designItems[0].getAttribute(attributeName);
+                /*
+                for (const x of designItems) {
+                  let value = x.attributes.get(attributeName);
+                  if (value != lastValue) {
+                    lastValue = null;
+                    break;
+                  }
+                }
+                */
+                return lastValue;
+            }
+        }
+        return null;
+    }
+    getBinding(designItems, property) {
+        //TODO: optimize perf, do not call bindings service for each property. 
+        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+            return s.getBindings(designItems[0]);
+        });
+        if (property.propertyType == PropertyType.cssValue) {
+            return bindings.find(x => (x.target == BindingTarget.css) && x.targetName == property.name);
+        }
+        else {
+            return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
+        }
+    }
+    getUnsetValue(designItems, property) {
+        if (property.propertyType == PropertyType.cssValue) {
+            if (designItems != null && designItems.length !== 0) {
+                if (designItems[0].nodeType == NodeType.Element) {
+                    let v = window.getComputedStyle(designItems[0].element)[property.name];
+                    return v;
+                }
+            }
+            return null;
+        }
+        else
+            return property.defaultValue;
+    }
+}

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

@@ -0,0 +1,11 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class AttachedPropertiesService extends AbstractPropertiesService {
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,22 @@
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class AttachedPropertiesService extends AbstractPropertiesService {
+    name = "attached";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        return designItem.serviceContainer.forSomeServicesTillResult('attachedPropertyService', x => x.isHandledElement(designItem));
+    }
+    getProperties(designItem) {
+        let p = [];
+        if (designItem.serviceContainer.attachedPropertyServices) {
+            for (let s of designItem.serviceContainer.attachedPropertyServices) {
+                if (s.isHandledElement(designItem)) {
+                    p.push(...s.getProperties(designItem));
+                }
+            }
+        }
+        return p;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { ValueType } from '../ValueType.js';
+import { IBinding } from "../../../item/IBinding.js";
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class AttributesPropertiesService implements IPropertiesService {
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): string;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}

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

@@ -0,0 +1,99 @@
+import { RefreshMode } from '../IPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+export class AttributesPropertiesService {
+    name = "attributes";
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.attribute };
+    }
+    getProperties(designItem) {
+        if (designItem) {
+            let p = [];
+            for (let a of designItem.attributes()) {
+                p.push({ name: a[0], renamable: true, type: 'string', service: this, propertyType: PropertyType.attribute });
+            }
+            p.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
+            return p;
+        }
+        return null;
+    }
+    setValue(designItems, property, value) {
+        const cg = designItems[0].openGroup("properties changed");
+        for (let d of designItems) {
+            d.setAttribute(property.name, value);
+        }
+        cg.commit();
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.attribute;
+    }
+    clearValue(designItems, property) {
+        for (let d of designItems) {
+            d.removeAttribute(property.name);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
+        }
+    }
+    isSet(designItems, property) {
+        let all = true;
+        let some = false;
+        if (designItems != null && designItems.length !== 0) {
+            if (designItems.length == 1 && typeof designItems[0].getAttribute(property.name) == 'object')
+                return ValueType.bound;
+            let propName = PropertiesHelper.dashToCamelCase(property.name);
+            let attributeName = property.name;
+            designItems.forEach((x) => {
+                let has = x.hasAttribute(attributeName);
+                all = all && has;
+                some = some || has;
+            });
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (bindings && bindings.find(x => x.target == BindingTarget.attribute && x.targetName == propName))
+                return ValueType.bound;
+        }
+        else
+            return ValueType.none;
+        return all ? ValueType.all : some ? ValueType.some : ValueType.none;
+    }
+    getValue(designItems, property) {
+        if (designItems != null && designItems.length !== 0) {
+            let attributeName = property.name;
+            let lastValue = designItems[0].getAttribute(attributeName);
+            if (typeof lastValue === 'object')
+                return lastValue.rawValue;
+            /*
+            for (const x of designItems) {
+              let value = x.attributes.get(attributeName);
+              if (value != lastValue) {
+                lastValue = null;
+                break;
+              }
+            }
+            */
+            return lastValue;
+        }
+        return null;
+    }
+    getBinding(designItems, property) {
+        //TODO: optimize perf, do not call bindings service for each property. 
+        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+            return s.getBindings(designItems[0]);
+        });
+        return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
+    }
+    getUnsetValue(designItems, property) {
+        return property.defaultValue;
+    }
+}

package/dist/elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.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 BaseCustomWebComponentPropertiesService extends AbstractPolymerLikePropertiesService {
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+}

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

@@ -0,0 +1,14 @@
+import { BaseCustomWebComponentLazyAppend, BaseCustomWebComponentConstructorAppend, BaseCustomWebComponentConstructorAppendLazyReady } from '@node-projects/base-custom-webcomponent';
+import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js';
+export class BaseCustomWebComponentPropertiesService extends AbstractPolymerLikePropertiesService {
+    name = "baseCustomWebComponent";
+    isHandledElement(designItem) {
+        return designItem.element instanceof BaseCustomWebComponentLazyAppend ||
+            designItem.element instanceof BaseCustomWebComponentConstructorAppendLazyReady ||
+            designItem.element instanceof BaseCustomWebComponentConstructorAppend;
+    }
+    _notifyChangedProperty(designItem, property, value) {
+        //@ts-ignore
+        designItem.element._parseAttributesToProperties();
+    }
+}

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

@@ -0,0 +1,13 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class CommonPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    private commonProperties;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,49 @@
+import { PropertyType } from '../PropertyType.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class CommonPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    //@ts-ignore
+    commonProperties = [
+        {
+            name: "id",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "class",
+            type: "string",
+            service: this,
+            attributeName: "class",
+            propertyName: "className",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "part",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "tabindex",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "common";
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return this.commonProperties.find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        return this.commonProperties;
+    }
+}

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

@@ -0,0 +1,19 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { ValueType } from '../ValueType.js';
+export declare class ContentAndIdPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    contentProperty: IProperty;
+    idProperty: IProperty;
+    innerHtmlProperty: IProperty;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType?: 'all' | 'binding' | 'value'): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
+}

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

@@ -0,0 +1,84 @@
+import { PropertyType } from '../PropertyType.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+export class ContentAndIdPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    contentProperty = {
+        name: "textContent",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.property
+    };
+    idProperty = {
+        name: "id",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.propertyAndAttribute
+    };
+    innerHtmlProperty = {
+        name: "innerHTML",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.property
+    };
+    name = "content";
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return name == 'id' ? this.idProperty : this.contentProperty;
+    }
+    getProperties(designItem) {
+        return [this.idProperty, this.contentProperty, this.innerHtmlProperty];
+    }
+    clearValue(designItems, property, clearType = 'all') {
+        if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) {
+            for (let d of designItems) {
+                if (clearType != 'binding') {
+                    d.clearChildren();
+                }
+                if (clearType != 'value') {
+                    d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                        return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+                    });
+                }
+                this._notifyChangedProperty(d, property, undefined);
+            }
+        }
+        else {
+            super.clearValue(designItems, property, clearType);
+        }
+    }
+    isSet(designItems, property) {
+        if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) {
+            let all = true;
+            let some = false;
+            if (designItems != null && designItems.length !== 0) {
+                designItems.forEach((x) => {
+                    let has = false;
+                    has = x.element.childNodes.length > 0;
+                    all = all && has;
+                    some = some || has;
+                });
+                //todo: optimize perf, do not call bindings service for each property. 
+                const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                    return s.getBindings(designItems[0]);
+                });
+                if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
+                    return ValueType.bound;
+            }
+            return all ? ValueType.all : some ? ValueType.some : ValueType.none;
+        }
+        return super.isSet(designItems, property);
+    }
+    getValue(designItems, property) {
+        if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) {
+            return designItems[0].element.textContent;
+        }
+        return super.getValue(designItems, property);
+    }
+}

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

@@ -0,0 +1,34 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+export declare class CssCurrentPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    constructor();
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    setValue(designItems: IDesignItem[], property: (IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }), value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }, clearType: 'all' | 'binding' | 'value'): void;
+    getValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): string | boolean;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): any;
+    isSet(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): ValueType;
+}