@node-projects/web-component-designer 0.0.287 → 0.0.289

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

@@ -2,6 +2,7 @@ import { AttachedPropertiesService } from './services/AttachedPropertiesService.
 import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
 import { CommonPropertiesService } from './services/CommonPropertiesService.js';
 import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js';
+import { CssCustomPropertiesService } from './services/CssCustomPropertiesService.js';
 import { CssPropertiesService } from './services/CssPropertiesService.js';
 export class PropertyTabsService {
     _attachedPropertiesService = new AttachedPropertiesService();
@@ -11,6 +12,7 @@ export class PropertyTabsService {
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
         { name: 'common', propertiesService: new CommonPropertiesService() },
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
         { name: 'flex', propertiesService: new CssPropertiesService("flex") },
         { name: 'grid', propertiesService: new CssPropertiesService("grid") },
@@ -20,6 +22,7 @@ export class PropertyTabsService {
         { name: 'attached', propertiesService: this._attachedPropertiesService },
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
         { name: 'svg', propertiesService: new CssPropertiesService("svg") },
     ];

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.d.ts

@@ -0,0 +1,34 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+export declare class CssCurrentPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    constructor();
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    setValue(designItems: IDesignItem[], property: (IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }), value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }, clearType: 'all' | 'binding' | 'value'): void;
+    getValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): string | boolean;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): any;
+    isSet(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): ValueType;
+}

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

@@ -0,0 +1,105 @@
+import { PropertyType } from '../PropertyType.js';
+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) {
+    const cssPropertiesUrl = import.meta.resolve('./CssProperties.json');
+    //@ts-ignore
+    cssProperties = await importShim(cssPropertiesUrl, { assert: { type: 'json' } });
+}
+else
+    //@ts-ignore
+    cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+if (cssProperties.default)
+    cssProperties = cssProperties.default;
+const localName = '<local>';
+export class CssCurrentPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+    constructor() {
+        super();
+        this.name = 'styles';
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+    }
+    getProperties(designItem) {
+        if (!designItem || designItem.nodeType != NodeType.Element)
+            return [];
+        let styles = designItem.getAllStyles();
+        let arr = styles.map(x => ({
+            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
+                ...x.declarations.map(y => ({
+                    name: y.name,
+                    renamable: true,
+                    type: cssProperties[y.name]?.type ?? 'string',
+                    values: cssProperties[y.name]?.values ? [...cssProperties[y.name]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                    service: this,
+                    propertyType: PropertyType.cssValue,
+                    styleRule: x,
+                    styleDeclaration: y
+                })),
+                { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex, styleRule: x }
+            ]
+        }));
+        return arr;
+    }
+    setValue(designItems, property, value) {
+        // No selector means local style, styleDeclaration is null means new property
+        if (property.styleRule?.selector !== null && property.styleDeclaration) {
+            // styleDeclaration stored Propertygrid is not refreshed after entering a new value, so we need to reload
+            // TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
+            const decls = designItems[0].instanceServiceContainer.stylesheetService?.getDeclarations(designItems[0], property.styleDeclaration.name);
+            const currentDecl = decls.find(x => x.parent.selector == property.styleDeclaration.parent.selector && x.parent.stylesheetName == property.styleDeclaration.parent.stylesheetName);
+            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(currentDecl, value, false);
+            this._notifyChangedProperty(designItems[0], property, value);
+            return;
+        }
+        if (property.styleRule?.selector !== null && !property.styleDeclaration) {
+            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, property.name, value, false);
+            this._notifyChangedProperty(designItems[0], property, value);
+            return;
+        }
+        for (const d of designItems) {
+            // Local style
+            d.setStyle(property.name, value);
+            //unkown css property names do not trigger the mutation observer of property grid, 
+            //fixed by assinging stle again to the attribute
+            d.element.setAttribute('style', d.element.getAttribute('style'));
+        }
+    }
+    clearValue(designItems, property, clearType) {
+        if (property.styleRule?.selector !== null && property.styleDeclaration) {
+            designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration.name);
+            return;
+        }
+        super.clearValue(designItems, property, clearType);
+    }
+    getValue(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration)
+            return property.styleDeclaration.value;
+        return super.getValue(designItems, property);
+    }
+    getUnsetValue(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration)
+            return property.styleDeclaration.value;
+        return super.getUnsetValue(designItems, property);
+    }
+    isSet(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration) {
+            if (designItems[0].hasStyle(property.name))
+                return ValueType.none;
+            //TODO: we need to check if this is the dec. with the highest specifity
+            return ValueType.all;
+        }
+        return super.isSet(designItems, property);
+    }
+}

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

@@ -0,0 +1,17 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+export declare class CssCustomPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    constructor();
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
+    getValue(designItems: IDesignItem[], property: IProperty): string;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+}

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

@@ -0,0 +1,43 @@
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+export class CssCustomPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+    constructor() {
+        super();
+        this.name = 'customProperties';
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+    }
+    getProperties(designItem) {
+        if (!designItem.element.computedStyleMap)
+            return null;
+        let rootMap = Array.from(designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
+        let props = Array.from(designItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
+        let arr = props.filter(x => !rootMap.includes(x)).map(x => ({
+            name: x,
+            service: this,
+            propertyType: PropertyType.cssValue
+        }));
+        return arr;
+    }
+    clearValue(designItems, property, clearType) {
+        super.clearValue(designItems, property, clearType);
+    }
+    getValue(designItems, property) {
+        return getComputedStyle(designItems[0].element).getPropertyValue(property.name);
+    }
+    getUnsetValue(designItems, property) {
+        return super.getUnsetValue(designItems, property);
+    }
+    isSet(designItems, property) {
+        return designItems[0].hasStyle(property.name) ? ValueType.all : ValueType.none;
+    }
+}

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.js

@@ -13,21 +13,43 @@ export class CssStyleChangeAction {
     undo() {
         if (this.oldValue === '' || this.oldValue == null) {
             this.designItem._withoutUndoRemoveStyle(this.name);
-            this.designItem.element.style[this.name] = '';
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.removeProperty(this.name);
+            }
+            else {
+                this.designItem.element.style[this.name] = '';
+            }
+            ;
         }
         else {
             this.designItem._withoutUndoSetStyle(this.name, this.oldValue);
-            this.designItem.element.style[this.name] = this.oldValue;
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.setProperty(this.name, this.oldValue);
+            }
+            else {
+                this.designItem.element.style[this.name] = this.oldValue;
+            }
         }
     }
     do() {
         if (this.newValue === '' || this.newValue == null) {
             this.designItem._withoutUndoRemoveStyle(this.name);
-            this.designItem.element.style[this.name] = '';
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.removeProperty(this.name);
+            }
+            else {
+                this.designItem.element.style[this.name] = '';
+            }
+            ;
         }
         else {
             this.designItem._withoutUndoSetStyle(this.name, this.newValue);
-            this.designItem.element.style[this.name] = this.newValue;
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.setProperty(this.name, this.newValue);
+            }
+            else {
+                this.designItem.element.style[this.name] = this.newValue;
+            }
         }
     }
     designItem;

package/dist/elements/widgets/demoView/demoView.js

@@ -9,15 +9,39 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     background: white;
     height: 100%;
     width: 100%;
+    position: relative;
   }
   #placeholder {
+    position: absolute;
+    left: 24px;
     height: 100%;
-    width: 100%;
+    width: calc(100% - 24px);
   }
   #loading {
     position: absolute;
     top: 60px;
     left: 20px;
+  }
+  #left {
+    position:absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 24px;
+    border-right: solid white 1px;
+    box-sizing: border-box;
+    background: black;
+  }
+  span {
+    color: white;
+    rotate: 270deg;
+    display: block;
+    position: absolute;
+    top: 35px;
+    left: -38px;
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 24px;
   }`;
     constructor() {
         super();
@@ -28,6 +52,12 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.id = 'loading';
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
+        const div = document.createElement("div");
+        div.id = "left";
+        const span = document.createElement("span");
+        span.innerText = "PREVIEW";
+        div.appendChild(span);
+        this.shadowRoot.appendChild(div);
     }
     dispose() {
     }

package/dist/index.d.ts

@@ -118,6 +118,7 @@ export * from "./elements/services/propertiesService/services/PolymerPropertiesS
 export * from "./elements/services/propertiesService/services/AbstractPropertiesService.js";
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
+export * from "./elements/services/propertiesService/services/CssCustomPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/propertiesService/PropertyTabsService.js";

package/dist/index.js

@@ -78,6 +78,7 @@ export * from "./elements/services/propertiesService/services/PolymerPropertiesS
 export * from "./elements/services/propertiesService/services/AbstractPropertiesService.js";
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
+export * from "./elements/services/propertiesService/services/CssCustomPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/propertiesService/PropertyTabsService.js";

package/package.json

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