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

package/schematics/ng-update/migrate-content-formatter.js

@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { dirname, join } from 'path/posix';
+import ts from 'typescript';
+import { removeImportSpecifiers } from '../migrations/utilities/import-removal.js';
+import { applyImport, discoverSourceFiles, findElement, getImportSpecifiers } from '../utils/index.js';
+const MESSAGE_SELECTORS = new Set(['si-ai-message', 'si-user-message']);
+export const contentFormatterMigrationRule = (options) => {
+    return async (tree, context) => {
+        const processedTemplates = new Set();
+        for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
+            const { path: filePath, sourceFile } = discoveredSourceFile;
+            const recorder = tree.beginUpdate(filePath);
+            let sourceChanged = false;
+            for (const component of findComponents(sourceFile)) {
+                const rendererNames = getMarkdownRendererNames(component.declaration);
+                if (!rendererNames.size) {
+                    continue;
+                }
+                const migrationResult = createMigrationResult();
+                const template = getInlineTemplate(component.metadata);
+                if (template) {
+                    const templateText = sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1);
+                    mergeMigrationResult(migrationResult, migrateContentFormatter(templateText, template.getStart() + 1, recorder, rendererNames));
+                }
+                for (const templateUrl of getTemplateUrls(component.metadata)) {
+                    const templatePath = join(dirname(filePath), templateUrl);
+                    if (processedTemplates.has(templatePath) || !tree.exists(templatePath)) {
+                        continue;
+                    }
+                    processedTemplates.add(templatePath);
+                    const templateContent = tree.read(templatePath).toString('utf-8');
+                    const templateRecorder = tree.beginUpdate(templatePath);
+                    const templateResult = migrateContentFormatter(templateContent, 0, templateRecorder, rendererNames);
+                    tree.commitUpdate(templateRecorder);
+                    mergeMigrationResult(migrationResult, templateResult);
+                }
+                if (migrationResult.migratedRendererNames.size > 0) {
+                    const removedRendererProperties = removeUnusedRendererProperties(component.declaration, migrationResult, recorder);
+                    removeUnusedMarkdownRendererImports(sourceFile, removedRendererProperties, recorder);
+                    removeUnusedDomSanitizerImports(sourceFile, removedRendererProperties, recorder);
+                    addMarkdownToComponentImports(component.metadata, recorder);
+                    sourceChanged = true;
+                }
+            }
+            if (sourceChanged) {
+                const importChange = applyImport(sourceFile, 'SiMarkdownComponent', '@siemens/element-ng/markdown');
+                if (importChange) {
+                    recorder.insertLeft(importChange.start, importChange.replacement);
+                }
+            }
+            tree.commitUpdate(recorder);
+        }
+        return tree;
+    };
+};
+const findComponents = (sourceFile) => {
+    const components = [];
+    sourceFile.forEachChild(node => {
+        if (!ts.isClassDeclaration(node)) {
+            return;
+        }
+        const decorator = ts.getDecorators(node)?.find(candidate => {
+            const expression = candidate.expression;
+            return (ts.isCallExpression(expression) &&
+                ts.isIdentifier(expression.expression) &&
+                expression.expression.text === 'Component');
+        });
+        const expression = decorator?.expression;
+        const metadata = expression &&
+            ts.isCallExpression(expression) &&
+            ts.isObjectLiteralExpression(expression.arguments[0])
+            ? expression.arguments[0]
+            : undefined;
+        if (metadata) {
+            components.push({ declaration: node, metadata });
+        }
+    });
+    return components;
+};
+const getMarkdownRendererNames = (component) => {
+    const names = new Set();
+    for (const member of component.members) {
+        if (ts.isPropertyDeclaration(member) &&
+            ts.isIdentifier(member.name) &&
+            member.initializer &&
+            ts.isCallExpression(member.initializer) &&
+            ts.isIdentifier(member.initializer.expression) &&
+            member.initializer.expression.text === 'getMarkdownRenderer') {
+            names.add(member.name.text);
+        }
+    }
+    return names;
+};
+const getInlineTemplate = (metadata) => {
+    const template = metadata.properties.find(property => {
+        return (ts.isPropertyAssignment(property) &&
+            ts.isIdentifier(property.name) &&
+            property.name.text === 'template');
+    });
+    if (template &&
+        ts.isPropertyAssignment(template) &&
+        (ts.isNoSubstitutionTemplateLiteral(template.initializer) ||
+            ts.isStringLiteral(template.initializer))) {
+        return template.initializer;
+    }
+    return undefined;
+};
+const getTemplateUrls = (metadata) => {
+    return metadata.properties.flatMap(property => {
+        if (ts.isPropertyAssignment(property) &&
+            ts.isIdentifier(property.name) &&
+            property.name.text === 'templateUrl' &&
+            ts.isStringLiteral(property.initializer)) {
+            return property.initializer.text;
+        }
+        return [];
+    });
+};
+const migrateContentFormatter = (template, offset, recorder, rendererNames) => {
+    const result = createMigrationResult();
+    findElement(template, () => true).forEach(element => {
+        const formatter = element.attrs.find(attribute => attribute.name === '[contentFormatter]');
+        const formatterName = formatter?.value.trim();
+        if (!formatterName || !rendererNames.has(formatterName)) {
+            return;
+        }
+        const content = element.attrs.find(attribute => {
+            return attribute.name === 'content' || attribute.name === '[content]';
+        });
+        if (!MESSAGE_SELECTORS.has(element.name) ||
+            !content ||
+            !formatter ||
+            !hasOnlyWhitespaceContent(element, template)) {
+            result.retainedRendererNames.add(formatterName);
+            return;
+        }
+        const markdownAttribute = content.name === '[content]' ? '[markdown]' : 'markdown';
+        const openingTag = removeAttributes(element, [content, formatter]);
+        const replacement = `${openingTag}<si-markdown ${markdownAttribute}="${content.value}" /></${element.name}>`;
+        const start = element.sourceSpan.start.offset + offset;
+        const length = element.sourceSpan.end.offset - element.sourceSpan.start.offset;
+        recorder.remove(start, length);
+        recorder.insertLeft(start, replacement);
+        result.migratedRendererNames.add(formatterName);
+    });
+    return result;
+};
+const createMigrationResult = () => ({
+    migratedRendererNames: new Set(),
+    retainedRendererNames: new Set()
+});
+const mergeMigrationResult = (target, source) => {
+    source.migratedRendererNames.forEach(name => target.migratedRendererNames.add(name));
+    source.retainedRendererNames.forEach(name => target.retainedRendererNames.add(name));
+};
+const removeUnusedRendererProperties = (component, migrationResult, recorder) => {
+    const removedProperties = [];
+    for (const property of component.members) {
+        if (!ts.isPropertyDeclaration(property) ||
+            !ts.isIdentifier(property.name) ||
+            !migrationResult.migratedRendererNames.has(property.name.text) ||
+            migrationResult.retainedRendererNames.has(property.name.text) ||
+            hasReferenceOutsideProperty(component, property.name.text, property)) {
+            continue;
+        }
+        recorder.remove(property.getFullStart(), property.getEnd() - property.getFullStart());
+        removedProperties.push(property);
+    }
+    return removedProperties;
+};
+const hasReferenceOutsideProperty = (component, name, excludedProperty) => {
+    let referenced = false;
+    const visit = (node) => {
+        if (node === excludedProperty || referenced) {
+            return;
+        }
+        if (ts.isIdentifier(node) && node.text === name) {
+            referenced = true;
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    component.forEachChild(visit);
+    return referenced;
+};
+const removeUnusedMarkdownRendererImports = (sourceFile, removedProperties, recorder) => {
+    const getMarkdownRendererImports = getImportSpecifiers(sourceFile, '@siemens/element-ng/markdown-renderer', 'getMarkdownRenderer');
+    if (getMarkdownRendererImports.length &&
+        !hasIdentifierReferenceOutsideNodes(sourceFile, getMarkdownRendererImports.map(specifier => specifier.name.text), removedProperties)) {
+        removeImports(sourceFile, getMarkdownRendererImports, recorder);
+    }
+};
+const removeUnusedDomSanitizerImports = (sourceFile, removedProperties, recorder) => {
+    const domSanitizerImports = getImportSpecifiers(sourceFile, '@angular/platform-browser', 'DomSanitizer');
+    if (domSanitizerImports.length &&
+        !hasIdentifierReferenceOutsideNodes(sourceFile, domSanitizerImports.map(specifier => specifier.name.text), removedProperties)) {
+        removeImports(sourceFile, domSanitizerImports, recorder);
+    }
+};
+const hasIdentifierReferenceOutsideNodes = (sourceFile, names, excludedNodes) => {
+    let referenced = false;
+    const namesToFind = new Set(names);
+    const visit = (node) => {
+        if (excludedNodes.some(excludedNode => node === excludedNode) || referenced) {
+            return;
+        }
+        if (ts.isIdentifier(node) && namesToFind.has(node.text) && !ts.isImportSpecifier(node.parent)) {
+            referenced = true;
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    sourceFile.forEachChild(visit);
+    return referenced;
+};
+const removeImports = (sourceFile, specifiers, recorder) => {
+    const specifiersByImport = new Map();
+    for (const specifier of specifiers) {
+        const importDeclaration = specifier.parent.parent.parent;
+        if (!ts.isImportDeclaration(importDeclaration)) {
+            continue;
+        }
+        const matchingSpecifiers = specifiersByImport.get(importDeclaration) ?? [];
+        matchingSpecifiers.push(specifier);
+        specifiersByImport.set(importDeclaration, matchingSpecifiers);
+    }
+    const printer = ts.createPrinter();
+    for (const [importDeclaration, importedSpecifiers] of specifiersByImport) {
+        const edit = removeImportSpecifiers(sourceFile, importDeclaration, importedSpecifiers);
+        recorder.remove(edit.start, edit.width);
+        if (edit.newNode) {
+            recorder.insertLeft(edit.start, printer.printNode(ts.EmitHint.Unspecified, edit.newNode, sourceFile));
+        }
+    }
+};
+const hasOnlyWhitespaceContent = (element, template) => {
+    const openingTag = element.startSourceSpan.toString();
+    if (openingTag.trimEnd().endsWith('/>')) {
+        return true;
+    }
+    if (!element.endSourceSpan) {
+        return false;
+    }
+    return (template
+        .substring(element.startSourceSpan.end.offset, element.endSourceSpan.start.offset)
+        .trim().length === 0);
+};
+const removeAttributes = (element, attributes) => {
+    const elementStart = element.startSourceSpan.start.offset;
+    let openingTag = element.startSourceSpan.toString();
+    const ranges = attributes
+        .map(attribute => ({
+        start: attribute.sourceSpan.start.offset - elementStart,
+        end: attribute.sourceSpan.end.offset - elementStart
+    }))
+        .sort((first, second) => second.start - first.start);
+    for (const range of ranges) {
+        let start = range.start;
+        while (start > 0 && /\s/.test(openingTag[start - 1])) {
+            start--;
+        }
+        openingTag = openingTag.slice(0, start) + openingTag.slice(range.end);
+    }
+    return openingTag.replace(/\s*\/>\s*$/, '>');
+};
+const addMarkdownToComponentImports = (metadata, recorder) => {
+    const imports = metadata.properties.find(property => {
+        return (ts.isPropertyAssignment(property) &&
+            ts.isIdentifier(property.name) &&
+            property.name.text === 'imports' &&
+            ts.isArrayLiteralExpression(property.initializer));
+    });
+    if (imports &&
+        ts.isPropertyAssignment(imports) &&
+        ts.isArrayLiteralExpression(imports.initializer)) {
+        const importNames = imports.initializer.elements;
+        if (importNames.some(element => ts.isIdentifier(element) && element.text === 'SiMarkdownComponent')) {
+            return;
+        }
+        recorder.insertLeft(imports.initializer.end - 1, `${importNames.length ? ', ' : ''}SiMarkdownComponent`);
+        return;
+    }
+    const lastProperty = metadata.properties.at(-1);
+    recorder.insertLeft(lastProperty ? lastProperty.end : metadata.getStart() + 1, `${lastProperty ? ',' : ''}\n  imports: [SiMarkdownComponent]`);
+};

package/schematics/ng-update/migrate-list-details-units.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { dirname, join } from 'path/posix';
+import ts from 'typescript';
+import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl, insertAttribute } from '../utils/index.js';
+const disableResizingAttributeNames = [
+    'disableResizing',
+    '[disableResizing]',
+    'bind-disableResizing'
+];
+const listWidthUnitAttributeNames = ['listWidthUnit', '[listWidthUnit]', 'bind-listWidthUnit'];
+export const listDetailsUnitsMigrationRule = (options) => {
+    return async (tree, context) => {
+        const processedTemplates = new Set();
+        for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
+            const { path: filePath, sourceFile } = discoveredSourceFile;
+            const recorder = tree.beginUpdate(filePath);
+            for (const template of getInlineTemplates(sourceFile)) {
+                migrateListDetailsUnitsTemplate(sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1), template.getStart() + 1, recorder);
+            }
+            tree.commitUpdate(recorder);
+            for (const templateUrl of getTemplateUrl(sourceFile)) {
+                const templatePath = join(dirname(filePath), templateUrl);
+                if (processedTemplates.has(templatePath) || !tree.exists(templatePath)) {
+                    continue;
+                }
+                processedTemplates.add(templatePath);
+                const templateRecorder = tree.beginUpdate(templatePath);
+                migrateListDetailsUnitsTemplate(tree.read(templatePath).toString('utf-8'), 0, templateRecorder);
+                tree.commitUpdate(templateRecorder);
+            }
+        }
+        return tree;
+    };
+};
+const migrateListDetailsUnitsTemplate = (template, offset, recorder) => {
+    findElement(template, element => element.name === 'si-list-details').forEach(element => {
+        migrateListDetailsElement(template, element, offset, recorder);
+    });
+};
+const migrateListDetailsElement = (template, element, offset, recorder) => {
+    const disableResizingAttribute = element.attrs.find(attr => disableResizingAttributeNames.includes(attr.name));
+    const isExplicitlyDisabled = disableResizingAttribute && getStaticBooleanValue(disableResizingAttribute) === true;
+    if (isExplicitlyDisabled) {
+        return;
+    }
+    const hasListWidthUnit = element.attrs.some(attr => listWidthUnitAttributeNames.includes(attr.name));
+    if (hasListWidthUnit) {
+        return;
+    }
+    insertAttribute(template, element, 'listWidthUnit="fr"', offset, recorder);
+};
+const getStaticBooleanValue = (attribute) => {
+    if (!attribute.name.startsWith('[')) {
+        if (/^\s*{{[\s\S]*}}\s*$/.test(attribute.value)) {
+            return undefined;
+        }
+        return attribute.value !== 'false';
+    }
+    const initializer = getExpression(attribute.value);
+    if (!initializer) {
+        return undefined;
+    }
+    if (initializer.kind === ts.SyntaxKind.TrueKeyword) {
+        return true;
+    }
+    if (initializer.kind === ts.SyntaxKind.FalseKeyword ||
+        initializer.kind === ts.SyntaxKind.NullKeyword ||
+        (ts.isIdentifier(initializer) && initializer.text === 'undefined') ||
+        (ts.isStringLiteral(initializer) && initializer.text === 'false')) {
+        return false;
+    }
+    if (ts.isStringLiteral(initializer) || ts.isNumericLiteral(initializer)) {
+        return true;
+    }
+    return undefined;
+};
+const getExpression = (value) => {
+    const statement = ts.createSourceFile('template-expression.ts', `const value = ${value};`, ts.ScriptTarget.Latest, true).statements[0];
+    if (!statement || !ts.isVariableStatement(statement)) {
+        return undefined;
+    }
+    return statement.declarationList.declarations[0]?.initializer;
+};

package/schematics/ng-update/migrate-main-detail-units.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { dirname, join } from 'path/posix';
+import ts from 'typescript';
+import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl, insertAttribute } from '../utils/index.js';
+const resizableAttributeNames = ['resizableParts', '[resizableParts]', 'bind-resizableParts'];
+const mainUnitAttributeNames = [
+    'mainContainerWidthUnit',
+    '[mainContainerWidthUnit]',
+    'bind-mainContainerWidthUnit'
+];
+export const mainDetailUnitsMigrationRule = (options) => {
+    return async (tree, context) => {
+        const processedTemplates = new Set();
+        for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
+            const { path: filePath, sourceFile } = discoveredSourceFile;
+            const recorder = tree.beginUpdate(filePath);
+            for (const template of getInlineTemplates(sourceFile)) {
+                migrateMainDetailUnitsTemplate(sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1), template.getStart() + 1, recorder);
+            }
+            tree.commitUpdate(recorder);
+            for (const templateUrl of getTemplateUrl(sourceFile)) {
+                const templatePath = join(dirname(filePath), templateUrl);
+                if (processedTemplates.has(templatePath) || !tree.exists(templatePath)) {
+                    continue;
+                }
+                processedTemplates.add(templatePath);
+                const templateRecorder = tree.beginUpdate(templatePath);
+                migrateMainDetailUnitsTemplate(tree.read(templatePath).toString('utf-8'), 0, templateRecorder);
+                tree.commitUpdate(templateRecorder);
+            }
+        }
+        return tree;
+    };
+};
+const migrateMainDetailUnitsTemplate = (template, offset, recorder) => {
+    findElement(template, element => element.name === 'si-main-detail-container').forEach(element => {
+        migrateMainDetailContainerElement(template, element, offset, recorder);
+    });
+};
+const migrateMainDetailContainerElement = (template, element, offset, recorder) => {
+    const resizableAttribute = element.attrs.find(attr => resizableAttributeNames.includes(attr.name));
+    if (!resizableAttribute) {
+        return;
+    }
+    const isExplicitlyDisabled = getStaticBooleanValue(resizableAttribute) === false;
+    if (isExplicitlyDisabled) {
+        return;
+    }
+    const hasMainUnit = element.attrs.some(attr => mainUnitAttributeNames.includes(attr.name));
+    if (hasMainUnit) {
+        return;
+    }
+    insertAttribute(template, element, 'mainContainerWidthUnit="fr"', offset, recorder);
+};
+const getStaticBooleanValue = (attribute) => {
+    if (!attribute.name.startsWith('[')) {
+        if (/^\s*{{[\s\S]*}}\s*$/.test(attribute.value)) {
+            return undefined;
+        }
+        return attribute.value !== 'false';
+    }
+    const initializer = getExpression(attribute.value);
+    if (!initializer) {
+        return undefined;
+    }
+    if (initializer.kind === ts.SyntaxKind.TrueKeyword) {
+        return true;
+    }
+    if (initializer.kind === ts.SyntaxKind.FalseKeyword ||
+        initializer.kind === ts.SyntaxKind.NullKeyword ||
+        (ts.isIdentifier(initializer) && initializer.text === 'undefined') ||
+        (ts.isStringLiteral(initializer) && initializer.text === 'false')) {
+        return false;
+    }
+    if (ts.isStringLiteral(initializer) || ts.isNumericLiteral(initializer)) {
+        return true;
+    }
+    return undefined;
+};
+const getExpression = (value) => {
+    const statement = ts.createSourceFile('template-expression.ts', `const value = ${value};`, ts.ScriptTarget.Latest, true).statements[0];
+    if (!statement || !ts.isVariableStatement(statement)) {
+        return undefined;
+    }
+    return statement.declarationList.declarations[0]?.initializer;
+};

package/schematics/ng-update/migrate-markdown-renderer.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { dirname, join } from 'path/posix';
+import ts from 'typescript';
+import { removeImportSpecifiers } from '../migrations/utilities/import-removal.js';
+import { applyImport, discoverSourceFiles, findElement, getImportSpecifiers, getInlineTemplates, getTemplateUrl } from '../utils/index.js';
+const LEGACY_COMPONENT = 'SiMarkdownRendererComponent';
+const MARKDOWN_COMPONENT = 'SiMarkdownComponent';
+const LEGACY_IMPORT = '@siemens/element-ng/markdown-renderer';
+const MARKDOWN_IMPORT = '@siemens/element-ng/markdown';
+export const markdownRendererMigrationRule = (options) => {
+    return async (tree, context) => {
+        const processedTemplates = new Set();
+        for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
+            const { path: filePath, sourceFile } = discoveredSourceFile;
+            const legacyImports = getImportSpecifiers(sourceFile, LEGACY_IMPORT, LEGACY_COMPONENT);
+            if (!legacyImports.length) {
+                continue;
+            }
+            const recorder = tree.beginUpdate(filePath);
+            migrateInlineTemplates(sourceFile, recorder);
+            migrateExternalTemplates(tree, sourceFile, filePath, processedTemplates);
+            migrateComponentReferences(sourceFile, legacyImports, recorder);
+            removeLegacyImports(sourceFile, legacyImports, recorder);
+            const importChange = applyImport(sourceFile, MARKDOWN_COMPONENT, MARKDOWN_IMPORT);
+            if (importChange) {
+                recorder.insertLeft(importChange.start, importChange.replacement);
+            }
+            tree.commitUpdate(recorder);
+        }
+        return tree;
+    };
+};
+const migrateInlineTemplates = (sourceFile, recorder) => {
+    for (const template of getInlineTemplates(sourceFile)) {
+        migrateTemplate(sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1), template.getStart() + 1, recorder);
+    }
+};
+const migrateExternalTemplates = (tree, sourceFile, filePath, processedTemplates) => {
+    for (const templateUrl of getTemplateUrl(sourceFile)) {
+        const templatePath = join(dirname(filePath), templateUrl);
+        if (processedTemplates.has(templatePath)) {
+            continue;
+        }
+        const templateBuffer = tree.read(templatePath);
+        if (!templateBuffer) {
+            continue;
+        }
+        processedTemplates.add(templatePath);
+        const recorder = tree.beginUpdate(templatePath);
+        migrateTemplate(templateBuffer.toString('utf-8'), 0, recorder);
+        tree.commitUpdate(recorder);
+    }
+};
+const migrateTemplate = (template, offset, recorder) => {
+    findElement(template, element => element.name === 'si-markdown-renderer').forEach(element => {
+        recorder.remove(element.startSourceSpan.start.offset + offset + 1, 'si-markdown-renderer'.length);
+        recorder.insertLeft(element.startSourceSpan.start.offset + offset + 1, 'si-markdown');
+        if (element.endSourceSpan && element.startSourceSpan.start !== element.endSourceSpan.start) {
+            recorder.remove(element.endSourceSpan.start.offset + offset + 2, 'si-markdown-renderer'.length);
+            recorder.insertLeft(element.endSourceSpan.start.offset + offset + 2, 'si-markdown');
+        }
+        element.attrs
+            .filter(attribute => attribute.name === 'text' || attribute.name === '[text]')
+            .forEach(attribute => {
+            const replacement = attribute.name === 'text' ? 'markdown' : '[markdown]';
+            recorder.remove(attribute.sourceSpan.start.offset + offset, attribute.name.length);
+            recorder.insertLeft(attribute.sourceSpan.start.offset + offset, replacement);
+        });
+    });
+};
+const migrateComponentReferences = (sourceFile, legacyImports, recorder) => {
+    const legacyNames = new Set(legacyImports.map(importSpecifier => importSpecifier.name.text));
+    const visit = (node) => {
+        if (ts.isIdentifier(node) && legacyNames.has(node.text)) {
+            recorder.remove(node.getStart(sourceFile), node.getWidth(sourceFile));
+            recorder.insertLeft(node.getStart(sourceFile), MARKDOWN_COMPONENT);
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    sourceFile.statements
+        .filter(statement => !ts.isImportDeclaration(statement))
+        .forEach(statement => visit(statement));
+};
+const removeLegacyImports = (sourceFile, legacyImports, recorder) => {
+    const importsByDeclaration = new Map();
+    legacyImports.forEach(importSpecifier => {
+        const importDeclaration = importSpecifier.parent.parent.parent;
+        if (!ts.isImportDeclaration(importDeclaration)) {
+            return;
+        }
+        const specifiers = importsByDeclaration.get(importDeclaration) ?? [];
+        specifiers.push(importSpecifier);
+        importsByDeclaration.set(importDeclaration, specifiers);
+    });
+    importsByDeclaration.forEach((specifiers, importDeclaration) => {
+        const edit = removeImportSpecifiers(sourceFile, importDeclaration, specifiers);
+        recorder.remove(edit.start, edit.width);
+        if (edit.newNode) {
+            recorder.insertLeft(edit.start, ts.createPrinter().printNode(ts.EmitHint.Unspecified, edit.newNode, sourceFile));
+        }
+    });
+};

package/schematics/ng-update/migrate-spacers.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const SOURCE_EXTENSIONS = ['.css', '.html', '.less', '.sass', '.scss', '.ts'];
+const SPACER_REPLACEMENTS = {
+    '10': '13',
+    '11': '14'
+};
+export const spacerMigrationRule = (options) => {
+    return (tree) => {
+        const normalizedProjectPath = `/${options.path.replace(/^\/+|\/+$/g, '')}`;
+        tree.visit(filePath => {
+            if (!isWithinProject(filePath, normalizedProjectPath) ||
+                filePath.includes('/node_modules/') ||
+                !SOURCE_EXTENSIONS.some(extension => filePath.endsWith(extension))) {
+                return;
+            }
+            const content = tree.readText(filePath);
+            const updatedContent = replaceSpacers(content);
+            if (updatedContent !== content) {
+                tree.overwrite(filePath, updatedContent);
+            }
+        });
+        return tree;
+    };
+};
+const isWithinProject = (filePath, projectPath) => projectPath === '/' || filePath === projectPath || filePath.startsWith(`${projectPath}/`);
+const replaceSpacers = (content) => {
+    const withUpdatedHelpers = content.replace(/(?<![\w-])([mp](?:[tbsexy])?-(?:(?:sm|md|lg|xl|xxl)-)?n?)(10|11)\b/g, (_match, prefix, spacer) => `${prefix}${SPACER_REPLACEMENTS[spacer]}`);
+    return withUpdatedHelpers.replace(/((?:map\.(?:get|has-key)|map-get)\(\s*[^,)]*\$spacers(?:-(?:inline|block))?\s*,\s*)(10|11)(?=\s*\))/g, (_match, prefix, spacer) => `${prefix}${SPACER_REPLACEMENTS[spacer]}`);
+};