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

package/schematics/utils/template-utils.js

@@ -0,0 +1,190 @@
+import { join, dirname } from 'path';
+import ts from 'typescript';
+import { findAttribute, findElement } from './html-utils.js';
+export const getInlineTemplates = (source) => {
+    const templateNodes = [];
+    const componentDecoratorVisitor = (node) => {
+        if (ts.isDecorator(node) &&
+            ts.isCallExpression(node.expression) &&
+            ts.isIdentifier(node.expression.expression) &&
+            node.expression.expression.text === 'Component') {
+            const arg = node.expression.arguments[0];
+            if (ts.isObjectLiteralExpression(arg)) {
+                const template = arg.properties.find(property => ts.isPropertyAssignment(property) &&
+                    ts.isIdentifier(property.name) &&
+                    property.name.text === 'template');
+                const initializer = template?.initializer;
+                if (initializer &&
+                    (ts.isNoSubstitutionTemplateLiteral(initializer) || ts.isStringLiteral(initializer))) {
+                    templateNodes.push(initializer);
+                }
+            }
+        }
+        else {
+            node.forEachChild(componentDecoratorVisitor);
+        }
+    };
+    source.forEachChild(componentDecoratorVisitor);
+    return templateNodes;
+};
+export const getTemplateUrl = (source) => {
+    const templateUrls = [];
+    const componentDecoratorVisitor = (node) => {
+        if (ts.isDecorator(node) &&
+            ts.isCallExpression(node.expression) &&
+            ts.isIdentifier(node.expression.expression) &&
+            node.expression.expression.text === 'Component') {
+            const arg = node.expression.arguments[0];
+            if (ts.isObjectLiteralExpression(arg)) {
+                const template = arg.properties.find(property => ts.isPropertyAssignment(property) &&
+                    ts.isIdentifier(property.name) &&
+                    property.name.text === 'templateUrl');
+                const initializer = template?.initializer;
+                if (initializer && ts.isStringLiteral(initializer)) {
+                    templateUrls.push(initializer.text);
+                }
+            }
+        }
+        else {
+            node.forEachChild(componentDecoratorVisitor);
+        }
+    };
+    source.forEachChild(componentDecoratorVisitor);
+    return templateUrls;
+};
+const renameElementTagInTemplate = ({ template, offset, recorder, fromName, toName }) => {
+    findElement(template, element => element.name === fromName).forEach(el => {
+        recorder.remove(el.startSourceSpan.start.offset + 1 + offset, fromName.length);
+        recorder.insertLeft(el.startSourceSpan.start.offset + 1 + offset, toName);
+        if (el.endSourceSpan && el.startSourceSpan.start !== el.endSourceSpan.start) {
+            recorder.remove(el.endSourceSpan?.start.offset + 2 + offset, fromName.length);
+            recorder.insertLeft(el.endSourceSpan?.start.offset + 2 + offset, toName);
+        }
+    });
+};
+const renameAttributeInTemplate = ({ template, offset, recorder, fromName, toName }) => {
+    findAttribute(template, element => element.name === fromName).forEach(el => {
+        recorder.remove(el.sourceSpan.start.offset + offset, fromName.length);
+        recorder.insertLeft(el.sourceSpan.start.offset + offset, toName);
+    });
+};
+const renameApiInTemplate = ({ template, offset, recorder, elementName, apis }) => {
+    findElement(template, element => element.name === elementName).forEach(el => {
+        for (const api of apis) {
+            el.attrs
+                .filter(attr => attr.name === api.replace)
+                .forEach(attr => {
+                recorder.remove(attr.sourceSpan.start.offset + offset, api.replace.length);
+                recorder.insertLeft(attr.sourceSpan.start.offset + offset, api.replaceWith);
+            });
+        }
+    });
+};
+const removeSymbols = ({ template, offset, recorder, elementName, attributeSelector, names }) => {
+    findElement(template, element => element.name === elementName).forEach(el => {
+        if (attributeSelector) {
+            const hasAttributeSelector = el.attrs.some(attr => attr.name === attributeSelector);
+            if (!hasAttributeSelector) {
+                return;
+            }
+        }
+        for (const name of names) {
+            el.attrs
+                .filter(attr => attr.name === name || attr.name === `[${name}]` || attr.name === `(${name})`)
+                .forEach(attr => {
+                const apiLength = attr.sourceSpan.toString().length;
+                recorder.remove(attr.sourceSpan.start.offset + offset, apiLength);
+            });
+        }
+    });
+};
+export const renameElementTag = ({ tree, filePath, sourceFile, recorder, fromName, toName }) => {
+    getInlineTemplates(sourceFile).forEach(template => renameElementTagInTemplate({
+        template: template.text,
+        offset: template.getStart() + 1,
+        toName,
+        fromName,
+        recorder
+    }));
+    getTemplateUrl(sourceFile).forEach(templateUrl => {
+        const templatePath = join(dirname(filePath), templateUrl);
+        const templateContent = tree.read(templatePath).toString('utf-8');
+        const templateRecorder = tree.beginUpdate(templatePath);
+        renameElementTagInTemplate({
+            template: templateContent,
+            offset: 0,
+            toName,
+            fromName,
+            recorder: templateRecorder
+        });
+        tree.commitUpdate(templateRecorder);
+    });
+};
+export const renameAttribute = ({ tree, filePath, sourceFile, recorder, fromName, toName }) => {
+    getInlineTemplates(sourceFile).forEach(template => renameAttributeInTemplate({
+        template: template.text,
+        offset: template.getStart() + 1,
+        toName,
+        fromName,
+        recorder
+    }));
+    getTemplateUrl(sourceFile).forEach(templateUrl => {
+        const templatePath = join(dirname(filePath), templateUrl);
+        const templateContent = tree.read(templatePath).toString('utf-8');
+        const templateRecorder = tree.beginUpdate(templatePath);
+        renameAttributeInTemplate({
+            template: templateContent,
+            offset: 0,
+            toName,
+            fromName,
+            recorder: templateRecorder
+        });
+        tree.commitUpdate(templateRecorder);
+    });
+};
+export const renameApi = ({ tree, filePath, sourceFile, recorder, elementName, apis }) => {
+    getInlineTemplates(sourceFile).forEach(template => renameApiInTemplate({
+        template: template.text,
+        offset: template.getStart() + 1,
+        elementName,
+        recorder,
+        apis
+    }));
+    getTemplateUrl(sourceFile).forEach(templateUrl => {
+        const templatePath = join(dirname(filePath), templateUrl);
+        const templateContent = tree.read(templatePath).toString('utf-8');
+        const templateRecorder = tree.beginUpdate(templatePath);
+        renameApiInTemplate({
+            template: templateContent,
+            offset: 0,
+            elementName,
+            recorder: templateRecorder,
+            apis
+        });
+        tree.commitUpdate(templateRecorder);
+    });
+};
+export const removeSymbol = ({ tree, filePath, sourceFile, recorder, elementName, attributeSelector, names }) => {
+    getInlineTemplates(sourceFile).forEach(template => removeSymbols({
+        template: template.text,
+        offset: template.getStart() + 1,
+        elementName,
+        attributeSelector,
+        recorder,
+        names
+    }));
+    getTemplateUrl(sourceFile).forEach(templateUrl => {
+        const templatePath = join(dirname(filePath), templateUrl);
+        const templateContent = tree.read(templatePath).toString('utf-8');
+        const templateRecorder = tree.beginUpdate(templatePath);
+        removeSymbols({
+            template: templateContent,
+            offset: 0,
+            elementName,
+            attributeSelector,
+            recorder: templateRecorder,
+            names
+        });
+        tree.commitUpdate(templateRecorder);
+    });
+};

package/schematics/utils/ts-utils.js

@@ -97,3 +97,99 @@ const visitDirectory = (fs, dirPath) => {
     });
     return files;
 };
+/** Finds an import specifier with a particular name. */
+export const findImportSpecifier = (nodes, specifierName) => {
+    return nodes.find(element => {
+        const { name, propertyName } = element;
+        return propertyName ? propertyName.text === specifierName : name.text === specifierName;
+    });
+};
+/**
+ * Note: returns only matching imports specifiers,
+ * Unmatched imports will be ignored (you won't get undefined), but a shorter array.
+ */
+export const getImportSpecifiers = (sourceFile, moduleName, specifierOrSpecifiers) => {
+    const matches = [];
+    for (const node of sourceFile.statements) {
+        if (!ts.isImportDeclaration(node) || !ts.isStringLiteral(node.moduleSpecifier)) {
+            continue;
+        }
+        const namedBindings = node.importClause?.namedBindings;
+        const isMatch = typeof moduleName === 'string'
+            ? node.moduleSpecifier.text === moduleName
+            : moduleName.test(node.moduleSpecifier.text);
+        if (!isMatch || !namedBindings || !ts.isNamedImports(namedBindings)) {
+            continue;
+        }
+        if (typeof specifierOrSpecifiers === 'string') {
+            const match = findImportSpecifier(namedBindings.elements, specifierOrSpecifiers);
+            if (match) {
+                matches.push(match);
+            }
+        }
+        else {
+            for (const specifierName of specifierOrSpecifiers) {
+                const match = findImportSpecifier(namedBindings.elements, specifierName);
+                if (match) {
+                    matches.push(match);
+                }
+            }
+        }
+    }
+    return matches;
+};
+export function* renameIdentifier({ sourceFile, renamingInstructions }) {
+    for (const node of sourceFile.statements) {
+        if (!ts.isImportDeclaration(node) || !ts.isStringLiteral(node.moduleSpecifier)) {
+            continue;
+        }
+        for (const renamingInstruction of renamingInstructions) {
+            if (!renamingInstruction.module.test(node.moduleSpecifier.text)) {
+                continue;
+            }
+            if (!(node.importClause?.namedBindings && ts.isNamedImports(node.importClause.namedBindings))) {
+                continue;
+            }
+            for (const [index, { replace, replaceWith }] of renamingInstruction.symbolRenamings.entries()) {
+                const importSpecifiers = findImportSpecifier(node.importClause.namedBindings.elements, replace);
+                if (!importSpecifiers) {
+                    continue;
+                }
+                yield {
+                    start: importSpecifiers.name.getStart(),
+                    width: importSpecifiers.name.getWidth(),
+                    newNode: ts.factory.createIdentifier(replaceWith)
+                };
+                if (renamingInstruction.toModule &&
+                    !node.moduleSpecifier.text.endsWith('@simpl/element-ng') &&
+                    index === 0) {
+                    const newPath = node.moduleSpecifier.text.replace(renamingInstruction.module, renamingInstruction.toModule);
+                    yield {
+                        start: node.moduleSpecifier.getStart(),
+                        width: node.moduleSpecifier.getWidth(),
+                        newNode: ts.factory.createStringLiteral(newPath, true)
+                    };
+                }
+                const visitor = function* (visitedNode) {
+                    if (ts.isIdentifier(visitedNode) && visitedNode.text === replace) {
+                        yield {
+                            start: visitedNode.getStart(),
+                            width: visitedNode.getWidth(),
+                            newNode: ts.factory.createIdentifier(replaceWith)
+                        };
+                    }
+                    else {
+                        for (const child of visitedNode.getChildren()) {
+                            yield* visitor(child);
+                        }
+                    }
+                };
+                for (const statement of sourceFile.statements) {
+                    if (!ts.isImportDeclaration(statement)) {
+                        yield* visitor(statement);
+                    }
+                }
+            }
+        }
+    }
+}

package/template-i18n.json

@@ -1,8 +1,10 @@
 {
+  "SI_AI_MESSAGE.SECONDARY_ACTIONS": "More actions",
   "SI_ALERT_DIALOG.OK": "OK",
   "SI_APPLICATION_HEADER.LAUNCHPAD": "Launchpad",
   "SI_APPLICATION_HEADER.TOGGLE_ACTIONS": "Toggle actions",
   "SI_APPLICATION_HEADER.TOGGLE_NAVIGATION": "Toggle navigation",
+  "SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT": "Remove attachment",
   "SI_BREADCRUMB": "Breadcrumbs",
   "SI_CHANGE_PASSWORD.BACK": "Back",
   "SI_CHANGE_PASSWORD.CHANGE": "Change",
@@ -11,6 +13,12 @@
   "SI_CHANGE_PASSWORD.CONFIRM_PASSWORD": "Confirm password",
   "SI_CHANGE_PASSWORD.NEW_PASSWORD": "New password",
   "SI_CHANGE_PASSWORD.PASSWORD_POLICY": "Password policy",
+  "SI_CHAT_INPUT.ATTACH_FILE": "Attach file",
+  "SI_CHAT_INPUT.INTERRUPT": "Interrupt",
+  "SI_CHAT_INPUT.LABEL": "Chat message input",
+  "SI_CHAT_INPUT.PLACEHOLDER": "Enter a message…",
+  "SI_CHAT_INPUT.SECONDARY_ACTIONS": "More actions",
+  "SI_CHAT_INPUT.SEND": "Send",
   "SI_COLUMN_SELECTION_DIALOG.CANCEL": "Cancel",
   "SI_COLUMN_SELECTION_DIALOG.HIDDEN": "Hidden",
   "SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED": "Item is now at position {{targetPosition}}",
@@ -207,6 +215,7 @@
   "SI_TREE_VIEW.COLLAPSE_ALL": "Collapse all",
   "SI_TREE_VIEW.EXPAND_ALL": "Expand all",
   "SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL": "Suggestions",
+  "SI_USER_MESSAGE.SECONDARY_ACTIONS": "More actions",
   "SI_WIZARD.BACK": "Back",
   "SI_WIZARD.CANCEL": "Cancel",
   "SI_WIZARD.COMPLETED": "Wizard completed!",

package/translate/index.d.ts

@@ -2,10 +2,12 @@ import { Provider } from '@angular/core';
 export * from '@siemens/element-translate-ng/translate';
 
 interface SiTranslatableKeys {
+    'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;
     'SI_ALERT_DIALOG.OK'?: string;
     'SI_APPLICATION_HEADER.LAUNCHPAD'?: string;
     'SI_APPLICATION_HEADER.TOGGLE_ACTIONS'?: string;
     'SI_APPLICATION_HEADER.TOGGLE_NAVIGATION'?: string;
+    'SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT'?: string;
     'SI_BREADCRUMB'?: string;
     'SI_CHANGE_PASSWORD.BACK'?: string;
     'SI_CHANGE_PASSWORD.CHANGE'?: string;
@@ -14,6 +16,12 @@ interface SiTranslatableKeys {
     'SI_CHANGE_PASSWORD.CONFIRM_PASSWORD'?: string;
     'SI_CHANGE_PASSWORD.NEW_PASSWORD'?: string;
     'SI_CHANGE_PASSWORD.PASSWORD_POLICY'?: string;
+    'SI_CHAT_INPUT.ATTACH_FILE'?: string;
+    'SI_CHAT_INPUT.INTERRUPT'?: string;
+    'SI_CHAT_INPUT.LABEL'?: string;
+    'SI_CHAT_INPUT.PLACEHOLDER'?: string;
+    'SI_CHAT_INPUT.SECONDARY_ACTIONS'?: string;
+    'SI_CHAT_INPUT.SEND'?: string;
     'SI_COLUMN_SELECTION_DIALOG.CANCEL'?: string;
     'SI_COLUMN_SELECTION_DIALOG.HIDDEN'?: string;
     'SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED'?: string;
@@ -210,6 +218,7 @@ interface SiTranslatableKeys {
     'SI_TREE_VIEW.COLLAPSE_ALL'?: string;
     'SI_TREE_VIEW.EXPAND_ALL'?: string;
     'SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL'?: string;
+    'SI_USER_MESSAGE.SECONDARY_ACTIONS'?: string;
     'SI_WIZARD.BACK'?: string;
     'SI_WIZARD.CANCEL'?: string;
     'SI_WIZARD.COMPLETED'?: string;

package/tree-view/index.d.ts

@@ -98,7 +98,7 @@ declare class SiTreeViewItemComponent implements OnInit, OnDestroy, AfterViewIni
     private onScrollIntoViewByConsumer;
     private expandOnClick;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTreeViewItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTreeViewItemComponent, "si-tree-view-item", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTreeViewItemComponent, "si-tree-view-item", never, {}, {}, never, [":not(si-tree-view-item):not([dragPreview])"], true, never>;
 }
 
 /**
@@ -687,6 +687,45 @@ type TreeItemContext = {
     parent: SiTreeViewComponent;
 };
 
+/**
+ * Tree view item template directive for defining custom item templates.
+ *
+ * @deprecated Use `siTreeViewItem` instead.
+ *
+ * This directive is deprecated and will be removed in a future version.
+ *
+ * @example
+ * Migration Guide:
+ *
+ * Before (deprecated):
+ * ```html
+ * <si-tree-view>
+ *   <ng-template siTreeViewItemTemplate="root" let-item>
+ *     <div class="custom-item">Root {{ item.level }}</div>
+ *   </ng-template>
+ *   <ng-template siTreeViewItemTemplate="child" let-item>
+ *     <div class="custom-item">Child {{ item.level }}</div>
+ *   </ng-template>
+ * </si-tree-view>
+ * ```
+ *
+ * After (recommended):
+ * ```html
+ * <si-tree-view>
+ *   <ng-template siTreeViewItem let-item="treeItem">
+ *     <si-tree-view-item>
+ *      <div class="custom-item">
+ *       @if (item.level === 0) {
+ *         Root {{ item.level }}
+ *       } @else {
+ *         Child {{ item.level }}
+ *       }
+ *      </div>
+ *     </si-tree-view-item>
+ *   </ng-template>
+ * </si-tree-view>
+ * ```
+ */
 declare class SiTreeViewItemTemplateDirective {
     /** @defaultValue undefined */
     readonly name: _angular_core.InputSignal<string | undefined>;