@node-projects/web-component-designer 0.0.257 → 0.0.259

package/dist/elements/item/DesignItem.js

@@ -347,6 +347,8 @@ export class DesignItem {
     }
     setStyle(name, value, important) {
         let nm = PropertiesHelper.camelToDashCase(name);
+        if (this.isRootItem)
+            throw 'not allowed to set style on root item';
         const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
@@ -413,6 +415,8 @@ export class DesignItem {
         return [{ selector: null, declarations: localStyles, specificity: -1 }];
     }
     setAttribute(name, value) {
+        if (this.isRootItem)
+            throw 'not allowed to set attribute on root item';
         const action = new AttributeChangeAction(this, name, value, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }

package/dist/elements/services/htmlWriterService/HtmlWriterService.d.ts

@@ -1,7 +1,9 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
 import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
 export declare class HtmlWriterService extends AbstractHtmlWriterService {
+    constructor(options?: IHtmlWriterOptions);
     private _conditionalyWriteIndent;
     private _conditionalyWriteIndentBefore;
     private _conditionalyWriteNewline;

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -3,6 +3,9 @@ import { NodeType } from '../../item/NodeType.js';
 import { isEmptyTextNode, isInline, isInlineAfter } from '../../helper/ElementHelper.js';
 import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
 export class HtmlWriterService extends AbstractHtmlWriterService {
+    constructor(options) {
+        super(options);
+    }
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
             (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||

package/dist/elements/services/htmlWriterService/IHtmlWriterService.d.ts

@@ -1,5 +1,7 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { ITextWriter } from '../../helper/ITextWriter.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
 export interface IHtmlWriterService {
+    options: IHtmlWriterOptions;
     write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean): any;
 }

package/dist/elements/services/htmlWriterService/LitTsElementWriterService.d.ts

@@ -1,7 +1,10 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IHtmlWriterService } from './IHtmlWriterService.js';
 import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
 export declare class LitTsElementWriterService implements IHtmlWriterService {
+    options: IHtmlWriterOptions;
+    constructor(options?: IHtmlWriterOptions);
     write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean): void;
     static head: string;
 }

package/dist/elements/services/htmlWriterService/LitTsElementWriterService.js

@@ -1,5 +1,14 @@
 //needs InternalBindinsgStorrageService -> keeps bindings
 export class LitTsElementWriterService {
+    options;
+    constructor(options) {
+        this.options = options ?? {};
+        this.options.beautifyOutput ??= true;
+        this.options.compressCssToShorthandProperties ??= true;
+        this.options.writeDesignerProperties ??= true;
+        this.options.parseJsonInAttributes ??= true;
+        this.options.jsonWriteMode ??= 'min';
+    }
     write(indentedTextWriter, designItems, rootContainerKeepInline) {
         throw new Error('Method not implemented.');
     }

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js

@@ -14,31 +14,34 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
     refreshValue(valueType, value) {
         this._root.innerHTML = "";
         if (this.designItems != null && this.designItems.length) {
-            let styleContainer = getComputedStyle(this.designItems[0].element.parentElement);
-            let style = getComputedStyle(this.designItems[0].element);
-            let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
-            let cntRow = styleContainer.gridTemplateRows.split(' ').length;
-            this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
-            this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
-            let rowStart = parseInt(style.gridRowStart);
-            let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
-            rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
-            let colStart = parseInt(style.gridColumnStart);
-            let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
-            colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
-            for (let p = 1; p <= cntRow; p++) {
-                for (let n = 1; n <= cntCol; n++) {
-                    const b = document.createElement('button');
-                    b.style.minHeight = '10px';
-                    b.onclick = () => {
-                        let grp = this.designItems[0].openGroup('Change grid row/column');
-                        this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
-                        this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
-                        grp.commit();
-                    };
-                    if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
-                        b.style.backgroundColor = 'coral';
-                    this._root.appendChild(b);
+            let container = this.designItems[0].element.parentElement;
+            if (container) {
+                let styleContainer = getComputedStyle(container);
+                let style = getComputedStyle(this.designItems[0].element);
+                let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
+                let cntRow = styleContainer.gridTemplateRows.split(' ').length;
+                this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+                this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+                let rowStart = parseInt(style.gridRowStart);
+                let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
+                rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
+                let colStart = parseInt(style.gridColumnStart);
+                let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
+                colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
+                for (let p = 1; p <= cntRow; p++) {
+                    for (let n = 1; n <= cntCol; n++) {
+                        const b = document.createElement('button');
+                        b.style.minHeight = '10px';
+                        b.onclick = () => {
+                            let grp = this.designItems[0].openGroup('Change grid row/column');
+                            this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
+                            this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
+                            grp.commit();
+                        };
+                        if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
+                            b.style.backgroundColor = 'coral';
+                        this._root.appendChild(b);
+                    }
                 }
             }
         }

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -78,9 +78,13 @@ export class AbstractStylesheetService {
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();
     elementMatchesASelector(designItem, selectors) {
-        for (const selector of selectors)
+        for (let selector of selectors) {
+            if (selector == ':host') {
+                selector = DesignerCanvas.cssprefixConstant;
+            }
             if (designItem.element.matches(selector))
                 return true;
+        }
         return false;
     }
     static buildPatchedStyleSheet(value) {

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

@@ -74,7 +74,6 @@ export class ResizeExtension extends AbstractExtension {
                     contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);
                 }
                 this._initialSizes.push({ width: (rect.width - contentBoxOffset.x * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor, height: (rect.height - contentBoxOffset.y * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor });
-                this.extendedItem.element.style.width = this._initialSizes[0].width + 'px';
                 const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', '')));
                 const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
                 this._initialComputedTransformOrigins.push(transformOrigin);

package/package.json

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