@siemens/element-ng 48.4.0 → 48.5.0

package/schematics/ts-import-to-siemens-migration/index.js

@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 import { chain } from '@angular-devkit/schematics';
+import { getDecoratorMetadata, getMetadataField } from '@schematics/angular/utility/ast-utils';
+import * as ts from 'typescript';
 import { getImportNodes, getSymbols, discoverSourceFiles } from '../utils/index.js';
-import { CHARTS_NG_MAPPINGS, DASHBOARDS_NG_MAPPINGS, ELEMENT_NG_MAPPINGS, ELEMENT_TRANSLATE_NG_MAPPINGS, MAPS_NG_MAPPINGS } from './mappings/index.js';
+import { CHARTS_NG_MAPPINGS, DASHBOARDS_NG_MAPPINGS, ELEMENT_NG_MAPPINGS, ELEMENT_TRANSLATE_NG_MAPPINGS, MAPS_NG_MAPPINGS, NATIVE_CHARTS_NG_MAPPINGS, SIMPL_ELEMENT_NG_MODULES } from './mappings/index.js';
 export const tsImportMigration = (_options) => {
     return (tree, context) => {
         context.logger.info('🚀 Starting Simpl to Siemens migration...');
@@ -33,8 +35,10 @@ export const tsImportMigrationRule = (_options) => {
         const sourceFiles = await discoverSourceFiles(tree, context, _options.path);
         for (const filePath of sourceFiles) {
             const migrations = collectMigrationImports(filePath, tree, context);
-            const { imports, toRemoveImports } = migrations;
-            if (imports.size === 0 && toRemoveImports.length === 0) {
+            const { imports, toRemoveImports, hasSimplElementNgModuleImport } = migrations;
+            if (imports.size === 0 &&
+                toRemoveImports.length === 0 &&
+                hasSimplElementNgModuleImport === false) {
                 continue;
             }
             const rule = rewriteImportsInFile(filePath, migrations);
@@ -43,57 +47,155 @@ export const tsImportMigrationRule = (_options) => {
         return chain([...rules]);
     };
 };
+/**
+ * Adds a symbol to the imports map, avoiding duplicates
+ */
+const addSymbolToImports = (imports, importPath, symbolName) => {
+    const existingSymbols = imports.get(importPath);
+    if (!existingSymbols) {
+        imports.set(importPath, [symbolName]);
+    }
+    else if (!existingSymbols.includes(symbolName)) {
+        existingSymbols.push(symbolName);
+    }
+};
 const collectMigrationImports = (filePath, tree, _context) => {
     const content = tree.read(filePath);
     const imports = new Map();
+    let hasSimplElementNgModuleImport = false;
     if (!content) {
-        return { imports, toRemoveImports: [] };
+        return {
+            imports,
+            toRemoveImports: [],
+            hasSimplElementNgModuleImport
+        };
     }
     const simplImports = getImportNodes(filePath, content.toString(), '@simpl/');
     const toRemoveImports = [];
     for (const node of simplImports) {
         const symbols = getSymbols(node);
         const importPath = node.moduleSpecifier.getText().replace(/['"]/g, '');
-        let toRemove = false;
+        let shouldRemoveImport = false;
         for (const symbol of symbols) {
             const symbolName = symbol.name.getText();
-            const newImportPath = findComponentImportPath(symbolName, importPath);
-            if (!newImportPath) {
-                continue;
-            }
-            toRemove = true;
-            const migration = imports.get(newImportPath);
-            if (!migration) {
-                imports.set(newImportPath, [symbolName]);
+            if (symbolName === 'SimplElementNgModule') {
+                hasSimplElementNgModuleImport = true;
+                for (const moduleName of SIMPL_ELEMENT_NG_MODULES) {
+                    const newImportPath = findComponentImportPath(moduleName, '@simpl/element-ng');
+                    if (!newImportPath) {
+                        continue;
+                    }
+                    shouldRemoveImport = true;
+                    addSymbolToImports(imports, newImportPath, moduleName);
+                }
             }
             else {
-                migration.push(symbolName);
+                const newImportPath = findComponentImportPath(symbolName, importPath);
+                if (!newImportPath) {
+                    continue;
+                }
+                shouldRemoveImport = true;
+                addSymbolToImports(imports, newImportPath, symbolName);
             }
         }
-        if (toRemove) {
+        if (shouldRemoveImport) {
             toRemoveImports.push(node);
         }
     }
-    return { imports, toRemoveImports };
+    return { imports, toRemoveImports, hasSimplElementNgModuleImport };
 };
 const rewriteImportsInFile = (filePath, migrations) => {
     return (tree) => {
         const recorder = tree.beginUpdate(filePath);
-        const start = migrations.toRemoveImports.at(0)?.getFullStart() ?? 0;
-        // Remove old imports
-        for (const importDecl of migrations.toRemoveImports) {
-            recorder.remove(importDecl.getFullStart(), importDecl.getFullWidth());
+        const insertPosition = migrations.toRemoveImports.at(0)?.getFullStart() ?? 0;
+        const content = tree.read(filePath);
+        if (!content) {
+            return tree;
         }
+        const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
+        // Remove old imports
+        removeOldImports(recorder, migrations.toRemoveImports);
         // Add new imports
-        const importPaths = Array.from(migrations.imports.keys()).sort((a, b) => a.localeCompare(b));
-        for (const path of importPaths) {
-            const symbols = migrations.imports.get(path);
-            recorder.insertLeft(start, `\nimport { ${symbols.sort((a, b) => a.localeCompare(b)).join(', ')} } from '${path}';`);
+        addNewImports(recorder, migrations.imports, insertPosition, sourceFile);
+        // Update NgModule/Component imports array if needed
+        if (migrations.hasSimplElementNgModuleImport) {
+            updateDecoratorImports(recorder, sourceFile);
         }
         tree.commitUpdate(recorder);
         return tree;
     };
 };
+const updateDecoratorImports = (recorder, sourceFile) => {
+    const decoratorNames = ['NgModule', 'Component'];
+    let decoratorNode;
+    // Try to find NgModule or Component decorator
+    for (const decoratorName of decoratorNames) {
+        const nodes = getDecoratorMetadata(sourceFile, decoratorName, '@angular/core');
+        if (nodes.length > 0) {
+            decoratorNode = nodes[0];
+            break;
+        }
+    }
+    if (!decoratorNode || !ts.isObjectLiteralExpression(decoratorNode)) {
+        return;
+    }
+    const matchingProperties = getMetadataField(decoratorNode, 'imports');
+    const importsAssignment = matchingProperties[0];
+    if (!ts.isPropertyAssignment(importsAssignment) ||
+        !ts.isArrayLiteralExpression(importsAssignment.initializer)) {
+        return;
+    }
+    const elements = importsAssignment.initializer.elements;
+    // Filter out SimplElementNgModule and get existing modules
+    const existingModules = elements
+        .filter(e => e.getText() !== 'SimplElementNgModule')
+        .map(e => e.getText());
+    const existingModulesSet = new Set(existingModules);
+    // Only add modules that don't already exist
+    const newModulesToAdd = SIMPL_ELEMENT_NG_MODULES.filter(m => !existingModulesSet.has(m));
+    // Combine existing (without SimplElementNgModule) + new modules
+    const allModules = [...existingModules, ...newModulesToAdd];
+    // Remove existing imports array
+    recorder.remove(importsAssignment.getFullStart(), importsAssignment.getFullWidth());
+    // Create and insert the updated property assignment
+    const printer = ts.createPrinter();
+    const newNode = ts.factory.createArrayLiteralExpression(allModules.map(m => ts.factory.createIdentifier(m)), true);
+    const newProperty = ts.factory.updatePropertyAssignment(importsAssignment, importsAssignment.name, newNode);
+    const propertyText = printer.printNode(ts.EmitHint.Unspecified, newProperty, sourceFile);
+    // Had to add extra indentation to align properly
+    recorder.insertLeft(importsAssignment.getStart(), `\n  ` + propertyText);
+};
+/**
+ * Removes old import declarations from the file
+ */
+const removeOldImports = (recorder, toRemoveImports) => {
+    for (const importDecl of toRemoveImports) {
+        recorder.remove(importDecl.getFullStart(), importDecl.getFullWidth());
+    }
+};
+/**
+ * Adds new import declarations to the file
+ */
+const addNewImports = (recorder, imports, insertPosition, sourceFile) => {
+    const sortedImportPaths = Array.from(imports.keys()).sort((a, b) => a.localeCompare(b));
+    const printer = ts.createPrinter();
+    let counter = 0;
+    for (const path of sortedImportPaths) {
+        const symbols = imports.get(path);
+        const sortedSymbols = symbols.sort((a, b) => a.localeCompare(b));
+        const importDeclaration = createImportDeclaration(path, sortedSymbols);
+        const importStatement = printer.printNode(ts.EmitHint.Unspecified, importDeclaration, sourceFile);
+        const prefix = insertPosition === 0 && counter === 0 ? '' : '\n';
+        recorder.insertLeft(insertPosition, `${prefix}${importStatement}`);
+        counter++;
+    }
+};
+/**
+ * Creates import declarations using TypeScript AST
+ */
+const createImportDeclaration = (importPath, symbols) => {
+    return ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports(symbols.map(symbol => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(symbol))))), ts.factory.createStringLiteral(importPath, true));
+};
 const findComponentImportPath = (symbolName, moduleSpecifier) => {
     const [, project, subPath] = moduleSpecifier.split('/');
     switch (project) {
@@ -102,7 +204,8 @@ const findComponentImportPath = (symbolName, moduleSpecifier) => {
             if (symbolName === 'MenuItem' && subPath === 'menu') {
                 return '@siemens/element-ng/menu';
             }
-            return ELEMENT_NG_MAPPINGS[symbolName];
+            // Added the OR condition to check in ELEMENT_TRANSLATE_NG_MAPPINGS as well because translation are also part of `@simpl/element-ng` imports
+            return ELEMENT_NG_MAPPINGS[symbolName] || ELEMENT_TRANSLATE_NG_MAPPINGS[symbolName];
         }
         case 'maps-ng':
             return MAPS_NG_MAPPINGS[symbolName];
@@ -110,6 +213,8 @@ const findComponentImportPath = (symbolName, moduleSpecifier) => {
             return DASHBOARDS_NG_MAPPINGS[symbolName];
         case 'charts-ng':
             return CHARTS_NG_MAPPINGS[symbolName];
+        case 'native-charts-ng':
+            return NATIVE_CHARTS_NG_MAPPINGS[symbolName];
         case 'element-translate-ng':
             return ELEMENT_TRANSLATE_NG_MAPPINGS[symbolName];
         default:

package/schematics/ts-import-to-siemens-migration/mappings/charts-ng-mappings.js

@@ -66,5 +66,6 @@ export const CHARTS_NG_MAPPINGS = {
     'themeElement': '@siemens/charts-ng',
     'themeSupport': '@siemens/charts-ng',
     'XAxisPosition': '@siemens/charts-ng',
-    'YAxisPosition': '@siemens/charts-ng'
+    'YAxisPosition': '@siemens/charts-ng',
+    'SimplChartsNgModule': '@siemens/charts-ng'
 };

package/schematics/ts-import-to-siemens-migration/mappings/dashboards-ng-mappings.js

@@ -48,5 +48,7 @@ export const DASHBOARDS_NG_MAPPINGS = {
     'WidgetInstanceEditor': '@siemens/dashboards-ng',
     'WidgetInstanceEditorWizard': '@siemens/dashboards-ng',
     'WidgetInstanceEditorWizardState': '@siemens/dashboards-ng',
-    'WidgetPositionConfig': '@siemens/dashboards-ng'
+    'WidgetPositionConfig': '@siemens/dashboards-ng',
+    'SimplDashboardsNgModule': '@siemens/dashboards-ng',
+    'SiWidgetStorage': '@siemens/dashboards-ng'
 };

package/schematics/ts-import-to-siemens-migration/mappings/element-ng-mappings.js

@@ -473,6 +473,7 @@ export const ELEMENT_NG_MAPPINGS = {
     'SiLoadingSpinnerModule': '@siemens/element-ng/loading-spinner',
     'SiLocaleConfig': '@siemens/element-ng/localization',
     'SiLocaleId': '@siemens/element-ng/localization',
+    'SiLocaleStore': '@siemens/element-ng/localization',
     'SiLocaleService': '@siemens/element-ng/localization',
     'SiLoginBasicComponent': '@siemens/element-ng/landing-page',
     'SiLoginSingleSignOnComponent': '@siemens/element-ng/landing-page',
@@ -649,3 +650,56 @@ export const ELEMENT_NG_MAPPINGS = {
     'WEEK_START_OFFSET': '@siemens/element-ng/datepicker',
     'WeekStart': '@siemens/element-ng/datepicker'
 };
+export const SIMPL_ELEMENT_NG_MODULES = [
+    'SiAboutModule',
+    'SiAccordionModule',
+    'SiBreadcrumbModule',
+    'SiBreadcrumbRouterModule',
+    'SiCardModule',
+    'SiCircleStatusModule',
+    'SiConnectionStrengthModule',
+    'SiContentActionBarModule',
+    'SiCopyrightNoticeModule',
+    'SiDatepickerModule',
+    'SiDateRangeFilterModule',
+    'SiElectrontitlebarModule',
+    'SiEmptyStateModule',
+    'SiFileUploaderModule',
+    'SiFilterBarModule',
+    'SiFilteredSearchModule',
+    'SiFooterModule',
+    'SiFormModule',
+    'SiIconModule',
+    'SiIconStatusModule',
+    'SiInlineNotificationModule',
+    'SiLandingPageModule',
+    'SiLanguageSwitcherModule',
+    'SiLinkModule',
+    'SiLoadingSpinnerModule',
+    'SiMainDetailContainerModule',
+    'SiNavbarModule',
+    'SiNavbarVerticalModule',
+    'SiNumberInputModule',
+    'SiPaginationModule',
+    'SiPasswordStrengthModule',
+    'SiPasswordToggleModule',
+    'SiPillsInputModule',
+    'SiPopoverLegacyModule',
+    'SiProgressbarModule',
+    'SiResizeObserverModule',
+    'SiResultDetailsListModule',
+    'SiSearchBarModule',
+    'SiSelectModule',
+    'SiSidePanelModule',
+    'SiSliderModule',
+    'SiSortBarModule',
+    'SiSplitModule',
+    'SiStatusBarModule',
+    'SiTabsLegacyModule',
+    'SiThresholdModule',
+    'SiTooltipModule',
+    'SiTreeViewModule',
+    'SiTypeaheadModule',
+    'SiUnauthorizedPageModule',
+    'SiWizardModule'
+];

package/schematics/ts-import-to-siemens-migration/mappings/element-translate-ng-mappings.js

@@ -16,6 +16,6 @@ export const ELEMENT_TRANSLATE_NG_MAPPINGS = {
     'SiTranslateNgxTModule': '@siemens/element-translate-ng/ngx-translate',
     'SiTranslatePipe': '@siemens/element-translate-ng/translate',
     't': '@siemens/element-translate-ng/translate',
-    'TranslatableString': '@siemens/element-translate-ng/translate-types',
+    'TranslatableString': '@siemens/element-translate-ng/translate',
     'TranslationResult': '@siemens/element-translate-ng/translate'
 };

package/schematics/ts-import-to-siemens-migration/mappings/index.js

@@ -7,3 +7,4 @@ export * from './dashboards-ng-mappings.js';
 export * from './element-ng-mappings.js';
 export * from './element-translate-ng-mappings.js';
 export * from './maps-ng-mappings.js';
+export * from './native-charts-ng-mappings.js';

package/schematics/ts-import-to-siemens-migration/mappings/maps-ng-mappings.js

@@ -42,5 +42,6 @@ export const MAPS_NG_MAPPINGS = {
     'SiMapPopoverComponent': '@siemens/maps-ng',
     'SiMapsNgModule': '@siemens/maps-ng',
     'SiMapTooltipComponent': '@siemens/maps-ng',
-    'TOOLTIP_FEATURES_TO_DISPLAY': '@siemens/maps-ng'
+    'TOOLTIP_FEATURES_TO_DISPLAY': '@siemens/maps-ng',
+    'SimplMapsNgModule': '@siemens/maps-ng'
 };

package/schematics/ts-import-to-siemens-migration/mappings/native-charts-ng-mappings.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const NATIVE_CHARTS_NG_MAPPINGS = {
+    // Components
+    'SiNChartGaugeComponent': '@siemens/native-charts-ng/gauge',
+    'SiMicrochartBarComponent': '@siemens/native-charts-ng/microchart-bar',
+    'SiMicrochartDonutComponent': '@siemens/native-charts-ng/microchart-donut',
+    'SiMicrochartLineComponent': '@siemens/native-charts-ng/microchart-line',
+    'SiMicrochartProgressComponent': '@siemens/native-charts-ng/microchart-progress',
+    // Module
+    'SiNativeChartsNgModule': '@siemens/native-charts-ng',
+    'SimplNativeChartsNgModule': '@siemens/native-charts-ng',
+    // Interfaces - Gauge
+    'GaugeSeries': '@siemens/native-charts-ng/gauge',
+    'GaugeSegment': '@siemens/native-charts-ng/gauge',
+    // Interfaces - Microchart Bar
+    'MicrochartBarSeries': '@siemens/native-charts-ng/microchart-bar',
+    // Interfaces - Microchart Donut
+    'MicrochartDonutSeries': '@siemens/native-charts-ng/microchart-donut',
+    // Interfaces - Microchart Line
+    'MicrochartLineSeries': '@siemens/native-charts-ng/microchart-line',
+    // Interfaces - Microchart Progress
+    'MicrochartProgressSeries': '@siemens/native-charts-ng/microchart-progress',
+    // Utilities
+    'Coordinate': '@siemens/native-charts-ng/utils',
+    'polarToCartesian': '@siemens/native-charts-ng/utils',
+    'makeArc': '@siemens/native-charts-ng/utils',
+    'makeLine': '@siemens/native-charts-ng/utils',
+    'makePolyline': '@siemens/native-charts-ng/utils',
+    'valueToRelativeAngle': '@siemens/native-charts-ng/utils'
+};

package/schematics/utils/project-utils.js

@@ -5,7 +5,7 @@
 import { normalize } from '@angular-devkit/core';
 import { SchematicsException } from '@angular-devkit/schematics';
 import { allTargetOptions, allWorkspaceTargets, getWorkspace } from '@schematics/angular/utility/workspace';
-import { dirname, isAbsolute, resolve } from 'path';
+import { dirname, isAbsolute, resolve } from 'path/posix';
 import { parseTsconfigFile } from './ts-utils.js';
 export const getGlobalStyles = async (tree) => {
     const globalStyles = new Set();

package/schematics/utils/schematics-file-system.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { normalize } from '@angular-devkit/core';
-import { relative } from 'path';
+import { relative } from 'path/posix';
 export class SchematicsFileSystem {
     tree;
     basePath = normalize(process.cwd());

package/schematics/utils/template-utils.js

@@ -1,4 +1,4 @@
-import { join, dirname } from 'path';
+import { join, dirname } from 'path/posix';
 import ts from 'typescript';
 import { findAttribute, findElement } from './html-utils.js';
 export const getInlineTemplates = (source) => {
@@ -100,7 +100,7 @@ const removeSymbols = ({ template, offset, recorder, elementName, attributeSelec
 };
 export const renameElementTag = ({ tree, filePath, sourceFile, recorder, fromName, toName }) => {
     getInlineTemplates(sourceFile).forEach(template => renameElementTagInTemplate({
-        template: template.text,
+        template: sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1),
         offset: template.getStart() + 1,
         toName,
         fromName,
@@ -122,7 +122,7 @@ export const renameElementTag = ({ tree, filePath, sourceFile, recorder, fromNam
 };
 export const renameAttribute = ({ tree, filePath, sourceFile, recorder, fromName, toName }) => {
     getInlineTemplates(sourceFile).forEach(template => renameAttributeInTemplate({
-        template: template.text,
+        template: sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1),
         offset: template.getStart() + 1,
         toName,
         fromName,
@@ -144,7 +144,7 @@ export const renameAttribute = ({ tree, filePath, sourceFile, recorder, fromName
 };
 export const renameApi = ({ tree, filePath, sourceFile, recorder, elementName, apis }) => {
     getInlineTemplates(sourceFile).forEach(template => renameApiInTemplate({
-        template: template.text,
+        template: sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1),
         offset: template.getStart() + 1,
         elementName,
         recorder,
@@ -166,7 +166,7 @@ export const renameApi = ({ tree, filePath, sourceFile, recorder, elementName, a
 };
 export const removeSymbol = ({ tree, filePath, sourceFile, recorder, elementName, attributeSelector, names }) => {
     getInlineTemplates(sourceFile).forEach(template => removeSymbols({
-        template: template.text,
+        template: sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1),
         offset: template.getStart() + 1,
         elementName,
         attributeSelector,

package/schematics/utils/ts-utils.js

@@ -4,7 +4,7 @@
  */
 import { normalize } from '@angular-devkit/core';
 import { SchematicsException } from '@angular-devkit/schematics';
-import { isAbsolute } from 'path';
+import { isAbsolute } from 'path/posix';
 import ts from 'typescript';
 import { SchematicsFileSystem } from './schematics-file-system.js';
 /**