@node-projects/web-component-designer 0.1.157 → 0.1.158

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

@@ -1,3 +1,5 @@
 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' | 'height', unit: string): string;
+export declare function splitCssGridColumnSizes(sizes: String): string[];
+export declare function getExpandedCssGridColumnSizes(sizes: String): string[];

package/dist/elements/helper/CssUnitConverter.js

@@ -102,3 +102,34 @@ export function convertCssUnit(cssValue, target, percentTarget, unit) {
 function getOriginalSizeBeforeTransformation(element) {
     return { width: element.offsetWidth, height: element.offsetHeight };
 }
+export function splitCssGridColumnSizes(sizes) {
+    const parts = sizes.split(' ');
+    const ret = [];
+    for (let i = 0; i < parts.length; i++) {
+        let p = parts[i];
+        if (p.startsWith('repeat(')) {
+            while (!p.includes(")")) {
+                i++;
+                if (!parts[i])
+                    continue;
+                p += parts[i];
+            }
+        }
+        ret.push(p);
+    }
+    return ret;
+}
+export function getExpandedCssGridColumnSizes(sizes) {
+    const parts = splitCssGridColumnSizes(sizes);
+    const ret = [];
+    for (let p of parts) {
+        if (p.startsWith('repeat(')) {
+            const prt = p.split(',');
+            for (let i = 0; i < parseInt(prt[0].substring(7)); i++)
+                ret.push(prt[1].substring(0, prt[1].length - 1));
+        }
+        else
+            ret.push(p);
+    }
+    return ret.map(x => getCssUnit(x));
+}

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

@@ -149,6 +149,12 @@ export class NativeElementsPropertiesService extends AbstractPropertiesService {
             type: "string",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "alt",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     iframeProperties = [

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js

@@ -1,5 +1,5 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
-import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
+import { convertCssUnit, convertCssUnitToPixel, getCssUnit, getExpandedCssGridColumnSizes } from "../../../../helper/CssUnitConverter.js";
 import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
@@ -75,9 +75,8 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                     this._hasChanged = false;
                     const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
                     const initialParts = this._initialSizes.split(' ');
-                    const parts = realStyle.split(' ');
-                    let units = parts.map(x => getCssUnit(x));
-                    if (parts.length != initialParts.length) {
+                    let units = getExpandedCssGridColumnSizes(realStyle);
+                    if (units.length != initialParts.length) {
                         units = initialParts.map(x => getCssUnit(x));
                     }
                     this.extendedItem.element.style[templatePropertyName] = '';

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js

@@ -65,15 +65,15 @@ export class GridToolbarExtension extends BasicStackedToolbarExtension {
                 if (!rows)
                     return;
                 const cg = this.extendedItem.openGroup('change grid type');
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', 'repeat(' + columns + ', 1fr)');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', 'repeat(' + rows + ', 1fr)');
                 cg.commit();
             }
             else {
                 const parts = gridTypeEl.value.split('x');
                 const cg = this.extendedItem.openGroup('change grid type');
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', 'repeat(' + parts[0] + ', 1fr)');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', 'repeat(' + parts[1] + ', 1fr)');
                 cg.commit();
             }
         };

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.157",
+  "version": "0.1.158",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",