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

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

@@ -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 ?? '<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];
+    }
+    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

@@ -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

@@ -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 ?? '<local>', 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

@@ -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

@@ -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 ?? '<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];
+    }
+    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

@@ -3,15 +3,15 @@ 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;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     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[];
+    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

@@ -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,30 +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 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 });
-            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

@@ -0,0 +1,48 @@
+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;
+    }>;
+    stylesheetsChanged: TypedEvent<void>;
+    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 {};