@siemens/element-ng 48.3.0 → 48.4.0

package/filtered-search/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { BackgroundColorVariant } from '@siemens/element-ng/common';
 import { TypeaheadOption } from '@siemens/element-ng/typeahead';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
@@ -150,7 +150,7 @@ interface InternalCriterionDefinition extends CriterionDefinition {
     translatedLabel: string;
 }
 
-declare class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
+declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private static readonly criterionRegex;
     /**
      * Output callback event that provides an object describing the
@@ -370,10 +370,10 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy
     private typeaheadInputChange;
     /** Used to debounce the Search emissions */
     private searchEmitQueue;
-    private destroySubscriptions;
-    private cdRef;
-    private translateService;
-    private locale;
+    private readonly destroyRef;
+    private readonly cdRef;
+    private readonly translateService;
+    private readonly locale;
     /**
      * The cache is used to control when the interceptDisplayedCriteria event needs to be called.
      * Every time a criteria gain the focus we have to reset the cache to call the interceptor.
@@ -388,7 +388,6 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     private initCriteria;
     private initValue;
     /**

package/navbar-vertical/index.d.ts

@@ -1,6 +1,6 @@
 import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import * as _angular_core from '@angular/core';
-import { OnChanges, OnInit, OnDestroy, SimpleChanges } from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { NavigationExtras, IsActiveMatchOptions, ActivatedRoute } from '@angular/router';
 import { MenuItem } from '@siemens/element-ng/common';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
@@ -91,7 +91,7 @@ declare class SiNavbarVerticalItemGuardDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalItemGuardDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiNavbarVerticalItemGuardDirective, "[siNavbarVerticalItemGuard]", never, {}, {}, never, never, true, never>;
 }
-declare class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
+declare class SiNavbarVerticalComponent implements OnChanges, OnInit {
     /**
      * Whether the navbar-vertical is collapsed.
      *
@@ -197,12 +197,10 @@ declare class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy
     private readonly itemsToComponents;
     protected readonly smallScreen: _angular_core.WritableSignal<boolean>;
     protected readonly uiStateExpandedItems: _angular_core.WritableSignal<Record<string, boolean>>;
-    private destroyer;
     private preferCollapse;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     protected toggleCollapse(): void;
     /** Expands the vertical navbar. */
     expand(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "48.3.0",
+  "version": "48.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,8 +30,8 @@
     "@angular/router": "20",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
-    "@siemens/element-translate-ng": "48.3.0",
-    "@siemens/element-theme": "48.3.0",
+    "@siemens/element-translate-ng": "48.4.0",
+    "@siemens/element-theme": "48.4.0",
     "@siemens/ngx-datatable": "22 - 24",
     "flag-icons": "^7.3.2",
     "google-libphonenumber": "^3.2.40",
@@ -67,10 +67,6 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/siemens-element-ng.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-accordion.mjs"
-    },
     "./about": {
       "types": "./about/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-about.mjs"
@@ -87,6 +83,10 @@
       "types": "./auto-collapsable-list/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-auto-collapsable-list.mjs"
     },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-accordion.mjs"
+    },
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-autocomplete.mjs"

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

@@ -29,7 +29,11 @@ export const actionModalMigrationRule = (options) => {
                 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);
@@ -42,11 +46,17 @@ export const actionModalMigrationRule = (options) => {
                     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);
             }
@@ -69,8 +79,7 @@ const createActionDialogMethodCallTransformation = (node) => {
     const newCode = printer.printNode(ts.EmitHint.Expression, newNode, node.getSourceFile());
     return {
         node,
-        newCode,
-        type: 'method-call'
+        newCode
     };
 };
 const createActionDialogTypeTransformation = (node) => {
@@ -81,8 +90,7 @@ const createActionDialogTypeTransformation = (node) => {
     }
     return {
         node,
-        newCode: `'${matchingReplacement.new}'`,
-        type: 'type-reference'
+        newCode: `'${matchingReplacement.new}'`
     };
 };
 /**
@@ -119,3 +127,36 @@ const applyCodeTransformations = (tree, filePath, codeTransformations) => {
     });
     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/data/output-names.js

@@ -2,7 +2,6 @@ export const OUTPUT_NAMES_MIGRATION = [
     {
         module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
         elementSelector: 'si-collapsible-panel',
-        componentOrModuleName: ['SiCollapsiblePanelComponent', 'SiAccordionModule'],
         apiMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
     }
 ];

package/schematics/migrations/data/symbol-removals.js

@@ -2,57 +2,48 @@ export const SYMBOL_REMOVALS_MIGRATION = [
     {
         module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
         elementSelector: 'si-accordion',
-        componentOrModuleName: ['SiAccordionComponent', 'SiAccordionModule'],
         names: ['colorVariant']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
         elementSelector: 'input',
         attributeSelector: 'siDateInput',
-        componentOrModuleName: ['SiDateInputDirective', 'SiDatepickerModule'],
         names: ['dateInputDebounceTime']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
         elementSelector: 'input',
         attributeSelector: 'siDatepicker',
-        componentOrModuleName: ['SiDateInputDirective', 'SiDatepickerModule'],
         names: ['triggeringInput']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
         elementSelector: 'si-date-range',
-        componentOrModuleName: ['SiDateRangeComponent', 'SiDatepickerModule'],
         names: ['debounceTime']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
         elementSelector: 'si-filtered-search',
-        componentOrModuleName: ['SiFilteredSearchComponent', 'SiFilteredSearchModule'],
         names: ['showIcon', 'noMatchingCriteriaText']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/form)?/,
         elementSelector: 'si-form-item',
-        componentOrModuleName: ['SiFormItemComponent', 'SiFormModule'],
         names: ['inputId', 'readonly']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
         elementSelector: 'si-navbar-vertical',
-        componentOrModuleName: ['SiNavbarVerticalComponent', 'SiNavbarVerticalModule'],
         names: ['autoCollapseDelay']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/split)?/,
         elementSelector: 'si-split-part',
-        componentOrModuleName: ['SiSplitPartComponent', 'SiSplitModule'],
         names: ['headerStatusColor', 'headerStatusIconClass']
     },
     {
         module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
         elementSelector: 'si-tree-view',
-        componentOrModuleName: ['SiTreeViewComponent', 'SiTreeViewModule'],
         names: ['disableFilledIcons', 'trackByFunction']
     }
 ];

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

@@ -4,7 +4,7 @@
  */
 import * as ts from 'typescript';
 import { EmitHint } from 'typescript';
-import { discoverSourceFiles, getImportSpecifiers, renameApi, renameAttribute, renameElementTag, renameIdentifier, removeSymbol } from '../../utils/index.js';
+import { discoverSourceFiles, renameApi, renameAttribute, renameElementTag, renameIdentifier, removeSymbol } from '../../utils/index.js';
 import { getElementMigrationData } from '../data/index.js';
 export const elementMigrationRule = (options) => {
     return async (tree, context) => {
@@ -60,10 +60,6 @@ export const elementMigrationRule = (options) => {
             if (migrationData.outputNameChanges) {
                 recorder ??= tree.beginUpdate(filePath);
                 for (const change of migrationData.outputNameChanges) {
-                    const importSpecifiers = getImportSpecifiers(sourceFile, change.module, change.componentOrModuleName);
-                    if (!importSpecifiers?.length) {
-                        continue;
-                    }
                     renameApi({
                         tree,
                         recorder,
@@ -77,10 +73,6 @@ export const elementMigrationRule = (options) => {
             if (migrationData.symbolRemovalChanges) {
                 recorder ??= tree.beginUpdate(filePath);
                 for (const change of migrationData.symbolRemovalChanges) {
-                    const importSpecifiers = getImportSpecifiers(sourceFile, change.module, change.componentOrModuleName);
-                    if (!importSpecifiers?.length) {
-                        continue;
-                    }
                     removeSymbol({
                         tree,
                         recorder,

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

@@ -4,7 +4,7 @@
  */
 import { join, dirname } from 'path';
 import * as ts from 'typescript';
-import { discoverSourceFiles, findElement, getImportSpecifiers, getInlineTemplates, getTemplateUrl } from '../../utils/index.js';
+import { discoverSourceFiles, findElement, getInlineTemplates, getTemplateUrl } from '../../utils/index.js';
 export const wizardMigrationRule = (options) => {
     return async (tree, context) => {
         context.logger.info('🔄 Migrating wizard api...');
@@ -15,14 +15,6 @@ export const wizardMigrationRule = (options) => {
                 continue;
             }
             const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
-            const modulePathToMatch = /@(siemens|simpl)\/element-ng(\/wizard)?/;
-            const wizardImports = getImportSpecifiers(sourceFile, modulePathToMatch, [
-                'SiWizardComponent',
-                'SiWizardModule'
-            ]);
-            if (!wizardImports?.length) {
-                continue;
-            }
             const recorder = tree.beginUpdate(filePath);
             renameApi({
                 tree,

package/select/index.d.ts

@@ -561,6 +561,11 @@ declare class SiSelectActionDirective {
 }
 
 declare class SiSelectActionsDirective {
+    /** @internal */
+    static ngTemplateContextGuard(directive: SiSelectActionsDirective, context: unknown): context is {
+        searchText?: string;
+        visibleOptionsCount?: number;
+    };
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSelectActionsDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiSelectActionsDirective, "[siSelectActions]", ["si-select-actions"], {}, {}, never, never, true, never>;
 }

package/status-bar/index.d.ts

@@ -137,7 +137,6 @@ declare class SiStatusBarComponent implements DoCheck, OnDestroy, OnChanges {
     private readonly translateService;
     private readonly resizeObserver;
     private readonly measureService;
-    private readonly destroyRef;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngDoCheck(): void;

package/template-i18n.json

@@ -49,6 +49,7 @@
   "SI_DATEPICKER.SECONDS": "Seconds",
   "SI_DATEPICKER.START_DATE_PLACEHOLDER": "Start date",
   "SI_DATEPICKER.START_TIME_LABEL": "from",
+  "SI_DATEPICKER.TODAY": "Today",
   "SI_DATE_RANGE_FILTER.ADVANCED": "Advanced",
   "SI_DATE_RANGE_FILTER.AFTER": "After",
   "SI_DATE_RANGE_FILTER.APPLY": "Apply",

package/tour/index.d.ts

@@ -104,10 +104,12 @@ declare class SiTourService {
     private makeStep;
     private scrollIntoView;
     private handleBeforeNextPromise;
-    private makeOverlay;
+    private centerOverlay;
+    private attachOverlay;
+    private createFlexiblePositionStrategy;
+    private createOrUpdateOverlays;
     private handleResizeSubscription;
     private isElementVisible;
-    private handlePositionChangeSubscription;
     private getElement;
     private hide;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiTourService, never>;

package/translate/index.d.ts

@@ -52,6 +52,7 @@ interface SiTranslatableKeys {
     'SI_DATEPICKER.SECONDS'?: string;
     'SI_DATEPICKER.START_DATE_PLACEHOLDER'?: string;
     'SI_DATEPICKER.START_TIME_LABEL'?: string;
+    'SI_DATEPICKER.TODAY'?: string;
     'SI_DATE_RANGE_FILTER.ADVANCED'?: string;
     'SI_DATE_RANGE_FILTER.AFTER'?: string;
     'SI_DATE_RANGE_FILTER.APPLY'?: string;