v48.0.0-next.3

48.0.0-next.3 (2025-08-12)

Features

• filtered-search: align with theme updates (72f2227)
• header-dropdown: remove automatic filled icon when the dropdown is open (d259942)
• tree-view: remove SiTreeViewComponent.disableFilledIcons input (97b5aef)

Bug Fixes

• circle-status: correct spacing in aria label generation (ac59ea3)

NOTES

• header-dropdown: The si-header-dropdown-item no longer shows a filled icon when the dropdown is open.

BREAKING CHANGES

• tree-view: Removed SiTreeViewComponent.disableFilledIcons input.

  Tree items no longer show a filled icon on selection.

v48.0.0-next.2

48.0.0-next.2 (2025-08-11)

Features

• icon: replace current si-icon with si-icon-next (cb06a07)

BREAKING CHANGES

• icon: The si-icon component was replaced with the si-icon-next
  leading to a few API changes.
  The overall goal of this change is to ensure a similar behavior compared to
  the direct use via css classes.

  We recommend adjusting your code to the new si-icon.
  Alternatively, existing usages can be replaced
  The most notable changes are:

  • dropping the default size
  • dropping most inputs in favor of using css classes

  Single colored icon can be converted like this:

  <!-- 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 icons need to be constructed in HTML directly.
  If applicable, the si-status-icon component should be used instead.

  <!-- before -->
  <si-icon
    icon="element-circle-filled"
    color="status-success"
    stackedIcon="element-state-tick"
    stackedColor="status-success-contrast"
    alt="Success"
  />
  
  <!-- after -->
  <div class="icon-stack icon" aria-label="Success">
    <si-icon icon="element-circle-filled" class="status-success" />
    <si-icon icon="element-state-tick" class="status-success-contrast" />
  </div>

• 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

v48.0.0-next.1

48.0.0-next.1 (2025-08-08)

Features

• angular: update to Angular 20 (cf9d3d5)
• charts/gauge: support custom value formatter (5ea6af2)
• dashboard-toolbar: add title attribute to edit button (14afc3c)
• element-translation-ng: add t-function to locally override $localize (b2916f4), closes #436
• form: drop form-item legacy mode (5d83257)
• help-button: introduce a help button component (29ff865)
• improve visual appearance of long and multiline checkbox and radio labels (32a18ce)
• launchpad: support routerLink for launchpad apps (bf78c1f)
• 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)
• switch: align switch label padding with checkboxes (13cf2f4)
• tabs: align with UX specs (e3280c6)
• 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)
• 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
• 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)
• help-button: don't change color on hover when disabled (5df4d9f)
• live-preview: change initialization order to fix locale change loop (acf2190), closes #451
• search-bar: do not emit searchChange during initialisation (e2be687)
• 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

• 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

• Checkboxes and radio inputs (<input type="checkbox"> or <input type="radio">) must now be wrapped in a .form-check container.

  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>

• search-bar: SiSearchBarComponent.searchChange is not emitted during initialisation with value input

• 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>
  

• form: Using multiple form-controls within a single si-form-item is no longer supported.
  Use si-form-fieldset to group multiple si-form-item components.

  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>

• angular: Angular 20+ is required.
  Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0

• Removed deprecated SiFormContainerComponent.getValidationErrors method.

  Use the build-in mechanism of the si-form-item to show validation errors.
  See: https://element.siemens.io/components/forms-inputs/forms/#error-messages

• Removed ResultDetailStepState as object. Use ResultDetailStepState as type with direct string values.

• Removed following deprecated inputs

  • SiFilteredSearchComponent.showIcon
  • SiFilteredSearchComponent.selectedCriteriaIndex
  • SiFilteredSearchComponent.noMatchingCriteriaText
  • SiFilteredSearchComponent.submitText (replaced by SiFilteredSearchComponent.submitButtonLabel)
  • SiFilteredSearchComponent.items (replaced by SiFilteredSearchComponent.itemCountText)

• Removed SiWizardComponent.hasNavigation input and SiWizardComponent.cancel output. Use SiWizardComponent.hideNavigation and SiWizardComponent.wizardCancel respectively instead.

• Removed deprecated methods:

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

  Use SiActionDialogService.showActionDialog instead.

• Removed AlertDialogResult, EditDiscardDialogResult, ConfirmationDialogResult and DeleteConfirmationDialogResult as const objects. Use them only as type.

• Removed SiFormItemComponent.inputId and SiFormItemComponent.readonly inputs without any replacement.

• 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">
  

• Removed SiCollapsiblePanelComponent.toggle output use SiCollapsiblePanelComponent.panelToggle instead.

• Removed SiAccordionComponent.colorVariant input without any replacement.

• Removed `SiDatepickerOverl...

v47.9.0

47.9.0 (2025-08-08)

Features

• launchpad: support routerLink for launchpad apps (47e50cf)

v47.8.0

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)

v47.7.0

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)

v47.6.0

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)

v47.5.0

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)

v47.4.0

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)

v47.3.0

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)