@node-projects/web-component-designer 0.0.183 → 0.0.185

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

@@ -1,221 +0,0 @@
-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/UnkownElementPropertiesService.d.ts

@@ -1,20 +0,0 @@
-import { IPropertiesService } from "../IPropertiesService";
-import { IProperty } from '../IProperty';
-import { IDesignItem } from '../../../item/IDesignItem';
-import { ValueType } from "../ValueType";
-import { BindingTarget } from "../../../item/BindingTarget";
-import { IBinding } from "../../../item/IBinding";
-export declare abstract class UnkownElementPropertiesService implements IPropertiesService {
-    abstract listNeedsRefresh(designItem: IDesignItem): boolean;
-    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[];
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    clearValue(designItems: IDesignItem[], property: IProperty): void;
-    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
-    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
-    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
-}

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

@@ -1,162 +0,0 @@
-import { ValueType } from "../ValueType";
-import { PropertiesHelper } from './PropertiesHelper';
-import { BindingTarget } from "../../../item/BindingTarget";
-import { PropertyType } from "../PropertyType";
-import { NodeType } from "../../../item/NodeType";
-export class UnkownElementPropertiesService {
-    _notifyChangedProperty(designItem, property, value) {
-    }
-    getProperty(designItem, name) {
-        return this.getProperties(designItem).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) {
-                d.styles.set(property.name, value);
-                d.element.style[property.name] = value;
-            }
-            else {
-                let attributeName = property.attributeName;
-                if (!attributeName)
-                    attributeName = PropertiesHelper.camelToDashCase(property.name);
-                if (property.type === 'object') {
-                    const json = JSON.stringify(value);
-                    d.attributes.set(attributeName, json);
-                    d.element.setAttribute(attributeName, json);
-                }
-                else if (property.type == 'boolean' && !value) {
-                    d.attributes.delete(attributeName);
-                    d.element.removeAttribute(attributeName);
-                }
-                else if (property.type == 'boolean' && value) {
-                    d.attributes.set(attributeName, "");
-                    d.element.setAttribute(attributeName, "");
-                }
-                else {
-                    d.attributes.set(attributeName, value);
-                    d.element.setAttribute(attributeName, value);
-                }
-            }
-            this._notifyChangedProperty(d, property, value);
-        }
-        cg.commit();
-    }
-    getPropertyTarget(designItem, property) {
-        return BindingTarget.property;
-    }
-    clearValue(designItems, property) {
-        const cg = designItems[0].openGroup("properties cleared");
-        for (let d of designItems) {
-            if (property.propertyType == PropertyType.cssValue) {
-                d.styles.delete(property.name);
-                d.element.style[property.name] = '';
-            }
-            else {
-                let attributeName = property.attributeName;
-                if (!attributeName)
-                    attributeName = PropertiesHelper.camelToDashCase(property.name);
-                d.attributes.delete(attributeName);
-                d.element.removeAttribute(attributeName);
-            }
-            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
-                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
-            });
-            this._notifyChangedProperty(d, property, undefined);
-        }
-        cg.commit();
-    }
-    isSet(designItems, property) {
-        let all = true;
-        let some = false;
-        if (designItems != null && designItems.length !== 0) {
-            let attributeName = property.attributeName;
-            if (!attributeName)
-                attributeName = PropertiesHelper.camelToDashCase(property.name);
-            designItems.forEach((x) => {
-                let has = false;
-                if (property.propertyType == PropertyType.cssValue)
-                    has = x.styles.has(property.name);
-                else
-                    has = x.attributes.has(attributeName);
-                all = all && has;
-                some = some || has;
-            });
-            //todo: optimize perf, do not call bindings service for each property. 
-            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
-                return s.getBindings(designItems[0]);
-            });
-            if (property.propertyType == PropertyType.cssValue) {
-                if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
-                    return ValueType.bound;
-            }
-            else {
-                if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
-                    return ValueType.bound;
-            }
-        }
-        else
-            return ValueType.none;
-        return all ? ValueType.all : some ? ValueType.some : ValueType.none;
-    }
-    getValue(designItems, property) {
-        if (designItems != null && designItems.length !== 0) {
-            if (property.propertyType == PropertyType.cssValue) {
-                let lastValue = designItems[0].styles.get(property.name);
-                for (const x of designItems) {
-                    let value = x.styles.get(property.name);
-                    if (value != lastValue) {
-                        lastValue = null;
-                        break;
-                    }
-                }
-                return lastValue;
-            }
-            else {
-                let attributeName = property.attributeName;
-                if (!attributeName)
-                    attributeName = PropertiesHelper.camelToDashCase(property.name);
-                if (property.type == 'boolean')
-                    return designItems[0].attributes.has(attributeName);
-                let lastValue = designItems[0].attributes.get(attributeName);
-                /*
-                for (const x of designItems) {
-                  let value = x.attributes.get(attributeName);
-                  if (value != lastValue) {
-                    lastValue = null;
-                    break;
-                  }
-                }
-                */
-                return lastValue;
-            }
-        }
-        return null;
-    }
-    getBinding(designItems, property) {
-        //TODO: optimize perf, do not call bindings service for each property. 
-        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
-            return s.getBindings(designItems[0]);
-        });
-        if (property.propertyType == PropertyType.cssValue) {
-            return bindings.find(x => (x.target == BindingTarget.css) && x.targetName == property.name);
-        }
-        else {
-            return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
-        }
-    }
-    //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
-    getUnsetValue(designItems, property) {
-        if (property.propertyType == PropertyType.cssValue) {
-            if (designItems != null && designItems.length !== 0) {
-                if (designItems[0].nodeType == NodeType.Element) {
-                    let v = window.getComputedStyle(designItems[0].element)[property.name];
-                    return v;
-                }
-            }
-            return null;
-        }
-        else
-            return property.defaultValue;
-    }
-}

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

@@ -1,48 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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/StylesheetService.d.ts

@@ -1,28 +0,0 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { IProperty } from "../propertiesService/IProperty.js";
-import { IStyleDeclaration, IStyleRule, IStylesheetService } from "./IStylesheetService.js";
-import * as csstree from 'css-tree';
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-type RuleWithSpecificity = {
-    rule: csstree.RulePlain;
-    selector: string;
-    specificity: number;
-};
-export declare class StylesheetService implements IStylesheetService {
-    stylesheets: string[];
-    stylesheetChanged: TypedEvent<{
-        stylesheet: string;
-    }>;
-    styles: RuleWithSpecificity[];
-    constructor(stylesheets: string[]);
-    updateDefiningRule(designItem: IDesignItem, property: IProperty, value: string): boolean;
-    private getAppliedRulesInternal;
-    getAppliedRules(designItem: IDesignItem, prop: IProperty): IStyleRule[];
-    private getDeclarationInternal;
-    getDeclarations(designItem: IDesignItem, prop: IProperty): IStyleDeclaration[];
-    private parseStylesheetToRuleset;
-    private buildSelectorString;
-    private getSpecificity;
-    private returnRuleDeclarationIndex;
-}
-export {};