@siemens/element-ng 51.0.0-rc.8 → 51.0.0

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

@@ -154,5 +154,71 @@ export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
     {
         replace: '$si-font-weight-display-4',
         replaceWith: '$si-font-weight-display'
-    }
+    },
+    {
+        replace: '$box-shadow',
+        replaceWith: '$si-sys-effects-shadow-2'
+    },
+    {
+        replace: '$box-shadow-sm',
+        replaceWith: '$si-sys-effects-shadow-1'
+    },
+    {
+        replace: '$box-shadow-lg',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$popover-box-shadow',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$modal-content-box-shadow-xs',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$modal-content-box-shadow-sm-up',
+        replaceWith: '$si-sys-effects-shadow-2'
+    },
+    {
+        replace: '$thumbnail-box-shadow',
+        replaceWith: '$si-sys-effects-shadow-1'
+    },
+    {
+        replace: '$element-elevation-1',
+        replaceWith: '$si-sys-effects-shadow-1'
+    },
+    {
+        replace: '$element-elevation-2',
+        replaceWith: '$si-sys-effects-shadow-2'
+    },
+    {
+        replace: '$element-elevation-3',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$element-elevation-4',
+        replaceWith: '$si-sys-effects-shadow-4'
+    },
+    ...['font-size', 'line-height', 'font-weight'].flatMap(property => [
+        {
+            replace: `$si-${property}-h1-bold`,
+            replaceWith: `$si-${property}-h1`
+        },
+        {
+            replace: `$si-${property}-h4-bold`,
+            replaceWith: `$si-${property}-h4`
+        },
+        {
+            replace: `$si-${property}-body-lg-bold`,
+            replaceWith: `$si-${property}-body-lg-sbold`
+        },
+        {
+            replace: `$si-${property}-caption`,
+            replaceWith: `$si-${property}-body-sm`
+        },
+        {
+            replace: `$si-${property}-display-bold`,
+            replaceWith: `$si-${property}-display-lg-sbold`
+        }
+    ])
 ];

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'],
@@ -28,9 +28,18 @@ export const ELEMENT_CLASS_CHANGES_MIGRATION = [
         ['text-body', 'text-primary'],
         ['text-tertiary', 'text-disabled'],
         ['text-muted', 'text-disabled'],
-        ['text-info', 'text-information']
-    ].map(([oldClass, newClass]) => ({
+        ['text-info', 'text-information'],
+        ['shadow', 'shadow-2'],
+        ['shadow-sm', 'shadow-1'],
+        ['shadow-lg', 'shadow-3'],
+        ['elevation-none', 'shadow-none'],
+        ['elevation-1', 'shadow-1'],
+        ['elevation-2', 'shadow-2'],
+        ['elevation-3', 'shadow-3'],
+        ['elevation-4', 'shadow-4']
+    ].map(([oldClass, newClass, excludedClasses]) => ({
         requiredClasses: [oldClass],
+        excludedClasses,
         removeClasses: [oldClass],
         addClasses: [newClass]
     })),
@@ -56,12 +65,12 @@ export const ELEMENT_CLASS_CHANGES_MIGRATION = [
     {
         requiredClasses: ['si-h1-black'],
         removeClasses: ['si-h1-black'],
-        addClasses: ['si-h1-bold']
+        addClasses: ['si-h1']
     },
     {
         requiredClasses: ['si-title-1-bold'],
         removeClasses: ['si-title-1-bold'],
-        addClasses: ['si-h4-bold']
+        addClasses: ['si-h4']
     },
     {
         requiredClasses: ['si-title-1'],
@@ -101,11 +110,21 @@ export const ELEMENT_CLASS_CHANGES_MIGRATION = [
     {
         requiredClasses: ['si-display-3'],
         removeClasses: ['si-display-3'],
-        addClasses: ['si-display-bold']
+        addClasses: ['si-display-lg-sbold']
     },
     {
         requiredClasses: ['si-display-4'],
         removeClasses: ['si-display-4'],
         addClasses: ['si-display']
-    }
+    },
+    ...[
+        ['si-h1-bold', 'si-h1'],
+        ['si-h4-bold', 'si-h4'],
+        ['si-caption', 'si-body-sm'],
+        ['si-display-bold', 'si-display-lg-sbold']
+    ].map(([oldClass, newClass]) => ({
+        requiredClasses: [oldClass],
+        removeClasses: [oldClass],
+        addClasses: [newClass]
+    }))
 ];

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)