npm - @node-projects/web-component-designer - Versions diffs - 0.0.169 → 0.0.170 - Mend

@node-projects/web-component-designer 0.0.169 → 0.0.170

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

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

@@ -1,12 +1,13 @@
 import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
 import { CommonPropertiesService } from './services/CommonPropertiesService.js';
+import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js';
 import { CssPropertiesService } from './services/CssPropertiesService.js';
 export class PropertyTabsService {
     _pgList = [
         { name: 'properties', propertiesService: null },
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
         { name: 'common', propertiesService: new CommonPropertiesService() },
-        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
         { name: 'flex', propertiesService: new CssPropertiesService("flex") },
         { name: 'grid', propertiesService: new CssPropertiesService("grid") },
@@ -14,7 +15,7 @@ export class PropertyTabsService {
     _svgPgList = [
         { name: 'properties', propertiesService: null },
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
-        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
     ];
     getPropertygroups(designItems) {

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

@@ -0,0 +1,18 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
+    layout: IProperty[];
+    grid: IProperty[];
+    flex: IProperty[];
+    constructor(name: 'styles' | 'layout' | 'grid' | 'flex');
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+}

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

@@ -0,0 +1,221 @@
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
+    }
+    layout = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline", "inline-block", "flex", "inline-flex", "contents", "grid", "inline-grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "color",
+            type: "color",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "background-color",
+            type: "color",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "box-sizing",
+            type: "list",
+            values: ["border-box", "content-box"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "border",
+            type: "string",
+            default: "0px none rbg(0,0,0)",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "box-shadow",
+            type: "string",
+            default: "none",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "opacity",
+            type: "number",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "metrics",
+            type: "metrics",
+            service: this,
+            propertyType: PropertyType.complex
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "font-size",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "font-weight",
+            type: "list",
+            values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    grid = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "grid-template-columns",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "grid-template-rows",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "column-gap",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "row-gap",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch", "baseline"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    flex = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "flex-direction",
+            type: "img-list",
+            values: ["row", "column"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "flex-wrap",
+            type: "img-list",
+            values: ["nowrap", "wrap"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    constructor(name) {
+        super();
+        this.name = name;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        if (this.name == 'styles') {
+            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+        }
+        return this[this.name][name];
+    }
+    getProperties(designItem) {
+        if (this.name == 'styles') {
+            if (!designItem)
+                return [];
+            let styles = designItem.getAllStyles();
+            let arr = styles.map(x => ({ name: x.selector ?? '&lt;local&gt;', description: x.stylesheetName ?? '', properties: [
+                    ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue })),
+                    { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex }
+                ]
+            }));
+            //let arr: IProperty[] = Array.from(designItem.styles(), ([key, value])  => ({ name: key, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+            //arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
+            return arr;
+        }
+        return this[this.name];
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
+    setValue(designItems, property, value) {
+        if (this.name == 'styles') {
+            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+        }
+        else {
+            super.setValue(designItems, property, value);
+        }
+    }
+}

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.d.ts ADDED Viewed

@@ -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 { CssPropertiesService } from './CssPropertiesService.js';
+import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
+export declare class CssCurrentPropertiesService extends CssPropertiesService {
+    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;
+}

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

@@ -0,0 +1,36 @@
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { CssPropertiesService } from './CssPropertiesService.js';
+export class CssCurrentPropertiesService extends CssPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+    constructor() {
+        super('styles');
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+    }
+    getProperties(designItem) {
+        if (!designItem)
+            return [];
+        let styles = designItem.getAllStyles();
+        let arr = styles.map(x => ({
+            name: x.selector ?? '&lt;local&gt;', description: x.stylesheetName ?? '', properties: [
+                ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', 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) {
+        if (property.styleDeclaration) {
+            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(property.styleDeclaration, value, false);
+        }
+        else
+            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+    }
+}

package/dist/elements/services/propertiesService/services/CssPropertiesService copy.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
+    layout: IProperty[];
+    grid: IProperty[];
+    flex: IProperty[];
+    constructor(name: 'styles' | 'layout' | 'grid' | 'flex');
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+}

package/dist/elements/services/propertiesService/services/CssPropertiesService copy.js ADDED Viewed

@@ -0,0 +1,221 @@
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
+    }
+    layout = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline", "inline-block", "flex", "inline-flex", "contents", "grid", "inline-grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "color",
+            type: "color",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "background-color",
+            type: "color",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "box-sizing",
+            type: "list",
+            values: ["border-box", "content-box"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "border",
+            type: "string",
+            default: "0px none rbg(0,0,0)",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "box-shadow",
+            type: "string",
+            default: "none",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "opacity",
+            type: "number",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "metrics",
+            type: "metrics",
+            service: this,
+            propertyType: PropertyType.complex
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "font-size",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "font-weight",
+            type: "list",
+            values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    grid = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "grid-template-columns",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "grid-template-rows",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "column-gap",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "row-gap",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch", "baseline"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    flex = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "flex-direction",
+            type: "img-list",
+            values: ["row", "column"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "flex-wrap",
+            type: "img-list",
+            values: ["nowrap", "wrap"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    constructor(name) {
+        super();
+        this.name = name;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        if (this.name == 'styles') {
+            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+        }
+        return this[this.name][name];
+    }
+    getProperties(designItem) {
+        if (this.name == 'styles') {
+            if (!designItem)
+                return [];
+            let styles = designItem.getAllStyles();
+            let arr = styles.map(x => ({ name: x.selector ?? '&lt;local&gt;', description: x.stylesheetName ?? '', properties: [
+                    ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue })),
+                    { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex }
+                ]
+            }));
+            //let arr: IProperty[] = Array.from(designItem.styles(), ([key, value])  => ({ name: key, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+            //arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
+            return arr;
+        }
+        return this[this.name];
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
+    setValue(designItems, property, value) {
+        if (this.name == 'styles') {
+            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+        }
+        else {
+            super.setValue(designItems, property, value);
+        }
+    }
+}

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare class CssPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     layout: IProperty[];
     grid: IProperty[];
     flex: IProperty[];
@@ -14,5 +14,4 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
 }

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

@@ -4,7 +4,7 @@ import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 export class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
-        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
+        return RefreshMode.none;
     }
     layout = [
         {
@@ -186,36 +186,12 @@ export class CssPropertiesService extends CommonPropertiesService {
         return true;
     }
     getProperty(designItem, name) {
-        if (this.name == 'styles') {
-            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
-        }
         return this[this.name][name];
     }
     getProperties(designItem) {
-        if (this.name == 'styles') {
-            if (!designItem)
-                return [];
-            let styles = designItem.getAllStyles();
-            let arr = styles.map(x => ({ name: x.selector ?? '&lt;local&gt;', description: x.stylesheetName ?? '', properties: [
-                    ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue })),
-                    { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex }
-                ]
-            }));
-            //let arr: IProperty[] = Array.from(designItem.styles(), ([key, value])  => ({ name: key, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue }));
-            //arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
-            return arr;
-        }
         return this[this.name];
     }
     getPropertyTarget(designItem, property) {
         return BindingTarget.css;
     }
-    setValue(designItems, property, value) {
-        if (this.name == 'styles') {
-            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
-        }
-        else {
-            super.setValue(designItems, property, value);
-        }
-    }
 }

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.d.ts CHANGED Viewed

@@ -26,6 +26,7 @@ export declare class CssTreeStylesheetService implements IStylesheetService {
     stylesheetChanged: TypedEvent<{
         stylesheet: IStylesheet;
     }>;
+    stylesheetsChanged: TypedEvent<void>;
     constructor();
     setStylesheets(stylesheets: IStylesheet[]): void;
     getStylesheets(): IStylesheet[];

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
 export class CssTreeStylesheetService {
     _stylesheets = new Map();
     stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
     constructor() { }
     setStylesheets(stylesheets) {
         if (stylesheets != null) {
@@ -13,6 +14,7 @@ export class CssTreeStylesheetService {
                     ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.stylesheet, { positions: true, parseValue: false })))
                 });
             }
+            this.stylesheetsChanged.emit();
         }
         else {
             this._stylesheets = null;

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts CHANGED Viewed

@@ -26,4 +26,5 @@ export interface IStylesheetService {
     stylesheetChanged: TypedEvent<{
         stylesheet: IStylesheet;
     }>;
+    stylesheetsChanged: TypedEvent<void>;
 }

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

@@ -429,6 +429,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.servicesChanged.on(e => {
             if (e.serviceName == 'stylesheetService') {
                 this.applyAllStyles();
+                this.instanceServiceContainer.stylesheetService.stylesheetChanged.on(() => this.applyAllStyles());
+                this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => this.applyAllStyles());
             }
         });
         this.extensionManager = new ExtensionManager(this);

package/dist/index.d.ts CHANGED Viewed

@@ -84,6 +84,7 @@ export * from "./elements/services/propertiesService/propertyEditors/ThicknessPr
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
+export * from "./elements/services/propertiesService/services/CssCurrentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";

package/dist/index.js CHANGED Viewed

@@ -54,6 +54,7 @@ export * from "./elements/services/propertiesService/propertyEditors/ThicknessPr
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
+export * from "./elements/services/propertiesService/services/CssCurrentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";

package/package.json CHANGED Viewed

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