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

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

@@ -1,162 +0,0 @@
-/**
- * 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 async (tree, context) => {
-        context.logger.info('🔄 Migrating action modal methods to v48...');
-        const tsSourceFiles = await 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 usedIdentifier = new Set();
-            const visitNodeAndCollectTransformations = (node) => {
-                if (ts.isImportDeclaration(node)) {
-                    return;
-                }
-                // 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);
-                        // We remove the usage here. In order to avoid counting it as used identifier, we skip further processing.
-                        return;
-                    }
-                }
-                if (ts.isIdentifier(node)) {
-                    usedIdentifier.add(node.text);
-                }
-                node.forEachChild(visitNodeAndCollectTransformations);
-            };
-            sourceFile.forEachChild(visitNodeAndCollectTransformations);
-            pendingTransformations.push(...removeUnusedImports(sourceFile, usedIdentifier));
-            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
-    };
-};
-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}'`
-    };
-};
-/**
- * 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);
-};
-const removeUnusedImports = (sourceFile, usedIdentifier) => {
-    const printer = ts.createPrinter();
-    const importFinder = (node) => {
-        if (ts.isImportDeclaration(node) &&
-            ts.isStringLiteral(node.moduleSpecifier) &&
-            /@(siemens|simpl)\/element-ng(\/action-modal)?/.test(node.moduleSpecifier.text) &&
-            node.importClause?.namedBindings &&
-            ts.isNamedImports(node.importClause.namedBindings)) {
-            const usedBindings = node.importClause.namedBindings.elements.filter(element => 
-            // This script anyway is not capable of handling aliasing imports, so we can ignore them here.
-            usedIdentifier.has(element.name.text) || !ACTION_MODAL_SYMBOLS.includes(element.name.text));
-            if (usedBindings.length === node.importClause.namedBindings.elements.length) {
-                // All bindings are used, no changes needed
-                return undefined;
-            }
-            if (usedBindings.length === 0) {
-                // No bindings are used, remove the entire import statement
-                return {
-                    node,
-                    newCode: ''
-                };
-            }
-            // Recreate import statement with only used bindings
-            const newImport = ts.factory.createImportDeclaration(node.modifiers, ts.factory.createImportClause(node.importClause.isTypeOnly, node.importClause.name, ts.factory.createNamedImports(usedBindings)), node.moduleSpecifier, node.attributes);
-            return {
-                node,
-                newCode: printer.printNode(ts.EmitHint.Unspecified, newImport, sourceFile)
-            };
-        }
-        return undefined;
-    };
-    return sourceFile.statements.map(importFinder).filter(transform => transform !== undefined);
-};

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

@@ -1,98 +0,0 @@
-/**
- * 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

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

package/schematics/migrations/wizard-migration/index.js

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-import { join, dirname } from 'path/posix';
-import * as ts from 'typescript';
-import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl } from '../../utils/index.js';
-export const wizardMigrationRule = (options) => {
-    return async (tree, context) => {
-        context.logger.info('🔄 Migrating wizard api...');
-        const tsSourceFiles = await 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 recorder = tree.beginUpdate(filePath);
-            renameApi({
-                tree,
-                filePath,
-                sourceFile,
-                recorder,
-                elementName: 'si-wizard'
-            });
-            if (recorder) {
-                tree.commitUpdate(recorder);
-            }
-        }
-    };
-};
-const renameApi = ({ tree, filePath, sourceFile, recorder, elementName }) => {
-    getInlineTemplates(sourceFile).forEach(template => addOrRemoveInlineNavigationAttribute({
-        template: template.text,
-        offset: template.getStart() + 1,
-        elementName,
-        recorder
-    }));
-    getTemplateUrl(sourceFile).forEach(templateUrl => {
-        const templatePath = join(dirname(filePath), templateUrl);
-        const templateContent = tree.read(templatePath).toString('utf-8');
-        const templateRecorder = tree.beginUpdate(templatePath);
-        addOrRemoveInlineNavigationAttribute({
-            template: templateContent,
-            offset: 0,
-            elementName,
-            recorder: templateRecorder
-        });
-        tree.commitUpdate(templateRecorder);
-    });
-};
-/**
- * Migrates the inlineNavigation attribute on wizard elements.
- * - Adds `inlineNavigation` when not present (new default: true)
- * - Removes `[inlineNavigation]="false"` (false is now the default)
- * - Keeps `[inlineNavigation]="true"` and dynamic bindings unchanged
- */
-const addOrRemoveInlineNavigationAttribute = ({ template, offset, recorder, elementName }) => {
-    const elements = findElement(template, element => element.name === elementName);
-    for (const element of elements) {
-        const inlineNavigationAttr = element.attrs.find(attr => attr.name === '[inlineNavigation]' || attr.name === 'inlineNavigation');
-        if (!inlineNavigationAttr) {
-            // No attribute exists → Add default inlineNavigation
-            const insertPosition = element.startSourceSpan.end.offset + offset - 1;
-            recorder.insertLeft(insertPosition, ' inlineNavigation');
-        }
-        else if ((inlineNavigationAttr.name === '[inlineNavigation]' ||
-            inlineNavigationAttr.name === 'inlineNavigation') &&
-            inlineNavigationAttr.value === 'false') {
-            const { start, end } = inlineNavigationAttr.sourceSpan;
-            const length = end.offset - start.offset;
-            recorder.remove(start.offset + offset, length);
-            // Also remove extra whitespace if present
-            const nextChar = template.charAt(end.offset);
-            if (nextChar === ' ') {
-                recorder.remove(end.offset + offset, 1);
-            }
-        }
-    }
-};

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

@@ -1,101 +0,0 @@
-/**
- * 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 async (tree, context) => {
-        const rules = [];
-        context.logger.info('🎨 Migrating SCSS styles...');
-        const globalStyles = await 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 = await 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

@@ -1,16 +0,0 @@
-{
-  "$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

@@ -1,62 +0,0 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export const STYLE_REPLACEMENTS = [
-    // Single quotes
-    {
-        replace: `@import '@simpl/element-theme/`,
-        new: `@import '@siemens/element-theme/`
-    },
-    {
-        replace: `@use '@simpl/element-theme/`,
-        new: `@use '@siemens/element-theme/`
-    },
-    // Double quotes
-    {
-        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: `// Load Siemens fonts` },
-    { insert: `@use '@simpl/brand/assets/fonts/styles/siemens-sans';` },
-    { insert: `// Load Element icons` },
-    { insert: `@use '@simpl/element-icons/dist/style/simpl-element-icons';` },
-    { insert: `// Use Element theme` },
-    {
-        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 Element components` },
-    { insert: `@use '@siemens/element-ng/element-ng';` },
-    { insert: `// Actually build the siemens-brand theme` },
-    { 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,
-    /@use ['"]@simpl\/element-ng\/simpl-element-ng['"];/g
-];