iobroker.webui 1.27.1 → 1.28.0

package/README.md

@@ -133,6 +133,9 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.28.0 (2025-05-03)
+- update packages
+
 ### 1.27.1 (2025-03-30)
 - fix xml import
 

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.27.1",
+    "version": "1.28.0",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,19 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.28.0": {
+        "en": "update packages",
+        "de": "update-pakete",
+        "ru": "обновление пакетов",
+        "pt": "pacotes de atualização",
+        "nl": "pakketten bijwerken",
+        "fr": "mettre à jour les paquets",
+        "it": "pacchetti di aggiornamento",
+        "es": "actualizar paquetes",
+        "pl": "aktualizacja pakietów",
+        "uk": "оновлення пакетів",
+        "zh-cn": "更新软件包"
+      },
       "1.27.1": {
         "en": "fix xml import",
         "de": "xml importieren",
@@ -106,19 +119,6 @@
         "pl": "naprawić wiązania w niestandardowych kontrolach",
         "uk": "фіксувати прив'язки в користувацьких управліннях",
         "zh-cn": "定制控制中的固定绑定"
-      },
-      "1.24.4": {
-        "en": "switch again to old module shims (error in new one)",
-        "de": "wieder auf alte modul-shimmel wechseln (error in new one)",
-        "ru": "переключение снова на старых модуле shims (ошибка в новом)",
-        "pt": "mudar novamente para os antigos xeques do módulo (erro em novo)",
-        "nl": "weer overschakelen naar oude module shims (fout in nieuwe)",
-        "fr": "passer à nouveau à l'ancien module shims (erreur dans le nouveau)",
-        "it": "passare di nuovo a shims vecchio modulo (error in uno nuovo)",
-        "es": "cambiar de nuevo al viejo módulo shims (error nuevo)",
-        "pl": "przełącz ponownie na stary moduł shims (błąd w nowym)",
-        "uk": "повторно переключіть до старих модулів (error in new)",
-        "zh-cn": "再次切换到旧模块shims( 错误在新模块中)"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@iobroker/adapter-core": "^3.2.3",
-    "@types/node": "^22.13.14"
+    "@types/node": "^22.15.3"
   },
   "devDependencies": {
     "@adobe/css-tools": "4.4.2",
@@ -52,19 +52,19 @@
     "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
     "@blockly/zoom-to-fit": "^6.0.12",
-    "@iobroker/socket-client": "^4.1.0",
+    "@iobroker/socket-client": "^4.1.3",
     "@iobroker/testing": "^5.0.4",
     "@iobroker/webcomponent-selectid-dialog": "^1.0.7",
-    "@node-projects/base-custom-webcomponent": "0.29.0",
+    "@node-projects/base-custom-webcomponent": "0.30.0",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.3.0",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.247",
+    "@node-projects/web-component-designer": "^0.1.257",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.33",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.10",
-    "@node-projects/web-component-designer-visualization-addons": "^0.1.116",
+    "@node-projects/web-component-designer-visualization-addons": "^0.1.117",
     "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.33",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
@@ -75,24 +75,24 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
     "del": "^8.0.0",
-    "dock-spawn-ts": "^3.3.0",
-    "es-module-shims": "2.0.10",
-    "eslint": "^9.23.0",
+    "dock-spawn-ts": "^3.5.0",
+    "es-module-shims": "2.4.1",
+    "eslint": "^9.26.0",
     "esprima-next": "^6.0.3",
     "glob-stream": "^8.0.2",
     "gulp": "^5.0.0",
     "gulp-git": "^2.11.0",
     "gulp-replace": "^1.1.4",
-    "long": "^5.3.1",
+    "long": "^5.3.2",
     "mobile-drag-drop": "^3.0.0-rc.0",
-    "mocha": "^11.1.0",
+    "mocha": "^11.2.2",
     "monaco-editor": "^0.50.0",
     "nyc": "^17.1.0",
     "sinon-chai": "^4.0.0",
     "toastify-js": "^1.12.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "typescript-json-schema": "^0.65.1",
     "wunderbaum": "0.13.0"
   }

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -160,7 +160,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         this.serviceContainer = serviceContainer;
         new CommandHandling(this._dockManager, this, serviceContainer);
         this._dockManager.addLayoutListener({
-            onActiveDocumentChange: (manager, panel, previousPanel) => {
+            onActiveDocumentChange: async (manager, panel, previousPanel) => {
                 if (previousPanel) {
                     let element = this._dock.getElementInSlot(previousPanel.elementContent);
                     if (element?.deactivated)

package/www/index.html

@@ -218,7 +218,7 @@
     </button>
     <button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
     <div style="margin-left: 30px;">
-      webui - 1.27.1 - 88f34da
+      webui - 1.28.0 - a3c3349
     </div>
     <button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>

package/www/node_modules/@iobroker/socket-client/dist/esm/Connection.js

@@ -416,25 +416,31 @@ export class Connection {
             this.lastAccessToken = accessToken;
             this._socket.emit('updateTokenExpiration', accessToken, (err, success) => {
                 if (err) {
-                    console.error(`Cannot update expiration time: ${err}`);
+                    console.error(`[UPDATE/${new Date().toISOString()}] cannot say to server about new token: ${err}`);
                     window.location.reload();
                 }
                 else if (!success) {
-                    console.error('Cannot update expiration time');
+                    console.error(`[UPDATE/${new Date().toISOString()}] cannot say to server about new token`);
                     window.location.reload();
                 }
+                else {
+                    console.log(`[UPDATE/${new Date().toISOString()}] server accepted new token: ${accessToken}`);
+                }
             });
         }
         this.checkAccessTokenExpire();
     }
     refreshTokens(tokenStructure, takeOwnership) {
         if (!tokenStructure) {
+            console.log(`[REFRESH/${new Date().toISOString()}] No token structure found => reloading the page`);
             // Refresh the page, as we cannot refresh the token
             setTimeout(() => window.location.reload(), 500);
             return;
         }
         if (takeOwnership || !tokenStructure.owner || tokenStructure.owner === this.connId) {
+            console.log(`[REFRESH/${new Date().toISOString()}] claim ownership of the token`);
             if (this.acquireTokenLock()) {
+                console.log(`[REFRESH/${new Date().toISOString()}] refreshing token`);
                 // Access token will expire soon => Send authentication again
                 fetch('./oauth/token', {
                     method: 'POST',
@@ -451,6 +457,7 @@ export class Connection {
                 })
                     .then((data) => {
                     if (data.access_token) {
+                        console.log(`[REFRESH/${new Date().toISOString()}] received new token: ${data.access_token}`);
                         this.saveTokens(data, tokenStructure.stayLoggedIn);
                         this.releaseTokenLock();
                         this.updateTokenExpiration(data.access_token);
@@ -460,6 +467,7 @@ export class Connection {
                     }
                 })
                     .catch(err => {
+                    console.warn(`[REFRESH/${new Date().toISOString()}] cannot refresh token: ${err}`);
                     this.releaseTokenLock();
                     this.deleteTokens(tokenStructure.stayLoggedIn);
                     console.error(err);
@@ -467,6 +475,7 @@ export class Connection {
                 });
             }
             else {
+                console.log(`[REFRESH/${new Date().toISOString()}] Someone else is updating the token, so wait for the next check`);
                 // Someone else is updating the token, so wait for the next check
                 this.checkAccessTokenExpire();
             }
@@ -533,35 +542,49 @@ export class Connection {
                 // Check if the access token expires in the next 30 seconds
                 if (accessExpireInUnixMs < Date.now() + 30_000) {
                     const takeOwnership = accessExpireInUnixMs < Date.now() + 5_500;
+                    console.log(`[TOKEN/${new Date().toISOString()}] Updating refresh token ${tokens.access_token}`);
                     if (!tokens.refresh_token) {
+                        console.log(`[TOKEN/${new Date().toISOString()}] We do not have a refresh token, so we need to reauthenticate`);
                         // Refresh the page, as we cannot refresh the token
                         setTimeout(() => window.location.reload(), Date.now() > accessExpireInUnixMs ? 500 : accessExpireInUnixMs - Date.now());
                     }
                     else if (tokens.owner === this.connId ||
                         // We gave 25 seconds to the owner to update the token, and now we will do it and take the ownership
                         takeOwnership) {
+                        if (tokens.owner === this.connId) {
+                            console.log(`[TOKEN/${new Date().toISOString()}] We are the owner of the token`);
+                        }
+                        else {
+                            console.log(`[TOKEN/${new Date().toISOString()}] We are not the owner of the token, but we will take ownership`);
+                        }
                         // Handle token expiration if the connection is the owner of the token
                         if (this.props.tokenTimeoutHandler) {
+                            console.log(`[TOKEN/${new Date().toISOString()}] Asking GUI if we should prolong the token`);
                             // Asc if the user wants to stay logged in
                             void this.props.tokenTimeoutHandler(accessExpireInUnixMs).then(prolong => {
                                 if (prolong) {
+                                    console.log(`[TOKEN/${new Date().toISOString()}] Token will be prolonged`);
                                     this.refreshTokens(tokens, takeOwnership);
                                 }
                                 else {
+                                    console.log(`[TOKEN/${new Date().toISOString()}] Token will not be prolonged. Reloading the page`);
                                     // Refresh the page, as we cannot refresh the token
                                     setTimeout(() => window.location.reload(), Date.now() > accessExpireInUnixMs ? 500 : accessExpireInUnixMs - Date.now());
                                 }
                             });
                         }
                         else {
+                            console.log(`[TOKEN/${new Date().toISOString()}] No tokenTimeoutHandler defined. Prolonging the token`);
                             this.refreshTokens(tokens, takeOwnership);
                         }
                     }
                     else if (this.lastAccessToken !== tokens.access_token) {
+                        console.log(`[TOKEN/${new Date().toISOString()}] We are not the owner of the token, but we will inform the server about new token`);
                         // The connection is not the owner, so just check if access_token changed, so inform the server about it
                         this.refreshTokens(tokens);
                     }
                     else {
+                        console.log(`[TOKEN/${new Date().toISOString()}] We are not the owner of the token and the token did not change. Check in 3 seconds if the owner updated the token`);
                         // What 3 seconds and check again, maybe the owner connection will update the token
                         this._refreshTimer = setTimeout(() => {
                             this._refreshTimer = null;
@@ -714,10 +737,10 @@ export class Connection {
      */
     authenticate() {
         if (window.location.search.includes('&href=')) {
-            window.location.href = `${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.search}${window.location.hash}`;
+            window.location.href = `${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.search}`;
         }
         else {
-            window.location.href = `${window.location.protocol}//${window.location.host}${window.location.pathname}?login&href=${window.location.search}${window.location.hash}`;
+            window.location.href = `${window.location.protocol}//${window.location.host}${window.location.pathname}?login&href=${encodeURIComponent(window.location.search + window.location.hash)}`;
         }
     }
     async subscribeState(...args) {

package/www/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js

@@ -590,7 +590,11 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
             //@ts-ignore
             for (let i in this.constructor.properties) {
                 //@ts-ignore
-                this.constructor._propertiesDictionary.set(i.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), [i, this.constructor.properties[i]]);
+                let type = this.constructor.properties[i];
+                if (type.type)
+                    type = type.type;
+                //@ts-ignore
+                this.constructor._propertiesDictionary.set(i.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), [i, type]);
             }
         }
         for (const a of this.attributes) {

package/www/node_modules/@node-projects/web-component-designer/dist/elements/helper/Helper.js

@@ -53,4 +53,38 @@ export function arraysEqual(a, b) {
     }
     return true;
 }
+let nullObject;
+export function deepValue(obj, path, returnNullObject = false) {
+    if (path === undefined || path === null) {
+        return obj;
+    }
+    const pathParts = path.split('.');
+    for (let i = 0; i < pathParts.length; i++) {
+        if (obj != null) {
+            obj = obj[pathParts[i]];
+        }
+        else {
+            return returnNullObject ? nullObject : null;
+        }
+    }
+    return obj;
+}
+export function setDeepValue(obj, path, value) {
+    if (path === undefined || path === null) {
+        return;
+    }
+    const pathParts = path.split('.');
+    for (let i = 0; i < pathParts.length - 1; i++) {
+        if (obj != null) {
+            let newObj = obj[pathParts[i]];
+            if (newObj == null) {
+                newObj = {};
+                obj[pathParts[i]] = newObj;
+            }
+            obj = newObj;
+        }
+    }
+    if (obj != null)
+        obj[pathParts[pathParts.length - 1]] = value;
+}
 //# sourceMappingURL=Helper.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/helper/getBoxQuads.js

@@ -307,19 +307,28 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
     let lastOffsetParent = null;
     while (actualElement != ancestor && actualElement != null) {
         const parentElement = getParentElementIncludingSlots(actualElement, iframes);
-        if (actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement) {
-            if (lastOffsetParent !== actualElement.offsetParent && !(actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement)) {
-                const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
-                lastOffsetParent = actualElement.offsetParent;
-                const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
+        if (actualElement.assignedSlot != null) {
+            const st = (perspectiveParentElement.ownerDocument.defaultView ?? window).getComputedStyle(actualElement);
+            if (st.position !== "static") {
+                const mvMat = new DOMMatrix().translate(parseFloat(st.left), parseFloat(st.top));
                 originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
             }
         }
         else {
-            const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
-            lastOffsetParent = null;
-            const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
-            originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
+            if (actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement) {
+                if (lastOffsetParent !== actualElement.offsetParent && !(actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement)) {
+                    const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
+                    lastOffsetParent = actualElement.offsetParent;
+                    const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
+                    originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
+                }
+            }
+            else {
+                const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
+                lastOffsetParent = null;
+                const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
+                originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
+            }
         }
         if (parentElement) {
             parentElementMatrix = getElementCombinedTransform(parentElement, iframes);

package/www/node_modules/@node-projects/web-component-designer/dist/elements/item/DesignItem.js

@@ -6,10 +6,11 @@ import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
 import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
 import { DomConverter } from '../widgets/designerView/DomConverter.js';
-import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
 import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { TextContentChangeAction } from '../services/undoService/transactionItems/TextContentChangeAction.js';
+import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction.js';
+import { deepValue } from '../helper/Helper.js';
 export const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 export const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 export const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -213,12 +214,10 @@ export class DesignItem {
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeChild(designItem) {
-        const action = new DeleteAction([designItem]);
-        this.instanceServiceContainer.undoService.execute(action);
+        this.serviceContainer.deletionService.removeItems([designItem]);
     }
     remove() {
-        const action = new DeleteAction([this]);
-        this.instanceServiceContainer.undoService.execute(action);
+        this.serviceContainer.deletionService.removeItems([this]);
     }
     clearChildren() {
         for (let i = this._childArray.length - 1; i >= 0; i--) {
@@ -600,6 +599,13 @@ export class DesignItem {
         const action = new AttributeChangeAction(this, name, null, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
+    setProperty(name, value) {
+        if (this.isRootItem)
+            throw 'not allowed to set attribute on root item';
+        const oldValue = deepValue(this.node, name);
+        const action = new PropertyChangeAction(this, name, value, oldValue);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
     // Internal implementations wich don't use undo/redo
     _insertChildInternal(designItem, index) {
         if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/DefaultServiceBootstrap.js

@@ -104,6 +104,7 @@ import { SimpleToolButtonProvider } from '../widgets/designerView/tools/toolBar/
 import { assetsPath } from '../../Constants.js';
 import { PaddingTool } from '../widgets/designerView/tools/PaddingTool.js';
 import { DesignItemService } from './designItemService/DesignItemService.js';
+import { DeletionService } from './deletionService/DeletionService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -132,6 +133,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("demoProviderService", new SimpleDemoProviderService());
     serviceContainer.register("eventsService", new EventsService());
     serviceContainer.register("designItemService", new DesignItemService());
+    serviceContainer.register("deletionService", new DeletionService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
     serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/ServiceContainer.js

@@ -107,5 +107,8 @@ export class ServiceContainer extends BaseServiceContainer {
     get refactorServices() {
         return this.getServices('refactorService');
     }
+    get deletionService() {
+        return this.getLastService('deletionService');
+    }
 }
 //# sourceMappingURL=ServiceContainer.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/deletionService/DeletionService.js

@@ -0,0 +1,7 @@
+import { DeleteAction } from "../undoService/transactionItems/DeleteAction.js";
+export class DeletionService {
+    removeItems(items) {
+        items[0].instanceServiceContainer.undoService.execute(new DeleteAction(items));
+    }
+}
+//# sourceMappingURL=DeletionService.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/deletionService/IDeletionService.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IDeletionService.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/placementService/AbsolutePlacementService.js

@@ -106,6 +106,7 @@ export class AbsolutePlacementService {
             const translationMatrix = new DOMMatrix().translate(transformedPoint.x, transformedPoint.y);
             combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
         }
+        designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', false);
     }
     moveElements(designItems, position, absolute) {
         //TODO: Check if we set left or right
@@ -117,10 +118,11 @@ export class AbsolutePlacementService {
                 d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
         }
         designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
+        designItems[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(designItems, 'place', true);
     }
     enterContainer(container, items, mode) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (let i of filterdItems) {
+        let filteredItems = filterChildPlaceItems(items);
+        for (let i of filteredItems) {
             if (mode == 'drop')
                 i.setStyle('position', 'absolute');
             container.insertChild(i);
@@ -131,12 +133,15 @@ export class AbsolutePlacementService {
                     i.setStyle('height', i.lastContainerSize.height + 'px');
             }
         }
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true);
     }
     leaveContainer(container, items) {
+        let filteredItems = filterChildPlaceItems(items);
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true);
     }
     finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
+        let filteredItems = filterChildPlaceItems(items);
+        for (const designItem of filteredItems) {
             let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
             const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
             designItem.element.style.transform = designItem.getStyle('transform') ?? '';
@@ -146,6 +151,7 @@ export class AbsolutePlacementService {
         for (const item of items) {
             designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
         }
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true);
     }
 }
 //# sourceMappingURL=AbsolutePlacementService.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/placementService/DefaultPlacementService.js

@@ -125,6 +125,7 @@ export class DefaultPlacementService {
             const translationMatrix = new DOMMatrix().translate(transformedPoint.x, transformedPoint.y);
             combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
         }
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', false);
     }
     moveElements(designItems, position, absolute) {
         //TODO: Check if we set left or right
@@ -136,10 +137,11 @@ export class DefaultPlacementService {
                 d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
         }
         designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
+        designItems[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(designItems, 'place', true);
     }
     enterContainer(container, items, mode) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (let i of filterdItems) {
+        let filteredItems = filterChildPlaceItems(items);
+        for (let i of filteredItems) {
             if (mode == 'drop')
                 i.setStyle('position', 'absolute');
             container.insertChild(i);
@@ -150,12 +152,15 @@ export class DefaultPlacementService {
                     i.setStyle('height', i.lastContainerSize.height + 'px');
             }
         }
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true);
     }
     leaveContainer(container, items) {
+        let filteredItems = filterChildPlaceItems(items);
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
+        let filteredItems = filterChildPlaceItems(items);
+        for (const designItem of filteredItems) {
             let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
             const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
             designItem.element.style.transform = designItem.getStyle('transform') ?? '';
@@ -174,6 +179,7 @@ export class DefaultPlacementService {
         for (const item of items) {
             placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
         }
+        items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true);
     }
 }
 //# sourceMappingURL=DefaultPlacementService.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js

@@ -16,34 +16,39 @@ export class AbstractPolymerLikePropertiesService extends AbstractPropertiesServ
         for (const name in list) {
             const polymerProperty = list[name];
             let type = polymerProperty;
-            if (polymerProperty.type)
+            let description = null;
+            let example = null;
+            if (polymerProperty.type) {
                 type = polymerProperty.type;
+                description = polymerProperty.description;
+                example = polymerProperty.example;
+            }
             if (type === String) {
-                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Object) {
-                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Number) {
-                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Date) {
-                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Boolean) {
-                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (PropertiesHelper.isTypescriptEnum(type)) {
-                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else {
-                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
         }

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/undoService/transactionItems/PropertyChangeAction.js

@@ -0,0 +1,32 @@
+import { setDeepValue } from '../../../helper/Helper.js';
+export class PropertyChangeAction {
+    constructor(designItem, name, newValue, oldValue) {
+        this.title = "Change Property " + name + " of <" + designItem.name + ">";
+        this.designItem = designItem;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        setDeepValue(this.designItem.node, this.name, this.oldValue);
+    }
+    do() {
+        setDeepValue(this.designItem.node, this.name, this.newValue);
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        if (other instanceof PropertyChangeAction && this.designItem === other.designItem && this.name === other.name) {
+            this.newValue = other.newValue;
+            return true;
+        }
+        return false;
+    }
+}
+//# sourceMappingURL=PropertyChangeAction.js.map