@siemens/element-ng 47.9.0 → 48.0.0-next.2

package/side-panel/index.d.ts

@@ -1,9 +1,280 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { Portal } from '@angular/cdk/portal';
+import { Observable } from 'rxjs';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { Breakpoints, ElementDimensions } from '@siemens/element-ng/resize-observer';
+import { MenuItem } from '@siemens/element-ng/common';
+import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar';
+import { MenuItem as MenuItem$1 } from '@siemens/element-ng/menu';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+
+declare class SiSidePanelService {
+    private contentSubject;
+    /** @internal */
+    readonly content$: Observable<Portal<any> | undefined>;
+    private openSubject;
+    /**
+     * Emits on side panel is open or close.
+     *
+     * @defaultValue this.openSubject.asObservable()
+     */
+    readonly isOpen$: Observable<boolean>;
+    private tempContentSubject;
+    /** @internal */
+    readonly tempContent$: Observable<Portal<any> | undefined>;
+    private tempContentClosed?;
+    /** @internal */
+    readonly enableMobile: _angular_core.WritableSignal<boolean>;
+    /** Set or update displayed content. */
+    setSidePanelContent(portal: Portal<any> | undefined): void;
+    /** Open side panel. */
+    open(): void;
+    /** Close side panel. */
+    close(): void;
+    /** Toggle side panel open/close. */
+    toggle(): void;
+    /** Indicate is side panel open. */
+    isOpen(): boolean;
+    /**
+     * Indicate that the side panel is open with temporary content.
+     */
+    isTemporaryOpen(): boolean;
+    /** Show side panel temporary content, opening the side panel when necessary. */
+    showTemporaryContent(portal: Portal<any> | undefined): Observable<void>;
+    /** Hide side panel temporary content, reverting to state before showing temporary content. */
+    hideTemporaryContent(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SiSidePanelService>;
+}
+
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-export * from './si-side-panel.service';
-export * from './si-side-panel.component';
-export * from './si-side-panel-content.component';
-export * from './si-side-panel.module';
-export * from './side-panel.model';
+/**
+ * Side panel mode options.
+ * - scroll: pushes content when side panel opens/closes,
+ * - over: Opens as an overlay on existing content. Just like modal.
+ */
+type SidePanelMode = 'scroll' | 'over';
+/**
+ * Side panel size options.
+ * - wide: 500px,
+ * - regular: 390px
+ */
+type SidePanelSize = 'wide' | 'regular';
+
+declare class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
+    /**
+     * @defaultValue false
+     */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Default state of navigation
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean | undefined>;
+    /**
+     * Mode of side panel
+     * (ignored below a certain width)
+     *
+     * @defaultValue 'over'
+     */
+    readonly mode: _angular_core.InputSignal<SidePanelMode>;
+    /**
+     * Size of side-panel
+     *
+     * @defaultValue 'regular'
+     */
+    readonly size: _angular_core.InputSignal<SidePanelSize>;
+    /**
+     * Toggle icon aria-label, required for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
+     * ```
+     */
+    readonly toggleItemLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Specifies custom breakpoints to automatically switch mode.
+     * The `smMinimum` specifies the breakpoint for the mobile view.
+     * The `lgMinimum` specifies the breakpoint to allow scroll mode
+     * (below automatically uses over mode).
+     * The `xlMinimum` specifies the breakpoint to allow scroll mode
+     * with wide size (below automatically uses over mode).
+     */
+    readonly breakpoints: _angular_core.InputSignal<Breakpoints | undefined>;
+    /**
+     * Enable mobile drawer for small screen sizes. Should not be used in conjunction with the vertical navbar.
+     *
+     * @defaultValue false
+     */
+    readonly enableMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits when the panel is closed
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits whenever the content is resized due to opening and closing or parent resize.
+     */
+    readonly contentResize: _angular_core.OutputEmitterRef<ElementDimensions>;
+    protected readonly isScrollMode: _angular_core.Signal<boolean>;
+    protected readonly isXs: _angular_core.WritableSignal<boolean>;
+    protected readonly isSm: _angular_core.WritableSignal<boolean>;
+    protected readonly isMd: _angular_core.WritableSignal<boolean>;
+    protected readonly isLg: _angular_core.WritableSignal<boolean>;
+    protected readonly isXl: _angular_core.WritableSignal<boolean>;
+    protected readonly isCollapsed: _angular_core.WritableSignal<boolean>;
+    protected readonly ready: _angular_core.WritableSignal<boolean>;
+    protected readonly isHidden: _angular_core.WritableSignal<boolean>;
+    protected readonly showTempContent: _angular_core.WritableSignal<boolean>;
+    private readonly panelElement;
+    private readonly contentElement;
+    private readonly portalOutlet;
+    private readonly tmpPortalOutlet;
+    /**
+     * The $rpanel-transition-duration in the style is 0.5 seconds.
+     * Sending the resize event after resize need to wait until resize is done.
+     */
+    private readonly resizeEventDelay;
+    private resizeEvent;
+    private openingOrClosing;
+    private previousContentDimensions;
+    private isCollapsedInternal;
+    private readonly isBrowser;
+    private readonly element;
+    private readonly resizeObserver;
+    private readonly service;
+    private readonly cdRef;
+    private readonly destroyRef;
+    private readonly document;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Toggle whether the side panel is expanded or not.
+     */
+    toggleSidePanel(): void;
+    private emitResizeOutputs;
+    private getContentDimensions;
+    private setBreakpoints;
+    private sendResize;
+    private attachContent;
+    private attachTempContent;
+    private openClose;
+    private doOpenClose;
+    private moveFocusInside;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelComponent, "si-side-panel", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "closed": "closed"; "contentResize": "contentResize"; }, never, ["si-side-panel-content, element-side-panel-content", "*"], true, never>;
+}
+
+/**
+ * An extension of MenuItem to support combined icons
+ */
+interface StatusItem extends MenuItem {
+    overlayIcon?: string;
+}
+declare class SiSidePanelContentComponent implements OnInit {
+    /**
+     * @defaultValue false
+     */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Header of side panel
+     *
+     * @defaultValue ''
+     */
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Input list of primary action items
+     *
+     * @defaultValue []
+     */
+    readonly primaryActions: _angular_core.InputSignal<(MenuItem | ContentActionBarMainItem)[]>;
+    /**
+     * Input list of secondary action items.
+     *
+     * @defaultValue []
+     */
+    readonly secondaryActions: _angular_core.InputSignal<(MenuItem | MenuItem$1)[]>;
+    /**
+     * Status icons/actions
+     *
+     * @defaultValue []
+     */
+    readonly statusActions: _angular_core.InputSignal<StatusItem[]>;
+    /**
+     * Toggles search bar
+     *
+     * @defaultValue false
+     */
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Placeholder text for search
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`)
+     * ```
+     */
+    readonly searchPlaceholder: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Aria label for close button. Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SIDE_PANEL.CLOSE:Close`)
+     * ```
+     */
+    readonly closeButtonLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Toggle icon aria-label, required for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
+     * ```
+     */
+    readonly toggleItemLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Show a badge on the mobile drawer indicating a new alert or notification
+     *
+     * @defaultValue false
+     */
+    readonly showMobileDrawerBadge: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Output for search bar input
+     */
+    readonly searchEvent: _angular_core.OutputEmitterRef<string>;
+    protected readonly isCollapsed: _angular_core.WritableSignal<boolean>;
+    protected readonly isExpanded: _angular_core.WritableSignal<boolean>;
+    protected readonly enableMobile: _angular_core.Signal<boolean>;
+    protected readonly mobileSize: _angular_core.WritableSignal<boolean>;
+    protected readonly focusable: _angular_core.Signal<boolean>;
+    protected readonly icons: Record<"elementDoubleLeft" | "elementDoubleRight", string>;
+    /**
+     * The $rpanel-transition-duration in the style is 0.5 seconds.
+     * For the animation we need to wait until the resize is done.
+     */
+    private readonly resizeAnimationDelay;
+    private readonly destroyRef;
+    private readonly service;
+    private readonly breakpointObserver;
+    private expandedTimeout;
+    constructor();
+    ngOnInit(): void;
+    protected toggleSidePanel(event?: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelContentComponent, "si-side-panel-content", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "statusActions": { "alias": "statusActions"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "showMobileDrawerBadge": { "alias": "showMobileDrawerBadge"; "required": false; "isSignal": true; }; }, { "searchEvent": "searchEvent"; }, never, ["*"], true, never>;
+}
+
+declare class SiSidePanelModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiSidePanelModule, never, [typeof SiSidePanelComponent, typeof SiSidePanelContentComponent], [typeof SiSidePanelComponent, typeof SiSidePanelContentComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiSidePanelModule>;
+}
+
+export { SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
+export type { SidePanelMode, SidePanelSize, StatusItem };

package/skip-links/index.d.ts

@@ -1,5 +1,26 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+
 /**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
+ * Directive to mark an element as a target for a skip link.
+ * If this directive is applied to a none interactive element, a tabindex of -1 must be added manually.
  */
-export * from './si-skip-link-target.directive';
+declare class SiSkipLinkTargetDirective implements OnInit, OnDestroy {
+    /**
+     * The name of the skip link target which will be shown in the skip link.
+     */
+    readonly name: i0.InputSignal<TranslatableString>;
+    private skipLinkService;
+    private elementRef;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Call this methode to "activate" a skip link target. It will focus this element and scroll it into the view.
+     */
+    jumpToThisTarget(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiSkipLinkTargetDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiSkipLinkTargetDirective, "[siSkipLinkTarget]", never, { "name": { "alias": "siSkipLinkTarget"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SiSkipLinkTargetDirective };

package/slider/index.d.ts

@@ -1,6 +1,139 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-slider.component';
-export * from './si-slider.module';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SiFormItemControl } from '@siemens/element-ng/form';
+
+declare class SiSliderComponent implements ControlValueAccessor, SiFormItemControl {
+    private static idCounter;
+    private readonly handleRef;
+    private readonly disabledNgControl;
+    /**
+     * @defaultValue
+     * ```
+     * `__si-slider-${SiSliderComponent.idCounter++}`
+     * ```
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Current value of slider.
+     */
+    readonly value: _angular_core.ModelSignal<number | undefined>;
+    /**
+     * Minimum of slider range.
+     *
+     * @defaultValue 0
+     */
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Maximum of slider range.
+     *
+     * @defaultValue 100
+     */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Label to describe minimum of slider range.
+     *
+     * @defaultValue ''
+     */
+    readonly minLabel: _angular_core.InputSignal<string>;
+    /**
+     * Label to describe maximum of slider range.
+     *
+     * @defaultValue ''
+     */
+    readonly maxLabel: _angular_core.InputSignal<string>;
+    /**
+     * Interval to step through the slider.
+     *
+     * @defaultValue 1
+     */
+    readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Icon to use as the slider thumb.
+     */
+    readonly thumbIcon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Text for aria-label of increment. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SLIDER.INCREMENT:Increment`)
+     * ```
+     */
+    readonly incrementLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Text for aria-label of decrement. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SLIDER.DECREMENT:Decrement`)
+     * ```
+     */
+    readonly decrementLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Text for aria-label of slider. Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SLIDER.LABEL:Value`)
+     * ```
+     */
+    readonly sliderLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * `${this.id()}-label`
+     * ```
+     */
+    readonly labelledby: _angular_core.InputSignal<string>;
+    /** @defaultValue false */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly disabled: _angular_core.Signal<boolean>;
+    protected readonly sliderValue: _angular_core.Signal<number>;
+    /** @internal */
+    readonly errormessageId: string;
+    protected readonly indicatorPos: _angular_core.Signal<number>;
+    protected readonly icons: Record<"elementMinus" | "elementPlus", string>;
+    protected isDragging: boolean;
+    private autoUpdate$;
+    private autoUpdateSubs?;
+    private rtl;
+    private unlistenDragEvents;
+    private onTouchedCallback;
+    private onChangeCallback;
+    private zone;
+    private changeDetectorRef;
+    private incrementValue;
+    private decrementValue;
+    private roundToStepPrecision;
+    private normalizeValue;
+    private handleTouchMove;
+    private handleMouseMove;
+    private handleDragMove;
+    private handleDragEnd;
+    private valueChanged;
+    protected handlePointerDown(event: Event): void;
+    protected autoUpdateKeydown(event: KeyboardEvent): void;
+    protected autoUpdateStart(event: Event, isIncrement: boolean): void;
+    protected autoUpdateStop(): void;
+    protected handleMouseDown(event: MouseEvent): void;
+    protected handleTouchStart(event: TouchEvent): void;
+    /** @internal */
+    writeValue(val: any): void;
+    /** @internal */
+    registerOnChange(fn: any): void;
+    /** @internal */
+    registerOnTouched(fn: () => void): void;
+    /** @internal */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSliderComponent, "si-slider", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minLabel": { "alias": "minLabel"; "required": false; "isSignal": true; }; "maxLabel": { "alias": "maxLabel"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "thumbIcon": { "alias": "thumbIcon"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; "sliderLabel": { "alias": "sliderLabel"; "required": false; "isSignal": true; }; "labelledby": { "alias": "labelledby"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+
+declare class SiSliderModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSliderModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiSliderModule, never, [typeof SiSliderComponent], [typeof SiSliderComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiSliderModule>;
+}
+
+export { SiSliderComponent, SiSliderModule };

package/sort-bar/index.d.ts

@@ -1,6 +1,49 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-sort-bar.component';
-export * from './si-sort-bar.module';
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { HttpParams } from '@angular/common/http';
+
+interface SortCriteria {
+    name: string;
+    key: number | string;
+}
+declare class SiSortBarComponent implements OnInit {
+    /**
+     * Custom sort title.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SORT_BAR.TITLE:Sort by`)
+     * ```
+     */
+    readonly sortTitle: i0.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * List of sort criteria.
+     */
+    readonly sortCriteria: i0.InputSignal<SortCriteria[]>;
+    /**
+     * `key` which sortCriteria is active by default.
+     */
+    readonly defaultSortCriteria: i0.InputSignal<string | number>;
+    /**
+     * Output callback event will provide you with a HttpParams object if active
+     * sortCriteria change.
+     */
+    readonly sortChange: i0.OutputEmitterRef<HttpParams>;
+    protected readonly icons: Record<"elementSortDown" | "elementSortUp", string>;
+    protected activeSortCriteria: SortCriteria['key'];
+    protected sortIsDescending: boolean;
+    ngOnInit(): void;
+    protected setActive(key: SortCriteria['key']): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiSortBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiSortBarComponent, "si-sort-bar", never, { "sortTitle": { "alias": "sortTitle"; "required": false; "isSignal": true; }; "sortCriteria": { "alias": "sortCriteria"; "required": true; "isSignal": true; }; "defaultSortCriteria": { "alias": "defaultSortCriteria"; "required": true; "isSignal": true; }; }, { "sortChange": "sortChange"; }, never, never, true, never>;
+}
+
+declare class SiSortBarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiSortBarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiSortBarModule, never, [typeof SiSortBarComponent], [typeof SiSortBarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiSortBarModule>;
+}
+
+export { SiSortBarComponent, SiSortBarModule };
+export type { SortCriteria };