@node-projects/web-component-designer 0.0.74 → 0.0.78

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

@@ -1,4 +1,5 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
+import { PropertyType } from '../PropertyType';
 export class NativeElementsPropertiesService extends CommonPropertiesService {
     //@ts-ignore
     inputProperties = [
@@ -7,23 +8,28 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             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"
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "value",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "checked",
             type: "boolean",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "min",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "max",
             type: "number",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     buttonProperties = [
@@ -32,43 +38,50 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "list",
             values: ["button", "submit", "reset"],
             service: this,
-            defaultValue: "button"
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "value",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "disabled",
             type: "boolean",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     anchorProperties = [
         {
             name: "href",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     divProperties = [
         {
             name: "title",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     imgProperties = [
         {
             name: "src",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     iframeProperties = [
         {
             name: "src",
             type: "string",
-            service: this
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     name = "native";

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

@@ -3,8 +3,7 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
-export declare class UnkownElementPropertiesService implements IPropertiesService {
-    readonly name: string;
+export declare abstract class UnkownElementPropertiesService implements IPropertiesService {
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;

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

@@ -1,8 +1,8 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
 import { BindingTarget } from "../../../item/BindingTarget";
+//@ts-ignore
 export class UnkownElementPropertiesService {
-    name = "unkown";
     isHandledElement(designItem) {
         return true;
     }

package/dist/elements/services/webcomponentManifestParserService/WebcomponentManifestParserService.1.js

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

package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.d.ts

@@ -0,0 +1,26 @@
+import { IDesignItem } from "../../..";
+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 { ValueType } from "../propertiesService/ValueType";
+export declare class WebcomponentManifestParserService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, file: string);
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): void;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): void;
+}

package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.js

@@ -0,0 +1,69 @@
+export class WebcomponentManifestParserService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, file) {
+        this._name = name;
+        import(file, { assert: { type: 'json' } }).then(module => {
+            this._packageData = module.default;
+            this._elementList = [];
+            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 });
+                    }
+                }
+                if (this._resolveStored) {
+                    this._resolveStored.forEach(x => x(this._elementList));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            }
+        }).catch(err => {
+            if (this._rejectStored) {
+                this._rejectStored.forEach(x => x(err));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        });
+    }
+    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) {
+        throw new Error("Method not implemented.");
+    }
+    getProperties(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperty(designItem, name) {
+        throw new Error("Method not implemented.");
+    }
+    getPropertyTarget(designItem, property) {
+        throw new Error("Method not implemented.");
+    }
+    setValue(designItems, property, value) {
+        throw new Error("Method not implemented.");
+    }
+    clearValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    isSet(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getUnsetValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+}

package/dist/elements/widgets/demoView/IDemoView.d.ts

@@ -1,5 +1,5 @@
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
 import { ServiceContainer } from '../../services/ServiceContainer';
 export interface IDemoView {
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
 }

package/dist/elements/widgets/demoView/demoView.d.ts

@@ -7,5 +7,5 @@ export declare class DemoView extends BaseCustomWebComponentLazyAppend implement
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -29,9 +29,9 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    async display(serviceContainer, instanceServiceContainer, code) {
+    async display(serviceContainer, instanceServiceContainer, code, style) {
         this._loading.hidden = false;
-        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);
         this._loading.hidden = true;
     }
 }

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -73,6 +73,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       position: relative;
       transform: translateZ(0);
       overflow: hidden;
+
+      font-family: initial;
+      font-size: initial;
+      font-weight: initial;
+      font-style: initial;
+      line-height: initial;
     }
     * {
       touch-action: none;

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

@@ -101,14 +101,19 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
                 title: s.name,
                 folder: true
             });
-            let elements = await s.getElements();
-            for (let e of elements) {
-                newNode.addChildren({
-                    title: e.name ?? e.tag,
-                    folder: false,
-                    //@ts-ignore
-                    ref: e
-                });
+            try {
+                let elements = await s.getElements();
+                for (let e of elements) {
+                    newNode.addChildren({
+                        title: e.name ?? e.tag,
+                        folder: false,
+                        //@ts-ignore
+                        ref: e
+                    });
+                }
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
             }
             //@ts-ignore
             newNode.updateCounters();

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

@@ -20,11 +20,16 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
     }
     async loadControls(serviceContainer, elementsServices) {
         for (const s of elementsServices) {
-            let elements = await s.getElements();
-            let paletteElement = new PaletteElements();
-            paletteElement.title = s.name;
-            this._designerTabControl.appendChild(paletteElement);
-            paletteElement.loadElements(serviceContainer, elements);
+            try {
+                let elements = await s.getElements();
+                let paletteElement = new PaletteElements();
+                paletteElement.title = s.name;
+                this._designerTabControl.appendChild(paletteElement);
+                paletteElement.loadElements(serviceContainer, elements);
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
         }
     }
 }

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export type { IElementDefinition } from "./elements/services/elementsService/IEl
 export type { IElementsJson } from "./elements/services/elementsService/IElementsJson.js";
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
+export * from "./elements/services/elementsService/PreDefinedElementsService.js";
 export type { IHtmlWriterService } from "./elements/services/htmlWriterService/IHtmlWriterService.js";
 export type { IHtmlWriterOptions } from "./elements/services/htmlWriterService/IHtmlWriterOptions.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
@@ -53,6 +54,7 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
+export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
@@ -68,6 +70,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/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";

package/dist/index.js

@@ -25,11 +25,13 @@ export * from "./elements/services/copyPasteService/CopyPasteService.js";
 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/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
@@ -41,6 +43,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/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.74",
+  "version": "0.0.78",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -24,6 +24,7 @@
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
     "codemirror": "^5.65.0",
+    "custom-elements-manifest": "^1.0.0",
     "esprima-next": "^5.7.0",
     "html2canvas": "*",
     "jest": "^27.4.5",

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.d.ts

@@ -1,16 +0,0 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
-export declare class MoveElementInDomAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
-    title?: string;
-    get affectedItems(): IDesignItem[];
-    undo(): void;
-    do(): void;
-    designItem: IDesignItem;
-    newTarget: IDesignItem;
-    newPosition: InsertPosition;
-    oldTarget: IDesignItem;
-    oldPosition: InsertPosition;
-    newItem: IDesignItem;
-    mergeWith(other: ITransactionItem): boolean;
-}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.js

@@ -1,32 +0,0 @@
-export class MoveElementInDomAction {
-    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
-        this.title = "Move Item";
-        this.designItem = designItem;
-        this.newTarget = newTarget;
-        this.newPosition = newPosition;
-        this.oldTarget = oldTarget;
-        this.oldPosition = oldPosition;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem, this.newTarget, this.oldTarget];
-    }
-    undo() {
-        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    do() {
-        //this.newTarget.insertChild(this.designItem, )
-        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    designItem;
-    newTarget;
-    newPosition;
-    oldTarget;
-    oldPosition;
-    newItem;
-    mergeWith(other) {
-        return false;
-    }
-}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.d.ts

@@ -1,16 +0,0 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
-export declare class MoveElementInDomAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
-    title?: string;
-    get affectedItems(): IDesignItem[];
-    undo(): void;
-    do(): void;
-    designItem: IDesignItem;
-    newTarget: IDesignItem;
-    newPosition: InsertPosition;
-    oldTarget: IDesignItem;
-    oldPosition: InsertPosition;
-    newItem: IDesignItem;
-    mergeWith(other: ITransactionItem): boolean;
-}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js

@@ -1,31 +0,0 @@
-export class MoveElementInDomAction {
-    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
-        this.title = "Move Item";
-        this.designItem = designItem;
-        this.newTarget = newTarget;
-        this.newPosition = newPosition;
-        this.oldTarget = oldTarget;
-        this.oldPosition = oldPosition;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem, this.newTarget, this.oldTarget];
-    }
-    undo() {
-        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    do() {
-        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    designItem;
-    newTarget;
-    newPosition;
-    oldTarget;
-    oldPosition;
-    newItem;
-    mergeWith(other) {
-        return false;
-    }
-}