@node-projects/web-component-designer 0.0.96 → 0.0.99

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

@@ -1,325 +1,325 @@
-import { ValueType } from '../ValueType';
-import { NodeType } from '../../../item/NodeType';
-import { BindingTarget } from '../../../item/BindingTarget.js';
-import { PropertyType } from '../PropertyType';
-export class CssPropertiesService {
-    //@ts-ignore
-    styles = [
-        {
-            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: "padding",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "margin",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "position",
-            type: "list",
-            values: ["static", "relative", "absolute"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "left",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "top",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "right",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "bottom",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "width",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "height",
-            type: "css-length",
-            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
-        }
-    ];
-    //@ts-ignore
-    alignment = [
-        {
-            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: "inset",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "margin",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "padding",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    //@ts-ignore
-    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
-        }
-    ];
-    //@ts-ignore
-    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
-        }
-    ];
-    name;
-    constructor(name) {
-        this.name = name;
-    }
-    isHandledElement(designItem) {
-        return true;
-    }
-    getProperty(designItem, name) {
-        if (this.name == 'set-styles') {
-            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
-        }
-        return this[this.name][name];
-    }
-    getProperties(designItem) {
-        if (this.name == 'set-styles') {
-            if (!designItem)
-                return [];
-            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
-        }
-        return this[this.name];
-    }
-    setValue(designItems, property, value) {
-        const cg = designItems[0].openGroup("properties changed", designItems);
-        for (let d of designItems) {
-            d.styles.set(property.name, value);
-            d.element.style[property.name] = value;
-        }
-        cg.commit();
-    }
-    getPropertyTarget(designItem, property) {
-        return BindingTarget.css;
-    }
-    clearValue(designItems, property) {
-        for (let d of designItems) {
-            d.styles.delete(property.name);
-            d.element.style[property.name] = '';
-            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
-                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
-            });
-        }
-    }
-    isSet(designItems, property) {
-        let all = true;
-        let some = false;
-        if (designItems != null && designItems.length !== 0) {
-            designItems.forEach((x) => {
-                let has = x.styles.has(property.name);
-                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 (bindings && bindings.find(x => x.target == BindingTarget.css && 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) {
-            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;
-        }
-        return null;
-    }
-    //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
-    getUnsetValue(designItems, property) {
-        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;
-    }
-}
+import { ValueType } from '../ValueType';
+import { NodeType } from '../../../item/NodeType';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType';
+export class CssPropertiesService {
+    //@ts-ignore
+    styles = [
+        {
+            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: "padding",
+            type: "thickness",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "margin",
+            type: "thickness",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "left",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "top",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "right",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "bottom",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "width",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "height",
+            type: "css-length",
+            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
+        }
+    ];
+    //@ts-ignore
+    alignment = [
+        {
+            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: "inset",
+            type: "thickness",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "margin",
+            type: "thickness",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "padding",
+            type: "thickness",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    //@ts-ignore
+    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
+        }
+    ];
+    //@ts-ignore
+    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
+        }
+    ];
+    name;
+    constructor(name) {
+        this.name = name;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        if (this.name == 'set-styles') {
+            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+        }
+        return this[this.name][name];
+    }
+    getProperties(designItem) {
+        if (this.name == 'set-styles') {
+            if (!designItem)
+                return [];
+            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+        }
+        return this[this.name];
+    }
+    setValue(designItems, property, value) {
+        const cg = designItems[0].openGroup("properties changed", designItems);
+        for (let d of designItems) {
+            d.styles.set(property.name, value);
+            d.element.style[property.name] = value;
+        }
+        cg.commit();
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
+    clearValue(designItems, property) {
+        for (let d of designItems) {
+            d.styles.delete(property.name);
+            d.element.style[property.name] = '';
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
+        }
+    }
+    isSet(designItems, property) {
+        let all = true;
+        let some = false;
+        if (designItems != null && designItems.length !== 0) {
+            designItems.forEach((x) => {
+                let has = x.styles.has(property.name);
+                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 (bindings && bindings.find(x => x.target == BindingTarget.css && 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) {
+            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;
+        }
+        return null;
+    }
+    //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
+    getUnsetValue(designItems, property) {
+        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;
+    }
+}