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

package/dist/elements/documentContainer.d.ts

@@ -8,6 +8,7 @@ import { IUiCommandHandler } from '../commandHandling/IUiCommandHandler.js';
 import { IUiCommand } from '../commandHandling/IUiCommand.js';
 import { IDisposable } from '../interfaces/IDisposable.js';
 import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
+import { IStylesheet } from "./services/stylesheetService/IStylesheetService.js";
 export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
     designerView: DesignerView;
     codeView: ICodeView & HTMLElement;
@@ -16,6 +17,12 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _additionalStyle;
     set additionalStyleString(style: string);
     get additionalStyleString(): string;
+    private _additionalStylesheets;
+    set additionalStylesheets(stylesheets: IStylesheet[]);
+    get additionalStylesheets(): IStylesheet[];
+    additionalStylesheetChanged: TypedEvent<{
+        stylesheet: IStylesheet;
+    }>;
     onContentChanged: TypedEvent<void>;
     private _serviceContainer;
     private _content;

package/dist/elements/documentContainer.js

@@ -17,6 +17,29 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         return this._additionalStyle;
     }
     ;
+    _additionalStylesheets;
+    set additionalStylesheets(stylesheets) {
+        this._additionalStylesheets = stylesheets;
+        if (!this.instanceServiceContainer.stylesheetService) {
+            const stylesheetService = this.designerView.serviceContainer.getLastService('stylesheetService');
+            if (stylesheetService) {
+                const instance = stylesheetService(this.designerView.designerCanvas);
+                this.instanceServiceContainer.register("stylesheetService", instance);
+                instance.stylesheetChanged.on(s => this.additionalStylesheetChanged.emit(s));
+            }
+            else {
+                console.warn("no Stylesheet-Service registered, but additionalStylesheets are used.");
+            }
+        }
+        if (this.designerView.instanceServiceContainer.stylesheetService)
+            this.designerView.instanceServiceContainer.stylesheetService.setStylesheets(stylesheets);
+    }
+    ;
+    get additionalStylesheets() {
+        return this._additionalStylesheets;
+    }
+    ;
+    additionalStylesheetChanged = new TypedEvent;
     onContentChanged = new TypedEvent();
     _serviceContainer;
     _content = '';

package/dist/elements/helper/CssUnitConverter.js

@@ -1,5 +1,5 @@
 //unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh
-const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn'];
+const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
 const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
 export function convertCssUnitToPixel(cssValue, target, percentTarget) {
     const supportedUnits = {
@@ -21,6 +21,16 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
         'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
         '%': value => value / 100 * (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        /* todo
+        //find parent with computed style where contaner-type is inline-size or size (regarding to query type)
+        //use this size for calculation
+        'cqw':
+        'cqh':
+        'cqi':
+        'cqb':
+        'cqmin':
+        'cqmax':
+        */
         // Times
         'ms': value => value,
         's': value => value * 1000,

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

@@ -7,6 +7,7 @@ import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from '../../interfaces/ISize.js';
 import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
+import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
@@ -72,8 +73,10 @@ export declare class DesignItem implements IDesignItem {
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;
-    setStyle(name: string, value?: string | null): void;
+    setStyle(name: string, value?: string | null, important?: boolean): void;
     removeStyle(name: string): void;
+    updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): void;
+    getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
     _insertChildInternal(designItem: IDesignItem, index?: number): void;

package/dist/elements/item/DesignItem.js

@@ -292,7 +292,7 @@ export class DesignItem {
         let designItem = DesignItem._designItemMap.get(node);
         return designItem;
     }
-    setStyle(name, value) {
+    setStyle(name, value, important) {
         let nm = PropertiesHelper.camelToDashCase(name);
         const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
@@ -302,6 +302,33 @@ export class DesignItem {
         const action = new CssStyleChangeAction(this, nm, '', this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
+    updateStyleInSheetOrLocal(name, value, important) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const declaration = null;
+        //const declaration = this.serviceContainer.stylesheetService?.getDeclarations(d, property);
+        //const rules = this.serviceContainer.stylesheetService?.getAppliedRules(d, property);
+        if (!declaration) {
+            if (this.getStyle(nm) != value) {
+                this.setStyle(nm, value);
+            }
+            else if (value == null) {
+                this.removeStyle(nm);
+            }
+        }
+        //todo -> modify stylesheet, or local css
+        //we need undo for modification of stylesheet, look how we do this
+        //maybe undo in stylsheet service?
+    }
+    getAllStyles() {
+        const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false }));
+        if (this.instanceServiceContainer.stylesheetService) {
+            const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
+            if (rules) {
+                return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+            }
+        }
+        return [{ selector: null, declarations: localStyles, specificity: -1 }];
+    }
     setAttribute(name, value) {
         const action = new AttributeChangeAction(this, name, value, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);

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

@@ -6,6 +6,7 @@ import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from "../../interfaces/ISize.js";
 import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
+import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
 export interface IDesignItem {
     lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
@@ -51,8 +52,10 @@ export interface IDesignItem {
     styles(): Iterable<[name: string, value: string]>;
     getStyle(name: string): any;
     hasStyle(name: string): any;
-    setStyle(name: string, value?: string | null): any;
+    setStyle(name: string, value?: string | null, important?: boolean): any;
     removeStyle(name: string): any;
+    updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): any;
+    getAllStyles(): IStyleRule[];
     attributes(): Iterable<[name: string, value: string]>;
     getAttribute(name: string): any;
     hasAttribute(name: string): any;

package/dist/elements/services/BaseServiceContainer.d.ts

@@ -1,6 +1,10 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IService } from './IService.js';
 export declare class BaseServiceContainer<NameMap> {
     protected _services: Map<string, IService[]>;
+    servicesChanged: TypedEvent<{
+        serviceName: keyof NameMap;
+    }>;
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];
     getServices<K extends keyof NameMap>(service: K): NameMap[K][];
     register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;

package/dist/elements/services/BaseServiceContainer.js

@@ -1,5 +1,7 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export class BaseServiceContainer {
     _services = new Map();
+    servicesChanged = new TypedEvent();
     getLastService(service) {
         let list = this._services.get(service);
         if (list && list.length)
@@ -13,12 +15,14 @@ export class BaseServiceContainer {
         if (!this._services.has(name))
             this._services.set(name, []);
         this._services.get(name).push(service);
+        this.servicesChanged.emit({ serviceName: name });
     }
     registerMultiple(names, service) {
         for (const name of names) {
             if (!this._services.has(name))
                 this._services.set(name, []);
             this._services.get(name).push(service);
+            this.servicesChanged.emit({ serviceName: name });
         }
     }
     forSomeServicesTillResult(service, callback) {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -67,11 +67,14 @@ import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerVi
 import { LineExtensionProvider } from '../widgets/designerView/extensions/svg/LineExtensionProvider.js';
 import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
 import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
-import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
+import { PropertyTabsService } from './propertiesService/PropertyTabsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
 import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
 import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js';
+import { UndoService } from './undoService/UndoService.js';
+import { SelectionService } from './selectionService/SelectionService.js';
+import { ContentService } from './contentService/ContentService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -80,7 +83,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("propertyService", new SVGElementsPropertiesService());
     serviceContainer.register("propertyService", new Lit2PropertiesService());
     serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService());
-    serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
+    serviceContainer.register("propertyGroupsService", new PropertyTabsService());
     serviceContainer.register("instanceService", new DefaultInstanceService());
     serviceContainer.register("editorTypesService", new DefaultEditorTypesService());
     serviceContainer.register("htmlWriterService", new HtmlWriterService());
@@ -94,6 +97,10 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
     serviceContainer.register("demoProviderService", new DemoProviderService());
+    serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
+    serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas));
+    serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
+    //serviceContainer.register("stylesheetService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         // new ResizeExtensionProvider(false),
         new InvisibleElementExtensionProvider(),

package/dist/elements/services/InstanceServiceContainer.d.ts

@@ -4,10 +4,12 @@ import { BaseServiceContainer } from './BaseServiceContainer.js';
 import { IContentService } from './contentService/IContentService.js';
 import { IDesignContext } from '../widgets/designerView/IDesignContext.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
+import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
 interface InstanceServiceNameMap {
     "undoService": IUndoService;
     "selectionService": ISelectionService;
     "contentService": IContentService;
+    "stylesheetService": IStylesheetService;
 }
 export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
     designContext: IDesignContext;
@@ -17,5 +19,6 @@ export declare class InstanceServiceContainer extends BaseServiceContainer<Insta
     get undoService(): IUndoService;
     get selectionService(): ISelectionService;
     get contentService(): IContentService;
+    get stylesheetService(): IStylesheetService;
 }
 export {};

package/dist/elements/services/InstanceServiceContainer.js

@@ -17,4 +17,7 @@ export class InstanceServiceContainer extends BaseServiceContainer {
     get contentService() {
         return this.getLastService('contentService');
     }
+    get stylesheetService() {
+        return this.getLastService('stylesheetService');
+    }
 }

package/dist/elements/services/ServiceContainer.d.ts

@@ -32,7 +32,12 @@ import { IProperty } from "./propertiesService/IProperty.js";
 import { IDesignItem } from "../item/IDesignItem.js";
 import { IBinding } from '../item/IBinding.js';
 import { BindingTarget } from '../item/BindingTarget.js';
-import { IPropertyGroupsService } from './propertiesService/IPropertyGroupsService.js';
+import { IPropertyTabsService } from './propertiesService/IPropertyTabsService.js';
+import { IUndoService } from './undoService/IUndoService.js';
+import { ISelectionService } from './selectionService/ISelectionService.js';
+import { IContentService } from './contentService/IContentService.js';
+import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -52,7 +57,11 @@ interface ServiceNameMap {
     "modelCommandService": IModelCommandService;
     "demoProviderService": IDemoProviderService;
     "elementInteractionService": IElementInteractionService;
-    "propertyGroupsService": IPropertyGroupsService;
+    "propertyGroupsService": IPropertyTabsService;
+    "undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
+    "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
+    "contentService": (designerCanvas: IDesignerCanvas) => IContentService;
+    "stylesheetService": (designerCanvas: IDesignerCanvas) => IStylesheetService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -76,7 +85,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get bindableObjectDragDropService(): IBindableObjectDragDropService;
     get elementInteractionServices(): IElementInteractionService[];
     get propertiesServices(): IPropertiesService[];
-    get propertyGroupService(): IPropertyGroupsService;
+    get propertyGroupService(): IPropertyTabsService;
     get containerServices(): IPlacementService[];
     get snaplinesProviderService(): ISnaplinesProviderService;
     get elementsServices(): IElementsService[];

package/dist/elements/services/elementsService/IElementDefinition.d.ts

@@ -13,9 +13,6 @@ export interface IElementDefinition {
     defaultStyles?: {
         [key: string]: string;
     };
-    defaultProperties?: {
-        [key: string]: any;
-    };
     defaultWidth?: string;
     defaultHeight?: string;
     ghostElement?: Element;

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -66,18 +66,6 @@ export class DefaultInstanceService {
             }
         }
         let designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer);
-        if (definition.defaultProperties) {
-            let propertiesService = null;
-            if (definition.type) {
-                propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.isHandledElement(designItem));
-            }
-            let properties = propertiesService.getProperties(designItem);
-            for (let a in definition.defaultProperties) {
-                let value = definition.defaultProperties[a];
-                let p = properties.find(x => x.name == a);
-                propertiesService.setValue([designItem], p, value);
-            }
-        }
         return designItem;
     }
 }

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

@@ -4,6 +4,7 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { ValueType } from './ValueType.js';
 import { BindingTarget } from '../../item/BindingTarget.js';
 import { IBinding } from '../../item/IBinding.js';
+import { IPropertyGroup } from './IPropertyGroup.js';
 export declare enum RefreshMode {
     none = 0,
     full = 1,
@@ -12,7 +13,7 @@ export declare enum RefreshMode {
 export interface IPropertiesService extends IService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     isHandledElement(designItem: IDesignItem): boolean;
-    getProperties(designItem: IDesignItem): IProperty[];
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;

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

@@ -0,0 +1,22 @@
+import { IPropertiesService } from './IPropertiesService.js';
+import { IPropertyEditor } from './IPropertyEditor.js';
+import { PropertyType } from './PropertyType.js';
+export interface IProperty {
+    name: string;
+    renamable?: boolean;
+    propertyName?: string;
+    attributeName?: string;
+    description?: string;
+    type?: 'addNew' | 'json' | 'color' | 'date' | 'number' | 'list' | 'enum' | 'boolean' | 'img-lis' | 'thickness' | 'css-length' | 'string' | string;
+    default?: any;
+    min?: number;
+    max?: number;
+    step?: number;
+    values?: string[];
+    enumValues?: [name: string, value: string | number][];
+    createEditor?: (property: IProperty) => IPropertyEditor;
+    value?: any;
+    service: IPropertiesService;
+    defaultValue?: any;
+    propertyType: PropertyType;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { IProperty } from './IProperty.js';
+export interface IPropertyGroup {
+    name: string;
+    description?: string;
+    properties: IProperty[];
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from './IPropertiesService.js';
+export interface IPropertyTabsService {
+    getPropertygroups(designItems: IDesignItem[]): {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,7 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from './IPropertiesService.js';
-import { IPropertyGroupsService } from './IPropertyGroupsService.js';
-export declare class PropertyGroupsService implements IPropertyGroupsService {
+import { IPropertyTabsService } from './IPropertyTabsService.js';
+export declare class PropertyGroupsService implements IPropertyTabsService {
     protected _pgList: {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -0,0 +1,17 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from './IPropertiesService.js';
+import { IPropertyTabsService } from './IPropertyTabsService.js';
+export declare class PropertyTabsService implements IPropertyTabsService {
+    protected _pgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _svgPgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    getPropertygroups(designItems: IDesignItem[]): {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+}

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

@@ -0,0 +1,29 @@
+import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
+import { CommonPropertiesService } from './services/CommonPropertiesService.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: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
+        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
+    ];
+    _svgPgList = [
+        { name: 'properties', propertiesService: null },
+        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
+        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
+        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+    ];
+    getPropertygroups(designItems) {
+        if (designItems == null || designItems.length == 0)
+            return [];
+        this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        if (designItems[0].element instanceof SVGElement)
+            return this._svgPgList;
+        return this._pgList;
+    }
+}

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

@@ -4,12 +4,13 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
 import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IBinding } from '../../../item/IBinding.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
     abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
     abstract isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;
-    abstract getProperties(designItem: IDesignItem): IProperty[];
+    abstract getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;

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

@@ -7,18 +7,18 @@ export class AbstractPropertiesService {
     _notifyChangedProperty(designItem, property, value) {
     }
     getProperty(designItem, name) {
-        return this.getProperties(designItem).find(x => x.name == name);
+        let properties = this.getProperties(designItem);
+        if ('properties' in properties[0]) {
+            return properties.flatMap(x => x.properties).find(x => x.name == name);
+        }
+        else
+            return properties.find(x => x.name == name);
     }
     setValue(designItems, property, value) {
         const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
             if (property.propertyType == PropertyType.cssValue) {
-                if (d.getStyle(property.name) != value) {
-                    d.setStyle(property.name, value);
-                }
-                else {
-                    this.clearValue(designItems, property);
-                }
+                d.updateStyleInSheetOrLocal(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'));

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

@@ -2,11 +2,12 @@ import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { AbstractPropertiesService } from './AbstractPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare class CommonPropertiesService extends AbstractPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     private commonProperties;
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[];
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
 }

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

@@ -3,6 +3,7 @@ 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[];
@@ -11,7 +12,7 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     constructor(name: 'styles' | 'layout' | 'grid' | 'flex');
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): 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

@@ -195,8 +195,14 @@ export class CssPropertiesService extends CommonPropertiesService {
         if (this.name == 'styles') {
             if (!designItem)
                 return [];
-            let arr = 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 });
+            let styles = designItem.getAllStyles();
+            let arr = styles.map(x => ({ name: x.selector ?? '<local>', 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];

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

@@ -0,0 +1,47 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IProperty } from "../propertiesService/IProperty.js";
+import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService.js";
+import type * as csstree from 'css-tree';
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+declare global {
+    interface Window {
+        csstree: {
+            fromPlainObject(node: csstree.CssNodePlain): csstree.CssNode;
+            toPlainObject(node: csstree.CssNode): csstree.CssNodePlain;
+            parse(text: string, options?: csstree.ParseOptions): csstree.CssNode;
+            generate(ast: csstree.CssNode, options?: csstree.GenerateOptions): string;
+        };
+    }
+}
+interface IRuleWithAST extends IStyleRule {
+    ast: csstree.RulePlain;
+    declarations: IDeclarationWithAST[];
+}
+interface IDeclarationWithAST extends IStyleDeclaration {
+    ast: csstree.DeclarationPlain;
+    parent: IStyleRule;
+}
+export declare class CssTreeStylesheetService implements IStylesheetService {
+    private _stylesheets;
+    stylesheetChanged: TypedEvent<{
+        stylesheet: IStylesheet;
+    }>;
+    constructor();
+    setStylesheets(stylesheets: IStylesheet[]): void;
+    getStylesheets(): IStylesheet[];
+    private getAppliedRulesInternal;
+    getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
+    private getDeclarationInternal;
+    getDeclarations(designItem: IDesignItem, prop: IProperty): IDeclarationWithAST[];
+    updateDeclarationWithProperty(designItem: IDesignItem, property: IProperty, value: string, important: boolean): boolean;
+    updateDeclarationWithDeclaration(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    private rulesFromAST;
+    private astHasChildren;
+    private buildSelectorString;
+    private getSpecificity;
+    private findDeclarationInRule;
+    private elementMatchesASelector;
+    private buildAtRuleString;
+    private sortDeclarations;
+}
+export {};