@node-projects/web-component-designer 0.0.99 → 0.0.100

package/dist/elements/documentContainer.js

@@ -10,7 +10,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _additionalStyle;
     set additionalStyleString(style) {
         this._additionalStyle = style;
-        this.designerView.additionalStyle = cssFromString(style);
+        this.designerView.additionalStyles = [cssFromString(style)];
     }
     ;
     get additionalStyleString() {

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

@@ -64,7 +64,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     getDesignSurfaceDimensions(): ISize;
     get designerOffsetWidth(): number;
     get designerOffsetHeight(): number;
-    set additionalStyle(value: CSSStyleSheet);
+    set additionalStyles(value: CSSStyleSheet[]);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;
     handleSelectAll(): void;

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

@@ -3,7 +3,7 @@ import { InstanceServiceContainer } from '../../services/InstanceServiceContaine
 import { UndoService } from '../../services/undoService/UndoService';
 import { SelectionService } from '../../services/selectionService/SelectionService';
 import { DesignItem } from '../../item/DesignItem';
-import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
@@ -199,21 +199,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     get designerOffsetHeight() {
         return this._canvasContainer.offsetHeight;
     }
-    set additionalStyle(value) {
+    set additionalStyles(value) {
         if (value) {
-            for (let r of value.rules) {
-                if (r instanceof CSSStyleRule) {
-                    let parts = r.selectorText.split(',');
-                    let t = '';
-                    for (let p of parts) {
-                        if (r.selectorText)
-                            t += ',';
-                        t += '#canvas ' + p;
+            let style = '';
+            for (let s of value) {
+                for (let r of s.cssRules) {
+                    if (r instanceof CSSStyleRule) {
+                        let parts = r.selectorText.split(',');
+                        let t = '';
+                        for (let p of parts) {
+                            if (t)
+                                t += ',';
+                            t += '#node-projects-designer-canvas-canvas ' + p;
+                        }
+                        style += t + '{' + r.style.cssText + '}';
                     }
-                    r.selectorText = t;
                 }
             }
-            this.shadowRoot.adoptedStyleSheets = [this.constructor.style, value];
+            this.shadowRoot.adoptedStyleSheets = [this.constructor.style, cssFromString(style)];
         }
         else
             this.shadowRoot.adoptedStyleSheets = [this.constructor.style];

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

@@ -29,7 +29,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
-    set additionalStyle(value: CSSStyleSheet);
+    set additionalStyles(value: CSSStyleSheet[]);
     setDesignItems(designItems: IDesignItem[]): void;
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;

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

@@ -297,8 +297,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set designerHeight(value) {
         this._designerCanvas.designerHeight = value;
     }
-    set additionalStyle(value) {
-        this._designerCanvas.additionalStyle = value;
+    set additionalStyles(value) {
+        this._designerCanvas.additionalStyles = value;
     }
     setDesignItems(designItems) {
         this._designerCanvas.setDesignItems(designItems);

package/package.json

@@ -1,42 +1,42 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.99",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.1",
-    "construct-style-sheets-polyfill": "^3.1.0"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.15",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.14",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.14",
-    "codemirror": "^5.65.3",
-    "esprima-next": "^5.8.1",
-    "html2canvas": "*",
-    "jest": "^27.5.1",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.1",
-    "monaco-editor": "^0.33.0",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.100",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.9.1",
+    "construct-style-sheets-polyfill": "^3.1.0"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@papyrs/stylo": "^0.0.26",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.14",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.5.1",
+    "codemirror": "^5.65.4",
+    "esprima-next": "^5.8.2",
+    "html2canvas": "*",
+    "jest": "^28.1.0",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.1",
+    "monaco-editor": "^0.33.0",
+    "ts-jest": "^28.0.3",
+    "typescript": "^4.7.2",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}