@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/schematics/migrations/data/symbol-renaming.js

@@ -1,48 +1,7 @@
 export const SYMBOL_RENAMING_MIGRATION = [
-    // v48 to v49
     {
-        module: /@(siemens|simpl)\/dashboards-ng/,
-        symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/toast-notification)?/,
-        symbolRenamings: [{ replace: 'ToastStateName', replaceWith: 'StatusType' }],
-        toModule: '@siemens/element-ng/common'
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
-        symbolRenamings: [
-            { replace: 'SiUnauthorizedPageComponent', replaceWith: 'SiInfoPageComponent' }
-        ],
-        toModule: '@siemens/element-ng/info-page'
-    },
-    {
-        module: /@siemens\/charts-ng/,
-        symbolRenamings: [
-            { replace: 'SimplChartsNgModule', replaceWith: 'SiChartsNgModule' },
-            { replace: 'SimplSeriesOption', replaceWith: 'SiSeriesOption' },
-            { replace: 'SimplLineSeriesOption', replaceWith: 'SiLineSeriesOption' },
-            { replace: 'SimplBarSeriesOption', replaceWith: 'SiBarSeriesOption' },
-            { replace: 'SimplHeatmapSeriesOption', replaceWith: 'SiHeatmapSeriesOption' },
-            { replace: 'SimplScatterSeriesOption', replaceWith: 'SiScatterSeriesOption' },
-            { replace: 'SimplCandlestickSeriesOption', replaceWith: 'SiCandlestickSeriesOption' }
-        ]
-    },
-    {
-        module: /@siemens\/live-preview/,
-        symbolRenamings: [
-            { replace: 'SimplLivePreviewRoutingModule', replaceWith: 'SiLivePreviewRoutingModule' },
-            { replace: 'SimplLivePreviewModule', replaceWith: 'SiLivePreviewModule' }
-        ]
-    },
-    {
-        module: /@siemens\/maps-ng/,
-        symbolRenamings: [{ replace: 'SimplMapsNgModule', replaceWith: 'SiMapsNgModule' }]
-    },
-    {
-        module: /@siemens\/native-charts-ng/,
-        symbolRenamings: [
-            { replace: 'SimplNativeChartsNgModule', replaceWith: 'SiNativeChartsNgModule' }
-        ]
+        module: /@siemens\/element-ng\/icon-status$/,
+        toModule: '@siemens/element-ng/status-counter',
+        symbolRenamings: [{ replace: 'SiIconStatusComponent', replaceWith: 'SiStatusCounterComponent' }]
     }
 ];

package/schematics/migrations/element-migration/element-migration.js

@@ -1,9 +1,5 @@
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
 import { discoverSourceFiles } from '../../utils/index.js';
-import { applyAttributeSelectorMigration, applyElementClassMigration, applyClassMemberReplacementMigration, applyComponentPropertyNameMigration, applyElementSelectorMigration, applySymbolRemovalMigration, applySymbolRenamingMigration } from '../utilities/index.js';
+import { applyAttributeSelectorMigration, applyElementClassMigration, applyClassMemberReplacementMigration, applyComponentPropertyNameMigration, applyCssCustomPropertyMigration, applyComponentPropertyToChildMigration, applyElementSelectorMigration, applyProviderFunctionRemovalMigration, applySymbolRemovalMigration, applySymbolRenamingMigration, migrateCssCustomPropertiesInExternalFiles } from '../utilities/index.js';
 export const elementMigrationRule = (options, migrationData) => {
     return async (tree, context) => {
         for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
@@ -16,16 +12,20 @@ export const elementMigrationRule = (options, migrationData) => {
                 discoveredSourceFile,
                 recorder
             };
-            const { componentPropertyNameChanges, symbolRenamingChanges, attributeSelectorChanges, elementSelectorChanges, symbolRemovalChanges, elementClassChanges, classMemberReplacementChanges } = migrationData;
+            const { componentPropertyNameChanges, cssCustomPropertyChanges, componentPropertyToChildChanges, symbolRenamingChanges, attributeSelectorChanges, elementSelectorChanges, symbolRemovalChanges, elementClassChanges, classMemberReplacementChanges, providerFunctionRemovalChanges } = migrationData;
             applyComponentPropertyNameMigration(migrationContext, componentPropertyNameChanges);
+            applyCssCustomPropertyMigration(migrationContext, cssCustomPropertyChanges);
+            applyComponentPropertyToChildMigration(migrationContext, componentPropertyToChildChanges);
             applySymbolRenamingMigration(migrationContext, symbolRenamingChanges);
             applyAttributeSelectorMigration(migrationContext, attributeSelectorChanges);
             applyElementSelectorMigration(migrationContext, elementSelectorChanges);
             applySymbolRemovalMigration(migrationContext, symbolRemovalChanges);
             applyElementClassMigration(migrationContext, elementClassChanges);
             applyClassMemberReplacementMigration(migrationContext, classMemberReplacementChanges);
+            applyProviderFunctionRemovalMigration(migrationContext, providerFunctionRemovalChanges);
             tree.commitUpdate(recorder);
         }
+        migrateCssCustomPropertiesInExternalFiles(tree, options.path, migrationData.cssCustomPropertyChanges);
         return tree;
     };
 };

package/schematics/migrations/utilities/component-property-to-child.migration.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { Element } from '@angular/compiler';
+import { dirname, join } from 'path/posix';
+import { findElement, getInlineTemplates, getTemplateUrl } from '../../utils/index.js';
+export const applyComponentPropertyToChildMigration = (context, changes) => {
+    const { tree, discoveredSourceFile, recorder } = context;
+    const { path, sourceFile } = discoveredSourceFile;
+    for (const template of getInlineTemplates(sourceFile)) {
+        migrateTemplate(sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1), template.getStart() + 1, recorder, changes);
+    }
+    for (const templateUrl of getTemplateUrl(sourceFile)) {
+        const templatePath = join(dirname(path), templateUrl);
+        if (!tree.exists(templatePath)) {
+            continue;
+        }
+        const templateRecorder = tree.beginUpdate(templatePath);
+        migrateTemplate(tree.read(templatePath).toString(), 0, templateRecorder, changes);
+        tree.commitUpdate(templateRecorder);
+    }
+};
+const migrateTemplate = (template, offset, recorder, changes) => {
+    for (const change of changes) {
+        for (const parent of findElement(template, element => element.name === change.parentElementSelector)) {
+            const property = parent.attrs.find(attribute => [change.propertyName, `[${change.propertyName}]`, `bind-${change.propertyName}`].includes(attribute.name));
+            if (!property) {
+                continue;
+            }
+            const propertyText = property.sourceSpan.toString();
+            const child = parent.children.find((node) => node instanceof Element && node.name === change.childElementSelector);
+            if (child) {
+                const childHasProperty = child.attrs.some(attribute => [change.propertyName, `[${change.propertyName}]`, `bind-${change.propertyName}`].includes(attribute.name));
+                if (!childHasProperty) {
+                    insertAttribute(template, child, propertyText, offset, recorder);
+                }
+                removeAttribute(template, property.sourceSpan.start.offset, property.sourceSpan.end.offset, offset, recorder);
+            }
+            else if (parent.startSourceSpan.toString().endsWith('/>')) {
+                expandSelfClosingParent(template, parent, property, propertyText, offset, recorder, change);
+            }
+            else {
+                removeAttribute(template, property.sourceSpan.start.offset, property.sourceSpan.end.offset, offset, recorder);
+                recorder.insertLeft(parent.startSourceSpan.end.offset + offset, `<${change.childElementSelector} ${propertyText}></${change.childElementSelector}>`);
+            }
+        }
+    }
+};
+const insertAttribute = (template, element, attribute, offset, recorder) => {
+    const selfClosing = element.startSourceSpan.toString().endsWith('/>');
+    const insertOffset = element.startSourceSpan.end.offset - (selfClosing ? 2 : 1);
+    const prefix = /\s/.test(template[insertOffset - 1]) ? '' : ' ';
+    recorder.insertLeft(insertOffset + offset, `${prefix}${attribute}${selfClosing ? ' ' : ''}`);
+};
+const removeAttribute = (template, start, end, offset, recorder) => {
+    const removeStart = start > 0 && /\s/.test(template[start - 1]) ? start - 1 : start;
+    recorder.remove(removeStart + offset, end - removeStart);
+};
+const expandSelfClosingParent = (template, parent, property, propertyText, offset, recorder, change) => {
+    const start = parent.startSourceSpan.start.offset;
+    const end = parent.startSourceSpan.end.offset;
+    const propertyStart = property.sourceSpan.start.offset > start &&
+        /\s/.test(template[property.sourceSpan.start.offset - 1])
+        ? property.sourceSpan.start.offset - 1
+        : property.sourceSpan.start.offset;
+    const startTag = template.substring(start, end);
+    const withoutProperty = startTag.substring(0, propertyStart - start) +
+        startTag.substring(property.sourceSpan.end.offset - start);
+    const replacement = withoutProperty.replace(/\s*\/>$/, `><${change.childElementSelector} ${propertyText}></${change.childElementSelector}></${change.parentElementSelector}>`);
+    recorder.remove(start + offset, end - start);
+    recorder.insertLeft(start + offset, replacement);
+};

package/schematics/migrations/utilities/css-custom-property.migration.js

@@ -0,0 +1,51 @@
+import ts from 'typescript';
+export const applyCssCustomPropertyMigration = (context, changes) => {
+    if (!changes?.length) {
+        return;
+    }
+    const { recorder } = context;
+    const { sourceFile } = context.discoveredSourceFile;
+    const visit = (node) => {
+        if (!ts.isStringLiteralLike(node) &&
+            node.kind !== ts.SyntaxKind.TemplateHead &&
+            node.kind !== ts.SyntaxKind.TemplateMiddle &&
+            node.kind !== ts.SyntaxKind.TemplateTail) {
+            node.forEachChild(visit);
+            return;
+        }
+        const start = node.getStart(sourceFile);
+        const end = node.getEnd();
+        const original = sourceFile.text.slice(start, end);
+        const updated = replaceCustomProperties(original, changes);
+        if (updated !== original) {
+            recorder.remove(start, end - start);
+            recorder.insertLeft(start, updated);
+        }
+    };
+    sourceFile.forEachChild(visit);
+};
+export const migrateCssCustomPropertiesInExternalFiles = (tree, projectPath, changes) => {
+    if (!changes?.length) {
+        return;
+    }
+    const trimmedPath = projectPath.replace(/^\/+|\/+$/g, '');
+    const normalizedProjectPath = trimmedPath ? `/${trimmedPath}/` : '/';
+    tree.visit(filePath => {
+        if (!filePath.startsWith(normalizedProjectPath) ||
+            filePath.includes('/node_modules/') ||
+            !['.css', '.html', '.less', '.sass', '.scss'].some(extension => filePath.endsWith(extension))) {
+            return;
+        }
+        const content = tree.readText(filePath);
+        const updatedContent = replaceCustomProperties(content, changes);
+        if (updatedContent !== content) {
+            tree.overwrite(filePath, updatedContent);
+        }
+    });
+};
+const replaceCustomProperties = (content, changes) => {
+    return changes.reduce((updated, change) => {
+        const escapedName = change.replace.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return updated.replace(new RegExp(`${escapedName}(?![\\w-])`, 'g'), change.replaceWith);
+    }, content);
+};

package/schematics/migrations/utilities/element-class-change.migration.js

@@ -46,14 +46,14 @@ const migrateElementClasses = ({ tree, filePath, sourceFile, recorder, changes }
 const processElementClassesInTemplate = ({ template, offset, recorder, changes }) => {
     findElement(template, () => true).forEach(el => {
         const classAttr = el.attrs.find(attr => attr.name === 'class');
-        if (!classAttr) {
-            return;
-        }
-        const originalClasses = classAttr.value.split(/\s+/).filter(Boolean);
+        const originalClasses = classAttr?.value.split(/\s+/).filter(Boolean) ?? [];
         const removeSet = new Set();
         const addList = [];
         changes.forEach(change => {
-            const { addClasses, removeClasses, requiredClasses, excludedClasses } = change;
+            const { addClasses, elementSelector, removeClasses, requiredClasses, excludedClasses } = change;
+            if (elementSelector && el.name !== elementSelector) {
+                return;
+            }
             const hasAllRequiredClasses = requiredClasses.every(reqClass => originalClasses.includes(reqClass));
             if (!hasAllRequiredClasses) {
                 return;
@@ -83,6 +83,11 @@ const processElementClassesInTemplate = ({ template, offset, recorder, changes }
         const originalClassString = originalClasses.join(' ');
         const newClassString = updatedClasses.join(' ');
         if (originalClassString !== newClassString) {
+            if (!classAttr) {
+                const insertPosition = el.startSourceSpan.start.offset + 1 + offset + el.name.length;
+                recorder.insertLeft(insertPosition, ` class="${newClassString}"`);
+                return;
+            }
             const valueStart = classAttr.valueSpan?.start.offset;
             const valueEnd = classAttr.valueSpan?.end.offset;
             if (valueStart === undefined || valueEnd === undefined) {

package/schematics/migrations/utilities/import-removal.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import ts from 'typescript';
+/**
+ * Builds an edit that removes the given named import specifiers from an import
+ * declaration.
+ *
+ * If no specifiers remain after the removal, the whole import declaration is removed
+ * (including its trailing newline). Otherwise the import is rebuilt without the removed
+ * specifiers while preserving the remaining specifiers and their aliases.
+ */
+export const removeImportSpecifiers = (sourceFile, importDeclaration, specifiers) => {
+    const namedBindings = importDeclaration.importClause?.namedBindings;
+    const remainingElements = namedBindings && ts.isNamedImports(namedBindings)
+        ? namedBindings.elements.filter(element => !specifiers.includes(element))
+        : [];
+    if (remainingElements.length === 0) {
+        // No named binding remains: remove the whole import declaration including the
+        // trailing newline so no empty line is left behind.
+        const start = importDeclaration.getStart(sourceFile);
+        let end = importDeclaration.getEnd();
+        const fullText = sourceFile.getFullText();
+        if (fullText[end] === '\r') {
+            end++;
+        }
+        if (fullText[end] === '\n') {
+            end++;
+        }
+        return { start, width: end - start };
+    }
+    const updatedImport = ts.factory.createImportDeclaration(importDeclaration.modifiers, ts.factory.createImportClause(importDeclaration.importClause.isTypeOnly, importDeclaration.importClause.name, ts.factory.createNamedImports(remainingElements.map(element => ts.factory.createImportSpecifier(element.isTypeOnly, element.propertyName, element.name)))), importDeclaration.moduleSpecifier, importDeclaration.attributes);
+    return {
+        start: importDeclaration.getStart(sourceFile),
+        width: importDeclaration.getWidth(sourceFile),
+        newNode: updatedImport
+    };
+};

package/schematics/migrations/utilities/index.js

@@ -6,7 +6,11 @@ export * from './attribute-selector.migration.js';
 export * from './element-class-change.migration.js';
 export * from './class-member-replacement.migration.js';
 export * from './component-property-name.migration.js';
+export * from './css-custom-property.migration.js';
+export * from './component-property-to-child.migration.js';
 export * from './element-selector.migration.js';
 export * from './symbol-renaming.migration.js';
 export * from './symbol-removal.migration.js';
+export * from './provider-function-removal.migration.js';
+export * from './import-removal.js';
 export * from './migration.interface.js';

package/schematics/migrations/utilities/provider-function-removal.migration.js

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import ts from 'typescript';
+import { getImportSpecifiers } from '../../utils/index.js';
+import { removeImportSpecifiers } from './import-removal.js';
+export const applyProviderFunctionRemovalMigration = (context, changes) => {
+    const { discoveredSourceFile, recorder } = context;
+    if (!changes?.length) {
+        return;
+    }
+    const { sourceFile } = discoveredSourceFile;
+    const edits = [];
+    for (const change of changes) {
+        const importSpecifiers = getImportSpecifiers(sourceFile, change.module, change.names);
+        if (!importSpecifiers.length) {
+            continue;
+        }
+        // Local names as they are used in the file (respecting import aliases).
+        const localNames = new Set(importSpecifiers.map(specifier => specifier.name.text));
+        const removedCall = collectArrayElementRemovals(sourceFile, localNames, edits);
+        // Only remove the import if at least one call was actually removed from a provider array.
+        if (removedCall) {
+            // Group the matched specifiers by their import declaration so a single edit is
+            // produced per declaration, even when multiple names are removed at once.
+            const specifiersByImport = new Map();
+            for (const specifier of importSpecifiers) {
+                const importDeclaration = specifier.parent.parent.parent;
+                if (!ts.isImportDeclaration(importDeclaration)) {
+                    continue;
+                }
+                const existing = specifiersByImport.get(importDeclaration) ?? [];
+                existing.push(specifier);
+                specifiersByImport.set(importDeclaration, existing);
+            }
+            for (const [importDeclaration, specifiers] of specifiersByImport) {
+                edits.push(removeImportSpecifiers(sourceFile, importDeclaration, specifiers));
+            }
+        }
+    }
+    if (!edits.length) {
+        return;
+    }
+    const printer = ts.createPrinter();
+    // Apply edits from bottom to top so earlier offsets stay valid.
+    edits.sort((a, b) => b.start - a.start);
+    for (const edit of edits) {
+        recorder.remove(edit.start, edit.width);
+        if (edit.newNode) {
+            recorder.insertLeft(edit.start, printer.printNode(ts.EmitHint.Unspecified, edit.newNode, sourceFile));
+        }
+    }
+};
+/**
+ * Finds all call expressions of the given local names that appear as direct elements of
+ * an array literal (e.g. a `providers: [...]` array) and records removal edits covering
+ * the call together with its adjacent comma and surrounding whitespace.
+ *
+ * @returns `true` if at least one call was scheduled for removal.
+ */
+const collectArrayElementRemovals = (sourceFile, localNames, edits) => {
+    let removed = false;
+    const visit = (node) => {
+        if (ts.isCallExpression(node) &&
+            ts.isIdentifier(node.expression) &&
+            localNames.has(node.expression.text) &&
+            ts.isArrayLiteralExpression(node.parent)) {
+            edits.push(getArrayElementRemovalRange(sourceFile, node.parent, node));
+            removed = true;
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return removed;
+};
+/**
+ * Computes the removal range for a single element of an array literal so that the
+ * remaining array stays syntactically valid (no dangling commas).
+ */
+const getArrayElementRemovalRange = (sourceFile, array, element) => {
+    const elements = array.elements;
+    const index = elements.indexOf(element);
+    const text = sourceFile.getFullText();
+    const elementStart = element.getStart(sourceFile);
+    const elementEnd = element.getEnd();
+    const isLast = index === elements.length - 1;
+    if (!isLast) {
+        // Remove up to (and including) the comma before the next element, plus the
+        // whitespace that follows it.
+        let end = elementEnd;
+        while (end < text.length && text[end] !== ',') {
+            end++;
+        }
+        // Skip the comma itself.
+        if (text[end] === ',') {
+            end++;
+        }
+        // Skip whitespace before the next element.
+        while (end < text.length && /\s/.test(text[end])) {
+            end++;
+        }
+        return { start: elementStart, width: end - elementStart };
+    }
+    // Last element: also remove the comma and whitespace that precede it, so the previous
+    // element does not end up with a trailing comma.
+    let start = elementStart;
+    let cursor = elementStart - 1;
+    while (cursor >= 0 && /\s/.test(text[cursor])) {
+        cursor--;
+    }
+    if (cursor >= 0 && text[cursor] === ',') {
+        start = cursor;
+    }
+    return { start, width: elementEnd - start };
+};

package/schematics/ng-update/index.js

@@ -2,4 +2,4 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-export { migrateToV49 } from './migrate-to-v49.js';
+export { migrateToV51 } from './migrate-to-v51.js';