v48.0.0-next.5

48.0.0-next.5 (2025-08-19)

Features

• card: add support for sub-heading to cards (183dcab)
• copyright-notice: use the company-name provided by the theme (fe2fe9f)
• list-details: support usage with the Angular router (4731e77)
• maps-ng: open source maps-ng (0d70b10)
• popover: replace current siPopover with siPopoverNext (b96e46f)
• search-bar: align with theme updates (709aa53)
• tabs: replace current si-tabs with si-tabs-next (6fbba15)

Bug Fixes

• charts: title and legend overlap on theme change (5daabb5)
• formly: link error messages to input (11c1b61)
• select: announce readonly flag in screen-reader (ed049b1)

BREAKING CHANGES

• popover: The siPopover directive has been completely re-implemented,
  including breaking changes in the API.
  The main highlight is a complete accessibility support and
  unified interaction.

  The most noteable 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.

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

• 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