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

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

@@ -5,14 +5,13 @@ 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');
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    layout: string[];
+    grid: string[];
+    flex: string[];
+    constructor(name: '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.js

@@ -2,181 +2,48 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
+import cssProperties from './CssProperties.json' assert { type: 'json' };
 export class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
-        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
+        return RefreshMode.none;
     }
+    //metrics
     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
-        }
+        "display",
+        "color",
+        "background-color",
+        "box-sizing",
+        "border",
+        "box-shadow",
+        "opacity",
+        "position",
+        "font-size",
+        "font-weight",
+        "inset",
+        "margin",
+        "border",
+        "padding"
     ];
     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
-        }
+        "display",
+        "position",
+        "grid-template-columns",
+        "grid-template-rows",
+        "column-gap",
+        "row-gap",
+        "align-content",
+        "justify-content",
+        "align-items",
+        "justify-items"
     ];
     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
-        }
+        "display",
+        "position",
+        "flex-direction",
+        "flex-wrap",
+        "align-content",
+        "justify-content",
+        "align-items"
     ];
     constructor(name) {
         super();
@@ -186,36 +53,20 @@ 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 ?? '<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];
+        const propNames = this[this.name];
+        const propertiesList = propNames.map(x => ({
+            name: x,
+            type: cssProperties[x]?.type ?? 'string',
+            values: cssProperties[x]?.values ? [...cssProperties[x]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }));
+        return propertiesList;
     }
     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/NativeElementsPropertiesService.js

@@ -77,6 +77,12 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
         }
     ];
     selectProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
         {
             name: "size",
             type: "number",

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

@@ -0,0 +1,17 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService.js";
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+export declare class CssToolsStylesheetService implements IStylesheetService {
+    private _stylesheets;
+    stylesheetChanged: TypedEvent<{
+        stylesheet: IStylesheet;
+    }>;
+    stylesheetsChanged: TypedEvent<void>;
+    setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
+    getStylesheets(): IStylesheet[];
+    getAppliedRules(designItem: IDesignItem): IStyleRule[];
+    getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
+    updateDeclarationWithDeclaration(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IStyleRule, declaration: IStyleDeclaration, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IStyleRule, declaration: IStyleDeclaration): boolean;
+}

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.js

@@ -0,0 +1,45 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+export class CssToolsStylesheetService {
+    _stylesheets = new Map();
+    stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
+    async setStylesheets(stylesheets) {
+        if (stylesheets != null) {
+            let tools = await import('@adobe/css-tools');
+            this._stylesheets = new Map();
+            for (let stylesheet of stylesheets) {
+                this._stylesheets.set(stylesheet.name, {
+                    stylesheet: stylesheet,
+                    ast: tools.parse(stylesheet.stylesheet)
+                });
+            }
+            this.stylesheetsChanged.emit();
+        }
+        else {
+            this._stylesheets = null;
+        }
+    }
+    getStylesheets() {
+        let stylesheets = [];
+        for (let item of this._stylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        return stylesheets;
+    }
+    getAppliedRules(designItem) {
+        return null;
+    }
+    getDeclarations(designItem, styleName) {
+        return null;
+    }
+    updateDeclarationWithDeclaration(declaration, value, important) {
+        return true;
+    }
+    insertDeclarationIntoRule(rule, declaration, important) {
+        return true;
+    }
+    removeDeclarationFromRule(rule, declaration) {
+        return true;
+    }
+}

package/dist/elements/services/stylesheetService/CssTreeStylesheetService copy.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 {};