@node-projects/web-component-designer 0.0.192 → 0.0.194

package/README.md

@@ -72,12 +72,11 @@ We have 2 tree components. One independent and one feature rich which uses Fancy
 
 ## DragDrop
 
-If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library and include our polyfill.
+If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library.
 Your index.html should be extended as follows:
 
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
-    <script src="/node_modules/@node-projects/web-component-designer/dist/polyfill/mobileDragDrop.js"></script>
 
 ## Copyright notice
 

package/dist/elements/helper/CssUnitConverter.js

@@ -24,7 +24,7 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
         'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
         '%': value => value / 100 * (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
         /* todo
-        //find parent with computed style where contaner-type is inline-size or size (regarding to query type)
+        //find parent with computed style where container-type is inline-size or size (regarding to query type)
         //use this size for calculation
         'cqw':
         'cqh':

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -11,9 +11,6 @@ export declare class ContextMenu {
     menu: IContextMenuItem[];
     options: IContextMenuOptions;
     private num;
-    private _windowDownBound;
-    private _windowKeyUpBound;
-    private _windowResizeBound;
     private _menuElement;
     constructor(menu: IContextMenuItem[], options?: IContextMenuOptions);
     reload(): void;

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -1,5 +1,4 @@
 import { css } from "@node-projects/base-custom-webcomponent";
-import { sleep } from '../Helper.js';
 export class ContextMenu {
     static _contextMenuCss = css `
 	  .context_menu {
@@ -114,18 +113,15 @@ export class ContextMenu {
     menu;
     options;
     num;
-    _windowDownBound;
-    _windowKeyUpBound;
-    _windowResizeBound;
     _menuElement;
     constructor(menu, options) {
         this.num = ContextMenu.count++;
         this.menu = menu;
         this.options = options;
         this.reload();
-        this._windowDownBound = this._windowDown.bind(this);
-        this._windowKeyUpBound = this._windowKeyUp.bind(this);
-        this._windowResizeBound = this._windowResize.bind(this);
+        this._windowDown = this._windowDown.bind(this);
+        this._windowKeyUp = this._windowKeyUp.bind(this);
+        this._windowResize = this._windowResize.bind(this);
     }
     reload() {
         let shadowRoot = this.options?.shadowRoot ?? document;
@@ -241,10 +237,10 @@ export class ContextMenu {
         }
         menu.classList.add("context_menu_display");
         event.preventDefault();
-        window.addEventListener("keyup", this._windowKeyUpBound);
-        window.addEventListener("mousedown", this._windowDownBound);
-        window.addEventListener("resize", this._windowResizeBound);
-        sleep(100).then(() => window.addEventListener("contextmenu", this._windowDownBound));
+        window.addEventListener("keyup", this._windowKeyUp);
+        window.addEventListener("mousedown", this._windowDown);
+        window.addEventListener("resize", this._windowResize);
+        setTimeout(() => window.addEventListener("contextmenu", this._windowDown), 100);
     }
     _windowResize() {
         this.close();
@@ -266,10 +262,10 @@ export class ContextMenu {
     }
     close() {
         this._menuElement.remove();
-        window.removeEventListener("keyup", this._windowKeyUpBound);
-        window.removeEventListener("mousedown", this._windowDownBound);
-        window.removeEventListener("contextmenu", this._windowDownBound);
-        window.removeEventListener("resize", this._windowResizeBound);
+        window.removeEventListener("keyup", this._windowKeyUp);
+        window.removeEventListener("mousedown", this._windowDown);
+        window.removeEventListener("contextmenu", this._windowDown);
+        window.removeEventListener("resize", this._windowResize);
     }
 }
 class ContextUtil {

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

@@ -3,6 +3,7 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { NodeType } from '../../../item/NodeType.js';
+//TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
 if (window.importShim) {

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

@@ -3,6 +3,7 @@ import { PropertyType } from '../PropertyType.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
+//TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
 if (window.importShim) {

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

@@ -1007,26 +1007,27 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return style;
     }
     traverseAndCollectRules(ruleContainer) {
-        let ruleCollector = [];
+        let t = '';
         for (let rule of ruleContainer.cssRules) {
             if ((rule instanceof CSSContainerRule
                 || rule instanceof CSSSupportsRule
                 || rule instanceof CSSMediaRule)
                 && rule.cssRules) {
-                return rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
             }
             if (rule instanceof CSSStyleRule) {
                 let parts = rule.selectorText.split(',');
-                let t = '';
+                let sel = "";
                 for (let p of parts) {
                     if (p.includes(this.cssprefixConstant)) {
-                        t += p;
+                        sel += p;
                         continue;
                     }
-                    if (t)
-                        t += ',';
-                    t += this.cssprefixConstant + p;
+                    if (sel)
+                        sel += ',';
+                    sel += this.cssprefixConstant + p.trimStart();
                 }
+                t += sel;
                 let cssText = rule.style.cssText;
                 //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
                 if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
@@ -1036,10 +1037,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                         cssText += e[0] + ':' + e[1].toString() + ';';
                     }
                 }
-                ruleCollector.push(t + '{' + cssText + '}');
+                t += '{' + cssText + '}';
             }
         }
-        return ruleCollector.join(' ');
+        return t;
     }
 }
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

package/package.json

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