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

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 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();
@@ -189,7 +56,15 @@ export class CssPropertiesService extends CommonPropertiesService {
         return this[this.name][name];
     }
     getProperties(designItem) {
-        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;

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.content)
+                });
+            }
+            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 {};

package/dist/elements/services/stylesheetService/CssTreeStylesheetService copy.js

@@ -0,0 +1,185 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+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) {
+            this._stylesheets = new Map();
+            for (let stylesheet of stylesheets) {
+                this._stylesheets.set(stylesheet.name, {
+                    stylesheet: stylesheet,
+                    ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.stylesheet, { positions: true, parseValue: false })))
+                });
+            }
+            this.stylesheetsChanged.emit();
+        }
+        else {
+            this._stylesheets = null;
+        }
+    }
+    getStylesheets() {
+        let stylesheets = [];
+        for (let item of this._stylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        return stylesheets;
+    }
+    /* Section covers the retrieval of rules and declarations */
+    getAppliedRulesInternal(designItem) {
+        let styles = [];
+        for (let item of this._stylesheets) {
+            if (!item[1].ast || !this.astHasChildren(item[1].ast))
+                break;
+            styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.stylesheet, item[0], designItem)));
+        }
+        ;
+        return styles;
+    }
+    getAppliedRules(designItem) {
+        let rules = this.getAppliedRulesInternal(designItem);
+        if (!rules || rules.length == 0)
+            return [];
+        let retCollection = [];
+        for (let rule of rules) {
+            retCollection.push({
+                ...rule,
+                declarations: rule.ast.block.children.map((declaration) => {
+                    return {
+                        name: declaration.property,
+                        value: declaration.value.value,
+                        important: declaration.important == true,
+                        specificity: rule.specificity,
+                        parent: rule,
+                        ast: declaration,
+                    };
+                })
+            });
+        }
+        return retCollection;
+    }
+    getDeclarationInternal(designItem, prop) {
+        let rules = this.getAppliedRulesInternal(designItem);
+        if (!rules)
+            return null;
+        let declarations = [];
+        for (let rule of rules) {
+            let declaration = this.findDeclarationInRule(rule.ast, prop);
+            if (!declaration)
+                continue;
+            declarations.push({
+                ast: declaration,
+                parent: rule,
+                name: prop.name,
+                value: declaration.value.value,
+                important: declaration.important == true,
+            });
+        }
+        ;
+        return declarations;
+    }
+    getDeclarations(designItem, prop) {
+        let declarations = this.getDeclarationInternal(designItem, prop);
+        if (!declarations)
+            return null;
+        return this.sortDeclarations(declarations);
+    }
+    /* Section covers the update of rules and declarations */
+    updateDeclarationWithProperty(designItem, property, value, important) {
+        let sortedDecl = this.sortDeclarations(this.getDeclarationInternal(designItem, property));
+        if (!sortedDecl) {
+            // no declaration of property yet
+            return false;
+        }
+        return false;
+    }
+    updateDeclarationWithDeclaration(declaration, value, important) {
+        declaration.ast.value = window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + value, { context: 'declaration', parseValue: false })).value;
+        this._stylesheets.get(declaration.parent.stylesheetName).stylesheet.stylesheet = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(declaration.parent.stylesheetName).ast));
+        this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(declaration.parent.stylesheetName).stylesheet });
+        return true;
+    }
+    /* Section covers the internal traversal creation of rules and declarations */
+    *rulesFromAST(ast, stylesheet, source, designItem, previousCheck = '') {
+        let parent = ast["children"] != null ? ast : ast.block;
+        for (const child of parent.children) {
+            if (child.type == "Atrule") {
+                const currentCheck = this.buildAtRuleString(child, stylesheet);
+                if (currentCheck.type === "@media" && !window.matchMedia(currentCheck.sel))
+                    continue;
+                if (currentCheck.type === "@supports" && !CSS.supports(currentCheck.sel))
+                    continue;
+                let ruleCollection = this.rulesFromAST(child, stylesheet, source, designItem, previousCheck + currentCheck.type + " " + currentCheck.sel + "\n");
+                if (ruleCollection) {
+                    for (const r of ruleCollection) {
+                        if (!this.elementMatchesASelector(designItem, this.buildSelectorString(r.ast.prelude)))
+                            continue;
+                        yield r;
+                    }
+                }
+            }
+            if (child.type == "Rule") {
+                let selectors = this.buildSelectorString(child.prelude);
+                if (!this.elementMatchesASelector(designItem, selectors))
+                    continue;
+                yield ({
+                    ast: child,
+                    selector: previousCheck + this.buildSelectorString(child.prelude).join(", "),
+                    specificity: this.getSpecificity(child.prelude),
+                    stylesheetName: source,
+                    declarations: null,
+                });
+            }
+        }
+        ;
+    }
+    /* Utility functions for building selectors, specificity and so on  */
+    astHasChildren(ast) {
+        return ast != null && ast["children"] != null && ast["children"].length > 0;
+    }
+    buildSelectorString(selectorsAST) {
+        let selectors = [];
+        for (let selector of selectorsAST.children) {
+            let sel = "";
+            for (let fraction of selector.children) {
+                sel += fraction.name;
+            }
+            selectors.push(sel);
+        }
+        ;
+        return selectors;
+    }
+    getSpecificity(selector) {
+        const specificities = calculateSpecifity(selector);
+        let sum = 0;
+        specificities.forEach(specificity => sum += specificity.a * 10000 + specificity.b * 100 + specificity.c);
+        return sum;
+    }
+    findDeclarationInRule(rule, property) {
+        return rule.block.children.find(declaration => declaration.property == property.name);
+    }
+    elementMatchesASelector(designItem, selectors) {
+        for (const selector of selectors)
+            if (designItem.element.matches(selector))
+                return true;
+        return false;
+    }
+    buildAtRuleString(ast, stylesheet) {
+        return {
+            sel: stylesheet.slice(ast.prelude.loc.start.offset, ast.prelude.loc.end.offset),
+            type: "@" + ast.name
+        };
+    }
+    sortDeclarations(declarations) {
+        if (declarations == null || declarations.length == 0)
+            return null;
+        return declarations.sort((dec1, dec2) => {
+            if (dec1.parent.specificity > dec2.parent.specificity)
+                return -1;
+            return 1;
+        });
+    }
+}

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

@@ -1,5 +1,4 @@
 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";
@@ -33,9 +32,10 @@ export declare class CssTreeStylesheetService implements IStylesheetService {
     private getAppliedRulesInternal;
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getDeclarationInternal;
-    getDeclarations(designItem: IDesignItem, prop: IProperty): IDeclarationWithAST[];
-    updateDeclarationWithProperty(designItem: IDesignItem, property: IProperty, value: string, important: boolean): boolean;
+    getDeclarations(designItem: IDesignItem, stlyeName: string): IDeclarationWithAST[];
     updateDeclarationWithDeclaration(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IRuleWithAST, declaration: IStyleDeclaration, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IRuleWithAST, declaration: IDeclarationWithAST): boolean;
     private rulesFromAST;
     private astHasChildren;
     private buildSelectorString;