@siemens/element-ng 51.0.0-rc.9 → 51.0.1

package/schematics/migration.json

@@ -5,6 +5,11 @@
       "version": "51.0.0",
       "description": "Updates Siemens element to v51",
       "factory": "./ng-update/index#migrateToV51"
+    },
+    "migration-v51-0-1": {
+      "version": "51.0.1",
+      "description": "Renames Siemens Design Language color tokens to include the color group segment",
+      "factory": "./ng-update/index#migrateToV5101"
     }
   }
 }

package/schematics/migrations/data/css-custom-properties.js

@@ -1,3 +1,194 @@
+/** Color token suffixes that moved from `si.sys.<group>` to `si.sys.color.<group>`. */
+export const SYS_COLOR_TOKEN_NAMES = [
+    'background-0',
+    'background-1',
+    'background-2',
+    'background-3',
+    'background-4',
+    'background-accent',
+    'background-accent-active',
+    'background-accent-hover',
+    'background-accent-secondary',
+    'background-accent-secondary-active',
+    'background-accent-secondary-hover',
+    'background-active',
+    'background-caution',
+    'background-caution-active',
+    'background-caution-hover',
+    'background-caution-subtle',
+    'background-critical',
+    'background-critical-active',
+    'background-critical-hover',
+    'background-critical-subtle',
+    'background-danger',
+    'background-danger-active',
+    'background-danger-hover',
+    'background-danger-secondary',
+    'background-danger-subtle',
+    'background-hover',
+    'background-information',
+    'background-information-active',
+    'background-information-hover',
+    'background-information-subtle',
+    'background-inverse',
+    'background-neutral',
+    'background-neutral-active',
+    'background-neutral-hover',
+    'background-success',
+    'background-success-active',
+    'background-success-hover',
+    'background-success-subtle',
+    'background-warning',
+    'background-warning-active',
+    'background-warning-hover',
+    'background-warning-secondary',
+    'background-warning-subtle',
+    'border-1',
+    'border-2',
+    'border-3',
+    'border-4',
+    'border-accent',
+    'border-accent-active',
+    'border-accent-hover',
+    'border-caution',
+    'border-critical',
+    'border-danger',
+    'border-danger-secondary',
+    'border-information',
+    'border-inverse',
+    'border-neutral',
+    'border-success',
+    'border-warning',
+    'border-warning-secondary',
+    'code-1',
+    'code-2',
+    'code-3',
+    'code-4',
+    'code-5',
+    'code-6',
+    'code-7',
+    'code-8',
+    'code-9',
+    'code-10',
+    'code-11',
+    'code-12',
+    'data-categorical-1',
+    'data-categorical-2',
+    'data-categorical-3',
+    'data-categorical-4',
+    'data-categorical-5',
+    'data-categorical-6',
+    'data-categorical-7',
+    'data-categorical-8',
+    'data-categorical-9',
+    'data-categorical-10',
+    'data-categorical-11',
+    'data-categorical-12',
+    'data-categorical-13',
+    'data-categorical-14',
+    'data-categorical-15',
+    'data-categorical-16',
+    'data-categorical-17',
+    'data-rating-average',
+    'data-rating-bad',
+    'data-rating-excellent',
+    'data-rating-good',
+    'data-rating-poor',
+    'data-sequential-avocado-1',
+    'data-sequential-avocado-2',
+    'data-sequential-avocado-3',
+    'data-sequential-avocado-4',
+    'data-sequential-blue-1',
+    'data-sequential-blue-2',
+    'data-sequential-blue-3',
+    'data-sequential-blue-4',
+    'data-sequential-deep-blue-1',
+    'data-sequential-deep-blue-2',
+    'data-sequential-deep-blue-3',
+    'data-sequential-deep-blue-4',
+    'data-sequential-green-1',
+    'data-sequential-green-2',
+    'data-sequential-green-3',
+    'data-sequential-green-4',
+    'data-sequential-interactive-coral-1',
+    'data-sequential-interactive-coral-2',
+    'data-sequential-interactive-coral-3',
+    'data-sequential-interactive-coral-4',
+    'data-sequential-orange-1',
+    'data-sequential-orange-2',
+    'data-sequential-orange-3',
+    'data-sequential-orange-4',
+    'data-sequential-orchid-1',
+    'data-sequential-orchid-2',
+    'data-sequential-orchid-3',
+    'data-sequential-orchid-4',
+    'data-sequential-plum-1',
+    'data-sequential-plum-2',
+    'data-sequential-plum-3',
+    'data-sequential-plum-4',
+    'data-sequential-purple-1',
+    'data-sequential-purple-2',
+    'data-sequential-purple-3',
+    'data-sequential-purple-4',
+    'data-sequential-red-1',
+    'data-sequential-red-2',
+    'data-sequential-red-3',
+    'data-sequential-red-4',
+    'data-sequential-royal-blue-1',
+    'data-sequential-royal-blue-2',
+    'data-sequential-royal-blue-3',
+    'data-sequential-royal-blue-4',
+    'data-sequential-sand-1',
+    'data-sequential-sand-2',
+    'data-sequential-sand-3',
+    'data-sequential-sand-4',
+    'data-sequential-turquoise-1',
+    'data-sequential-turquoise-2',
+    'data-sequential-turquoise-3',
+    'data-sequential-turquoise-4',
+    'data-sequential-yellow-1',
+    'data-sequential-yellow-2',
+    'data-sequential-yellow-3',
+    'data-sequential-yellow-4',
+    'effects-backdrop',
+    'effects-focus',
+    'effects-logo',
+    'effects-shadow-1',
+    'effects-shadow-2',
+    'effects-shadow-3',
+    'effects-shadow-4',
+    'text-accent',
+    'text-accent-active',
+    'text-accent-hover',
+    'text-caution',
+    'text-critical',
+    'text-danger',
+    'text-disabled',
+    'text-information',
+    'text-inverse',
+    'text-on-accent',
+    'text-on-accent-secondary',
+    'text-on-accent-secondary-active',
+    'text-on-accent-secondary-hover',
+    'text-on-caution',
+    'text-on-critical',
+    'text-on-danger',
+    'text-on-danger-secondary',
+    'text-on-information',
+    'text-on-neutral',
+    'text-on-success',
+    'text-on-warning',
+    'text-on-warning-secondary',
+    'text-primary',
+    'text-secondary',
+    'text-success',
+    'text-warning'
+];
+export const SYS_COLOR_TOKEN_RENAMES = SYS_COLOR_TOKEN_NAMES.flatMap(name => [
+    { replace: `$si-sys-${name}`, replaceWith: `$si-sys-color-${name}` },
+    { replace: `--si-sys-${name}`, replaceWith: `--si-sys-color-${name}` },
+    { replace: `si-sys-${name}`, replaceWith: `si-sys-color-${name}` }
+]);
 export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
     {
         replace: '--si-feedback-icon-offset',
@@ -157,47 +348,47 @@ export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
     },
     {
         replace: '$box-shadow',
-        replaceWith: '$si-sys-effects-shadow-2'
+        replaceWith: '$si-sys-color-effects-shadow-2'
     },
     {
         replace: '$box-shadow-sm',
-        replaceWith: '$si-sys-effects-shadow-1'
+        replaceWith: '$si-sys-color-effects-shadow-1'
     },
     {
         replace: '$box-shadow-lg',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$popover-box-shadow',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$modal-content-box-shadow-xs',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$modal-content-box-shadow-sm-up',
-        replaceWith: '$si-sys-effects-shadow-2'
+        replaceWith: '$si-sys-color-effects-shadow-2'
     },
     {
         replace: '$thumbnail-box-shadow',
-        replaceWith: '$si-sys-effects-shadow-1'
+        replaceWith: '$si-sys-color-effects-shadow-1'
     },
     {
         replace: '$element-elevation-1',
-        replaceWith: '$si-sys-effects-shadow-1'
+        replaceWith: '$si-sys-color-effects-shadow-1'
     },
     {
         replace: '$element-elevation-2',
-        replaceWith: '$si-sys-effects-shadow-2'
+        replaceWith: '$si-sys-color-effects-shadow-2'
     },
     {
         replace: '$element-elevation-3',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$element-elevation-4',
-        replaceWith: '$si-sys-effects-shadow-4'
+        replaceWith: '$si-sys-color-effects-shadow-4'
     },
     ...['font-size', 'line-height', 'font-weight'].flatMap(property => [
         {
@@ -220,5 +411,6 @@ export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
             replace: `$si-${property}-display-bold`,
             replaceWith: `$si-${property}-display-lg-sbold`
         }
-    ])
+    ]),
+    ...SYS_COLOR_TOKEN_RENAMES
 ];

package/schematics/migrations/data/element-class-changes.js

@@ -4,13 +4,13 @@
  */
 export const ELEMENT_CLASS_CHANGES_MIGRATION = [
     ...[
-        ['bg-primary', 'background-accent'],
-        ['bg-secondary', 'background-neutral'],
+        ['bg-primary', 'background-accent', ['badge']],
+        ['bg-secondary', 'background-neutral', ['badge']],
         ['bg-tertiary', 'background-4'],
-        ['bg-success', 'background-success'],
-        ['bg-info', 'background-information'],
-        ['bg-warning', 'background-warning'],
-        ['bg-danger', 'background-danger'],
+        ['bg-success', 'background-success', ['badge']],
+        ['bg-info', 'background-information', ['badge']],
+        ['bg-warning', 'background-warning', ['badge']],
+        ['bg-danger', 'background-danger', ['badge']],
         ['bg-base-0', 'background-0'],
         ['bg-base-1', 'background-1'],
         ['bg-base-2', 'background-2'],
@@ -37,8 +37,9 @@ export const ELEMENT_CLASS_CHANGES_MIGRATION = [
         ['elevation-2', 'shadow-2'],
         ['elevation-3', 'shadow-3'],
         ['elevation-4', 'shadow-4']
-    ].map(([oldClass, newClass]) => ({
+    ].map(([oldClass, newClass, excludedClasses]) => ({
         requiredClasses: [oldClass],
+        excludedClasses,
         removeClasses: [oldClass],
         addClasses: [newClass]
     })),

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

@@ -6,7 +6,7 @@ import { ATTRIBUTE_SELECTORS_MIGRATION } from './attribute-selectors.js';
 import { CLASS_MEMBER_REPLACEMENTS_MIGRATION } from './class-member-replacement.js';
 import { COMPONENT_PROPERTY_NAMES_MIGRATION } from './component-property-names.js';
 import { COMPONENT_PROPERTY_TO_CHILD_MIGRATION } from './component-property-to-child.js';
-import { CSS_CUSTOM_PROPERTIES_MIGRATION } from './css-custom-properties.js';
+import { CSS_CUSTOM_PROPERTIES_MIGRATION, SYS_COLOR_TOKEN_RENAMES } from './css-custom-properties.js';
 import { ELEMENT_CLASS_CHANGES_MIGRATION } from './element-class-changes.js';
 import { ELEMENT_SELECTORS_MIGRATION } from './element-selectors.js';
 import { PROVIDER_FUNCTION_REMOVALS_MIGRATION } from './provider-function-removals.js';
@@ -24,3 +24,15 @@ export const getElementMigrationData = () => ({
     symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
     symbolRenamingChanges: SYMBOL_RENAMING_MIGRATION
 });
+export const getColorTokenRenameMigrationData = () => ({
+    attributeSelectorChanges: [],
+    classMemberReplacementChanges: [],
+    componentPropertyNameChanges: [],
+    cssCustomPropertyChanges: SYS_COLOR_TOKEN_RENAMES,
+    componentPropertyToChildChanges: [],
+    elementClassChanges: [],
+    elementSelectorChanges: [],
+    providerFunctionRemovalChanges: [],
+    symbolRemovalChanges: [],
+    symbolRenamingChanges: []
+});

package/schematics/migrations/data/index.js

@@ -1 +1 @@
-export { getElementMigrationData } from './element-migration-data.js';
+export { getColorTokenRenameMigrationData, getElementMigrationData } from './element-migration-data.js';

package/schematics/ng-update/index.js

@@ -3,3 +3,4 @@
  * SPDX-License-Identifier: MIT
  */
 export { migrateToV51 } from './migrate-to-v51.js';
+export { migrateToV5101 } from './migrate-to-v51-0-1.js';

package/schematics/ng-update/migrate-list-details-units.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { dirname, join } from 'path/posix';
+import ts from 'typescript';
+import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl, insertAttribute } from '../utils/index.js';
+const disableResizingAttributeNames = [
+    'disableResizing',
+    '[disableResizing]',
+    'bind-disableResizing'
+];
+const listWidthUnitAttributeNames = ['listWidthUnit', '[listWidthUnit]', 'bind-listWidthUnit'];
+export const listDetailsUnitsMigrationRule = (options) => {
+    return async (tree, context) => {
+        const processedTemplates = new Set();
+        for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
+            const { path: filePath, sourceFile } = discoveredSourceFile;
+            const recorder = tree.beginUpdate(filePath);
+            for (const template of getInlineTemplates(sourceFile)) {
+                migrateListDetailsUnitsTemplate(sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1), template.getStart() + 1, recorder);
+            }
+            tree.commitUpdate(recorder);
+            for (const templateUrl of getTemplateUrl(sourceFile)) {
+                const templatePath = join(dirname(filePath), templateUrl);
+                if (processedTemplates.has(templatePath) || !tree.exists(templatePath)) {
+                    continue;
+                }
+                processedTemplates.add(templatePath);
+                const templateRecorder = tree.beginUpdate(templatePath);
+                migrateListDetailsUnitsTemplate(tree.read(templatePath).toString('utf-8'), 0, templateRecorder);
+                tree.commitUpdate(templateRecorder);
+            }
+        }
+        return tree;
+    };
+};
+const migrateListDetailsUnitsTemplate = (template, offset, recorder) => {
+    findElement(template, element => element.name === 'si-list-details').forEach(element => {
+        migrateListDetailsElement(template, element, offset, recorder);
+    });
+};
+const migrateListDetailsElement = (template, element, offset, recorder) => {
+    const disableResizingAttribute = element.attrs.find(attr => disableResizingAttributeNames.includes(attr.name));
+    const isExplicitlyDisabled = disableResizingAttribute && getStaticBooleanValue(disableResizingAttribute) === true;
+    if (isExplicitlyDisabled) {
+        return;
+    }
+    const hasListWidthUnit = element.attrs.some(attr => listWidthUnitAttributeNames.includes(attr.name));
+    if (hasListWidthUnit) {
+        return;
+    }
+    insertAttribute(template, element, 'listWidthUnit="fr"', offset, recorder);
+};
+const getStaticBooleanValue = (attribute) => {
+    if (!attribute.name.startsWith('[')) {
+        if (/^\s*{{[\s\S]*}}\s*$/.test(attribute.value)) {
+            return undefined;
+        }
+        return attribute.value !== 'false';
+    }
+    const initializer = getExpression(attribute.value);
+    if (!initializer) {
+        return undefined;
+    }
+    if (initializer.kind === ts.SyntaxKind.TrueKeyword) {
+        return true;
+    }
+    if (initializer.kind === ts.SyntaxKind.FalseKeyword ||
+        initializer.kind === ts.SyntaxKind.NullKeyword ||
+        (ts.isIdentifier(initializer) && initializer.text === 'undefined') ||
+        (ts.isStringLiteral(initializer) && initializer.text === 'false')) {
+        return false;
+    }
+    if (ts.isStringLiteral(initializer) || ts.isNumericLiteral(initializer)) {
+        return true;
+    }
+    return undefined;
+};
+const getExpression = (value) => {
+    const statement = ts.createSourceFile('template-expression.ts', `const value = ${value};`, ts.ScriptTarget.Latest, true).statements[0];
+    if (!statement || !ts.isVariableStatement(statement)) {
+        return undefined;
+    }
+    return statement.declarationList.declarations[0]?.initializer;
+};

package/schematics/ng-update/migrate-main-detail-units.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { dirname, join } from 'path/posix';
+import ts from 'typescript';
+import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl, insertAttribute } from '../utils/index.js';
+const resizableAttributeNames = ['resizableParts', '[resizableParts]', 'bind-resizableParts'];
+const mainUnitAttributeNames = [
+    'mainContainerWidthUnit',
+    '[mainContainerWidthUnit]',
+    'bind-mainContainerWidthUnit'
+];
+export const mainDetailUnitsMigrationRule = (options) => {
+    return async (tree, context) => {
+        const processedTemplates = new Set();
+        for await (const discoveredSourceFile of discoverSourceFiles(tree, context, options.path)) {
+            const { path: filePath, sourceFile } = discoveredSourceFile;
+            const recorder = tree.beginUpdate(filePath);
+            for (const template of getInlineTemplates(sourceFile)) {
+                migrateMainDetailUnitsTemplate(sourceFile.text.substring(template.getStart() + 1, template.getEnd() - 1), template.getStart() + 1, recorder);
+            }
+            tree.commitUpdate(recorder);
+            for (const templateUrl of getTemplateUrl(sourceFile)) {
+                const templatePath = join(dirname(filePath), templateUrl);
+                if (processedTemplates.has(templatePath) || !tree.exists(templatePath)) {
+                    continue;
+                }
+                processedTemplates.add(templatePath);
+                const templateRecorder = tree.beginUpdate(templatePath);
+                migrateMainDetailUnitsTemplate(tree.read(templatePath).toString('utf-8'), 0, templateRecorder);
+                tree.commitUpdate(templateRecorder);
+            }
+        }
+        return tree;
+    };
+};
+const migrateMainDetailUnitsTemplate = (template, offset, recorder) => {
+    findElement(template, element => element.name === 'si-main-detail-container').forEach(element => {
+        migrateMainDetailContainerElement(template, element, offset, recorder);
+    });
+};
+const migrateMainDetailContainerElement = (template, element, offset, recorder) => {
+    const resizableAttribute = element.attrs.find(attr => resizableAttributeNames.includes(attr.name));
+    if (!resizableAttribute) {
+        return;
+    }
+    const isExplicitlyDisabled = getStaticBooleanValue(resizableAttribute) === false;
+    if (isExplicitlyDisabled) {
+        return;
+    }
+    const hasMainUnit = element.attrs.some(attr => mainUnitAttributeNames.includes(attr.name));
+    if (hasMainUnit) {
+        return;
+    }
+    insertAttribute(template, element, 'mainContainerWidthUnit="fr"', offset, recorder);
+};
+const getStaticBooleanValue = (attribute) => {
+    if (!attribute.name.startsWith('[')) {
+        if (/^\s*{{[\s\S]*}}\s*$/.test(attribute.value)) {
+            return undefined;
+        }
+        return attribute.value !== 'false';
+    }
+    const initializer = getExpression(attribute.value);
+    if (!initializer) {
+        return undefined;
+    }
+    if (initializer.kind === ts.SyntaxKind.TrueKeyword) {
+        return true;
+    }
+    if (initializer.kind === ts.SyntaxKind.FalseKeyword ||
+        initializer.kind === ts.SyntaxKind.NullKeyword ||
+        (ts.isIdentifier(initializer) && initializer.text === 'undefined') ||
+        (ts.isStringLiteral(initializer) && initializer.text === 'false')) {
+        return false;
+    }
+    if (ts.isStringLiteral(initializer) || ts.isNumericLiteral(initializer)) {
+        return true;
+    }
+    return undefined;
+};
+const getExpression = (value) => {
+    const statement = ts.createSourceFile('template-expression.ts', `const value = ${value};`, ts.ScriptTarget.Latest, true).statements[0];
+    if (!statement || !ts.isVariableStatement(statement)) {
+        return undefined;
+    }
+    return statement.declarationList.declarations[0]?.initializer;
+};

package/schematics/ng-update/migrate-split-collapse.js

@@ -4,7 +4,7 @@
  */
 import { dirname, join } from 'path/posix';
 import ts from 'typescript';
-import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl } from '../utils/index.js';
+import { discoverSourceFiles, findElement, formatBoundAttribute, getInlineTemplates, getTemplateUrl, insertAttribute, removeAttribute, replaceAttribute } from '../utils/index.js';
 const collapseValues = new Map([
     ['start', 'to-start'],
     ['end', 'to-end']
@@ -132,37 +132,6 @@ const getShowCollapseButtonExpression = (attribute) => {
     return attribute.value.replace(/^\s*{{\s*|\s*}}\s*$/g, '');
 };
 const getBooleanAttributeCondition = (expression) => `![false, null, undefined, 'false'].includes($any(${expression}))`;
-const formatBoundAttribute = (name, expression) => {
-    const quote = expression.includes('"') && !expression.includes("'") ? "'" : '"';
-    const escapedExpression = quote === '"' ? expression.replaceAll('"', '"') : expression.replaceAll("'", ''');
-    return `[${name}]=${quote}${escapedExpression}${quote}`;
-};
-const replaceAttribute = (attribute, replacement, offset, recorder) => {
-    const start = attribute.sourceSpan.start.offset + offset;
-    recorder.remove(start, attribute.sourceSpan.end.offset - attribute.sourceSpan.start.offset);
-    recorder.insertLeft(start, replacement);
-};
-const insertAttribute = (template, element, attribute, offset, recorder) => {
-    const selfClosing = element.startSourceSpan.toString().endsWith('/>');
-    const insertOffset = element.startSourceSpan.end.offset - (selfClosing ? 2 : 1);
-    const prefix = /\s/.test(template[insertOffset - 1]) ? '' : ' ';
-    recorder.insertLeft(insertOffset + offset, `${prefix}${attribute}${selfClosing ? ' ' : ''}`);
-};
-const removeAttribute = (template, attribute, offset, recorder) => {
-    const start = attribute.sourceSpan.start.offset;
-    const end = attribute.sourceSpan.end.offset;
-    const lineStart = template.lastIndexOf('\n', start - 1) + 1;
-    const lineEnd = template.indexOf('\n', end);
-    const endOfLine = lineEnd === -1 ? template.length : lineEnd;
-    if (template.slice(lineStart, start).trim() === '' &&
-        template.slice(end, endOfLine).trim() === '') {
-        const removeEnd = lineEnd === -1 ? endOfLine : lineEnd + 1;
-        recorder.remove(lineStart + offset, removeEnd - lineStart);
-        return;
-    }
-    const removeStart = start > 0 && /\s/.test(template[start - 1]) ? start - 1 : start;
-    recorder.remove(removeStart + offset, attribute.sourceSpan.end.offset - removeStart);
-};
 const getStringLiteral = (value) => {
     const initializer = getExpression(value);
     return initializer && ts.isStringLiteral(initializer)