@siemens/element-ng 48.0.3 → 48.2.0-rc.1

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,17 @@
+/**
+ * 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)
+        ]);
+        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": []
+}

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

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { chain } from '@angular-devkit/schematics';
+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';
+export const tsImportMigration = (_options) => {
+    return (tree, context) => {
+        context.logger.info('🚀 Starting Simpl to Siemens migration...');
+        return tsImportMigrationRule(_options)(tree, context);
+    };
+};
+/**
+ * Creates a migration rule that updates import statements in TypeScript files.
+ *
+ * This rule discovers source files, analyzes their import statements, and applies
+ * necessary transformations to migrate imports according to the specified options.
+ * It processes each file individually and chains all the resulting rules together.
+ *
+ * @param _options - Configuration options for the migration process
+ * @returns A Rule function that can be executed by Angular Schematics
+ *
+ * @example
+ * ```typescript
+ * const migrationRule = tsImportMigrationRule({ path: 'some-path' });
+ * ```
+ */
+export const tsImportMigrationRule = (_options) => {
+    return (tree, context) => {
+        const rules = [];
+        context.logger.info('📦 Migrating TypeScript imports...');
+        const sourceFiles = 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) {
+                continue;
+            }
+            const rule = rewriteImportsInFile(filePath, migrations);
+            rules.push(rule);
+        }
+        return chain([...rules]);
+    };
+};
+const collectMigrationImports = (filePath, tree, _context) => {
+    const content = tree.read(filePath);
+    const imports = new Map();
+    if (!content) {
+        return { imports, toRemoveImports: [] };
+    }
+    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;
+        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]);
+            }
+            else {
+                migration.push(symbolName);
+            }
+        }
+        if (toRemove) {
+            toRemoveImports.push(node);
+        }
+    }
+    return { imports, toRemoveImports };
+};
+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());
+        }
+        // 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}';`);
+        }
+        tree.commitUpdate(recorder);
+        return tree;
+    };
+};
+const findComponentImportPath = (symbolName, moduleSpecifier) => {
+    const [, project, subPath] = moduleSpecifier.split('/');
+    switch (project) {
+        case 'element-ng': {
+            // Special case for MenuItem from menu package as it has conflicting name with MenuItem from common package
+            if (symbolName === 'MenuItem' && subPath === 'menu') {
+                return '@siemens/element-ng/menu';
+            }
+            return ELEMENT_NG_MAPPINGS[symbolName];
+        }
+        case 'maps-ng':
+            return MAPS_NG_MAPPINGS[symbolName];
+        case 'dashboards-ng':
+            return DASHBOARDS_NG_MAPPINGS[symbolName];
+        case 'charts-ng':
+            return CHARTS_NG_MAPPINGS[symbolName];
+        case 'element-translate-ng':
+            return ELEMENT_TRANSLATE_NG_MAPPINGS[symbolName];
+        default:
+            return undefined;
+    }
+};

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

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const CHARTS_NG_MAPPINGS = {
+    'AxisData': '@siemens/charts-ng',
+    'AxisPointerEvent': '@siemens/charts-ng',
+    'AxisType': '@siemens/charts-ng',
+    'BarSeriesData': '@siemens/charts-ng',
+    'CandlestickSeriesData': '@siemens/charts-ng',
+    'CartesianChartData': '@siemens/charts-ng',
+    'CartesianChartSeries': '@siemens/charts-ng',
+    'CartesianDataNullable': '@siemens/charts-ng',
+    'ChartXAxis': '@siemens/charts-ng',
+    'ChartYAxis': '@siemens/charts-ng',
+    'CircleChartData': '@siemens/charts-ng',
+    'CircleChartSeries': '@siemens/charts-ng',
+    'CircleValueUpdate': '@siemens/charts-ng',
+    'CustomLegend': '@siemens/charts-ng',
+    'CustomLegendItem': '@siemens/charts-ng',
+    'CustomLegendMultiLineInfo': '@siemens/charts-ng',
+    'CustomLegendProps': '@siemens/charts-ng',
+    'DataZoomEvent': '@siemens/charts-ng',
+    'DataZoomRange': '@siemens/charts-ng',
+    'EChartOption': '@siemens/charts-ng',
+    'echarts': '@siemens/charts-ng',
+    'EChartSeries': '@siemens/charts-ng',
+    'EChartSeriesOption': '@siemens/charts-ng',
+    'FilterMode': '@siemens/charts-ng',
+    'GaugeChartSeries': '@siemens/charts-ng',
+    'GridRectCoordinate': '@siemens/charts-ng',
+    'HeatmapSeriesData': '@siemens/charts-ng',
+    'LegendItem': '@siemens/charts-ng',
+    'LineColor': '@siemens/charts-ng',
+    'LineSeriesData': '@siemens/charts-ng',
+    'LineStepType': '@siemens/charts-ng',
+    'LineType': '@siemens/charts-ng',
+    'MarkAreaData': '@siemens/charts-ng',
+    'MarkLineData': '@siemens/charts-ng',
+    'MarkPointData': '@siemens/charts-ng',
+    'ProgressBarChartSeries': '@siemens/charts-ng',
+    'ProgressBarValueUpdate': '@siemens/charts-ng',
+    'ProgressChartSeries': '@siemens/charts-ng',
+    'ProgressValueUpdate': '@siemens/charts-ng',
+    'ScatterSeriesData': '@siemens/charts-ng',
+    'SelectedLegendItem': '@siemens/charts-ng',
+    'SeriesSelectionState': '@siemens/charts-ng',
+    'SeriesUpdate': '@siemens/charts-ng',
+    'SiBarSeriesOption': '@siemens/charts-ng',
+    'SiCandlestickSeriesOption': '@siemens/charts-ng',
+    'SiChartCartesianComponent': '@siemens/charts-ng',
+    'SiChartCircleComponent': '@siemens/charts-ng',
+    'SiChartComponent': '@siemens/charts-ng',
+    'SiChartGaugeComponent': '@siemens/charts-ng',
+    'SiChartProgressBarComponent': '@siemens/charts-ng',
+    'SiChartProgressComponent': '@siemens/charts-ng',
+    'SiChartSankeyComponent': '@siemens/charts-ng',
+    'SiChartsNgModule': '@siemens/charts-ng',
+    'SiChartSunburstComponent': '@siemens/charts-ng',
+    'SiCustomLegendComponent': '@siemens/charts-ng',
+    'SiHeatmapSeriesOption': '@siemens/charts-ng',
+    'SiLineSeriesOption': '@siemens/charts-ng',
+    'SiScatterSeriesOption': '@siemens/charts-ng',
+    'SiSeriesOption': '@siemens/charts-ng',
+    'SubchartGrid': '@siemens/charts-ng',
+    'themeElement': '@siemens/charts-ng',
+    'themeSupport': '@siemens/charts-ng',
+    'XAxisPosition': '@siemens/charts-ng',
+    'YAxisPosition': '@siemens/charts-ng'
+};

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const DASHBOARDS_NG_MAPPINGS = {
+    'CONFIG_TOKEN': '@siemens/dashboards-ng',
+    'Config': '@siemens/dashboards-ng',
+    'createWidgetConfig': '@siemens/dashboards-ng',
+    'DashboardToolbarItem': '@siemens/dashboards-ng',
+    'DashboardToolbarItemAction': '@siemens/dashboards-ng',
+    'DashboardToolbarItemLink': '@siemens/dashboards-ng',
+    'DashboardToolbarItemRouterLink': '@siemens/dashboards-ng',
+    'DEFAULT_GRIDSTACK_OPTIONS': '@siemens/dashboards-ng',
+    'DEFAULT_WIDGET_STORAGE_TOKEN': '@siemens/dashboards-ng',
+    'FederatedModule': '@siemens/dashboards-ng',
+    'GridConfig': '@siemens/dashboards-ng',
+    'LoadRemoteModuleEsmOptions': '@siemens/dashboards-ng',
+    'LoadRemoteModuleManifestOptions': '@siemens/dashboards-ng',
+    'LoadRemoteModuleOptions': '@siemens/dashboards-ng',
+    'LoadRemoteModuleScriptOptions': '@siemens/dashboards-ng',
+    'NEW_WIDGET_PREFIX': '@siemens/dashboards-ng',
+    'ObjectFit': '@siemens/dashboards-ng',
+    'provideSiDashboardsTranslatableOverrides': '@siemens/dashboards-ng/translate',
+    'registerModuleFederatedWidgetLoader': '@siemens/dashboards-ng/module-federation',
+    'SetupComponentFn': '@siemens/dashboards-ng',
+    'setupWidgetEditor': '@siemens/dashboards-ng',
+    'setupWidgetInstance': '@siemens/dashboards-ng',
+    'SI_DASHBOARD_CONFIGURATION': '@siemens/dashboards-ng',
+    'SI_WIDGET_STORE': '@siemens/dashboards-ng',
+    'SiD': '@siemens/dashboards-ng',
+    'SiDashboardsNgModule': '@siemens/dashboards-ng',
+    'SiDefaultWidgetStorage': '@siemens/dashboards-ng',
+    'SiFlexibleDashboardComponent': '@siemens/dashboards-ng',
+    'SiGridComponent': '@siemens/dashboards-ng',
+    'SiWidgetCatalogComponent': '@siemens/dashboards-ng',
+    'SiWidgetInstanceEditorDialogComponent': '@siemens/dashboards-ng',
+    'STORAGE_KEY': '@siemens/dashboards-ng',
+    'WebComponent': '@siemens/dashboards-ng',
+    'Widget': '@siemens/dashboards-ng',
+    'WidgetComponentFactory': '@siemens/dashboards-ng',
+    'WidgetComponentTypeFactory': '@siemens/dashboards-ng',
+    'WidgetConfig': '@siemens/dashboards-ng',
+    'WidgetConfigEvent': '@siemens/dashboards-ng',
+    'WidgetConfigStatus': '@siemens/dashboards-ng',
+    'widgetFactoryRegistry': '@siemens/dashboards-ng',
+    'WidgetImage': '@siemens/dashboards-ng',
+    'WidgetInstance': '@siemens/dashboards-ng',
+    'WidgetInstanceEditor': '@siemens/dashboards-ng',
+    'WidgetInstanceEditorWizard': '@siemens/dashboards-ng',
+    'WidgetInstanceEditorWizardState': '@siemens/dashboards-ng',
+    'WidgetPositionConfig': '@siemens/dashboards-ng'
+};