Skip to content

Releases: siemens/element

v49.0.0-rc.1

15 Jan 08:49

Choose a tag to compare

v49.0.0-rc.1 Pre-release
Pre-release

49.0.0-rc.1 (2026-01-15)

Features

  • ag-grid: add Element theme for AG Grid (0c6ad96)
  • angular: update to Angular 21 (1f6ff72)
  • charts: theme change without reloading the chart (48aee8e)
  • dashboards-ng: custom id provider for widget instance (f815092)
  • live-preview: use siemens syntax highlighting colors (f2b77a8)
  • schematics: update schematics for dashboards config token migration (ea54afb)
  • side-panel: add backdrop support (fb9fefd)

Bug Fixes

  • charts: update progress chart colors on theme change (be0defc)
  • dashboards-ng: drop ngx-translate peerDependency (b5fa436)
  • date-range-filter: correctly update range when toggling advanced mode (287dedb)
  • select: maintain filtered rows when updating all rows (769a8f7)
  • tree-view: use hasAnyChildren from parent to determine inline padding (9d37335)
  • typeahead: treat space as normal search text in multi select (75f293d)

NOTES

  • side-panel: Backdrop support has been added to the side-panel. By default, the side-panel will now render a modal backdrop that blocks background interactions
    and closes the panel on click. To restore the previous behavior (without a backdrop), set disableBackdrop to true.
  • typeahead: The typeahead multi selection which is also used in the filtered-search
    no longer selects values when pressing space.
    Instead space is treated as a normal search value.

BREAKING CHANGES

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

  • dashboards-ng: New widgets are now assigned IDs upon creation using the SiWidgetIdProvider.generateWidgetId, rather than using temporary NEW_WIDGET_PREFIX IDs that are replaced on save.

    The save() method signature in the abstract class SiWidgetStorage has been modified to separate existing widgets from new widgets:

    Before:

    abstract save(
      widgets: (WidgetConfig | Omit<WidgetConfig, 'id'>)[],
      removedWidgets?: WidgetConfig[],
      dashboardId?: string
    ): Observable<WidgetConfig[]>;
    

    After:

    abstract save(
      modifiedWidgets: WidgetConfig[],
      addedWidgets: WidgetConfig[],
      removedWidgets?: WidgetConfig[],
      dashboardId?: string
    ): Observable<WidgetConfig[]>;
    

    addedWidgets array will contain new widgets with ids generated by SiWidgetIdProvider.generateWidgetId.

  • select: Removed deprecated interface SelectOptionLegacy. Use interface SelectOption instead.

    The options can be converted like below:

    Before:

    const options: SelectOptionLegacy[] = [
      { id: '1', title: 'Option 1' },
      { id: '2', title: 'Option 2', icon: 'check', color: 'text-success', disabled: false }
    ];
    

    After:

    const options: SelectOption<string>[] = [
      { type: 'option', value: '1', label: 'Option 1' },
      { type: 'option', value: '2', label: 'Option 2', icon: 'check', iconColor: 'text-success', disabled: false }
    ];
    
  • select: Removed deprecated output SiSelectComponent.dropdownClose. Use output SiSelectComponent.openChange instead.

  • unauthorized-page: Removed the deprecated SiUnauthorizedPageComponent component. Use the SiInfoPageComponent component with the si-info-page element instead. The SiInfoPageComponent is a superset of this component and supports the same use cases and more.

    Before:

    <si-unauthorized-page
      heading="Access denied"
      subHeading="You are not authorized to access this section."
      description="Contact your administrator"
      [link]="{ title: 'Go back', link: '/' }"
    />
    

    After:

    <si-info-page
      icon="element-warning-filled"
      iconColor="status-warning"
      titleText="Access denied"
      copyText="You are not authorized to access this section."
      instructions="Contact your administrator"
      [link]="{ title: 'Go back', link: '/' }"
    />
    
  • dashboards: Removed injection token CONFIG_TOKEN. Use SI_DASHBOARD_CONFIGURATION injection token instead.

  • dashboards-ng: Removed property WidgetConfig.invalid. Use WidgetInstanceEditor.statusChanges emitter instead.

    Example usage:

     this.statusChanges.emit({
        invalid: this.isInvalid
     });
    
  • dashboards-ng: Removed module configuration SiDashboardsNgModule.forRoot. Use injection tokens SI_DASHBOARD_CONFIGURATION and SI_WIDGET_STORE directly in your app configuration.

    Before:

    imports: [
      SiDashboardsNgModule.forRoot({
        config: {},
        dashboardApi: {
          provide: SiWidgetStorage,
          useClass: CustomWidgetStorage
        }
      })
    ]
    

    After:

    imports: [SiDashboardsNgModule],
    providers: [
      { provide: SI_WIDGET_STORE, useClass: AppWidgetStorage },
      { provide: SI_DASHBOARD_CONFIGURATION, useValue: config }
    ]
    
  • modal: Removed property ModalOptions.initialState. Use ModalOptions.inputValues instead. Note that inputValues only binds to component inputs, unlike initialState, which could set any property on the component instance.

  • dashboards/grid: Removed property SiGridComponent.loadingService. Use SiGridComponent.isLoading instead to indicate load and save operations.

  • common: Removed buildTrackByIdentity() function. Use Angular's new control-flow syntax instead.

  • common: Removed buildTrackByIndex() function. Use Angular's new control-flow syntax instead.

  • buttons: Changed selection-buttons sizing.

    The sizing has been aligned with regular buttons. The sizing classes are now consistent with standard button classes:

    • Use btn-lg for large selection buttons
    • Use btn (no modifier) for default size selection buttons
    • Use btn-sm for small selection buttons

    This change affects the HTML structure of selection button groups. Previously, selection buttons had different size mappings compared to regular buttons.

    Before:

    <!-- Small selection buttons (visually same as default regular buttons) -->
    <div class="btn-group">
      <label>
        <input type="radio" class="btn-check" name="example" />
        <span class="btn btn-sm">Option 1</span>
      </label>
    </div>
    

    After:

    <!-- Default selection buttons (now visually same as default regular buttons) -->
    <div class="btn-group">
      <label>
        <input type="radio" class="btn-check" name="example" />
        <span class="btn">Option 1</span>
      </label>
    </div>
    
  • maps: Removed the deprecated SiMapComponent.onResize() method. It had no impact.

  • resize-observer: Removed following deprecated properties from SiResponsiveContainerDirective in favor of signal-based properties:

    isXs -> Use xs instead
    isSm -> Use sm instead
    isMd -> Use md instead
    isLg -> Use lg instead
    isXl -> Use xl instead
    isXxl -> Use xxl instead

  • select: Removed the [complexOptions] input of si-select. Instead use the [options] input which supports

    • grouping of options
    • providing values of any type

    Complex options can be converted like below:

    <!-- Before -->
    <si-select
      [complexOptions]="{group1: [{myLabel: 'My Label', uniqueData: uniqueData}]}"
      [valueProvider]="valueProvider"
      [groupProvider]="groupProvider"
      [optionEqualCheckFn]="uniqueDataEqual"
    />
    
    <!-- After -->
    <si-select
      [options]="[
        {
          type: 'group',
          label: 'Group-1',
          key: 'group1 (optional)',
          options: [{type: 'option', label: 'My Label', value: uniqueData}]
        }
      ]"
      [optionEqualCheckFn]="uniqueDataEqual"
  • charts/gauge: Removed input SiChartGaugeComponent.numberOfDecimals. Use SiChartGaugeComponent.minNumberOfDecimals or SiChartGaugeComponent.maxNumberOfDecimals inputs instead.

  • tour: Removed property attachTo.on of TourStep interface. It has no effect, position is automatic.

DEPRECATIONS

  • charts: SiChartsNgModule is deprecated, import individual components instead. Starting with v49, separate entry points are available for each component, allowing applications to import components from specific entry points, which helps reduce the application bundle size.
  • chart: The method SiChartComponent.resetChart is deprecated and should not be used by the consumer directly.

v48.10.0

15 Jan 09:05

Choose a tag to compare

48.10.0 (2026-01-15)

Features

  • ag-grid: add Element theme for AG Grid (4cfe0ef)
  • charts: theme change without reloading the chart (4cbfd82)

Bug Fixes

  • select: maintain filtered rows when updating all rows (29d3337)

DEPRECATIONS

  • charts: The method SiChartComponent.resetChart is deprecated and should not be used by the consumer directly.

v48.9.0

19 Dec 15:58

Choose a tag to compare

48.9.0 (2025-12-19)

Features

  • angular: add support for Angular 21 (11fce52)
  • dashboards-ng: support widgets as standalone component (5dad1d4)
  • filtered-search: support free text as pills (1970897)

Bug Fixes

  • charts/circle: align with figma specs (75157e7)
  • side-panel: ensure search bar focus outline is visible (32d3959), closes #1204

NOTES

  • angular: Angular without ZoneJS (Zoneless) is generally supported but due to incomplete of testing,
    it might not work in all cases.

v48.8.0

17 Dec 16:49

Choose a tag to compare

48.8.0 (2025-12-17)

Features

  • side-panel: add extended size option (199e451)
  • side-panel: enhance navigation with router-link and link support (3f8679a)
  • side-panel: implement fullscreen overlay and navigation modes (526773f)

Bug Fixes

  • date-range-filter: update datepicker date-range on preset selection (70433ae)
  • datepicker: convert 12 AM to 0 hours for 12-hour clock (1f2eb16)
  • icon: render font icons when name contains kebab-case with numbers (8684c7f)
  • password-toggle: hide MS Edge built-in reveal toggle icon (fdba859)

v48.7.0

10 Dec 12:01

Choose a tag to compare

48.7.0 (2025-12-10)

Features

  • chat-messages: allow asterisk lists and simple images for markdown renderer (7559fce)
  • typeahead: introduce experimental create option (a2b2ae9)

Bug Fixes

  • charts/cartesian: confine tooltip for cartesian (f3dc55f)
  • datatable: support compatibility with datatable v22 (bedc4ec)
  • loading-spinner: should work in zoneless environment (09b6530)

v48.6.0

02 Dec 20:19

Choose a tag to compare

48.6.0 (2025-12-02)

Features

  • datatable: support @siemens/ngx-datatable@25 (c89d4f6)
  • microchart-line: add area support (de15e4d)

Bug Fixes

  • icon: don't use hardcoded id on svg (8b0792f)
  • microchart-line: fix gradient ID not unique (0a1ceb0)
  • schematics: ignore dot files and node_modules in directory traversal (b97e4ce)
  • schematics: remove simpl-element-ng token from scss files and support single and double quotes (8500e73)
  • summary-chip: make value attribute optional (ea69015)

v48.5.2

26 Nov 17:17

Choose a tag to compare

48.5.2 (2025-11-26)

Bug Fixes

  • map: avoid TypeError when clicking point without handler (b8f36b4)
  • schematics: scss migration should not modify node_modules (e521c20)
  • translate-ng: prevent unwanted import of ngx-translate (d8a636c)

v48.5.1

26 Nov 13:06

Choose a tag to compare

48.5.1 (2025-11-26)

Bug Fixes

  • application-header: replace ngx-translate dependency with element translate pipe (8a8022c)
  • badges: prevent misaligned icons (452db9a)
  • datepicker: fix incorrect week numbers (c84fceb)
  • schematics: add symbols in exports as well for NgModule (ac2fd82)

v47.12.1

26 Nov 10:31

Choose a tag to compare

47.12.1 (2025-11-26)

Bug Fixes

  • application-header: deprecate App interface (7f9aa73)
  • loading-spinner: slow down animation isof stopping for reduced-motion (bef5284)
  • map: avoid TypeError when clicking point without handler (13f7f01)

DEPRECATIONS

  • application-header: Deprecate App interface.

    No longer extend from the App interface, instead use either AppLink or AppRouterLink.

v48.5.0

24 Nov 14:19

Choose a tag to compare

48.5.0 (2025-11-24)

Features

  • schematics: add mappings for native charts components and module (fe9fea5)

Bug Fixes

  • application-header: truncate heading if needed in collapsed mode (32f270a)
  • charts/custom-legend: align symbol spacing with design specs (778b889)
  • chat-messages: allow dragging on files to chat-input (40019e0)
  • chat-messages: allow interrupting with enter (19112a6)
  • loading-spinner: slow down animation isof stopping for reduced-motion (0c8371c)
  • schematics: add support for SimplElementNgModule imports and update mappings (5260687)
  • schematics: add translation mapping in element-ng case and update mappings (8b9df33)
  • schematics: update path imports for cross-platform compatibility and update mapping file (2e7a2dc)

Performance Improvements

  • dashboards-ng: optimize lookups (fb3da90)