@node-projects/web-component-designer 0.1.0 → 0.1.2

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.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;
+    }
+}