Changelog¶

Changelog

48.0.3 (2025-09-10)¶

Bug Fixes¶

• list-details: load route details state on initial load (419a3d1)

48.0.2 (2025-09-10)¶

Bug Fixes¶

• microchart-bar: handle negative values (3e32a33)

48.0.1 (2025-09-05)¶

Bug Fixes¶

• card: show ellipsis on heading text overflow (2d772a1), closes #689
• datatable: not possible to tab out from table (9869db1)
• datatable: use NgxDatatableConfig from upstream (2fb7903)
• icon: handle undefined icon use case (7c52855)
• modal-dialogs: update confirmation dialog text and update snapshots (2d69d63)
• threshold: ensure number input and buttons are above other elements (6d8f3bf)

DEPRECATIONS¶

• datatable: INgxDatatableConfig is deprecated in favor of upstream NgxDatatableConfig.

Replace INgxDatatableConfig imports with NgxDatatableConfig from @siemens/ngx-datatable:

// Before import { INgxDatatableConfig } from '@siemens/element-ng/datatable';

// After import { NgxDatatableConfig } from '@siemens/ngx-datatable';

48.0.0 (2025-08-26)¶

Features¶

• angular: update to Angular 20 (cf9d3d5)
• card: add support for sub-heading to cards (183dcab)
• charts/gauge: support custom value formatter (5ea6af2)
• copyright-notice: use the company-name provided by the theme (fe2fe9f)
• dashboard-toolbar: add title attribute to edit button (14afc3c)
• element-theme: update to new version of siemens brand package (59d92a1)
• element-translation-ng: add t-function to locally override $localize (b2916f4), closes #436
• filtered-search: align with theme updates (72f2227)
• form: drop form-item legacy mode (5d83257)
• form: allow overriding of errormessage IDs on custom form controls (3afbc5a)
• form: support context help button in form-items (6bd0863), closes #511
• form: improve visual appearance of long and multiline checkbox and radio labels (32a18ce)
• header-dropdown: remove automatic filled icon when the dropdown is open (d259942)
• help-button: introduce a help button component (29ff865)
• icon: replace current si-icon with si-icon-next (cb06a07)
• landing-page: add landing page feature components (26e0066)
• launchpad: support routerLink for launchpad apps (bf78c1f)
• list-details: support usage with the Angular router (4731e77)
• maps-ng: open source maps-ng (0d70b10)
• micro-charts: add micro bar chart (89e779f)
• micro-charts: add micro donut chart (5e29b58)
• micro-charts: add micro line chart (e7c8429)
• micro-charts: add micro progress chart (e9333dc)
• popover: replace current siPopover with siPopoverNext (b96e46f)
• search-bar: align with theme updates (709aa53)
• switch: align switch label padding with checkboxes (13cf2f4)
• tabs: align with UX specs (e3280c6)
• tabs: replace current si-tabs with si-tabs-next (6fbba15)
• theme: update critical status colors to use data-orchid palette (f5e2b3b)
• toast-notification: support pausing of toast-notification (eac9bc3)
• tooltip: support template context with tooltip template (6bfc714)
• tree-view: remove SiTreeViewComponent.disableFilledIcons input (97b5aef)
• typography: update typography definitions to latest Figma ones (779058e)
• wizard: switch to footer navigation as default (2f07b9c)

Bug Fixes¶

• accordion: don't switch to cursor pointer in case of disabled panel (bebdc16)
• badge: align default text with design specs (d96cf0b), closes #425
• charts: title and legend overlap on theme change (5daabb5)
• circle-status: correct spacing in aria label generation (ac59ea3)
• datatable: keep focused row in view when using keyboard (e0f3af7)
• datatable: prevent overlapping last row on footer (9a0a9e8)
• date-range-filter: allow empty reference point (2f7748e)
• date-range-filter: stop automatic advanced mode toggle in input mode (6337d0a)
• form: ensure default width of si-form-fieldset labels is 16% in horizontal layout (0f16342)
• formly: link error messages to custom controls (1dfb9ee)
• formly: link error messages to input (11c1b61)
• help-button: don't change color on hover when disabled (5df4d9f)
• live-preview: change initialization order to fix locale change loop (acf2190), closes #451
• maps: use new fonts, fallback to sans-serif (6b17274)
• navbar-vertical: support flexible drop down positioning (24acde0)
• search-bar: do not emit searchChange during initialisation (e2be687)
• select: announce readonly flag in screen-reader (ed049b1)
• status-toggle: use correct cursor for disabled state (6cde8c0)
• tabs-next: ensure that the active tab is focussed by default (2b787fb)
• threshold: input is not focused after adding step (6cc6765)
• utilities: apply correct style for rounded-end utility (295fc49)

NOTES¶

• header-dropdown: The si-header-dropdown-item no longer shows a filled icon when the dropdown is open.
• theme: The colors for the "critical" status have changed. If this change is not desired, the old colors can be restored using this snippet in the application's main styles.scss:

@use '@siemens/element-theme/src/theme/base-colors';

// load theme here as usual
@use '@siemens/element-theme/src/theme';
@use '@siemens/element-ng/element-ng';

// add overrides
:root {
  --element-base-critical: #{base-colors.$color-red-100};
  --element-status-critical: #{base-colors.$color-red-900};
  --element-text-critical: #{base-colors.$color-red-700};
}

:root.app--dark {
  --element-base-critical: #{base-colors.$color-red-900};
  --element-status-critical: #{base-colors.$color-red-700};
  --element-text-critical: #{base-colors.$color-red-100};
}

BREAKING CHANGES¶

• accordion: Removed SiAccordionComponent.colorVariant input without any replacement.
• action-modal: Removed AlertDialogResult, EditDiscardDialogResult, ConfirmationDialogResult and DeleteConfirmationDialogResult as const objects. Use them only as type.
• angular: Angular 20+ is required. Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0
• charts-ng: The @siemens/charts-ng package now requires ECharts version 6.0.0 or higher. Please update your dependencies accordingly. For details on ECharts 6, see: https://github.com/apache/echarts/releases/tag/6.0.0
• collapsible-panel: Removed SiCollapsiblePanelComponent.toggle output use SiCollapsiblePanelComponent.panelToggle instead.
• dashboards-ng: gridstack.js v12 is required. To migrate to v12, update the package and drop the inclusion of gridstack-extra.css in angular.json
• datepicker: Removed SiDatepickerOverlayComponent.isFocused and SiDatepickerOverlayDirective.isFocused without any replacement.
• datepicker: Removed SiDatepickerOverlayDirective.toggleOverlay method. Use SiDatepickerOverlayDirective.showOverlay or SiDatepickerOverlayDirective.closeOverlay methods instead.
• datepicker: Removed SiDateInputDirective.dateInputDebounceTime, SiDateRangeComponent .debounceTime and SiDatepickerDirective.triggeringInput inputs without any replacement as they had no effect.
• element-theme: The make-theme SCSS mixin no longer prefixes variables with element- hence custom build-time OEM themes have to be adapted accordingly, see: https://element.siemens.io/architecture/theming/#build-time-custom-theme.

• filtered-search: Removed following deprecated inputs:

• SiFilteredSearchComponent.showIcon without any replacement.

• SiFilteredSearchComponent.selectedCriteriaIndex. Instead of preselecting the most relevant option, sort the options by relevance.
• SiFilteredSearchComponent.noMatchingCriteriaText without any replacement.
• SiFilteredSearchComponent.submitText. Use SiFilteredSearchComponent.submitButtonLabel instead.
• SiFilteredSearchComponent.items. Use SiFilteredSearchComponent.itemCountText instead.
• form: Removed deprecated SiFormContainerComponent.getValidationErrors method.

Use the built-in mechanism of the si-form-item to show validation errors. See: https://element.siemens.io/components/forms-inputs/forms/#error-messages action-modal:* Removed deprecated methods:

• SiActionDialogService.showAlertDialog
• SiActionDialogService.showConfirmationDialog
• SiActionDialogService.showEditDiscardDialog
• SiActionDialogService.showDeleteConfirmationDialog

Use SiActionDialogService.showActionDialog instead. * form: Removed SiFormItemComponent.inputId and SiFormItemComponent.readonly inputs without any replacement. * form: Removed siFormItemControl directive.

Replace this directive with either the class form-control or form-check-input:

<!-- Before -->
<input type="checkbox" siFormItemControl>
<input siFormItemControl>

<!-- After -->
<input type="checkbox" class="form-check-input">
<input class="form-control">

Additionally, when using Bootstrap’s grid system (bs-grid), each .form-check must be placed inside a .col-* element and cannot be a direct child of a .row. This change is necessary to ensure proper alignment and spacing, especially for long or multiline labels.

Before:

<input type="checkbox" class="form-check-input">
<label class="form-check-label">Label</label>

After:

<div class="form-check">
  <input type="checkbox" class="form-check-input">
  <label class="form-check-label">Label</label>
</div>

Before:

<si-form-item label="Group label">
  <div class="form-check">
    <input type="checkbox" id="check-1" class="form-check-input" [formControl]="check1" />
    <label for="check-1">Label 1</label>
  </div>
  <div class="form-check">
    <input type="checkbox" id="check-2" class="form-check-input" [formControl]="check2" />
    <label for="check-2">Label 2</label>
  </div>
</si-form-item>

After:

<si-form-fieldset label="Group label">
  <si-form-item label="Label 1">
    <input type="checkbox" class="form-check-input" [formControl]="check1" />
  </si-form-item>
  <si-form-item label="Label 2">
    <input type="checkbox" class="form-check-input" [formControl]="check2" />
  </si-form-item>
</si-form-fieldset>

We recommend adjusting your code to the new si-icon. Alternatively, you may use si-icon-legacy to preserve the previous behavior.

The most notable changes are: - Dropped all inputs other than the icon input. Use CSS classes instead. - Dropped the default size along with the size input. Use CSS class icon to apply the default size via CSS or use any other text size class. - The content of this component is hidden in the a11y tree. If needed, set proper labels e.g. aria-label="Close". - Dropped support for stacked icons via inputs. Use HTML and the icon-stack class to construct layered icons.

Single colored icons can be converted as follows:

<!-- before -->
<si-icon icon="element-user" color="text-danger" />
<!-- after -->
<si-icon icon="element-user" class="icon text-danger" />

Important: Previously, the class icon was automatically applied. Unless not needed, it must now be applied manually. The icon class sets a fixed size of 1.5rem.

Stacked (composite) icons need to be constructed using HTML.

<!-- before -->
<si-icon
  icon="element-alarm-background-filled"
  color="status-danger"
  stackedIcon="element-alarm-tick"
  stackedColor="text-secondary"
  size="display-2"
/>

<!-- after -->
<span class="icon icon-stack">
  <si-icon class="si-display-lg status-danger" icon="element-alarm-background-filled" />
  <si-icon class="si-display-lg text-secondary" icon="element-alarm-tick" />
</span>

For status icons, the new si-status-icon component simplifies usage even more:

<!-- before -->
<si-icon
icon="element-circle-filled"
color="status-danger"
stackedIcon="element-state-exclamation-mark"
stackedColor="status-danger-contrast"
size="display-2"
/>

<!-- after -->
<si-status-icon class="si-display-lg" status="danger" />

The most notable changes are: - the triggers opening or closing a popover can no longer be modified - instead of having two shown/hidden events there is one visibilityChange event - all inputs and outputs are prefixed with siPopover to avoid name conflicts - a popover always receives the focus on open

The new popover was already available as a preview via siPopoverNext in v47 and is now fully replacing the old popover with v48. If you are already using siPopoverNext, you can do a simple search & replace removing the next suffix.

The "old" popover is still available with via the legacy entrypoint @siemens/element-ng/popover-legacy. Classes and selectors were renamed accordingly: - siPopover --> siPopoverLegacy - SiPopoverDirective --> SiPopoverLegacyDirective - SiPopoverModule --> SiPopoverLegacyModule

Usually, the migration to new popover is simple.

If the trigger or outsideClick was modified, please read the popover documentation on how to properly use a popover.

In all other cases, it is sufficient to replace shown / hidden events with visibilityChange and prefix all input / outputs with siPopover. * result-details-list: Removed ResultDetailStepState as object. Use ResultDetailStepState as type with direct string values. * search-bar: SiSearchBarComponent.searchChange is not emitted during initialisation with value input * split: Removed unused SiSplitPartComponent.headerStatusColor and SiSplitPartComponent.headerStatusIconClass inputs without any replacement. * tabs: The si-tabs component has been completely re-implemented including breaking changes in the API. The main highlights are enhanced accessibility, improved responsive behavior, and Angular router support.

The most notable changes are: - replacing the selectedIndex with an active input in the si-tab - dropping iconAltText in favor of enforcing heading - if an icon is provided, the heading is always visually hidden - no tab is selected by default - dropping deselect and selectedTabIndexChange in favor of using activeChange on the si-tab

The new tabs were already available as a preview via si-tabs-next in v47 and are now fully replacing the old tabs with v48. If you are already using si-tabs-next, you can do a simple search & replace removing the -next suffix.

The "old" tabs are still available via legacy entrypoint @siemens/element-ng/tabs-legacy. Classes and selectors were renamed accordingly: - si-tabset --> si-tabset-legacy - SiTabsetComponent --> SiTabsetLegacyComponent - si-tab --> si-tab-legacy - SiTabComponent --> SiTabLegacyComponent - SiTabModule --> SiTabLegacyModule

When migrating to the new tabs, we recommend checking whether using the router based approach is applicable.

Otherwise, code needs to be changed to use the new active input and renaming iconAltText to heading:

<!-- before -->
<si-tabset selectedTabIndex="0" (selectedTabIndexChange)="changedTab($event)">
  <si-tab iconAltText="Favorites" icon="element-favorite">...</si-tab>
</si-tabset>

<!-- after -->
<si-tabset>
  <si-tab heading="Favorites" icon="element-favorite" [active]="true" (activeChange)="changedTab($event)">...</si-tab>
</si-tabset>

Please note, the implementation of changedTab must also be adjusted. * tree-view: Removed SiTreeViewComponent.disableFilledIcons input.

Tree items no longer show a filled icon on selection. * tree-view: Removed SiTreeViewComponent.trackByFunction input which had no effect. * typeahead: Removed SiTypeaheadDirective.typeaheadOnMultiselectClose and SiTypeaheadDirective.typeaheadClosed output. Use SiTypeaheadDirective.typeaheadOpenChange instead. * wizard: The si-wizard now has the navigation buttons by default in the footer.

To restore the old behavior set SiWizardComponent.inlineNavigation to true:

<si-wizard inlineNavigation>
   ...
</si-wizard>

DEPRECATIONS¶

• charts/gauge: Input labelFormatter should no longer be used to format the value. Use valueFormatter instead.
• datepicker: SiDatepickerComponent.calenderWeekLabel input is deprecated. Use SiDatepickerComponent.calendarWeekLabel instead.

• element-theme: All .si-* typography utility classes were adapted to match the new typography system. Replace the following matches with their new counterparts:

• Instead of .si-h1-black, use .si-h1-bold instead.

• Instead of .si-title-1-bold, use .si-h4-bold instead.
• Instead of .si-title-1, use .si-h4 instead.
• Instead of .si-title-2-bold, use .si-h5-bold instead.
• Instead of .si-title-2, use .si-h5 instead.
• Instead of .si-body-1, use .si-body-lg instead.
• Instead of .si-body-2, use .si-body instead.
• Instead of .si-display-1, use .si-display-xl instead.
• Instead of .si-display-2, use .si-display-lg instead.
• Instead of .si-display-3, use .si-display-bold instead.
• Instead of .si-display-4, use .si-display instead.

• element-theme: All $si-font-size-*, $si-line-height-*, and $si-font-weight-* variables were adapted to match the new typography system. Replace the following matches with their new counterparts:

• Instead of $si-*-h1-black, use $si-*-h1-bold instead.

• Instead of $si-*-title-1-bold, use $si-*-h4-bold instead.
• Instead of $si-*-title-1, use $si-*-h4 instead.
• Instead of $si-*-title-2-bold, use $si-*-h5-bold instead.
• Instead of $si-*-title-2, use $si-*-h5 instead.
• Instead of $si-*-body-1, use $si-*-body-lg instead.
• Instead of $si-*-body-2, use $si-*-body instead.
• Instead of $si-*-caption-1, use $si-*-caption instead.
• Instead of $si-*-display-1, use $si-*-display-xl instead.
• Instead of $si-*-display-2, use $si-*-display-lg instead.
• Instead of $si-*-display-3, use $si-*-display-bold instead.
• Instead of $si-*-display-4, use $si-*-display instead.
• status-counter: The component si-icon-status has been renamed to si-status-counter. The class name changes from SiIconStatusComponent to SiStatusCounterComponent. The old names still work and will be removed in future release.

To migrate to the new names, change imports from SiIconStatusComponent or SiIconStatusModule to SiStatusCounterComponent and replace si-icon-status with si-status-counter in all templates.

47.8.0 (2025-07-22)¶

Features¶

• dashboard: add dashboard (c4288e4)
• dashboards-ng: add dashboards-ng components (8c5398c)
• patterns: add drag drop patterns (3ebd6be)
• themes: add experimental new tokens for AI patterns (4719ee2)

Bug Fixes¶

• charts: empty series name in tooltip (ad1be3d)
• datatable: align group header to match row styles (00af856)
• photo-upload: remove padding from the sides when a rounded mask is applied (6ad9894)
• select: match selected item icon size with figma specs (087bfcb)
• theme: add missing base-4 to utility CSS classes (2407b1c)
• wizard: update disabled styles to match with figma (7de558e)

47.7.0 (2025-07-14)¶

Features¶

• about: add about (86b562a)
• content-action-bar: support checkbox items (9cc6a5f)
• landing-page: add landing page component (76731fc)
• translate: use provider function to create service instances (b76324c)

Bug Fixes¶

• translate: prevent missing $localize errors (2098eb1)

47.6.0 (2025-07-08)¶

Features¶

• breadcrumb-router: add breadcrumb router component and resolver service (7a23ea8)
• charts: add si chart (76d3e8a)
• date-range-filter: improve layout for smaller screens (07e2ef8)
• main-detail-container: add main-detail-container (7171549)
• navbar-vertical: add navbar-vertical (ade96f8)
• resize-observer: add emitInitial input to control initial resize emit (f512259)
• theme: add a .text-link class for link in text (ea7f7a4)
• theme: introduce base-4, updated base colors (0712c41)
• threshold: add threshold component with customizable thresholds and validation (c395815)
• tour: add tour (3c4b151)

Bug Fixes¶

• formly: add support for placeholder for select (830608e)
• tabs-next: calculate scroll container width correctly on load (b93396d)
• tabs-next: drop only showing fully visible tabs in responsive mode (0eb49f6)

47.5.0 (2025-06-26)¶

Features¶

• angular: add support for Angular 20 (ca6275f)
• datatable: add datatable config and interaction (4134ac1)
• datatable: support @siemens/datatable 23 (bd19350)
• element: add list-details component (6b8503b)
• filtered-search: add filtered search (766db4b)
• form: add form examples (8d217f6)
• formly: add formly wrappers and components (6c4f12f)
• loading-spinner: ensure compatibility to Angular CDK 20 (c236c30)
• modal: ensure compatibility to Angular CDK 20 (67382c5)
• native-charts: add native charts (ec19393)
• password-strength: add option to allow whitespaces (b18c232)
• password-strength: allow setting minRequiredPolicies (776b47c)
• phone-number: add phone number (66589d2)
• result-details-list: add result details list (f4842f5)
• shadow-root: add shadow-root (5e0d1cb)
• side-panel: add side-panel (78a75a0)
• status-bar: add status bar (8328095)
• tabs-next: add si-tabs-next (a1e87ee)
• tree-view: add tree view component (203edbd)

Bug Fixes¶

• status-icon: add aria label for status icons (b202fd7)
• wizard: improve vertical wizard button positioning on small screens (fa6f486)

47.4.0 (2025-06-20)¶

Features¶

• add photo upload component with cropping functionality (40c1491)
• badge: introduce critical badge (8a1f9c0)
• breadcrumb: add breadcrumb component (a8b3a90)
• card: add card component (bf05edb)
• card: introduce critical accent (69cf124)
• circle-status: add circle status component (5448a6f)
• column-selection-dialog: add column selection dialog (85bb1fc)
• common: move caution and critical to the base status types (e7eed49)
• date-range-filter: add date range filter component (798dcd0)
• datepicker: add datepicker components and directives (928b5cc)
• electron-titlebar: add electron titlebar component (1f53bb5)
• file-uploader: add file uploader (afea528)
• filter-bar: add filter bar (55b2c14)
• info-page: add info page component (89aeb11)
• inline-notification: introduce critical notification (c741a52)
• ip-input: implement IPv4 and IPv6 input directives with validation and masking (fc94b0d)
• localization: add localization service and related components (609f67c)
• search-bar: add search bar (ca68d76)
• slider: add slider (7d07906)
• sort-bar: add sort bar component with sorting functionality and documentation (9fc833d)
• split: add split (b78f847)
• status-toggle: add status toggle (c60fc38)
• system-banner: add system banner (fefc1ee)
• tabs: add tabs component (bbd73d5)
• theme: introduce text-critical token (11ef127)
• unauthorized-page: add unauthorized page component (96ce204)

47.3.0 (2025-06-10)¶

Features¶

• autocomplete: add autocomplete directives and module (a478cd6)
• badges: badges with icons and emphasis (175b375)
• content-action-bar: add content action bar component (06de114)
• forms: add si-form (d771de6)
• icon-status: add icon status component with styling and examples (e2cdd3f)
• input: add radio, checkbox,switch input type and textarea (2df0b9d)
• language-switcher: add language switcher component (032b8c2)
• launchpad: add tokens for application icon color/background (d31db92)
• number-input: add number input (bcadbe7)
• password-strength: add password strength component with validation and UI integration (19a38fb)
• pills-input: add pills Input component (af0486d)
• popover-next: add si-popover-next component with directives and templates (291ca35)
• popover: add popover component (87312d3)
• progress-bar: add progress bar component with dynamic functionality (b6c5405)
• progress-bar: add progress bar component with dynamic functionality (12051f8)
• select: add select component with multi-select and filtering capabilities (c1a1837)
• select: add support for stacked icons (9c6f052)
• summary-widget: add summary widget (44a540c)
• theme: introduce base-critical token and class (a7692e7)
• toast-notification: add toast notification component and service (70f23b5)
• typeahead: add typeahead directive and components (754a60e)
• wizard: add wizard component with dynamic steps and navigation (944c13b)

Bug Fixes¶

• live-previewer: make initialization more reliable (3219d17)
• live-preview: fix recompile on template change in viewer (af70347)
• tsdoc: add default ref (ef9377d)

47.2.0 (2025-05-28)¶

Features¶

• accordion: add accordion (6115492)
• action-modal: add action modal service and components (ac54c88)
• auto-collapsable-list: add auto-collapsable list components and directives (95c27fe)
• color-picker: add color picker (1811d08)
• connection-strength: add connection strength (50b746e)
• copyright-notice: introduce copyright notice (c053f5f)
• empty-state: add empty state (7b382af)
• footer: add footer component (4b14465)
• inline-notification: add inline notification (592c7b9)
• loading-spinner: add loading spinner component (ec94faa)
• menu: add menu component (27020af)
• modal: add modal component (2c05627)
• pagination: add pagination component (6cadaba)
• password-toggle: add password toggle component (6f9b405)
• summary-chip: add summary chip (7f6d187)
• tooltip: add tooltip component (151809b)

Bug Fixes¶

• examples: update navbar examples to use element prefix (92b0ee7)
• live-preview: automatic dark/light theme for overview (31d0376)

47.1.0 (2025-05-21)¶

Bug Fixes¶

• application-header: announce logo text in Safari / VoiceOver (71d02a7)
• datatable: respect content 100% width (c0fa7fc)
• live-preview: accept legacy component loader import (452cd56)
• theme: fix card spacing for focus outline (ec3d92f)

Features¶

• element-translation-ng: move key extraction CLI into a separate package (3c5cd72)
• icon: introduce status icon (5ce6727)
• icon: support stacking in template with si-icon (87d2a02)
• navbar: add legacy navbar primary (a62fe11)
• typography: add title bold styles (34c16ff)

47.0.0 (2025-05-19)¶

Build System¶

• harmonize package versions to 47.0.0 (6b088b5)

BREAKING CHANGES¶

• Set the correct version in every package.

Except where otherwise noted, content on this site is licensed under MIT License.