@node-projects/web-component-designer 0.0.267 → 0.0.269

package/dist/elements/helper/NpmPackageLoader.d.ts

@@ -6,12 +6,13 @@ export declare class NpmPackageLoader {
     private _dependecies;
     constructor(packageSource?: string);
     static patchCustomElementsRegistryToHandleErrors(): void;
-    loadNpmPackage(pkg: string, serviceContainer: ServiceContainer, paletteTree: PaletteTreeView, loadAllImports: boolean, reportState?: (state: string) => void): Promise<void>;
+    loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<void>;
     loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
     addToImportmap(baseUrl: string, packageJsonObj: {
         name?: string;
         module?: string;
         main?: string;
+        unpkg?: string;
         exports?: Record<string, string>;
     }): Promise<void>;
 }

package/dist/elements/helper/NpmPackageLoader.js

@@ -83,37 +83,44 @@ export class NpmPackageLoader {
                 console.warn("github custom elments json fallback", err);
             }
         }
-        fetch(webComponentDesignerUrl).then(async (x) => {
-            if (x.ok) {
-                const webComponentDesignerJson = await x.json();
-                if (webComponentDesignerJson.services) {
-                    for (let o in webComponentDesignerJson.services) {
-                        for (let s of webComponentDesignerJson.services[o]) {
-                            if (s.startsWith('./'))
-                                s = s.substring(2);
-                            //@ts-ignore
-                            const classDefinition = (await importShim(baseUrl + s)).default;
-                            //@ts-ignore
-                            serviceContainer.register(o, new classDefinition());
+        if (serviceContainer) {
+            fetch(webComponentDesignerUrl).then(async (x) => {
+                if (x.ok) {
+                    const webComponentDesignerJson = await x.json();
+                    if (webComponentDesignerJson.services) {
+                        for (let o in webComponentDesignerJson.services) {
+                            for (let s of webComponentDesignerJson.services[o]) {
+                                if (s.startsWith('./'))
+                                    s = s.substring(2);
+                                //@ts-ignore
+                                const classDefinition = (await importShim(baseUrl + s)).default;
+                                //@ts-ignore
+                                serviceContainer.register(o, new classDefinition());
+                            }
                         }
                     }
                 }
-            }
-        });
+            });
+        }
         if (customElementsJson.ok) {
             const customElementsJsonObj = await customElementsJson.json();
             let elements = new WebcomponentManifestElementsService(packageJsonObj.name, elementsRootPath, customElementsJsonObj);
-            serviceContainer.register('elementsService', elements);
-            let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
-            serviceContainer.register('propertyService', properties);
+            if (serviceContainer)
+                serviceContainer.register('elementsService', elements);
+            if (serviceContainer) {
+                let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
+                serviceContainer.register('propertyService', properties);
+            }
             if (loadAllImports) {
                 for (let e of await elements.getElements()) {
                     //@ts-ignore
                     importShim(e.import);
                 }
             }
-            //todo: should be retriggered by service container, or changeing list in container
-            paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
+            if (serviceContainer && paletteTree) {
+                //todo: should be retriggered by service container, or changeing list in container
+                paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
+            }
         }
         else {
             console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module');
@@ -153,7 +160,7 @@ export class NpmPackageLoader {
             else {
                 console.warn('npm package: ' + pkg + ' - no entry point in package found.');
             }
-            if (newElements.length > 0) {
+            if (newElements.length > 0 && serviceContainer && paletteTree) {
                 const elementsCfg = {
                     elements: newElements
                 };
@@ -196,13 +203,73 @@ export class NpmPackageLoader {
     async addToImportmap(baseUrl, packageJsonObj) {
         //@ts-ignore
         const map = importShim.getImportMap().imports;
+        const importMap = { imports: {}, scopes: {} };
         if (!map.hasOwnProperty(packageJsonObj.name)) {
             //todo - use exports of package.json for importMap
-            const importMap = { imports: {}, scopes: {} };
+            if (packageJsonObj.exports) {
+                /* "exports": {
+                ".": {
+                    "browser": "./index.browser.js",
+                    "default": "./index.js"
+                },
+                "./async": {
+                    "browser": "./async/index.browser.js",
+                    "default": "./async/index.js"
+                },
+                "./non-secure": "./non-secure/index.js",
+                "./package.json": "./package.json"
+            }
+           
+            "exports": {
+                "node": {
+                  "import": "./feature-node.mjs",
+                  "require": "./feature-node.cjs"
+                },
+                "default": "./feature.mjs"
+              }
+            
+            
+               "exports": {
+                ".": "./index.js",
+                "./feature.js": {
+                  "node": "./feature-node.js",
+                  "default": "./feature.js"
+                }
+              }
+            
+            */
+                /*
+                "exports": {
+                    "import": "./index-module.js",
+                    "require": "./index-require.cjs"
+                },
+                */
+                let getImport = (obj) => {
+                    if (obj?.browser)
+                        return obj.browser;
+                    if (obj?.import)
+                        return obj.import;
+                    if (obj?.default)
+                        return obj.default;
+                    return obj?.node;
+                };
+                //Names to use: browser, import, default, node
+                let imp = getImport(packageJsonObj.exports);
+                if (imp) {
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(imp, '/');
+                }
+                else if (imp = getImport(packageJsonObj?.['.'])) {
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(imp, '/');
+                }
+            }
             let mainImport = packageJsonObj.main;
             if (packageJsonObj.module)
                 mainImport = packageJsonObj.module;
-            importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(mainImport, '/');
+            if (packageJsonObj.unpkg && !mainImport)
+                mainImport = packageJsonObj.unpkg;
+            if (!importMap.imports[packageJsonObj.name]) {
+                importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(mainImport, '/');
+            }
             importMap.imports[packageJsonObj.name + '/'] = baseUrl;
             //@ts-ignore
             importShim.addImportMap(importMap);

package/dist/elements/item/DesignItem.d.ts

@@ -87,4 +87,5 @@ export declare class DesignItem implements IDesignItem {
     _removeChildInternal(designItem: IDesignItem): void;
     _refreshIfStyleSheet(): void;
     getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
+    static createDesignItemFromImageBlob(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, data: Blob): Promise<IDesignItem>;
 }

package/dist/elements/item/DesignItem.js

@@ -482,4 +482,16 @@ export class DesignItem {
         style ??= getComputedStyle(this.element);
         return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
     }
+    static createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, data) {
+        return new Promise(resolve => {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, serviceContainer, instanceServiceContainer);
+                return resolve(di);
+            };
+            reader.readAsDataURL(data);
+        });
+    }
 }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -45,7 +45,6 @@ import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
 import { ButtonSeperatorProvider } from '../widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js';
 import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js';
-import { DemoProviderService } from './demoProviderService/DemoProviderService.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
@@ -84,6 +83,7 @@ import { TransformToolButtonProvider } from '../widgets/designerView/tools/toolB
 import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js';
 import { DragDropService } from './dragDropService/DragDropService.js';
 import { EventsService } from './eventsService/EventsService.js';
+import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -107,7 +107,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
-    serviceContainer.register("demoProviderService", new DemoProviderService());
+    serviceContainer.register("demoProviderService", new SimpleDemoProviderService());
     serviceContainer.register("eventsService", new EventsService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
     serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));

package/dist/elements/services/copyPasteService/CopyPasteAsJsonService.js

@@ -1,5 +1,6 @@
 import { DomConverter } from "../../widgets/designerView/DomConverter.js";
 import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
+import { DesignItem } from "../../item/DesignItem.js";
 export class CopyPasteAsJsonService {
     async copyItems(designItems) {
         const copyText = DomConverter.ConvertToString(designItems, false);
@@ -26,6 +27,15 @@ export class CopyPasteAsJsonService {
                 data = await (await items[0].getType('application/json'))?.text();
             }
             catch { }
+            try {
+                let imageFmt = items[0].types.find(x => x.startsWith("image/"));
+                if (imageFmt) {
+                    let imgData = await items[0].getType(imageFmt);
+                    let di = await DesignItem.createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, imgData);
+                    return [[di]];
+                }
+            }
+            catch { }
         }
         else {
             data = await getTextFromClipboard();

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -16,8 +16,17 @@ export class DemoProviderService {
             const doc = iframe.contentWindow.document;
             doc.open();
             doc.write('<script type="module">');
-            for (let i of instanceServiceContainer.designContext.imports) {
-                doc.write("import '" + i + "';");
+            if (instanceServiceContainer.designContext.npmPackages?.length) {
+                doc.write("import { NpmPackageLoader } from '../../helper/NpmPackageLoader.js'");
+                doc.write("let loader =  new NpmPackageLoader();");
+                for (let p of instanceServiceContainer.designContext.npmPackages) {
+                    doc.write("loader.loadNpmPackage('" + p + "', null, null, true);");
+                }
+            }
+            if (instanceServiceContainer.designContext.imports?.length) {
+                for (let i of instanceServiceContainer.designContext.imports) {
+                    doc.write("import '" + i + "';");
+                }
             }
             doc.write("document.body.style.display='';");
             doc.write('</script>');

package/dist/elements/services/demoProviderService/IframeDemoProviderService copy.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class IframeDemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/IframeDemoProviderService copy.js

@@ -0,0 +1,38 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+export class IframeDemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            if (instanceServiceContainer.designContext.npmPackages?.length) {
+                doc.write("import { NpmPackageLoader } from '../../helper/NpmPackageLoader.js'");
+                doc.write("let loader =  new NpmPackageLoader();");
+                for (let p of instanceServiceContainer.designContext.npmPackages) {
+                    doc.write("loader.loadNpmPackage('" + p + "', null, null, true);");
+                }
+            }
+            if (instanceServiceContainer.designContext.imports?.length) {
+                for (let i of instanceServiceContainer.designContext.imports) {
+                    doc.write("import '" + i + "';");
+                }
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<style>' + (style ?? '') + '</style>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IframeDemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class IframeDemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/IframeDemoProviderService.js

@@ -0,0 +1,38 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+export class IframeDemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            if (instanceServiceContainer.designContext.npmPackages?.length) {
+                doc.write("import { NpmPackageLoader } from '../../helper/NpmPackageLoader.js'");
+                doc.write("let loader =  new NpmPackageLoader();");
+                for (let p of instanceServiceContainer.designContext.npmPackages) {
+                    doc.write("loader.loadNpmPackage('" + p + "', null, null, true);");
+                }
+            }
+            if (instanceServiceContainer.designContext.imports?.length) {
+                for (let i of instanceServiceContainer.designContext.imports) {
+                    doc.write("import '" + i + "';");
+                }
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<style>' + (style ?? '') + '</style>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/SimpleDemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { IDemoProviderService } from "./IDemoProviderService.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+export declare class SimpleDemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/SimpleDemoProviderService.js

@@ -0,0 +1,27 @@
+import { DomHelper, cssFromString } from "@node-projects/base-custom-webcomponent";
+export class SimpleDemoProviderService {
+    async provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        const contentDiv = document.createElement('div');
+        let shadowRoot = contentDiv.attachShadow({ mode: 'open' });
+        contentDiv.style.width = '100%';
+        contentDiv.style.height = '100%';
+        contentDiv.style.border = 'none';
+        contentDiv.style.display = 'none';
+        contentDiv.style.overflow = 'auto';
+        contentDiv.style.position = 'absolute';
+        container.style.position = 'relative';
+        DomHelper.removeAllChildnodes(container);
+        container.appendChild(contentDiv);
+        let styles = [];
+        if (instanceServiceContainer.designerCanvas.additionalStyles)
+            styles.push(...instanceServiceContainer.designerCanvas.additionalStyles);
+        if (instanceServiceContainer.stylesheetService) {
+            styles.push(...instanceServiceContainer.stylesheetService
+                .getStylesheets()
+                .map(x => cssFromString(x.content)));
+        }
+        shadowRoot.adoptedStyleSheets = styles;
+        shadowRoot.innerHTML = code;
+        contentDiv.style.display = '';
+    }
+}

package/dist/elements/services/designerAddons/IDesignerAddonJson copy.d.ts

@@ -0,0 +1,3 @@
+export interface IDesignerAddonJson {
+    services: Record<string, string>;
+}

package/dist/elements/services/designerAddons/IDesignerAddonJson copy.js

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

package/dist/elements/services/designerAddons/IDesignerAddonJson.d.ts

@@ -1,6 +1,3 @@
 export interface IDesignerAddonJson {
     services: Record<string, string>;
-    components: Record<string, {
-        stylesheets: string[];
-    }>;
 }

package/dist/elements/services/designerAddons/IDesignerInfoJson.d.ts

@@ -0,0 +1,7 @@
+type ElementInfo = {
+    attributes: Record<string, string>;
+    styles: Record<string, string>;
+    content: Record<string, string>;
+};
+export type IDesignerInfoJson = Record<string, ElementInfo>;
+export {};

package/dist/elements/services/designerAddons/IDesignerInfoJson.js

@@ -0,0 +1,19 @@
+export {};
+/*
+sample:
+
+{
+    "my-tag" : {
+        "attributes" : {
+            "value": "abcd",
+            "max": "200",
+            ...
+        },
+        "styles" : {
+            "width": "100px",
+            ""
+        }
+    }
+}
+
+*/ 

package/dist/elements/services/dragDropService/ExternalDragDropService.d.ts

@@ -2,5 +2,5 @@ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 import { IExternalDragDropService } from "./IExternalDragDropService.js";
 export declare class ExternalDragDropService implements IExternalDragDropService {
     dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
-    drop(designerCanvas: IDesignerCanvas, event: DragEvent): void;
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): Promise<void>;
 }

package/dist/elements/services/dragDropService/ExternalDragDropService.js

@@ -6,23 +6,17 @@ export class ExternalDragDropService {
             return 'copy';
         return 'none';
     }
-    drop(designerCanvas, event) {
+    async drop(designerCanvas, event) {
         if (event.dataTransfer.files[0].type.startsWith('image/')) {
-            let reader = new FileReader();
-            reader.onloadend = () => {
-                const img = document.createElement('img');
-                img.src = reader.result;
-                const di = DesignItem.createDesignItemFromInstance(img, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                let grp = di.openGroup("Insert of <img>");
-                di.setStyle('position', 'absolute');
-                const targetRect = event.target.getBoundingClientRect();
-                di.setStyle('top', event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px');
-                di.setStyle('left', event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px');
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                grp.commit();
-                requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
-            };
-            reader.readAsDataURL(event.dataTransfer.files[0]);
+            let di = await DesignItem.createDesignItemFromImageBlob(designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer, event.dataTransfer.files[0]);
+            let grp = di.openGroup("Insert of <img>");
+            di.setStyle('position', 'absolute');
+            const targetRect = event.target.getBoundingClientRect();
+            di.setStyle('top', event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px');
+            di.setStyle('left', event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px');
+            designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+            grp.commit();
+            requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
         }
     }
 }

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

@@ -20,6 +20,12 @@ export class WebcomponentManifestElementsService {
                     this._elementList.push(elDef);
                 }
             }
+            for (let d of m.declarations) {
+                if (d.tagName) {
+                    let elDef = { tag: d.tagName, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(m.path, '/'), defaultWidth: "200px", defaultHeight: "200px", className: d.name };
+                    this._elementList.push(elDef);
+                }
+            }
             if (this._resolveStored) {
                 this._resolveStored.forEach(x => x(this._elementList));
                 this._resolveStored = null;

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

@@ -7,6 +7,7 @@ import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
 import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
 import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
+import { FontPropertyEditor } from './propertyEditors/FontPropertyEditor.js';
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -20,6 +21,10 @@ export class DefaultEditorTypesService {
                 {
                     return new ColorPropertyEditor(property);
                 }
+            case "font":
+                {
+                    return new FontPropertyEditor(property);
+                }
             case "date":
                 {
                     return new DatePropertyEditor(property);

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class FontPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
+    static fontList: string[];
+    constructor(property: IProperty);
+    parseFontList(): void;
+    refreshValue(valueType: ValueType, value: any): void;
+}

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

@@ -0,0 +1,37 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class FontPropertyEditor extends BasePropertyEditor {
+    static fontList;
+    constructor(property) {
+        super(property);
+        let element = document.createElement("select");
+        this.element = element;
+        if (FontPropertyEditor.fontList) {
+            this.parseFontList();
+            //@ts-ignore
+        }
+        else if (window.queryLocalFonts) {
+            //@ts-ignore
+            window.queryLocalFonts().then(x => {
+                //@ts-ignore
+                FontPropertyEditor.fontList = [...new Set(x.map(y => y.family))];
+                this.parseFontList();
+            });
+        }
+        else {
+            FontPropertyEditor.fontList = ["Verdana", "Arial", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
+            this.parseFontList();
+        }
+    }
+    parseFontList() {
+        for (let v of FontPropertyEditor.fontList) {
+            let option = document.createElement("option");
+            option.value = v;
+            option.text = v;
+            this.element.appendChild(option);
+        }
+        this.element.onchange = (e) => this._valueChanged(this.element.value);
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor copy.d.ts

@@ -0,0 +1,7 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class SelectPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor copy.js

@@ -0,0 +1,28 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class SelectPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement("select");
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let option = document.createElement("option");
+                option.value = v[1];
+                option.text = v[0];
+                element.appendChild(option);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let option = document.createElement("option");
+                option.value = v;
+                option.text = v;
+                element.appendChild(option);
+            }
+        }
+        element.onchange = (e) => this._valueChanged(element.value);
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -281,7 +281,9 @@
     "floodOpacity": {},
     "font": {},
     "fontDisplay": {},
-    "fontFamily": {},
+    "fontFamily": {
+        "type": "font"
+    },
     "fontFeatureSettings": {},
     "fontKerning": {},
     "fontOpticalSizing": {},

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

@@ -32,6 +32,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         "box-shadow",
         "opacity",
         "position",
+        "font-family",
         "font-size",
         "font-weight",
         "inset",

package/dist/elements/widgets/debugView/debug-view.js

@@ -125,7 +125,12 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         </div> 
     `;
     static style = css `
-    table {
+      :host {
+        overflow: auto;
+        height: 100%;
+        display: block;
+      }
+      table {
         font-family: Arial, Helvetica, sans-serif;
         border-collapse: collapse;
         width: 100%;

package/dist/elements/widgets/designerView/DesignContext.d.ts

@@ -1,6 +1,7 @@
 import { IDesignContext } from './IDesignContext.js';
 export declare class DesignContext implements IDesignContext {
     imports: string[];
+    npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
     };

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

@@ -1,4 +1,5 @@
 export class DesignContext {
     imports = [];
+    npmPackages = [];
     extensionOptions = {};
 }

package/dist/elements/widgets/designerView/IDesignContext.d.ts

@@ -1,5 +1,6 @@
 export interface IDesignContext {
     imports: string[];
+    npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
     };

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -31,6 +31,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly scaleFactor: number;
     canvasOffset: IPoint;
     canvas: HTMLElement;
+    additionalStyles: CSSStyleSheet[];
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;

package/dist/index.d.ts

@@ -41,7 +41,8 @@ export type { IContentService } from "./elements/services/contentService/IConten
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
-export * from "./elements/services/demoProviderService/DemoProviderService.js";
+export * from "./elements/services/demoProviderService/IframeDemoProviderService.js";
+export * from "./elements/services/demoProviderService/SimpleDemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export type { IDesignItemDocumentPositionService } from "./elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js";

package/dist/index.js

@@ -27,7 +27,8 @@ export * from "./elements/services/elementAtPointService/ElementAtPointService.j
 export * from "./elements/services/contentService/ContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
-export * from "./elements/services/demoProviderService/DemoProviderService.js";
+export * from "./elements/services/demoProviderService/IframeDemoProviderService.js";
+export * from "./elements/services/demoProviderService/SimpleDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export * from "./elements/services/designItemService/DesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";

package/package.json

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