@node-projects/web-component-designer 0.0.272 → 0.0.274

package/dist/elements/controls/MetricsEditor.d.ts

@@ -8,7 +8,11 @@ export declare class MetricsEditor extends BaseCustomWebComponentConstructorAppe
     static readonly template: HTMLTemplateElement;
     property: string;
     unsetValue: string;
+    private _borderDiv;
+    private _elementDiv;
+    constructor();
     ready(): void;
     onDoubleClick(event: PointerEvent): void;
     onKeyDown(event: KeyboardEvent): void;
+    refresh(element: Element): void;
 }

package/dist/elements/controls/MetricsEditor.js

@@ -6,6 +6,7 @@ export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
   display: flex;
   margin: 10px;
   line-height: 12px;
+  min-width: 120px;
 }
 
 * { 
@@ -49,6 +50,10 @@ div.ct {
   vertical-align: middle;
 }
 
+div.ct.box {
+  border: dotted 2px black;
+}
+
 div.ct > div.ct {
   left: 0;
   top: 0;
@@ -82,17 +87,25 @@ span {
   text-overflow: ellipsis;
 }`;
     static template = html `
-  <div class="ct"><span title="position">position</span>
-  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="margin">margin</span>
-  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="border">border</span>
-  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="padding">padding</span>
-  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
+  <div id="position" class="ct"><span title="position">position</span>
+  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="margin" class="ct"><span title="margin">margin</span>
+  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="border" class="ct"><span title="border">border</span>
+  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="padding" class="ct"><span title="padding">padding</span>
+  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="element" class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
   &nbsp;x&nbsp;
   <div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div>
   </div><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div>
   `;
     property;
     unsetValue;
+    _borderDiv;
+    _elementDiv;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._borderDiv = this._getDomElement('border');
+        this._elementDiv = this._getDomElement('element');
+    }
     ready() {
         this._parseAttributesToProperties();
         this._assignEvents();
@@ -121,5 +134,18 @@ span {
             this.dispatchEvent(valueChangedEvent);
         }
     }
+    refresh(element) {
+        this._elementDiv.classList.remove('box');
+        this._borderDiv.classList.remove('box');
+        if (element) {
+            let cp = getComputedStyle(element);
+            if (cp.boxSizing == 'content-box') {
+                this._elementDiv.classList.add('box');
+            }
+            else {
+                this._borderDiv.classList.add('box');
+            }
+        }
+    }
 }
 customElements.define('node-projects-metrics-editor', MetricsEditor);

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

@@ -1,5 +1,9 @@
 import { IDesignItem } from "../item/IDesignItem.js";
-export declare function CalculateGridInformation(designItem: IDesignItem): {
+export declare function getElementGridInformation(element: HTMLElement): {
+    colSpan: number;
+    rowSpan: number;
+};
+export declare function calculateGridInformation(designItem: IDesignItem): {
     cells?: {
         x: number;
         y: number;

package/dist/elements/helper/GridHelper.js

@@ -1,5 +1,23 @@
 import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "./TransformHelper.js";
-export function CalculateGridInformation(designItem) {
+export function getElementGridInformation(element) {
+    let cs = getComputedStyle(element);
+    let rowSpan = 1;
+    let colSpan = 1;
+    if (cs.gridRowEnd == 'auto')
+        rowSpan = 1;
+    else if (cs.gridRowEnd.startsWith('span'))
+        rowSpan = parseInt(cs.gridRowEnd.substring(4));
+    else
+        rowSpan = parseInt(cs.gridRowEnd) - parseInt(cs.gridRowStart);
+    if (cs.gridColumnEnd == 'auto')
+        colSpan = 1;
+    else if (cs.gridColumnEnd.startsWith('span'))
+        colSpan = parseInt(cs.gridColumnEnd.substring(4));
+    else
+        colSpan = parseInt(cs.gridColumnEnd) - parseInt(cs.gridColumnStart);
+    return { colSpan, rowSpan };
+}
+export function calculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
     let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from './IContextMenuItem.js';
+import { IContextMenu, IContextMenuItem } from './IContextMenuItem.js';
 export interface IContextMenuOptions {
     defaultIcon?: string;
     subIcon?: string;
@@ -6,7 +6,7 @@ export interface IContextMenuOptions {
     shadowRoot?: ShadowRoot | Document;
     mode?: 'normal' | 'undo';
 }
-export declare class ContextMenu {
+export declare class ContextMenu implements IContextMenu {
     private static _contextMenuCss;
     static count: number;
     menu: IContextMenuItem[];

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

@@ -183,12 +183,12 @@ export class ContextMenu {
                 else {
                     if (item.action)
                         li.addEventListener('click', (e) => {
-                            item.action(e, item, this.context);
+                            item.action(e, item, this.context, this);
                             this.close();
                         });
                     if (this.options?.mode == 'undo') {
                         li.addEventListener('mouseup', (e) => {
-                            item.action(e, item, this.context);
+                            item.action(e, item, this.context, this);
                             this.close();
                         });
                     }

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

@@ -1,3 +1,6 @@
+export interface IContextMenu {
+    close: () => void;
+}
 export interface IContextMenuItem {
     readonly id?: string;
     readonly title?: string;
@@ -5,5 +8,5 @@ export interface IContextMenuItem {
     readonly children?: IContextMenuItem[];
     readonly disabled?: boolean;
     readonly shortCut?: string;
-    action?: (event: MouseEvent, item: IContextMenuItem, context?: any) => void;
+    action?: (event: MouseEvent, item: IContextMenuItem, context?: any, menu?: IContextMenu) => void;
 }

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

@@ -1,2 +1,3 @@
 ;
+;
 export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { ServiceContainer } from '../services/ServiceContainer.js';
 import { IDesignItem } from './IDesignItem.js';
 import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
@@ -80,6 +81,8 @@ export declare class DesignItem implements IDesignItem {
     getStyleFromSheetOrLocal(name: string, fallback?: string): string;
     getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
     getComputedStyle(name: string, fallback?: string): string;
+    _stylesCache: IStyleRule[];
+    _cacheClearTimer: NodeJS.Timeout;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -399,7 +399,12 @@ export class DesignItem {
         }
         return value ?? fallback;
     }
+    _stylesCache = null;
+    _cacheClearTimer;
     getAllStyles() {
+        let styles = this._stylesCache;
+        if (styles)
+            return styles;
         if (this.nodeType != NodeType.Element)
             return [];
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
@@ -412,7 +417,11 @@ export class DesignItem {
             }
             catch (err) { }
         }
-        return [{ selector: null, declarations: localStyles, specificity: -1 }];
+        styles = [{ selector: null, declarations: localStyles, specificity: -1 }];
+        this._stylesCache = styles;
+        clearTimeout(this._cacheClearTimer);
+        this._cacheClearTimer = setTimeout(() => this._stylesCache = null, 30);
+        return styles;
     }
     setAttribute(name, value) {
         if (this.isRootItem)

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

@@ -30,6 +30,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             this.internalWrite(indentedTextWriter, d, updatePositions);
         }
     }
+    //todo special case for style/script nodes, keep whitespace
     internalWrite(indentedTextWriter, designItem, updatePositions) {
         let start = indentedTextWriter.position;
         let end = indentedTextWriter.position;
@@ -61,7 +62,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                 const children = designItem.children();
                 contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
                 if (contentSingleTextNode) {
-                    this.writeTextNode(indentedTextWriter, designItem, false);
+                    const notrim = designItem.name == 'script' || designItem.name == 'style' || designItem.name == 'pre';
+                    this.writeTextNode(indentedTextWriter, designItem, false, !notrim);
                 }
                 else {
                     if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
@@ -99,8 +101,10 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: start, length: end - start });
         }
     }
-    writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
-        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+    writeTextNode(indentedTextWriter, designItem, indentAndNewline, trim = true) {
+        let content = DomConverter.normalizeContentValue(designItem.content);
+        if (trim)
+            content = content.trim();
         if (content) {
             if (indentAndNewline)
                 this._conditionalyWriteIndent(indentedTextWriter, designItem);

package/dist/elements/services/placementService/GridPlacementService.js

@@ -1,4 +1,4 @@
-import { CalculateGridInformation } from '../../helper/GridHelper.js';
+import { calculateGridInformation, getElementGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class GridPlacementService {
@@ -49,38 +49,39 @@ export class GridPlacementService {
     startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const gridInformation = CalculateGridInformation(container);
+        const gridInformation = calculateGridInformation(container);
         const pos = placementView.getNormalizedEventCoordinates(event);
-        const posElement = placementView.getNormalizedElementCoordinates(items[0].element);
+        //pos.x -= offsetInControl.x;
+        //pos.y -= offsetInControl.y;
         let row = 0;
         let column = 0;
-        if (!pointInRect(pos, posElement)) {
-            row = 0;
-            for (let cellRow of gridInformation.cells) {
-                column = 0;
-                for (let cell of cellRow) {
-                    if (pointInRect(pos, cell)) {
-                        if (cell.name) {
-                            items[0].element.style.gridColumn = '';
-                            items[0].element.style.gridRow = '';
-                            items[0].element.style.gridArea = cell.name;
-                        }
-                        else {
-                            items[0].element.style.gridArea = '';
-                            items[0].element.style.gridColumn = column + 1;
-                            items[0].element.style.gridRow = row + 1;
-                        }
+        for (let cellRow of gridInformation.cells) {
+            column = 0;
+            for (let cell of cellRow) {
+                if (pointInRect(pos, cell)) {
+                    let info = getElementGridInformation(items[0].element);
+                    if (cell.name) {
+                        items[0].element.style.gridColumn = '';
+                        items[0].element.style.gridRow = '';
+                        items[0].element.style.gridArea = cell.name;
+                    }
+                    else {
+                        items[0].element.style.gridArea = '';
+                        items[0].element.style.gridColumn = (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : '');
+                        items[0].element.style.gridRow = (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : '');
                     }
-                    column++;
                 }
-                row++;
+                column++;
             }
+            row++;
         }
         placementView.extensionManager.refreshAllExtensions([container]);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const gridInformation = CalculateGridInformation(container);
+        const gridInformation = calculateGridInformation(container);
         const pos = placementView.getNormalizedEventCoordinates(event);
+        //pos.x -= offsetInControl.x;
+        //pos.y -= offsetInControl.y;
         let row = 0;
         let column = 0;
         row = 0;
@@ -88,6 +89,7 @@ export class GridPlacementService {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
+                    let info = getElementGridInformation(items[0].element);
                     //Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear
                     if (cell.name) {
                         items[0].setStyle('grid-area', cell.name);
@@ -96,11 +98,11 @@ export class GridPlacementService {
                         items[0].setStyle('grid-area', cell.name);
                     }
                     else {
-                        items[0].setStyle('grid-column', column + 1);
-                        items[0].setStyle('grid-row', row + 1);
+                        items[0].setStyle('grid-column', (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : ''));
+                        items[0].setStyle('grid-row', (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : ''));
                         items[0].removeStyle('grid-area');
-                        items[0].setStyle('grid-column', column + 1);
-                        items[0].setStyle('grid-row', row + 1);
+                        items[0].setStyle('grid-column', (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : ''));
+                        items[0].setStyle('grid-row', (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : ''));
                     }
                 }
                 column++;

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

@@ -2,5 +2,6 @@ export declare enum ValueType {
     'none' = "none",
     'all' = "all",
     'some' = "some",
-    'bound' = "bound"
+    'bound' = "bound",
+    'fromStylesheet' = "fromStylesheet"
 }

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

@@ -4,4 +4,5 @@ export var ValueType;
     ValueType["all"] = "all";
     ValueType["some"] = "some";
     ValueType["bound"] = "bound";
+    ValueType["fromStylesheet"] = "fromStylesheet";
 })(ValueType || (ValueType = {}));

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

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

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

@@ -1,14 +1,17 @@
 import { BasePropertyEditor } from './BasePropertyEditor.js';
 export class SelectPropertyEditor extends BasePropertyEditor {
+    elementSelect;
+    elementInput;
     constructor(property) {
         super(property);
-        let element = document.createElement("select");
+        let element = document.createElement("div");
+        let elementSel = 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);
+                elementSel.appendChild(option);
             }
         }
         else {
@@ -16,13 +19,27 @@ export class SelectPropertyEditor extends BasePropertyEditor {
                 let option = document.createElement("option");
                 option.value = v;
                 option.text = v;
-                element.appendChild(option);
+                elementSel.appendChild(option);
             }
         }
-        element.onchange = (e) => this._valueChanged(element.value);
+        elementSel.onchange = (e) => this._valueChanged(elementSel.value);
+        let elementInput = document.createElement("input");
+        elementInput.style.display = 'none';
+        elementInput.onchange = (e) => this._valueChanged(elementInput.value);
+        this.elementSelect = elementSel;
+        this.elementInput = elementInput;
+        element.appendChild(this.elementSelect);
+        element.appendChild(this.elementInput);
         this.element = element;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.elementSelect.style.display = 'block';
+        this.elementInput.style.display = 'none';
+        this.elementSelect.value = value;
+        if (this.elementSelect.value != value && value) {
+            this.elementInput.value = value;
+            this.elementSelect.style.display = 'none';
+            this.elementInput.style.display = 'block';
+        }
     }
 }

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

@@ -1,4 +1,5 @@
 import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { getElementGridInformation } from '../../../../helper/GridHelper.js';
 export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
     //Todo: multiple cell selection, grid area support, span support
     _root;
@@ -17,25 +18,25 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
             let container = this.designItems[0].element.parentElement;
             if (container) {
                 let styleContainer = getComputedStyle(container);
+                let info = getElementGridInformation(this.designItems[0].element);
                 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 rowEnd = rowStart + info.rowSpan;
                 let colStart = parseInt(style.gridColumnStart);
-                let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
-                colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
+                let colEnd = colStart + info.colSpan;
                 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 info = getElementGridInformation(this.designItems[0].element);
                             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));
+                            this.designItems[0].setStyle("grid-row", p + ' / ' + (p + info.rowSpan));
+                            this.designItems[0].setStyle("grid-column", n + ' / ' + (n + info.colSpan));
                             grp.commit();
                         };
                         if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)

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

@@ -10,6 +10,6 @@ export class MetricsPropertyEditor extends BasePropertyEditor {
         this.element = selector;
     }
     refreshValue(valueType, value) {
-        //this.element.valueLeft = value;
+        this.element.refresh(this.designItems?.[0]?.element);
     }
 }

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

@@ -42,6 +42,10 @@ export class AbstractPolymerLikePropertiesService extends AbstractPropertiesServ
                 let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
+            else {
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
         }
         return properties;
     }

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

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
 import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
@@ -6,6 +7,8 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IBinding } from '../../../item/IBinding.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
+    _stylesCache: Map<IDesignItem, Set<string>>;
+    _cacheClearTimer: NodeJS.Timeout;
     abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
     abstract isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;

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

@@ -4,6 +4,8 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
 import { NodeType } from '../../../item/NodeType.js';
 export class AbstractPropertiesService {
+    _stylesCache = new Map;
+    _cacheClearTimer;
     _notifyChangedProperty(designItem, property, value) {
     }
     getProperty(designItem, name) {
@@ -90,7 +92,7 @@ export class AbstractPropertiesService {
             let attributeName = property.attributeName;
             if (!attributeName)
                 attributeName = PropertiesHelper.camelToDashCase(property.name);
-            designItems.forEach((x) => {
+            for (let x of designItems) {
                 let has = false;
                 if (property.propertyType == PropertyType.cssValue)
                     has = x.hasStyle(property.name);
@@ -98,7 +100,10 @@ export class AbstractPropertiesService {
                     has = x.hasAttribute(attributeName);
                 all = all && has;
                 some = some || has;
-            });
+                if (!all && some)
+                    break;
+            }
+            ;
             //todo: optimize perf, do not call bindings service for each property. 
             const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
                 return s.getBindings(designItems[0]);
@@ -111,6 +116,18 @@ export class AbstractPropertiesService {
                 if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
                     return ValueType.bound;
             }
+            if (!all && property.propertyType == PropertyType.cssValue) {
+                let styles = this._stylesCache.get(designItems[0]);
+                if (!styles) {
+                    styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name));
+                    this._stylesCache.set(designItems[0], styles);
+                    clearTimeout(this._cacheClearTimer);
+                    this._cacheClearTimer = setTimeout(() => this._stylesCache.clear(), 30);
+                }
+                let cssValue = styles.has(property.name);
+                if (cssValue)
+                    return ValueType.fromStylesheet;
+            }
         }
         else
             return ValueType.none;
@@ -162,7 +179,6 @@ export class AbstractPropertiesService {
             return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
         }
     }
-    //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
     getUnsetValue(designItems, property) {
         if (property.propertyType == PropertyType.cssValue) {
             if (designItems != null && designItems.length !== 0) {

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

@@ -24,6 +24,11 @@ export class CommonPropertiesService extends AbstractPropertiesService {
             type: "string",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "part",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "tabindex",
             type: "number",

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js

@@ -1,4 +1,4 @@
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
@@ -16,7 +16,7 @@ export class DisplayGridExtension extends AbstractExtension {
         this.refresh(event);
     }
     refresh(event) {
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         let cells = this.gridInformation.cells;
         if (!this._group) {
             this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
@@ -56,7 +56,7 @@ export class DisplayGridExtension extends AbstractExtension {
     }
     _initSVGArrays() {
         this._removeAllOverlays();
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         this._cells = new Array(this.gridInformation.cells.length);
         this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length));
         this._texts = new Array(this.gridInformation.cells.length);

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -1,10 +1,10 @@
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { AbstractExtension } from '../AbstractExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
-    gridInformation: ReturnType<typeof CalculateGridInformation>;
+    gridInformation: ReturnType<typeof calculateGridInformation>;
     private _resizers;
     private _initalPos;
     private _initialSizes;

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js

@@ -1,6 +1,6 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
 import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
@@ -17,7 +17,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
         this.refresh(event);
     }
     refresh(event) {
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
         this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
         this._group.style.transformOrigin = '0 0';

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -185,7 +185,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         let label = document.createElement("label");
                         label.htmlFor = p.name;
                         label.textContent = p.name;
-                        label.title = p.name;
+                        label.title = p.name + ' (type: ' + p.type + (p.defaultValue ? ', default: ' + p.defaultValue : '') + ', propertytype: ' + p.propertyType + ')';
                         label.ondragleave = (e) => this._onDragLeave(e, p, label);
                         label.ondragover = (e) => this._onDragOver(e, p, label);
                         label.ondrop = (e) => this._onDrop(e, p, label);
@@ -251,16 +251,29 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         PropertyGridPropertyList.openContextMenu(event, this._designItems, property);
     }
     static openContextMenu(event, designItems, property) {
-        const ctxMenu = [
+        const ctxMenuItems = [
             {
                 title: 'clear', action: (e) => {
                     property.service.clearValue(designItems, property, 'value');
                     designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
                 }
             },
+            {
+                title: 'edit as text', action: (e, _1, _2, menu) => {
+                    menu.close();
+                    setTimeout(() => {
+                        const oldValue = property.service.getValue(designItems, property);
+                        let value = prompt(`edit value of '${property.name}' as string:`, oldValue);
+                        if (value && value != oldValue) {
+                            property.service.setValue(designItems, property, value);
+                        }
+                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                    }, 10);
+                }
+            },
         ];
         if (designItems[0].serviceContainer.config.openBindingsEditor) {
-            ctxMenu.push(...[
+            ctxMenuItems.push(...[
                 { title: '-' },
                 {
                     title: 'edit binding', action: () => {
@@ -278,7 +291,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             ]);
         }
         ;
-        ContextMenu.show(ctxMenu, event);
+        ContextMenu.show(ctxMenuItems, event);
     }
     designItemsChanged(designItems) {
         this._designItems = designItems;
@@ -306,6 +319,10 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                 isSetElement.style.background = 'gray';
             else if (s == ValueType.bound)
                 isSetElement.style.background = 'orange';
+            else if (s == ValueType.fromStylesheet) {
+                v = propertiesService.getUnsetValue(items, property);
+                isSetElement.style.background = 'yellow';
+            }
             editor?.refreshValueWithoutNotification(s, v);
         }
         else {

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export * from "./elements/helper/contextMenu/ContextMenu.js";
 export * from "./elements/helper/Helper.js";
 export * from "./elements/helper/SwitchContainerHelper.js";
 export * from "./elements/helper/NpmPackageLoader.js";
-export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextMenuItem.js";
+export type { IContextMenuItem, IContextMenu } from "./elements/helper/contextMenu/IContextMenuItem.js";
 export * from "./elements/item/DesignItem.js";
 export type { IDesignItem } from "./elements/item/IDesignItem.js";
 export type { IBinding } from "./elements/item/IBinding.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.272",
+  "version": "0.0.274",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.13.0"
+    "@node-projects/base-custom-webcomponent": "^0.15.0"
   },
   "devDependencies": {
     "@adobe/css-tools": "4.3.1",