@siemens/element-ng 48.10.0 → 49.0.0-rc.2

package/schematics/migrations/data/component-names.js

@@ -1,78 +1,19 @@
 export const COMPONENT_NAMES_MIGRATION = [
-    // Icon current to legacy
+    // v48 to v49
     {
-        module: /@(siemens|simpl)\/element-ng(\/icon)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiIconComponent',
-                replaceWith: 'SiIconLegacyComponent'
-            }
-        ]
-    },
-    // Icon next to current
-    {
-        module: /@(siemens|simpl)\/element-ng(\/icon-next)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiIconNextComponent',
-                replaceWith: 'SiIconComponent'
-            }
-        ]
-    },
-    // Tabs current to legacy
-    {
-        module: /@(siemens|simpl)\/element-ng(\/tabs)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiTabComponent',
-                replaceWith: 'SiTabLegacyComponent'
-            },
-            {
-                replace: 'SiTabsetComponent',
-                replaceWith: 'SiTabsetLegacyComponent'
-            },
-            {
-                replace: 'SiTabsModule',
-                replaceWith: 'SiTabsLegacyModule'
-            }
-        ],
-        toModule: '@siemens/element-ng/tabs-legacy'
+        module: /@(siemens|simpl)\/dashboards-ng/,
+        symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
     },
-    // Tabs next to current
     {
-        module: /@(siemens|simpl)\/element-ng(\/tabs-next)?/,
-        symbolRenamings: [
-            {
-                replace: 'SiTabNextComponent',
-                replaceWith: 'SiTabComponent'
-            },
-            {
-                replace: 'SiTabsetNextComponent',
-                replaceWith: 'SiTabsetComponent'
-            },
-            {
-                replace: 'SiTabsNextModule',
-                replaceWith: 'SiTabsModule'
-            }
-        ],
-        toModule: '@siemens/element-ng/tabs'
-    },
-    // Popover current to legacy
-    {
-        module: /@(siemens|simpl)\/element-ng(\/popover)?/,
-        symbolRenamings: [
-            { replace: 'SiPopoverDirective', replaceWith: 'SiPopoverLegacyDirective' },
-            { replace: 'SiPopoverModule', replaceWith: 'SiPopoverLegacyModule' }
-        ],
-        toModule: '@siemens/element-ng/popover-legacy'
+        module: /@(siemens|simpl)\/element-ng(\/toast-notification)?/,
+        symbolRenamings: [{ replace: 'ToastStateName', replaceWith: 'StatusType' }],
+        toModule: '@siemens/element-ng/common'
     },
-    // Popover next to current
     {
-        module: /@(siemens|simpl)\/element-ng(\/popover-next)?/,
+        module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
         symbolRenamings: [
-            { replace: 'SiPopoverNextDirective', replaceWith: 'SiPopoverDirective' },
-            { replace: 'SiPopoverNextModule', replaceWith: 'SiPopoverModule' }
+            { replace: 'SiUnauthorizedPageComponent', replaceWith: 'SiInfoPageComponent' }
         ],
-        toModule: '@siemens/element-ng/popover'
+        toModule: '@siemens/element-ng/info-page'
     }
 ];

package/schematics/migrations/data/element-selectors.js

@@ -1,10 +1,11 @@
 export const ELEMENT_SELECTORS_MIGRATION = [
-    // current to legacy
-    { replace: 'si-icon', replaceWith: 'si-icon-legacy' },
-    { replace: 'si-tabset', replaceWith: 'si-tabset-legacy' },
-    { replace: 'si-tab', replaceWith: 'si-tab-legacy' },
-    // next to current
-    { replace: 'si-icon-next', replaceWith: 'si-icon' },
-    { replace: 'si-tabset-next', replaceWith: 'si-tabset' },
-    { replace: 'si-tab-next', replaceWith: 'si-tab' }
+    // v48 to v49
+    {
+        replace: 'si-unauthorized-page',
+        replaceWith: 'si-info-page',
+        defaultAttributes: [
+            { name: 'icon', value: 'element-warning-filled' },
+            { name: 'iconColor', value: 'status-warning' }
+        ]
+    }
 ];

package/schematics/migrations/data/index.js

@@ -7,7 +7,6 @@ import { COMPONENT_NAMES_MIGRATION } from './component-names.js';
 import { ELEMENT_SELECTORS_MIGRATION } from './element-selectors.js';
 import { OUTPUT_NAMES_MIGRATION } from './output-names.js';
 import { SYMBOL_REMOVALS_MIGRATION } from './symbol-removals.js';
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const getElementMigrationData = () => ({
     attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
     componentNameChanges: COMPONENT_NAMES_MIGRATION,

package/schematics/migrations/data/migration-test-data.js

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+const COMPONENT_NAMES_MIGRATION = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/icon)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiIconComponent',
+                replaceWith: 'SiIconLegacyComponent'
+            }
+        ]
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/icon-next)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiIconNextComponent',
+                replaceWith: 'SiIconComponent'
+            }
+        ]
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/tabs)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiTabComponent',
+                replaceWith: 'SiTabLegacyComponent'
+            },
+            {
+                replace: 'SiTabsetComponent',
+                replaceWith: 'SiTabsetLegacyComponent'
+            },
+            {
+                replace: 'SiTabsModule',
+                replaceWith: 'SiTabsLegacyModule'
+            }
+        ],
+        toModule: '@siemens/element-ng/tabs-legacy'
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/tabs-next)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiTabNextComponent',
+                replaceWith: 'SiTabComponent'
+            },
+            {
+                replace: 'SiTabsetNextComponent',
+                replaceWith: 'SiTabsetComponent'
+            },
+            {
+                replace: 'SiTabsNextModule',
+                replaceWith: 'SiTabsModule'
+            }
+        ],
+        toModule: '@siemens/element-ng/tabs'
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/popover)?/,
+        symbolRenamings: [
+            { replace: 'SiPopoverDirective', replaceWith: 'SiPopoverLegacyDirective' },
+            { replace: 'SiPopoverModule', replaceWith: 'SiPopoverLegacyModule' }
+        ],
+        toModule: '@siemens/element-ng/popover-legacy'
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/popover-next)?/,
+        symbolRenamings: [
+            { replace: 'SiPopoverNextDirective', replaceWith: 'SiPopoverDirective' },
+            { replace: 'SiPopoverNextModule', replaceWith: 'SiPopoverModule' }
+        ],
+        toModule: '@siemens/element-ng/popover'
+    },
+    {
+        module: /@(siemens|simpl)\/dashboards-ng/,
+        symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
+    }
+];
+const ATTRIBUTE_SELECTORS_MIGRATION = [
+    { replace: 'siPopover', replaceWith: 'siPopoverLegacy' },
+    { replace: 'siPopoverNext', replaceWith: 'siPopover' }
+];
+const ELEMENT_SELECTORS_MIGRATION = [
+    // current to legacy
+    { replace: 'si-icon', replaceWith: 'si-icon-legacy' },
+    { replace: 'si-tabset', replaceWith: 'si-tabset-legacy' },
+    { replace: 'si-tab', replaceWith: 'si-tab-legacy' },
+    // next to current
+    { replace: 'si-icon-next', replaceWith: 'si-icon' },
+    { replace: 'si-tabset-next', replaceWith: 'si-tabset' },
+    { replace: 'si-tab-next', replaceWith: 'si-tab' }
+];
+const SYMBOL_REMOVALS_MIGRATION = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
+        elementSelector: 'si-accordion',
+        names: ['colorVariant']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
+        elementSelector: 'input',
+        attributeSelector: 'siDateInput',
+        names: ['dateInputDebounceTime']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
+        elementSelector: 'input',
+        attributeSelector: 'siDatepicker',
+        names: ['triggeringInput']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
+        elementSelector: 'si-date-range',
+        names: ['debounceTime']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
+        elementSelector: 'si-filtered-search',
+        names: ['showIcon', 'noMatchingCriteriaText']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/form)?/,
+        elementSelector: 'si-form-item',
+        names: ['inputId', 'readonly']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
+        elementSelector: 'si-navbar-vertical',
+        names: ['autoCollapseDelay']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/split)?/,
+        elementSelector: 'si-split-part',
+        names: ['headerStatusColor', 'headerStatusIconClass']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
+        elementSelector: 'si-tree-view',
+        names: ['disableFilledIcons', 'trackByFunction']
+    },
+    {
+        module: /@(siemens|simpl)\/charts-ng/,
+        elementSelector: 'si-chart-gauge',
+        names: ['numberOfDecimals']
+    }
+];
+const OUTPUT_NAMES_MIGRATION = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
+        elementSelector: 'si-collapsible-panel',
+        apiMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
+    }
+];
+/**
+ * Stable migration data for testing.
+ * This data is frozen and used for testing to ensure test stability.
+ * Do not modify this data unless you intend to update the test expectations.
+ */
+export const getElementMigrationTestData = () => ({
+    attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
+    componentNameChanges: COMPONENT_NAMES_MIGRATION,
+    elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
+    symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
+    outputNameChanges: OUTPUT_NAMES_MIGRATION
+});

package/schematics/migrations/data/output-names.js

@@ -1,7 +1 @@
-export const OUTPUT_NAMES_MIGRATION = [
-    {
-        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
-        elementSelector: 'si-collapsible-panel',
-        apiMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
-    }
-];
+export const OUTPUT_NAMES_MIGRATION = [];

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

@@ -1,49 +1,8 @@
 export const SYMBOL_REMOVALS_MIGRATION = [
+    // v48 to v49
     {
-        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
-        elementSelector: 'si-accordion',
-        names: ['colorVariant']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
-        elementSelector: 'input',
-        attributeSelector: 'siDateInput',
-        names: ['dateInputDebounceTime']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
-        elementSelector: 'input',
-        attributeSelector: 'siDatepicker',
-        names: ['triggeringInput']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
-        elementSelector: 'si-date-range',
-        names: ['debounceTime']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
-        elementSelector: 'si-filtered-search',
-        names: ['showIcon', 'noMatchingCriteriaText']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/form)?/,
-        elementSelector: 'si-form-item',
-        names: ['inputId', 'readonly']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
-        elementSelector: 'si-navbar-vertical',
-        names: ['autoCollapseDelay']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/split)?/,
-        elementSelector: 'si-split-part',
-        names: ['headerStatusColor', 'headerStatusIconClass']
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
-        elementSelector: 'si-tree-view',
-        names: ['disableFilledIcons', 'trackByFunction']
+        module: /@(siemens|simpl)\/maps-ng/,
+        elementSelector: 'si-map',
+        names: ['onResize']
     }
 ];

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

@@ -5,11 +5,9 @@
 import * as ts from 'typescript';
 import { EmitHint } from 'typescript';
 import { discoverSourceFiles, renameApi, renameAttribute, renameElementTag, renameIdentifier, removeSymbol } from '../../utils/index.js';
-import { getElementMigrationData } from '../data/index.js';
-export const elementMigrationRule = (options) => {
+export const elementMigrationRule = (options, migrationData) => {
     return async (tree, context) => {
         const tsSourceFiles = await discoverSourceFiles(tree, context, options.path);
-        const migrationData = getElementMigrationData();
         for (const filePath of tsSourceFiles) {
             const content = tree.read(filePath);
             if (!content) {

package/schematics/migrations/index.js

@@ -3,16 +3,26 @@
  * SPDX-License-Identifier: MIT
  */
 import { chain } from '@angular-devkit/schematics';
-import { actionModalMigrationRule } from './action-modal-migration/index.js';
+import { getElementMigrationData } from './data/index.js';
 import { elementMigrationRule } from './element-migration/index.js';
-import { wizardMigrationRule } from './wizard-migration/index.js';
+import { missingTranslateMigrationRule } from './ngx-translate/index.js';
 export const v47to48Migration = (options) => {
     return (tree, context) => {
         context.logger.info('🚀 Starting migration from v47 to v48...');
+        const migrationData = getElementMigrationData();
         return chain([
-            actionModalMigrationRule(options),
-            elementMigrationRule(options),
-            wizardMigrationRule(options)
+            elementMigrationRule({ ...options }, migrationData),
+            missingTranslateMigrationRule(options)
+        ])(tree, context);
+    };
+};
+export const v48to49Migration = (options) => {
+    return (tree, context) => {
+        context.logger.info('🚀 Starting migration from v48 to v49...');
+        const migrationData = getElementMigrationData();
+        return chain([
+            elementMigrationRule({ ...options }, migrationData),
+            missingTranslateMigrationRule(options)
         ])(tree, context);
     };
 };

package/schematics/migrations/ngx-translate/index.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import * as ts from 'typescript';
+import { EmitHint } from 'typescript';
+import { applyImport, discoverSourceFiles, visitStaticFunctionCalls } from '../../utils/index.js';
+export const missingTranslateMigrationRule = (options) => {
+    return async (tree, context) => {
+        context.logger.info('🔄 Migrating missing translate provider...');
+        const tsSourceFiles = await discoverSourceFiles(tree, context, options.path);
+        for (const filePath of tsSourceFiles) {
+            let content = tree.readText(filePath);
+            if (!content) {
+                continue;
+            }
+            const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
+            const pendingTransformations = [];
+            [
+                { className: 'TranslateModule', functionName: 'forRoot' },
+                { functionName: 'provideTranslateService' }
+            ].forEach(({ className, functionName }) => visitStaticFunctionCalls({
+                sourceFile,
+                moduleSpecifier: /@ngx-translate\/core/,
+                className,
+                functionName,
+                visitor: node => {
+                    const methodTransformation = createTranslateMethodCallTransformation(context, node);
+                    if (methodTransformation) {
+                        pendingTransformations.push(methodTransformation);
+                    }
+                }
+            }));
+            if (pendingTransformations.length > 0) {
+                // Ensure import for provideMissingTranslationHandlerForElement exists
+                const importTransformation = applyImport(sourceFile, 'provideMissingTranslationHandlerForElement', '@siemens/element-translate-ng/ngx-translate');
+                if (importTransformation) {
+                    pendingTransformations.push(importTransformation);
+                }
+                // Sort transformations by start position descending to preserve offsets
+                // This become important when multiple transformations are applied to the same file
+                pendingTransformations.sort((a, b) => b.start - a.start);
+                for (const transformation of pendingTransformations) {
+                    content =
+                        content.slice(0, transformation.start) +
+                            transformation.replacement +
+                            content.slice(transformation.end);
+                }
+                tree.overwrite(filePath, content);
+            }
+        }
+    };
+};
+/** Update the TranslateModule.forRoot() call to include `missingTranslationHandler: provideMissingTranslationHandlerForElement()` */
+const createTranslateMethodCallTransformation = (context, node) => {
+    // Check if there are arguments
+    const firstArg = node.arguments.at(0);
+    if (firstArg && !ts.isObjectLiteralExpression(firstArg)) {
+        return null;
+    }
+    // Find existing missingTranslationHandler property if it exists
+    const existingHandlerProp = firstArg?.properties.find(prop => ts.isPropertyAssignment(prop) &&
+        ts.isIdentifier(prop.name) &&
+        prop.name.text === 'missingTranslationHandler');
+    // Check if provideMissingTranslationHandlerForElement is already used
+    if (existingHandlerProp && ts.isCallExpression(existingHandlerProp.initializer)) {
+        const expression = existingHandlerProp.initializer.expression;
+        if (ts.isIdentifier(expression) &&
+            expression.text === 'provideMissingTranslationHandlerForElement') {
+            // Already migrated, skip
+            return null;
+        }
+    }
+    // Filter out the existing missingTranslationHandler property if present
+    const otherProperties = firstArg?.properties.filter(prop => !ts.isPropertyAssignment(prop) ||
+        !ts.isIdentifier(prop.name) ||
+        prop.name.text !== 'missingTranslationHandler') ?? [];
+    // Create the new missingTranslationHandler property
+    const missingTranslationHandlerProperty = ts.factory.createPropertyAssignment(ts.factory.createIdentifier('missingTranslationHandler'), ts.factory.createCallExpression(ts.factory.createIdentifier('provideMissingTranslationHandlerForElement'), undefined, existingHandlerProp ? [existingHandlerProp.initializer] : undefined));
+    const updatedCall = ts.factory.createCallExpression(node.expression, undefined, ts.factory.createNodeArray([
+        ts.factory.createObjectLiteralExpression([
+            ...otherProperties,
+            missingTranslationHandlerProperty
+        ])
+    ], node.arguments.hasTrailingComma));
+    return {
+        start: node.getStart(),
+        end: node.getEnd(),
+        replacement: ts
+            .createPrinter()
+            .printNode(EmitHint.Expression, updatedCall, node.getSourceFile())
+    };
+};

package/schematics/ng-update/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { v47to48Migration, v48to49Migration } from '../migrations/index.js';
+export const migrate = () => {
+    return (tree, context) => {
+        context.logger.info('🚀 Starting update from version 47 to 48...');
+        return v47to48Migration({ path: '/' })(tree, context);
+    };
+};
+export const migrateV49 = () => {
+    return (tree, context) => {
+        context.logger.info('🚀 Starting update from version 48 to 49...');
+        return v48to49Migration({ path: '/' })(tree, context);
+    };
+};

package/schematics/ng-update/schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "NgUpdateMigrationSchema",
+  "title": "Siemens Element ng-update migration options",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Path to the directory where the migration should be applied.",
+      "x-prompt": "Which directory do you want to migrate?",
+      "format": "path"
+    }
+  },
+  "required": []
+}

package/schematics/simpl-siemens-migration/index.js

@@ -8,11 +8,7 @@ import { chain, schematic } from '@angular-devkit/schematics';
 export const simplSiemensMigration = (_options) => {
     return (tree, context) => {
         context.logger.info('🚀 Starting Simpl to Siemens migration...');
-        const chainedRules = chain([
-            schematic('migrate-ts-imports-to-siemens', _options),
-            schematic('migrate-scss-imports-to-siemens', _options),
-            schematic('migrate-v47-to-v48', _options)
-        ]);
+        const chainedRules = chain([schematic('migrate-v47-to-v48', _options)]);
         return chainedRules(tree, context);
     };
 };