@siemens/element-ng 48.1.0 → 48.2.0

package/schematics/migrations/action-modal-migration/action-modal-migration.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { SchematicsException } from '@angular-devkit/schematics';
+import * as ts from 'typescript';
+import { discoverSourceFiles, getImportSpecifiers } from '../../utils/index.js';
+import { ACTION_DIALOG_TYPES_REPLACEMENTS, ACTION_MODAL_SYMBOLS, DIALOG_METHOD_CONFIGS, LEGACY_METHODS } from './action-modal.mappings.js';
+/**
+ * Migration rule for action modal methods.
+ * @param options - The options object containing the path to the project files to be migrated.
+ * @returns A schematic rule for migrating action modal methods.
+ */
+export const actionModalMigrationRule = (options) => {
+    return (tree, context) => {
+        context.logger.info('🔄 Migrating action modal methods to v48...');
+        const tsSourceFiles = discoverSourceFiles(tree, context, options.path);
+        for (const filePath of tsSourceFiles) {
+            const content = tree.read(filePath);
+            if (!content) {
+                continue;
+            }
+            const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
+            // Match both @siemens/element-ng and @simpl/element-ng, with or without /action-modal
+            // This ensures we only process files that import from these modules
+            const modulePathToMatch = /@(siemens|simpl)\/element-ng(\/action-modal)?/;
+            const actionModalImports = getImportSpecifiers(sourceFile, modulePathToMatch, ACTION_MODAL_SYMBOLS);
+            if (!actionModalImports?.length) {
+                continue;
+            }
+            const pendingTransformations = [];
+            const visitNodeAndCollectTransformations = (node) => {
+                // Collect method call transformations
+                if (ts.isCallExpression(node)) {
+                    const methodTransformation = createActionDialogMethodCallTransformation(node);
+                    if (methodTransformation) {
+                        pendingTransformations.push(methodTransformation);
+                    }
+                }
+                // Collect type reference transformations
+                if (ts.isPropertyAccessExpression(node)) {
+                    const typeTransformation = createActionDialogTypeTransformation(node);
+                    if (typeTransformation) {
+                        pendingTransformations.push(typeTransformation);
+                    }
+                }
+                node.forEachChild(visitNodeAndCollectTransformations);
+            };
+            sourceFile.forEachChild(visitNodeAndCollectTransformations);
+            if (pendingTransformations.length > 0) {
+                applyCodeTransformations(tree, filePath, pendingTransformations);
+            }
+        }
+        return tree;
+    };
+};
+const createActionDialogMethodCallTransformation = (node) => {
+    const expression = node.expression;
+    if (!ts.isPropertyAccessExpression(expression)) {
+        return null;
+    }
+    const methodName = expression.name.text;
+    if (!LEGACY_METHODS.includes(methodName)) {
+        return null;
+    }
+    const dialogPropertiesArray = generateDialogProperties(methodName, node.arguments);
+    const printer = ts.createPrinter();
+    const newNode = ts.factory.createCallExpression(ts.factory.createPropertyAccessExpression(expression.expression, ts.factory.createIdentifier('showActionDialog')), undefined, [ts.factory.createObjectLiteralExpression(dialogPropertiesArray)]);
+    const newCode = printer.printNode(ts.EmitHint.Expression, newNode, node.getSourceFile());
+    return {
+        node,
+        newCode,
+        type: 'method-call'
+    };
+};
+const createActionDialogTypeTransformation = (node) => {
+    const nodeText = node.getText().trim();
+    const matchingReplacement = ACTION_DIALOG_TYPES_REPLACEMENTS.find(typeReplacement => nodeText === typeReplacement.old);
+    if (!matchingReplacement) {
+        return null;
+    }
+    return {
+        node,
+        newCode: `'${matchingReplacement.new}'`,
+        type: 'type-reference'
+    };
+};
+/**
+ * Generates the dialog properties for the action dialog.
+ * @param methodName - The name of the method being migrated.
+ * @param nodeArguments - The arguments passed to the method.
+ * @returns An array of PropertyAssignment nodes for TypeScript printer.
+ * @throws SchematicsException if the method configuration is unknown.
+ */
+const generateDialogProperties = (methodName, nodeArguments) => {
+    const methodConfig = DIALOG_METHOD_CONFIGS[methodName];
+    if (!methodConfig) {
+        throw new SchematicsException(`Unknown method configuration for: ${methodName}`);
+    }
+    const dialogProperties = [
+        ts.factory.createPropertyAssignment(ts.factory.createIdentifier('type'), ts.factory.createStringLiteral(methodConfig.type, true))
+    ];
+    nodeArguments.forEach((arg, index) => {
+        const paramName = methodConfig.parameters[index];
+        if (paramName) {
+            dialogProperties.push(ts.factory.createPropertyAssignment(ts.factory.createIdentifier(paramName), arg));
+        }
+    });
+    return dialogProperties;
+};
+const applyCodeTransformations = (tree, filePath, codeTransformations) => {
+    const recorder = tree.beginUpdate(filePath);
+    // Sort by position (descending) to avoid offset issues
+    codeTransformations
+        .sort((a, b) => b.node.getStart() - a.node.getStart())
+        .forEach(({ node, newCode }) => {
+        recorder.remove(node.getStart(), node.getWidth());
+        recorder.insertLeft(node.getStart(), newCode);
+    });
+    tree.commitUpdate(recorder);
+};

package/schematics/migrations/action-modal-migration/action-modal.mappings.js

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const ACTION_MODAL_SYMBOLS = [
+    'AlertDialogResult',
+    'ConfirmationDialogResult',
+    'DeleteConfirmationDialogResult',
+    'EditDiscardDialogResult',
+    'SiActionDialogService'
+];
+export const LEGACY_METHODS = [
+    'showAlertDialog',
+    'showConfirmationDialog',
+    'showEditDiscardDialog',
+    'showDeleteConfirmationDialog'
+];
+export const DIALOG_METHOD_CONFIGS = {
+    showAlertDialog: {
+        type: 'alert',
+        parameters: ['message', 'heading', 'confirmBtnName', 'translationParams', 'icon', 'diOptions']
+    },
+    showConfirmationDialog: {
+        type: 'confirmation',
+        parameters: [
+            'message',
+            'heading',
+            'confirmBtnName',
+            'declineBtnName',
+            'translationParams',
+            'icon',
+            'diOptions'
+        ]
+    },
+    showEditDiscardDialog: {
+        type: 'edit-discard',
+        parameters: [
+            'disableSave',
+            'message',
+            'heading',
+            'saveBtnName',
+            'discardBtnName',
+            'cancelBtnName',
+            'disableSaveMessage',
+            'disableSaveDiscardBtnName',
+            'translationParams',
+            'icon',
+            'diOptions'
+        ]
+    },
+    showDeleteConfirmationDialog: {
+        type: 'delete-confirm',
+        parameters: [
+            'message',
+            'heading',
+            'deleteBtnName',
+            'cancelBtnName',
+            'translationParams',
+            'icon',
+            'diOptions'
+        ]
+    }
+};
+export const ACTION_DIALOG_TYPES_REPLACEMENTS = [
+    // Alert dialog
+    {
+        old: 'AlertDialogResult.Confirm',
+        new: 'confirm'
+    },
+    // Edit discard dialog
+    {
+        old: 'EditDiscardDialogResult.Save',
+        new: 'save'
+    },
+    {
+        old: 'EditDiscardDialogResult.Discard',
+        new: 'discard'
+    },
+    {
+        old: 'EditDiscardDialogResult.Cancel',
+        new: 'cancel'
+    },
+    // Confirmation dialog
+    {
+        old: 'ConfirmationDialogResult.Confirm',
+        new: 'confirm'
+    },
+    { old: 'ConfirmationDialogResult.Decline', new: 'decline' },
+    // Delete confirmation dialog
+    {
+        old: 'DeleteConfirmationDialogResult.Delete',
+        new: 'delete'
+    },
+    {
+        old: 'DeleteConfirmationDialogResult.Cancel',
+        new: 'cancel'
+    }
+];

package/schematics/migrations/action-modal-migration/index.js

@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export * from './action-modal-migration.js';

package/schematics/migrations/index.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { chain } from '@angular-devkit/schematics';
+import { actionModalMigrationRule } from './action-modal-migration/index.js';
+import { toLegacyMigrationRule } from './to-legacy-migration/to-legacy-migration';
+export const v47to48Migration = (options) => {
+    return (tree, context) => {
+        context.logger.info('🚀 Starting migration from v47 to v48...');
+        return chain([actionModalMigrationRule(options), toLegacyMigrationRule(options)])(tree, context);
+    };
+};

package/schematics/migrations/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "v47to48MigrationSchema",
+  "title": "Siemens Element v47 to v48 migration",
+  "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",
+      "default": "/"
+    }
+  },
+  "required": []
+}

package/schematics/migrations/to-legacy-migration/to-legacy-migration.js

@@ -0,0 +1,55 @@
+import * as ts from 'typescript';
+import { EmitHint } from 'typescript';
+import { discoverSourceFiles, renameAttribute, renameElementTag, renameIdentifier } from '../../utils/index.js';
+import { IDENTIFIER_RENAMING_INSTRUCTIONS, ELEMENT_RENAMING_INSTRUCTIONS, ATTRIBUTE_RENAMING_INSTRUCTIONS } from './to-legacy-replacement.js';
+export const toLegacyMigrationRule = (options) => {
+    return (tree, context) => {
+        context.logger.info('🔄 Running legacy migration rule...');
+        const tsSourceFiles = discoverSourceFiles(tree, context, options.path);
+        for (const filePath of tsSourceFiles) {
+            const content = tree.read(filePath);
+            if (!content) {
+                continue;
+            }
+            const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
+            const changeInstructions = renameIdentifier({
+                sourceFile,
+                renamingInstructions: IDENTIFIER_RENAMING_INSTRUCTIONS
+            });
+            let recorder = undefined;
+            let printer = undefined;
+            for (const changeInstruction of changeInstructions) {
+                recorder ??= tree.beginUpdate(filePath);
+                printer ??= ts.createPrinter();
+                recorder.remove(changeInstruction.start, changeInstruction.width);
+                recorder.insertLeft(changeInstruction.start, printer.printNode(EmitHint.Unspecified, changeInstruction.newNode, sourceFile));
+            }
+            if (!recorder) {
+                continue;
+            }
+            for (const [fromName, toName] of ELEMENT_RENAMING_INSTRUCTIONS) {
+                renameElementTag({
+                    tree,
+                    recorder,
+                    sourceFile,
+                    filePath,
+                    fromName,
+                    toName
+                });
+            }
+            for (const [fromName, toName] of ATTRIBUTE_RENAMING_INSTRUCTIONS) {
+                renameAttribute({
+                    tree,
+                    recorder,
+                    sourceFile,
+                    filePath,
+                    fromName,
+                    toName
+                });
+            }
+            tree.commitUpdate(recorder);
+        }
+        context.logger.info(`✅ Legacy migration complete!`);
+        return tree;
+    };
+};

package/schematics/migrations/to-legacy-migration/to-legacy-replacement.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const IDENTIFIER_RENAMING_INSTRUCTIONS = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/icon)?/,
+        symbolRenamings: [['SiIconComponent', 'SiIconLegacyComponent']]
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/tabs)?/,
+        symbolRenamings: [
+            ['SiTabComponent', 'SiTabLegacyComponent'],
+            ['SiTabsetComponent', 'SiTabsetLegacyComponent'],
+            ['SiTabsModule', 'SiTabsLegacyModule']
+        ],
+        toModule: '@siemens/element-ng/tabs-legacy'
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/popover)?/,
+        symbolRenamings: [
+            ['SiPopoverDirective', 'SiPopoverLegacyDirective'],
+            ['SiPopoverModule', 'SiPopoverLegacyModule']
+        ],
+        toModule: '@siemens/element-ng/popover-legacy'
+    }
+];
+export const ELEMENT_RENAMING_INSTRUCTIONS = [
+    ['si-icon', 'si-icon-legacy'],
+    ['si-tabset', 'si-tabset-legacy'],
+    ['si-tab', 'si-tab-legacy']
+];
+export const ATTRIBUTE_RENAMING_INSTRUCTIONS = [
+    ['siPopover', 'siPopoverLegacy']
+];

package/schematics/ng-add/index.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { chain, schematic } from '@angular-devkit/schematics';
+import { getPackageJsonDependency } from '@schematics/angular/utility/dependencies';
+export const ngAdd = (options) => {
+    return (tree, context) => {
+        context.logger.info('🔧 Adding @siemens/element-ng to your project...');
+        const hasSimplElementNgDependency = getPackageJsonDependency(tree, '@simpl/element-ng');
+        if (hasSimplElementNgDependency) {
+            const chainedRules = chain([schematic('simpl-siemens-migration', options)]);
+            return chainedRules(tree, context);
+        }
+    };
+};

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "siemens-element-ng-add",
+  "title": "Siemens Element ng-add schematic",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Path to the directory where all simpl imports should be migrated.",
+      "x-prompt": "Which directory do you want to migrate?",
+      "format": "path",
+      "default": "/"
+    }
+  },
+  "required": []
+}

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

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { chain } from '@angular-devkit/schematics';
+import { getGlobalStyles, discoverSourceFiles } from '../utils/index.js';
+import { SCSS_USE_PATTERNS, STYLE_REPLACEMENTS, THEME_STYLE_ENTRIES } from './style-mappings.js';
+export const scssImportMigration = (_options) => {
+    return (tree, context) => scssMigrationRule(_options)(tree, context);
+};
+/**
+ * Creates a schematic rule for migrating SCSS files in a Siemens migration context.
+ *
+ * This rule performs the following migration tasks:
+ * - Processes global styles files (`.scss` and `.sass`) and removes specific SCSS use patterns
+ * - Applies theme style entries to global styles based on predefined patterns
+ * - Discovers and migrates SCSS source files that contain specific style replacements
+ *
+ * @param _options - Migration options configuration (currently unused)
+ * @returns A schematic rule function that processes the file tree and applies SCSS migrations
+ *
+ * @example
+ * ```typescript
+ * const rule = scssMigrationRule({ path: 'some-path' });
+ * // Use with Angular Schematics
+ * ```
+ */
+export const scssMigrationRule = (_options) => {
+    return (tree, context) => {
+        const rules = [];
+        context.logger.info('🎨 Migrating SCSS styles...');
+        const globalStyles = getGlobalStyles(tree);
+        for (const style of globalStyles) {
+            if (style.endsWith('.scss') || style.endsWith('.sass')) {
+                const content = tree.readText(style);
+                for (const pattern of SCSS_USE_PATTERNS) {
+                    const match = pattern.exec(content);
+                    if (match) {
+                        rules.push(migrateScssImports(style, [{ replace: match[0], new: '' }]));
+                    }
+                }
+                let predecessor = '';
+                for (const themeEntry of THEME_STYLE_ENTRIES) {
+                    const match = content.match(themeEntry.pattern ?? themeEntry.insert);
+                    if (match) {
+                        predecessor = match[0];
+                        continue;
+                    }
+                    rules.push(applyGlobalStyles(style, predecessor, themeEntry.insert + '\n'));
+                    predecessor = themeEntry.insert;
+                }
+            }
+        }
+        const scssFiles = discoverSourceFiles(tree, context, _options.path, '.scss');
+        for (const filePath of scssFiles) {
+            const content = tree.readText(filePath);
+            if (content.includes(STYLE_REPLACEMENTS[0].replace) ||
+                content.includes(STYLE_REPLACEMENTS[1].replace)) {
+                rules.push(migrateScssImports(filePath));
+            }
+        }
+        return chain([...rules]);
+    };
+};
+const migrateScssImports = (filePath, replacements = STYLE_REPLACEMENTS) => {
+    return (tree) => {
+        const recorder = tree.beginUpdate(filePath);
+        const content = tree.readText(filePath);
+        let offset = 0;
+        let hasMore = true;
+        while (hasMore) {
+            hasMore = false;
+            for (const replacement of replacements) {
+                const start = content.indexOf(replacement.replace, offset);
+                if (start >= 0) {
+                    recorder.remove(start, replacement.replace.length);
+                    recorder.insertLeft(start, replacement.new);
+                    const size = replacement.new.length === 0 ? 1 : replacement.new.length;
+                    offset = start + size;
+                    hasMore = true;
+                }
+            }
+        }
+        tree.commitUpdate(recorder);
+        return tree;
+    };
+};
+const applyGlobalStyles = (filePath, anchor, insert) => {
+    return (tree) => {
+        const recorder = tree.beginUpdate(filePath);
+        const content = tree.readText(filePath);
+        let pos = content.indexOf(anchor) + anchor.length;
+        if (pos > 0) {
+            // If the insert position is not the file start we want to insert the next line after the new line
+            pos = content.indexOf('\n', pos) + 1;
+        }
+        recorder.insertRight(pos, insert);
+        tree.commitUpdate(recorder);
+        return tree;
+    };
+};

package/schematics/scss-import-to-siemens-migration/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ScssImportToSiemensMigrationSchema",
+  "title": "SCSS Import to Siemens Migration Schema",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Path to the directory where all SCSS imports should be migrated.",
+      "x-prompt": "Which directory do you want to migrate?",
+      "format": "path",
+      "default": "/"
+    }
+  },
+  "required": []
+}

package/schematics/scss-import-to-siemens-migration/style-mappings.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const STYLE_REPLACEMENTS = [
+    {
+        replace: `@import '@simpl/element-theme/`,
+        new: `@import '@siemens/element-theme/`
+    },
+    {
+        replace: `@use '@simpl/element-theme/`,
+        new: `@use '@siemens/element-theme/`
+    }
+];
+// Apply theme styles if not already present
+export const THEME_STYLE_ENTRIES = [
+    { insert: `@use '@simpl/brand/assets/fonts/styles/siemens-sans';` },
+    { insert: `@use '@simpl/element-icons/dist/style/simpl-element-icons';` },
+    {
+        insert: `@use '@siemens/element-theme/src/theme' with (
+  $element-theme-default: 'siemens-brand',
+  $element-themes: (
+    'siemens-brand',
+    'element'
+  )
+);`,
+        pattern: /@use '@siemens\/element-theme\/src\/theme' with \(([\s\S]*?)\);/g
+    },
+    { insert: `@use '@siemens/element-ng/element-ng';` },
+    { insert: `@use '@siemens/element-theme/src/styles/themes';` },
+    { insert: `@use '@simpl/brand/dist/element-theme-siemens-brand-light' as brand-light;` },
+    { insert: `@use '@simpl/brand/dist/element-theme-siemens-brand-dark' as brand-dark;` },
+    {
+        insert: `@include themes.make-theme(brand-light.$tokens, 'siemens-brand');`,
+        pattern: /@include themes\.make-theme\(brand-light\.\$tokens, 'siemens-brand'\);/g
+    },
+    {
+        insert: `@include themes.make-theme(brand-dark.$tokens, 'siemens-brand', true);`,
+        pattern: /@include themes\.make-theme\(brand-dark\.\$tokens, 'siemens-brand', true\);/g
+    }
+];
+export const SCSS_USE_PATTERNS = [
+    /@use '@simpl\/element-theme\/src\/theme' with \(([\s\S]*?)\);/g,
+    /@use '@simpl\/element-ng\/simpl-element-ng' with \(([\s\S]*?)\);/g,
+    /@use '@simpl\/element-theme\/src\/theme';/g
+];

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { chain, schematic } from '@angular-devkit/schematics';
+// You don't have to export the function as default. You can also have more than one rule factory
+// per file.
+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)
+        ]);
+        return chainedRules(tree, context);
+    };
+};

package/schematics/simpl-siemens-migration/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SimplToSiemensMigration",
+  "title": "Simpl to Siemens Migration Schema",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Path to the directory where all simpl imports should be migrated.",
+      "x-prompt": "Which directory do you want to migrate?",
+      "format": "path",
+      "default": "/"
+    }
+  },
+  "required": []
+}