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

package/dist/elements/helper/CssUnitConverter.d.ts

@@ -1,3 +1,3 @@
-export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'heigth'): number;
+export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'height'): number;
 export declare function getCssUnit(cssValue: string): string;
-export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'heigth', unit: string): string | number;
+export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string | number;

package/dist/elements/helper/CssUnitConverter.js

@@ -1,5 +1,5 @@
 //unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh
-const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
+const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'fr'];
 const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
 export function convertCssUnitToPixel(cssValue, target, percentTarget) {
     const supportedUnits = {
@@ -20,7 +20,7 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
         'vmax': value => value / 100 * (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
         'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
-        '%': value => value / 100 * (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        '%': value => value / 100 * (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
         /* todo
         //find parent with computed style where contaner-type is inline-size or size (regarding to query type)
         //use this size for calculation
@@ -76,7 +76,7 @@ export function convertCssUnit(cssValue, target, percentTarget, unit) {
         'vmax': value => value * 100 / (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
         'lh': value => value / parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value / parseFloat(getComputedStyle(document.documentElement).lineHeight),
-        '%': value => value * 100 / (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        '%': value => value * 100 / (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
         // Times
         'ms': value => value,
         's': value => value / 1000,

package/dist/elements/helper/GridHelper.d.ts

@@ -4,7 +4,9 @@ export declare function CalculateGridInformation(designItem: IDesignItem): {
         x: number;
         y: number;
         width: number;
+        initWidthUnit: string;
         height: number;
+        initHeightUnit: string;
         name: string;
     }[][];
     gaps?: {

package/dist/elements/helper/GridHelper.js

@@ -1,3 +1,4 @@
+import { getCssUnit } from "./CssUnitConverter.js";
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
@@ -6,6 +7,20 @@ export function CalculateGridInformation(designItem) {
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
+    const rowUnits = [];
+    let tmpStyle = designItem.getStyle("grid-template-rows");
+    if (tmpStyle)
+        tmpStyle.split(' ').forEach(rowWidth => { if (rowWidth != "")
+            rowUnits.push(getCssUnit(rowWidth)); });
+    else
+        rows.forEach(() => rowUnits.push("px"));
+    const columnUnits = [];
+    tmpStyle = designItem.getStyle("grid-template-columns");
+    if (tmpStyle)
+        tmpStyle.split(' ').forEach(columnHeight => { if (columnHeight != "")
+            columnUnits.push(getCssUnit(columnHeight)); });
+    else
+        columns.forEach(() => columnUnits.push("px"));
     const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
     const paddingTop = Number.parseFloat(computedStyle.paddingTop);
     let y = 0;
@@ -100,7 +115,7 @@ export function CalculateGridInformation(designItem) {
                     name = nm;
                 }
             }
-            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
+            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, initWidthUnit: columnUnits[yIdx], height: currY, initHeightUnit: rowUnits[xIdx], name: name };
             cellList.push(cell);
             x += currX;
             cl++;

package/dist/elements/item/DesignItem.d.ts

@@ -76,6 +76,7 @@ export declare class DesignItem implements IDesignItem {
     setStyle(name: string, value?: string | null, important?: boolean): void;
     removeStyle(name: string): void;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): void;
+    getStyleFromSheetOrLocal(name: string): void;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -304,10 +304,10 @@ export class DesignItem {
     }
     updateStyleInSheetOrLocal(name, value, important) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        const declaration = null;
-        //const declaration = this.serviceContainer.stylesheetService?.getDeclarations(d, property);
-        //const rules = this.serviceContainer.stylesheetService?.getAppliedRules(d, property);
-        if (!declaration) {
+        // Pre-sorted by priority
+        let declerations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (this.hasStyle(name) || !declerations) {
+            // Set style locally
             if (this.getStyle(nm) != value) {
                 this.setStyle(nm, value);
             }
@@ -315,9 +315,12 @@ export class DesignItem {
                 this.removeStyle(nm);
             }
         }
-        //todo -> modify stylesheet, or local css
-        //we need undo for modification of stylesheet, look how we do this
-        //maybe undo in stylsheet service?
+        else {
+            // Set style in sheet
+            this.instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(declerations[0], value, important);
+        }
+    }
+    getStyleFromSheetOrLocal(name) {
     }
     getAllStyles() {
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false }));

package/dist/elements/services/propertiesService/PropertyGroupsService.d.ts

@@ -1,7 +1,7 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from './IPropertiesService.js';
-import { IPropertyTabsService } from './IPropertyTabsService.js';
-export declare class PropertyGroupsService implements IPropertyTabsService {
+import { IPropertyGroupsService } from './IPropertyGroupsService.js';
+export declare class PropertyGroupsService implements IPropertyGroupsService {
     protected _pgList: {
         name: string;
         propertiesService: IPropertiesService;

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.d.ts

@@ -2,9 +2,9 @@ import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
-import { CssPropertiesService } from './CssPropertiesService.js';
 import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
-export declare class CssCurrentPropertiesService extends CssPropertiesService {
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+export declare class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     constructor();
     isHandledElement(designItem: IDesignItem): boolean;

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

@@ -1,12 +1,14 @@
 import { PropertyType } from '../PropertyType.js';
 import { RefreshMode } from '../IPropertiesService.js';
-import { CssPropertiesService } from './CssPropertiesService.js';
-export class CssCurrentPropertiesService extends CssPropertiesService {
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import cssProperties from './CssProperties.json' assert { type: 'json' };
+export class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.fullOnValueChange;
     }
     constructor() {
-        super('styles');
+        super();
+        this.name = 'styles';
     }
     isHandledElement(designItem) {
         return true;
@@ -20,17 +22,32 @@ export class CssCurrentPropertiesService extends CssPropertiesService {
         let styles = designItem.getAllStyles();
         let arr = styles.map(x => ({
             name: x.selector ?? '<local>', description: x.stylesheetName ?? '', properties: [
-                ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue, styleRule: x, styleDeclaration: y })),
+                ...x.declarations.map(y => ({
+                    name: y.name,
+                    renamable: true,
+                    type: cssProperties[y.name]?.type ?? 'string',
+                    values: cssProperties[y.name]?.values ? [...cssProperties[y.name]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                    service: this,
+                    propertyType: PropertyType.cssValue,
+                    styleRule: x,
+                    styleDeclaration: y
+                })),
                 { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex, styleRule: x }
             ]
         }));
         return arr;
     }
     setValue(designItems, property, value) {
-        if (property.styleDeclaration) {
+        // No selector means local style, styleDeclaration is null means new property
+        if (property.styleRule?.selector !== null && property.styleDeclaration) {
             designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(property.styleDeclaration, value, false);
+            return;
         }
-        else
-            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+        if (property.styleRule?.selector !== null && !property.styleDeclaration) {
+            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, { name: property.name, value: value, important: false }, false);
+            return;
+        }
+        // Local style
+        super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
     }
 }