@node-projects/web-component-designer 0.0.103 → 0.0.106

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.d.ts

@@ -0,0 +1,13 @@
+import { IElementDefinition } from "./IElementDefinition.js";
+import { IElementsService } from "./IElementsService.js";
+export declare class WebcomponentManifestElementsService implements IElementsService {
+    private _name;
+    get name(): string;
+    private _importPrefix;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, importPrefix: string, manifest: any);
+    private _parseManifest;
+    getElements(): Promise<IElementDefinition[]>;
+}

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.js

@@ -0,0 +1,37 @@
+export class WebcomponentManifestElementsService {
+    _name;
+    get name() { return this._name; }
+    _importPrefix;
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, importPrefix, manifest) {
+        this._name = name;
+        this._importPrefix = importPrefix;
+        this._parseManifest(manifest);
+    }
+    _parseManifest(manifest) {
+        this._elementList = [];
+        for (let m of manifest.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module, defaultWidth: "200px", defaultHeight: "200px" });
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    async getElements() {
+        if (this._elementList)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+}

package/dist/elements/services/elementsService/WebcomponentManifestParserService.d.ts

@@ -0,0 +1,25 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { IDesignItem } from "../../item/IDesignItem";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

package/dist/elements/services/elementsService/WebcomponentManifestParserService.js

@@ -0,0 +1,94 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { PropertyType } from "../propertiesService/PropertyType";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
+        super();
+        this._name = name;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -7,9 +7,19 @@ export class DefaultInstanceService {
             let importUri = definition.import;
             if (importUri[0] === '.')
                 importUri = (window.location.origin + window.location.pathname).split('/').slice(0, -1).join('/') + '/' + importUri;
-            import(importUri).then(() => {
-                //TODO: refresh all extensions
-            }); //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable
+            //@ts-ignore
+            if (importShim) {
+                //@ts-ignore
+                importShim(importUri).then(() => {
+                    //TODO: refresh all extensions
+                });
+            }
+            else {
+                import(importUri).then(() => {
+                    //TODO: refresh all extensions
+                });
+            }
+            //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable
             if (instanceServiceContainer.designContext.imports.indexOf(importUri) <= 0)
                 instanceServiceContainer.designContext.imports.push(importUri);
         }

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

@@ -0,0 +1,25 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { IDesignItem } from "../../item/IDesignItem";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

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

@@ -0,0 +1,94 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { PropertyType } from "../propertiesService/PropertyType";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
+        super();
+        this._name = name;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { BindingTarget } from "../../../item/BindingTarget.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+import { IPropertiesService } from "../IPropertiesService.js";
+import { IProperty } from "../IProperty.js";
+import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService.js";
+export declare class WebcomponentManifestPropertiesService extends UnkownElementPropertiesService implements IPropertiesService {
+    private _name;
+    get name(): string;
+    private _propertiesList;
+    constructor(name: string, manifest: any);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

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

@@ -0,0 +1,61 @@
+import { BindingTarget } from "../../../item/BindingTarget.js";
+import { PropertyType } from "../PropertyType.js";
+import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService.js";
+export class WebcomponentManifestPropertiesService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _propertiesList;
+    constructor(name, manifest) {
+        super();
+        this._name = name;
+        this._parseManifest(manifest);
+    }
+    _parseManifest(manifest) {
+        this._propertiesList = {};
+        for (let m of manifest.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    if (declaration) {
+                        if (declaration.members) {
+                            for (let d of declaration.members) {
+                                if (d.kind == 'field') {
+                                    let pType = PropertyType.property;
+                                    if (declaration.attributes)
+                                        pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                                    properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                                }
+                            }
+                            this._propertiesList[e.name] = properties;
+                        }
+                    }
+                    else {
+                        console.warn('declaration for ' + e.declaration.name + ' not found', manifest);
+                    }
+                }
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    isHandledElement(designItem) {
+        return this._propertiesList[designItem.name] != null;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js

@@ -1,3 +1,4 @@
+import { NodeType } from "../../../../item/NodeType.js";
 export class SelectAllChildrenContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return designItem.hasChildren;
@@ -5,7 +6,7 @@ export class SelectAllChildrenContextMenu {
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [{
                 title: 'Select all Children', action: () => {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()));
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()).filter(x => x.nodeType == NodeType.Element));
                 }
             }];
     }

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -49,7 +49,7 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
   <div style="height: 100%;">
     <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
-    <div style="height: calc(100% - 23px); overflow: auto;">
+    <div style="height: calc(100% - 26px); overflow: auto;">
       <div id="treetable" style="min-width: 100%;"></div>
     </div>
   </div>`;

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export type { IElementsJson } from "./elements/services/elementsService/IElement
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";
+export * from "./elements/services/elementsService/WebcomponentManifestElementsService.js";
 export type { IHtmlWriterService } from "./elements/services/htmlWriterService/IHtmlWriterService.js";
 export type { IHtmlWriterOptions } from "./elements/services/htmlWriterService/IHtmlWriterOptions.js";
 export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
@@ -71,6 +72,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";

package/dist/index.js

@@ -26,6 +26,7 @@ export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";
+export * from "./elements/services/elementsService/WebcomponentManifestElementsService.js";
 export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
@@ -45,6 +46,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/selectionService/SelectionService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.103",
+  "version": "0.0.106",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",