@siemens/element-ng 47.8.0 → 48.0.0-next.1

package/dashboard/index.d.ts

@@ -1,17 +1,783 @@
+import * as _siemens_element_ng_content_action_bar from '@siemens/element-ng/content-action-bar';
+import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, ElementRef, OnChanges, AfterViewInit, SimpleChanges, OnInit, ChangeDetectorRef } from '@angular/core';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { SiCardComponent } from '@siemens/element-ng/card';
+import { MenuItem, AccentLineType, EntityStatusType } from '@siemens/element-ng/common';
+import * as rxjs from 'rxjs';
+import { Link } from '@siemens/element-ng/link';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import { MenuItem as MenuItem$1 } from '@siemens/element-ng/menu';
+import { NavigationExtras, ActivatedRoute } from '@angular/router';
+
+declare class SiDashboardCardComponent extends SiCardComponent implements OnDestroy {
+    /**
+     * Description of cancel button & action.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_DASHBOARD.RESTORE:Restore`)
+     * ```
+     */
+    readonly restoreText: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Description of expand button & action.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_DASHBOARD.EXPAND:Expand`)
+     * ```
+     */
+    readonly expandText: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Option to enable and show the UI controls for card expand functionality.
+     * `Expand` and `restore` action items will be added to the content action bar.
+     * The expand resizing has to be implemented by the container of the card.
+     *
+     * @defaultValue false
+     */
+    readonly enableExpandInteraction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Used in combination with si-dashboard to show filters when a card is expanded or not.
+     *
+     * @defaultValue true
+     */
+    readonly showMenubar: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emitter for size state change
+     */
+    readonly expandChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Whether the card is currently expanded.
+     *
+     * @defaultValue false
+     */
+    readonly isExpanded: _angular_core.WritableSignal<boolean>;
+    /** @internal */
+    hide: boolean;
+    /** @internal */
+    readonly enableExpandInteractionInternal: _angular_core.WritableSignal<boolean>;
+    readonly enableExpandInteractionComputed: _angular_core.Signal<boolean>;
+    /** @internal */
+    element: ElementRef<any>;
+    readonly displayContentActionBar: _angular_core.Signal<boolean>;
+    protected readonly actionBarViewTypeComputed: _angular_core.Signal<_siemens_element_ng_content_action_bar.ViewType>;
+    protected readonly actionBarTitleComputed: _angular_core.Signal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    protected readonly primaryActionsComputed: _angular_core.Signal<(ContentActionBarMainItem | MenuItem)[]>;
+    private readonly expandRestoreIconTooltip;
+    private readonly expandActionItem;
+    private readonly restoreActionItem;
+    private readonly hasContentBarActions;
+    private dashboardService;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Expand the dashboard card.
+     */
+    expand(): void;
+    /**
+     * Restore the dashboard card to the original, non-expanded state.
+     */
+    restore(): void;
+    private expandCard;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDashboardCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiDashboardCardComponent, "si-dashboard-card", never, { "restoreText": { "alias": "restoreText"; "required": false; "isSignal": true; }; "expandText": { "alias": "expandText"; "required": false; "isSignal": true; }; "enableExpandInteraction": { "alias": "enableExpandInteraction"; "required": false; "isSignal": true; }; "showMenubar": { "alias": "showMenubar"; "required": false; "isSignal": true; }; }, { "expandChange": "expandChange"; }, never, ["[headerIcon]", "[body]", "[footer]"], true, never>;
+}
+
+declare class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit {
+    /**
+     * Heading for the dashboard page.
+     */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Opt-in to enable expand interaction for all cards.
+     *
+     * @defaultValue false
+     */
+    readonly enableExpandInteractions: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Option to turn off the sticky behavior of the heading and menu bar.
+     *
+     * @defaultValue true
+     */
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Option to hide the menu bar.
+     *
+     * @defaultValue false
+     */
+    readonly hideMenubar: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Is `true` if a card is expanded.
+     * @defaultref {@link _isExpanded}
+     */
+    get isExpanded(): boolean;
+    protected dashboardFrameEndPadding: number | null;
+    protected readonly hideMenubarComputed: _angular_core.Signal<boolean>;
+    private _isExpanded;
+    private unsubscribe;
+    private scrollPosition;
+    private cards;
+    private readonly expandedPortalOutlet;
+    private readonly dashboardFrame;
+    private readonly dashboard;
+    private dashboardFrameDimensions?;
+    private dashboardDimensions?;
+    private scroller;
+    private dashboardService;
+    private resizeObserver;
+    private scrollbarHelper;
+    private cdRef;
+    private document;
+    private readonly hideMenubarInternal;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private subscribeToCards;
+    private initCards;
+    /**
+     * Expands the provided card to full size in the dashboard.
+     * @param card - The card to be expanded.
+     */
+    expand(card: SiDashboardCardComponent): void;
+    /**
+     * Restores the expanded card to it's previous position.
+     */
+    restore(): void;
+    /**
+     * Restored the UI state of the dashboard. This method is only part
+     * of restoring a card and needs to be invoked after the card.restore()
+     * method. In general this is achieved by listening to card events.
+     */
+    private restoreDashboard;
+    private toggleCardsHide;
+    private setDashboardFrameEndPadding;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiDashboardComponent, "si-dashboard", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "enableExpandInteractions": { "alias": "enableExpandInteractions"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideMenubar": { "alias": "hideMenubar"; "required": false; "isSignal": true; }; }, {}, never, ["[menubar]", "[dashboard]"], true, never>;
+}
+
+declare class SiDashboardModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDashboardModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiDashboardModule, never, [typeof SiDashboardCardComponent, typeof SiDashboardComponent], [typeof SiDashboardCardComponent, typeof SiDashboardComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiDashboardModule>;
+}
+
+declare class SiDashboardService {
+    private cards;
+    /**
+     * Subject containing the current dashboard cards as a list.
+     *
+     * @defaultValue this.cards.asObservable()
+     */
+    readonly cards$: rxjs.Observable<SiDashboardCardComponent[]>;
+    /**
+     * Registers a new dashboard card.
+     */
+    register(card: SiDashboardCardComponent): void;
+    /**
+     * Removes a registered dashboard card.
+     */
+    unregister(card: SiDashboardCardComponent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDashboardService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SiDashboardService>;
+}
+
 /**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-dashboard-card.component';
-export * from './si-dashboard.component';
-export * from './si-dashboard.module';
-export * from './si-dashboard.service';
-export * from './widgets/si-link-widget.component';
-export * from './widgets/si-list-widget/si-list-widget.component';
-export * from './widgets/si-list-widget/si-list-widget-body.component';
-export * from './widgets/si-list-widget/si-list-widget-item.component';
-export * from './widgets/si-timeline-widget/si-timeline-widget.component';
-export * from './widgets/si-timeline-widget/si-timeline-widget-body.component';
-export * from './widgets/si-timeline-widget/si-timeline-widget-item.component';
-export * from './widgets/si-value-widget-body.component';
-export * from './widgets/si-value-widget.component';
+ * The SiWidgetBaseComponent<T> implements the timing for the skeleton loading
+ * indicator of widgets. It supports a generic value input property that represents
+ * the main value to be displayed by a widget. When the value is not set, the `showLoadingIndicator`
+ * changes after the `initialLoadingIndicatorDebounceTime` delay to `true` and subclasses
+ * should show the skeleton loading indicator.
+ */
+declare abstract class SiWidgetBaseComponent<T> implements OnInit, OnChanges {
+    /**
+     * The main value to be displayed. If no value is set,
+     * the skeleton indicates the loading of the value. Disable
+     * the automatic loading mechanism by setting `SiWidgetBodyBaseComponent.disableAutoLoadingIndicator`.
+     */
+    readonly value: _angular_core.InputSignal<T | undefined>;
+    /**
+     * Option to disable automatic start of skeleton loading indication.
+     *
+     * @defaultValue false
+     */
+    readonly disableAutoLoadingIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Input to start and stop the skeleton loading indication.
+     *
+     * @defaultValue false
+     */
+    readonly showLoadingIndicatorInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly showLoadingIndicatorInternal;
+    readonly showLoadingIndicator: _angular_core.Signal<boolean>;
+    /**
+     * Initial delay time in milliseconds before enabling loading indicator.
+     * Only used once initially during construction.
+     *
+     * @defaultValue 300
+     */
+    readonly initialLoadingIndicatorDebounceTime: _angular_core.InputSignal<number>;
+    protected cdRef: ChangeDetectorRef;
+    protected loadingTimer?: ReturnType<typeof setTimeout>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiWidgetBaseComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiWidgetBaseComponent<any>, "ng-component", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disableAutoLoadingIndicator": { "alias": "disableAutoLoadingIndicator"; "required": false; "isSignal": true; }; "showLoadingIndicatorInput": { "alias": "showLoadingIndicator"; "required": false; "isSignal": true; }; "initialLoadingIndicatorDebounceTime": { "alias": "initialLoadingIndicatorDebounceTime"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The `<si-link-widget>` supports an easy composition of links and actions
+ * with support for skeleton loading indicator.
+ */
+declare class SiLinkWidgetComponent extends SiWidgetBaseComponent<Link[]> {
+    /**
+     * Option to enable trailing link arrow icons for each link.
+     *
+     * @defaultValue false
+     */
+    readonly showLinkIcons: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The number of skeleton progress indication rows.
+     *
+     * @defaultValue 3
+     */
+    readonly numberOfLinks: _angular_core.InputSignal<number>;
+    protected readonly ghosts: _angular_core.Signal<any[]>;
+    protected readonly icons: Record<"elementRight2", string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLinkWidgetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLinkWidgetComponent, "si-link-widget", never, { "showLinkIcons": { "alias": "showLinkIcons"; "required": false; "isSignal": true; }; "numberOfLinks": { "alias": "numberOfLinks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Interface for objects to configure the the list widget.
+ */
+interface SiListWidgetItem {
+    /** Label is either a translatable string or a link. */
+    label: TranslatableString | Link;
+    /** Optional translatable description. */
+    description?: TranslatableString;
+    /** Optional translatable string to be displayed in a badge. */
+    badge?: TranslatableString;
+    /**
+     * Defines the badge color. Must be one of the element `bg-<color>` CSS classes,
+     * like `bg-primary`, `bg-secondary`, 'bg-caution'. Use only the name without `bg`.
+     */
+    badgeColor?: string;
+    /** Optional translatable text that is display to the right. */
+    text?: TranslatableString;
+    /** Optional right aligned action. */
+    action?: Link;
+    /** The action icon. */
+    actionIcon?: string;
+}
+/**
+ * The `<si-link-widget>` supports an easy composition of links and actions
+ * with support for skeleton loading indicator.
+ */
+declare class SiListWidgetItemComponent extends SiWidgetBaseComponent<SiListWidgetItem> {
+    protected readonly isLink: _angular_core.Signal<boolean>;
+    protected readonly badgeColor: _angular_core.Signal<string>;
+    protected readonly link: _angular_core.Signal<Link>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly icons: Record<"elementRight2", string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiListWidgetItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiListWidgetItemComponent, "si-list-widget-item", never, {}, {}, never, never, true, never>;
+}
+
+/** Defines the sort order. */
+type SortOrder = 'ASC' | 'DSC';
+/**
+ * The `<si-list-widget-body>` implements the body of the <si-list-widget> that can be
+ * used for composition within other components.
+ */
+declare class SiListWidgetBodyComponent extends SiWidgetBaseComponent<SiListWidgetItem[]> implements OnChanges {
+    /** Optional footer link for the list widget */
+    readonly link: _angular_core.InputSignal<Link | undefined>;
+    /**
+     * label for the "search placeholder" name
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`)
+     * ```
+     */
+    readonly searchPlaceholderLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Enable ascending and descending SiListWidgetItem sorting. If enabled,
+     * items are initially ascending sorted.
+     */
+    readonly sort: _angular_core.InputSignal<SortOrder | undefined>;
+    /**
+     * Enables the search functionality.
+     *
+     * @defaultValue false
+     */
+    readonly search: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Compare function of for two `SiListWidgetItem`s that is used to sort
+     * the array of items. The default compares the item labels by using the
+     * string `localeCompare()` function.
+     *
+     * @param a - first `SiListWidgetItem` of the comparison.
+     *
+     * @param b - second `SiListWidgetItem` of the comparison.
+     *
+     * @returns A value `< 0` if `a` is smaller, `> 0` if `b` is smaller, otherwise `0`.
+     *
+     * @defaultValue
+     * ```
+     * (
+     *     a: SiListWidgetItem,
+     *     b: SiListWidgetItem
+     *   ) => {
+     *     const aLabel = typeof a.label === 'object' ? a.label.title! : a.label;
+     *     const bLabel = typeof b.label === 'object' ? b.label.title! : b.label;
+     *     return aLabel.localeCompare(bLabel);
+     *   }
+     * ```
+     */
+    readonly compareFn: _angular_core.InputSignal<(a: SiListWidgetItem, b: SiListWidgetItem) => number | undefined>;
+    /**
+     * Filter function that is used to filter down the list items when the user enters
+     * a term in the search bar. Default function.
+     *
+     * @param item - The item be checked if it matches the searchTerm.
+     *
+     * @param searchTerm - The string the user typed in the search bar.
+     *
+     * @returns `true` if the `searchTerm` matches the `item` and the `item` shall be kept in the list.
+     *
+     * @defaultValue
+     * ```
+     * (
+     *     item: SiListWidgetItem,
+     *     searchTerm: string
+     *   ) => {
+     *     const aLabel = typeof item.label === 'object' ? item.label.title! : item.label;
+     *     return aLabel.toLowerCase().includes(searchTerm.toLowerCase());
+     *   }
+     * ```
+     */
+    readonly filterFn: _angular_core.InputSignal<(item: SiListWidgetItem, searchTerm: string) => boolean | undefined>;
+    /**
+     * The number of skeleton progress indication rows.
+     *
+     * @defaultValue 6
+     */
+    readonly numberOfLinks: _angular_core.InputSignal<number>;
+    /** Used to display the defined number of ghost items */
+    protected readonly ghosts: _angular_core.Signal<any[]>;
+    /** Holds the list items that are displayed. May be filtered and sorted. */
+    protected readonly filteredListWidgetItems: _angular_core.Signal<SiListWidgetItem[] | undefined>;
+    protected readonly searchText: _angular_core.ModelSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiListWidgetBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiListWidgetBodyComponent, "si-list-widget-body", never, { "link": { "alias": "link"; "required": false; "isSignal": true; }; "searchPlaceholderLabel": { "alias": "searchPlaceholderLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "compareFn": { "alias": "compareFn"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "numberOfLinks": { "alias": "numberOfLinks"; "required": false; "isSignal": true; }; "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; }, { "searchText": "searchTextChange"; }, never, ["[empty-state]"], true, never>;
+}
+
+/**
+ * The `<si-list-widget>` supports an easy composition of links and actions
+ * with support for skeleton loading indicator, wrapped in a card.
+ */
+declare class SiListWidgetComponent extends SiWidgetBaseComponent<SiListWidgetItem[]> implements OnChanges {
+    protected readonly icons: Record<"elementRight2" | "elementSortDown" | "elementSortUp", string>;
+    /** List widget heading. */
+    readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
+    /** Optional footer link for the list widget */
+    readonly link: _angular_core.InputSignal<Link | undefined>;
+    /**
+     * label for the "search placeholder" name
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`)
+     * ```
+     */
+    readonly searchPlaceholderLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_LIST_WIDGET.SORT_ASCENDING:Sort ascending`)
+     * ```
+     */
+    readonly sortAscendingLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_LIST_WIDGET.SORT_DESCENDING:Sort descending`)
+     * ```
+     */
+    readonly sortDescendingLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Set `ASC` of ascending sorting, `DSC` for descending sorting and `undefined` for no sorting.
+     */
+    readonly sort: _angular_core.ModelSignal<SortOrder | undefined>;
+    /**
+     * Enables the search functionality.
+     *
+     * @defaultValue false
+     */
+    readonly search: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Compare function of for two `SiListWidgetItem`s that is used to sort
+     * the array of items. The default compares the item labels by using the
+     * string `localeCompare()` function.
+     *
+     * @param a - first `SiListWidgetItem` of the comparison.
+     *
+     * @param b - second `SiListWidgetItem` of the comparison.
+     *
+     * @returns A value `< 0` if `a` is smaller, `> 0` if `b` is smaller, otherwise `0`.
+     *
+     * @defaultValue
+     * ```
+     * (
+     *     a: SiListWidgetItem,
+     *     b: SiListWidgetItem
+     *   ) => {
+     *     const aLabel = typeof a.label === 'object' ? a.label.title! : a.label;
+     *     const bLabel = typeof b.label === 'object' ? b.label.title! : b.label;
+     *     return aLabel.localeCompare(bLabel);
+     *   }
+     * ```
+     */
+    readonly compareFn: _angular_core.InputSignal<(a: SiListWidgetItem, b: SiListWidgetItem) => number | undefined>;
+    /**
+     * Filter function that is used to filter down the list items when the user enters
+     * a term in the search bar. Default function.
+     *
+     * @param item - The item be checked if it matches the searchTerm.
+     *
+     * @param searchTerm - The string the user typed in the search bar.
+     *
+     * @returns `true` if the `searchTerm` matches the `item` and the `item` shall be kept in the list.
+     *
+     * @defaultValue
+     * ```
+     * (
+     *     item: SiListWidgetItem,
+     *     searchTerm: string
+     *   ) => {
+     *     const aLabel = typeof item.label === 'object' ? item.label.title! : item.label;
+     *     return aLabel.toLowerCase().includes(searchTerm.toLowerCase());
+     *   }
+     * ```
+     */
+    readonly filterFn: _angular_core.InputSignal<(item: SiListWidgetItem, searchTerm: string) => boolean | undefined>;
+    /**
+     * The number of skeleton progress indication rows.
+     *
+     * @defaultValue 6
+     */
+    readonly numberOfLinks: _angular_core.InputSignal<number>;
+    /**
+     * Optional accent line
+     */
+    readonly accentLine: _angular_core.InputSignal<AccentLineType | undefined>;
+    protected readonly accentClass: _angular_core.Signal<string>;
+    /** The menu item array used to display the sort button. */
+    protected readonly sortAction: _angular_core.Signal<ContentActionBarMainItem[]>;
+    private doSort;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiListWidgetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiListWidgetComponent, "si-list-widget", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "searchPlaceholderLabel": { "alias": "searchPlaceholderLabel"; "required": false; "isSignal": true; }; "sortAscendingLabel": { "alias": "sortAscendingLabel"; "required": false; "isSignal": true; }; "sortDescendingLabel": { "alias": "sortDescendingLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "compareFn": { "alias": "compareFn"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "numberOfLinks": { "alias": "numberOfLinks"; "required": false; "isSignal": true; }; "accentLine": { "alias": "accentLine"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; }, never, ["[empty-state]"], true, never>;
+}
+
+/** Base for action items in the timeline widget. */
+interface TimelineWidgetActionBase {
+    /** Label that is shown to the user. */
+    label: string;
+    /** The web font icon class name (e.g. element-settings-outline). */
+    icon?: string;
+    /** Defines if only the icon is shown in the default navigation bar. */
+    iconOnly?: boolean;
+}
+/** Interface representing an action item in the timeline widget. */
+interface TimelineWidgetActionButton extends TimelineWidgetActionBase {
+    type: 'action';
+    /** The class name to define the button style */
+    customClass?: string;
+    /** Action that called when the item action is triggered. */
+    action: (source: this) => void;
+}
+/** Interface representing a router link item in the timeline widget. */
+interface TimeLineWidgetRouterLink extends TimelineWidgetActionBase {
+    type: 'router-link';
+    /** Link for the angular router. Accepts the same values as {@link RouterLink}. */
+    routerLink: string | any[];
+    /** Navigation extras that are passed to the {@link RouterLink}. */
+    extras?: NavigationExtras;
+}
+/** Interface representing a link item in the timeline widget. */
+interface TimeLineWidgetLink extends TimelineWidgetActionBase {
+    type: 'link';
+    /** The href property of the anchor. */
+    href: string;
+    /** The target property of the anchor. */
+    target?: string;
+}
+/** Interface representing a menu item in the timeline widget. */
+interface TimelineWidgetMenu {
+    type: 'menu';
+    menuItems: MenuItem$1[];
+}
+/** Union type for all possible action items in the timeline widget. */
+type TimelineWidgetItemAction = TimelineWidgetActionButton | TimeLineWidgetLink | TimeLineWidgetRouterLink | TimelineWidgetMenu;
+/**
+ * Represents an item in the timeline widget.
+ * Each item may contain a timestamp, a title, an icon, an optional description and optional action elements.
+ * Actions can be buttons, links, router links, or menus.
+ */
+interface SiTimelineWidgetItem {
+    /**
+     * The timestamp of the item.
+     */
+    timeStamp: TranslatableString;
+    /**
+     * The title of the item.
+     */
+    title: TranslatableString;
+    /**
+     * Optional translatable description.
+     */
+    description?: TranslatableString;
+    /**
+     * The icon of the item.
+     */
+    icon: string;
+    /**
+     * The color of the icon.
+     */
+    iconColor?: string;
+    /**
+     * The stacked icon of the item.
+     */
+    stackedIcon?: string;
+    /**
+     * The color of the stacked icon.
+     */
+    stackedIconColor?: string;
+    /**
+     * The alt text of the icon
+     */
+    iconAlt?: TranslatableString;
+    /**
+     * The related action of the item
+     */
+    action?: TimelineWidgetItemAction;
+}
+/**
+ * The items of the `<si-timeline-widget>`.
+ */
+declare class SiTimelineWidgetItemComponent extends SiWidgetBaseComponent<SiTimelineWidgetItem> implements OnInit, OnChanges {
+    /**
+     * Whether to show or hide the description row during skeleton progress indication.
+     *
+     * @defaultValue `true`
+     */
+    readonly showDescription: _angular_core.InputSignal<boolean>;
+    protected readonly activatedRoute: ActivatedRoute | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTimelineWidgetItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTimelineWidgetItemComponent, "si-timeline-widget-item", never, { "showDescription": { "alias": "showDescription"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SiTimelineWidgetComponent extends SiWidgetBaseComponent<SiTimelineWidgetItem[]> implements OnChanges {
+    /**
+     * Timeline widget header text.
+     */
+    readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * Input list of primary action items. Supports up to **4** actions and omits additional ones.
+     *
+     * @defaultValue []
+     */
+    readonly primaryActions: _angular_core.InputSignal<(ContentActionBarMainItem | MenuItem)[]>;
+    /**
+     * Input list of secondary action items.
+     *
+     * @defaultValue []
+     */
+    readonly secondaryActions: _angular_core.InputSignal<(MenuItem | MenuItem$1)[]>;
+    /**
+     * Link that leads the user to more information
+     * or triggers and action. The `link.title` is displayed.
+     * The title will be translated.
+     */
+    readonly link: _angular_core.InputSignal<Link | undefined>;
+    /**
+     * Number of skeleton progress indication items.
+     *
+     * @defaultValue 4
+     */
+    readonly numberOfItems: _angular_core.InputSignal<number>;
+    /**
+     * Whether to show or hide the description row during skeleton progress indication.
+     *
+     * @defaultValue `true`
+     */
+    readonly showDescription: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional accent line
+     */
+    readonly accentLine: _angular_core.InputSignal<AccentLineType | undefined>;
+    protected readonly accentClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTimelineWidgetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTimelineWidgetComponent, "si-timeline-widget", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "numberOfItems": { "alias": "numberOfItems"; "required": false; "isSignal": true; }; "showDescription": { "alias": "showDescription"; "required": false; "isSignal": true; }; "accentLine": { "alias": "accentLine"; "required": false; "isSignal": true; }; }, {}, never, ["[empty-state]"], true, never>;
+}
+
+declare class SiTimelineWidgetBodyComponent extends SiWidgetBaseComponent<SiTimelineWidgetItem[]> {
+    /**
+     * Number of skeleton progress indication items.
+     *
+     * @defaultValue 4
+     */
+    readonly numberOfItems: _angular_core.InputSignal<number>;
+    /**
+     * Whether to show or hide the description row during skeleton progress indication.
+     *
+     * @defaultValue `true`
+     */
+    readonly showDescription: _angular_core.InputSignal<boolean>;
+    /** Used to display the defined number of ghost items */
+    protected readonly ghosts: _angular_core.Signal<any[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTimelineWidgetBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTimelineWidgetBodyComponent, "si-timeline-widget-body", never, { "numberOfItems": { "alias": "numberOfItems"; "required": false; "isSignal": true; }; "showDescription": { "alias": "showDescription"; "required": false; "isSignal": true; }; }, {}, never, ["[empty-state]"], true, never>;
+}
+
+/**
+ * The body of the `<si-value-widget>`. Useful for compositions.
+ */
+declare class SiValueWidgetBodyComponent extends SiWidgetBaseComponent<TranslatableString> implements OnInit {
+    /**
+     * The unit of the value (e.g. kWh or users). Only visible if `value` is available.
+     */
+    readonly unit: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * The element icon name. Only visible if `value` is available.
+     */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Show a status icon instead of the {@link icon}.
+     */
+    readonly status: _angular_core.InputSignal<EntityStatusType | undefined>;
+    /**
+     * Short description of the value. A description is mandatory
+     * to show an icon. Only visible if `value` is available.
+     */
+    readonly description: _angular_core.InputSignal<TranslatableString | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiValueWidgetBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiValueWidgetBodyComponent, "si-value-widget-body", never, { "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Is a dynamic UI component that not only displays information, but also includes
+ * embedded actions which the user can interact with to perform tasks directly
+ * related to the card's content. Actions might include editing settings,
+ * initiating processes, or deleting resources.
+ *
+ * The actionable widget turns data representation into an interactive hub,
+ * streamlining the user's tasks and decisions associated with the card's content.
+ *
+ * This component is a wrapper using the `.si-value-widget` CSS classes and the
+ * `<si-card>` component. For more configuration options, use the CSS classes directly.
+ */
+declare class SiValueWidgetComponent {
+    /**
+     * Value widget header text.
+     */
+    readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * Input list of primary action items. Supports up to **4** actions and omits additional ones.
+     *
+     * @defaultValue []
+     */
+    readonly primaryActions: _angular_core.InputSignal<(ContentActionBarMainItem | MenuItem)[]>;
+    /**
+     * Input list of secondary action items.
+     *
+     * @defaultValue []
+     */
+    readonly secondaryActions: _angular_core.InputSignal<(MenuItem | MenuItem$1)[]>;
+    /**
+     * The main value to be displayed. If no value is set,
+     * the skeleton indicates the loading of the value. Disable
+     * the automatic loading mechanism by setting `SiValueWidgetComponent.disableAutoLoadingIndicator`.
+     */
+    readonly value: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * The unit of the value (e.g. kWh or users). Only visible if `value` is available.
+     */
+    readonly unit: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * The element icon name. Only visible if `value` is available.
+     */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Show a status icon instead of the {@link icon}.
+     */
+    readonly status: _angular_core.InputSignal<EntityStatusType | undefined>;
+    /**
+     * Short description of the value. A description is mandatory
+     * to show an icon. Only visible if `value` is available.
+     */
+    readonly description: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * Link that leads the user to more information
+     * or triggers and action. The `link.title` is displayed.
+     * The title will be translated.
+     */
+    readonly link: _angular_core.InputSignal<Link | undefined>;
+    /**
+     * Option to disable automatic start of skeleton loading indication.
+     *
+     * @defaultValue false
+     */
+    readonly disableAutoLoadingIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Input to start and stop the skeleton loading indication.
+     *
+     * @defaultValue false
+     */
+    readonly showLoadingIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Initial delay time in milliseconds before enabling loading indicator.
+     * Only used once initially during construction.
+     *
+     * @defaultValue 300
+     */
+    readonly initialLoadingIndicatorDebounceTime: _angular_core.InputSignal<number>;
+    /**
+     * Image source for the card.
+     */
+    readonly imgSrc: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Alt text for a provided image.
+     */
+    readonly imgAlt: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Defines if an image is placed on top or start (left) of the card.
+     *
+     * @defaultValue 'vertical'
+     */
+    readonly imgDir: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /**
+     * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
+     *
+     * @defaultValue 'scale-down'
+     */
+    readonly imgObjectFit: _angular_core.InputSignal<"fill" | "contain" | "cover" | "none" | "scale-down">;
+    /**
+     * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
+     */
+    readonly imgObjectPosition: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional accent line
+     */
+    readonly accentLine: _angular_core.InputSignal<AccentLineType | undefined>;
+    protected readonly accentClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiValueWidgetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiValueWidgetComponent, "si-value-widget", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "disableAutoLoadingIndicator": { "alias": "disableAutoLoadingIndicator"; "required": false; "isSignal": true; }; "showLoadingIndicator": { "alias": "showLoadingIndicator"; "required": false; "isSignal": true; }; "initialLoadingIndicatorDebounceTime": { "alias": "initialLoadingIndicatorDebounceTime"; "required": false; "isSignal": true; }; "imgSrc": { "alias": "imgSrc"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; "imgDir": { "alias": "imgDir"; "required": false; "isSignal": true; }; "imgObjectFit": { "alias": "imgObjectFit"; "required": false; "isSignal": true; }; "imgObjectPosition": { "alias": "imgObjectPosition"; "required": false; "isSignal": true; }; "accentLine": { "alias": "accentLine"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SiDashboardCardComponent, SiDashboardComponent, SiDashboardModule, SiDashboardService, SiLinkWidgetComponent, SiListWidgetBodyComponent, SiListWidgetComponent, SiListWidgetItemComponent, SiTimelineWidgetBodyComponent, SiTimelineWidgetComponent, SiTimelineWidgetItemComponent, SiValueWidgetBodyComponent, SiValueWidgetComponent };
+export type { SiListWidgetItem, SiTimelineWidgetItem, SortOrder, TimeLineWidgetLink, TimeLineWidgetRouterLink, TimelineWidgetActionBase, TimelineWidgetActionButton, TimelineWidgetItemAction, TimelineWidgetMenu };