@siemens/element-ng 47.0.0

package/common/helpers/overlay-helper.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
+import { ElementRef } from '@angular/core';
+import { positions } from '../models/positions.model';
+export declare function makePositionStrategy(elementRef: ElementRef<any> | undefined, overlay: Overlay, placement: keyof typeof positions | ConnectionPositionPair[], constrain?: boolean, center?: boolean): PositionStrategy;
+export declare function makeOverlay(positionStrategy: PositionStrategy, overlay: Overlay, hasBackdrop: boolean): OverlayRef;
+export declare function getOverlay(elementRef: ElementRef<any>, overlay: Overlay, hasBackdrop: boolean, placement: keyof typeof positions | ConnectionPositionPair[], constrain?: boolean, center?: boolean): OverlayRef;
+export declare function getPositionStrategy(overlayref: OverlayRef): FlexibleConnectedPositionStrategy | undefined;
+export declare function getOverlayPositions(elementRef: ElementRef<any>, placement: keyof typeof positions | ConnectionPositionPair[], center?: boolean): ConnectionPositionPair[];
+export declare function hasTrigger(trigger: string, triggers?: string): boolean;
+export interface OverlayArrowPosition {
+    left?: number;
+    right?: number;
+}
+/**
+ * calculates the arrow position from left/right for tooltips, popovers, etc
+ * @param change - the event from the position strategy
+ * @param overlay - ElementRef for the overlay content, i.e. the popover/tooltip component
+ * @param anchor - ElementRef for the anchoring element, i.e. the trigger of the popover/tooltip
+ */
+export declare function calculateOverlayArrowPosition(change: ConnectedOverlayPositionChange, overlay: ElementRef, anchor?: ElementRef): OverlayArrowPosition;

package/common/helpers/positioning.helpers.d.ts

@@ -0,0 +1,58 @@
+export type Direction = 'down' | 'up' | 'start' | 'end';
+export type PlacementBasicVertical = 'top' | 'bottom';
+export type PlacementBasic = 'start' | 'end' | PlacementBasicVertical;
+export type Placement = '' | PlacementBasic | `${PlacementBasic} ${PlacementBasic}`;
+export type Align = 'start' | 'center' | 'end';
+export declare const AXIS_X: {
+    readonly axis: "X";
+    readonly directionRegular: "end";
+    readonly directionReverse: "start";
+    readonly upperBound: "left";
+    readonly lowerBound: "right";
+    readonly size: "width";
+    readonly windowSize: "innerWidth";
+};
+export declare const AXIS_Y: {
+    readonly axis: "Y";
+    readonly directionRegular: "down";
+    readonly directionReverse: "up";
+    readonly upperBound: "top";
+    readonly lowerBound: "bottom";
+    readonly size: "height";
+    readonly windowSize: "innerHeight";
+};
+export declare const BOUNDING_RECT_WINDOW: {
+    getBoundingClientRect: () => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+};
+export declare const resolveReference: (hostElement: HTMLElement, reference: string) => HTMLElement | null;
+export declare const getContentPositionString: (params: {
+    contentElement: HTMLElement;
+    direction: Direction;
+    placement: Placement;
+    placementReferenceElement: HTMLElement;
+    align: Align;
+    rtl?: boolean;
+}) => string;
+export declare const responsivelyCheckDirection: (params: {
+    isScrolling?: boolean;
+    currentDirection: Direction;
+    contentElements: HTMLElement[];
+    hostElement: HTMLElement | null;
+    placement: Placement;
+    placementReferenceElement: HTMLElement;
+    align: Align;
+    responsiveDirectionToPlacement: boolean;
+    closeOnPlacementReferenceScrollOut: boolean;
+    closeOnContentScrollOut: boolean;
+    minSpaceThresholdFactor?: number;
+    placementReverse?: Placement;
+    rtl?: boolean;
+}) => {
+    responsiveDirection?: Direction;
+    close: boolean;
+};

package/common/helpers/rtl.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export declare const isRTL: (elem?: HTMLElement) => boolean;
+export declare const correctKeyRTL: (key: string) => string;

package/common/helpers/track-by.helper.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { TrackByFunction } from '@angular/core';
+/**
+ * Creates a trackByFunction for ngFor, that tracks an Item by its identity.
+ * It should be used with a generic parameter, to generate a proper type:
+ *
+ * @example
+ * ```ts
+ * @Input() trackByFunction = buildTrackByIdentity<ItemType>()
+ * ```
+ * @deprecated use the new control-flow syntax
+ */
+export declare const buildTrackByIdentity: <T>() => TrackByFunction<T>;
+/**
+ * Creates a trackByFunction for ngFor, that tracks an Item by its index.
+ * It should be used with a generic parameter, to generate a proper type:
+ *
+ * @example
+ * ```
+ * @Input() trackByFunction = buildTrackByIdentity<ItemType>()
+ * ```
+ * @deprecated use the new control-flow syntax
+ */
+export declare const buildTrackByIndex: <T>() => TrackByFunction<T>;

package/common/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './services';
+export * from './models';
+export * from './helpers';
+export * from './decorators';

package/common/models/color-variant.model.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Use this type with filter components `colorVariant` to render component variants based on background of container
+ */
+export type BackgroundColorVariant = 'base-1' | 'base-0';

package/common/models/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './color-variant.model';
+export * from './menu.model';
+export * from './status-type.model';
+export * from './positions.model';

package/common/models/menu.model.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Link } from '@siemens/element-ng/link';
+/**
+ * The MenuItem is used to configure clickable items in menus.
+ * They support a name, link, icons and sub-menu items.
+ *
+ * @deprecated This interface should no longer be used.
+ * Use a corresponding alternative based on your use case:
+ * - for {@link SiMenuFactoryComponent} use {@link @siemens/element-ng/menu#MenuItem}
+ * - for {@link SiContentActionBarComponent} use {@link @siemens/element-ng/menu#MenuItem} and {@link ContentActionBarMainItem}
+ * - for {@link SiNavbarVerticalComponent} use {@link NavbarVerticalItem}
+ * - for {@link @simpl/dashboards-ng#SiFlexibleDashboardComponent}
+ *   use {@link @simpl/dashboards-ng#DashboardToolbarItem}
+ */
+export interface MenuItem extends Link {
+    /**
+     * An optional id to uniquely identify the menu item.
+     */
+    id?: string;
+    /**
+     * The web font icon class name (e.g. element-settings-outline).
+     */
+    icon?: string;
+    /**
+     * The value for an image src tag. Maybe a relative or absolute link to an
+     * jpg or gif image.
+     */
+    image?: string;
+    /**
+     * A navigation bar item can have a sub-menu, if these items are set. They
+     * define the sub-menu content.
+     */
+    items?: MenuItem[];
+    /**
+     * If the menu item has children you can specify
+     * if they are visible or not.
+     */
+    expanded?: boolean;
+    /**
+     * Defines if only the icon is shown in the default navigation bar.
+     */
+    iconOnly?: boolean;
+    /**
+     * Defines if custom content is chosen in account dropdown
+     * (otherwise accountItems are used)
+     */
+    customContent?: boolean;
+    /**
+     * Defines the content of the optional badge. Should be a number or something like "100+".
+     * if undefined or empty string, no badge is displayed
+     */
+    badge?: string | number;
+    /**
+     * Defines the background color of the badge. Default is specific to Element flavour.
+     */
+    badgeColor?: string;
+    /**
+     * Defines the badge style
+     */
+    badgeStyle?: 'inline' | 'dot' | '';
+    /**
+     * Show a dot badge without content?
+     */
+    badgeDot?: boolean;
+    /**
+     * For single/multi choice items: the kind of icon to show.
+     */
+    selectionState?: 'check' | 'radio' | '';
+    /**
+     * Type to distinguish between check and radio menu items. Needs to be set for correct interaction and used for a11y.
+     */
+    type?: 'check' | 'radio';
+    /**
+     * Whether the menu item should be displayed as a heading/title, will also disable links and actions.
+     */
+    isHeading?: boolean;
+    /**
+     * Whether the menu items sub-menu should open upwards instead of downwards.
+     */
+    dropUpwards?: boolean;
+}
+export type NavbarItem = MenuItem;

package/common/models/positions.model.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+export declare const positionTopCenter: ConnectionPositionPair;
+export declare const positionTopStart: ConnectionPositionPair;
+export declare const positionTopEnd: ConnectionPositionPair;
+export declare const positionBottomCenter: ConnectionPositionPair;
+export declare const positionBottomStart: ConnectionPositionPair;
+export declare const positionBottomEnd: ConnectionPositionPair;
+export declare const positions: {
+    top: ConnectionPositionPair[];
+    end: ConnectionPositionPair[];
+    bottom: ConnectionPositionPair[];
+    start: ConnectionPositionPair[];
+    auto: ConnectionPositionPair[];
+};

package/common/models/status-type.model.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export type StatusType = 'success' | 'info' | 'warning' | 'danger';
+export type ExtendedStatusType = StatusType | 'caution' | 'critical' | 'unknown';
+export type EntityStatusType = ExtendedStatusType | 'pending' | 'progress';
+export type AccentLineType = StatusType | 'caution' | 'primary' | 'inactive';
+export interface StatusIcon {
+    icon: string;
+    color: string;
+    stacked: string;
+    stackedColor: string;
+    background: string;
+    severity: number;
+}
+export declare const STATUS_ICON: {
+    [key in EntityStatusType]: StatusIcon;
+};

package/common/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-common.mjs"
+}

package/common/services/blink.service.d.ts

@@ -0,0 +1,41 @@
+import * as i0 from "@angular/core";
+/**
+ * A global blink pulse generator for synchronized blinking patterns across an entire application.
+ * Use to trigger any blinking by subscribing to `pulse$`.
+ */
+export declare class BlinkService {
+    private pause$;
+    private off$;
+    private on$;
+    /**
+     * Blink pulse. Subscribe to it to toggle `on` CSS class when true, `off` CSS class when `false`.
+     * Do animations using CSS transitions
+     *
+     * @defaultValue
+     * ```
+     * timer(0, 1400).pipe(
+     *     map(count => count % 2 === 0),
+     *     distinctUntilChanged(),
+     *     takeUntil(this.off$),
+     *     endWith(false),
+     *     repeat({ delay: () => this.on$ }),
+     *     share()
+     *   )
+     * ```
+     */
+    readonly pulse$: import("rxjs").Observable<boolean>;
+    /**
+     * Pause the blinking.
+     */
+    pause(): void;
+    /**
+     * Resume the blinking.
+     */
+    resume(): void;
+    /**
+     * Whether the blinking is paused or not.
+     */
+    isPaused(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BlinkService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BlinkService>;
+}

package/common/services/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './blink.service';
+export * from './si-uistate.service';
+export * from './text-measure.service';
+export * from './scrollbar-helper.service';

package/common/services/scrollbar-helper.service.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * Gets the width of the scrollbar.  Nesc for windows
+ * http://stackoverflow.com/a/13382873/888165
+ */
+export declare class ScrollbarHelper {
+    private document;
+    /**
+     * The width of the scrollbar.
+     *
+     * @defaultValue this.getWidth()
+     */
+    readonly width: number;
+    private getWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollbarHelper, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollbarHelper>;
+}

package/common/services/si-uistate.service.d.ts

@@ -0,0 +1,61 @@
+import { InjectionToken, Provider, Type } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Interface that defines a UIStateStore.
+ * It must be provided via {@link provideSiUiState}.
+ */
+export interface UIStateStorage {
+    /**
+     * Saves data under a specific stateId.
+     * Already existing data for that stateId should be overridden.
+     * Asynchronous implementations must return a {@link Promise} and resolve it once saving was completed.
+     *
+     * Errors should be handled by the implementation.
+     * The `SiUIStateService` does not handle errors.
+     */
+    save(stateId: string, data: string): void | Promise<void>;
+    /**
+     * Loads data for a specific stateId.
+     * Can be asynchronous.
+     *
+     * Errors should be handled by the implementation.
+     * The `SiUIStateService` does not handle errors.
+     *
+     * @returns The data or undefined if the data does not exist.
+     * Asynchronous implementations must return a {@link Promise} containing the data.
+     */
+    load(stateId: string): string | undefined | null | Promise<string | undefined | null>;
+}
+/** @internal */
+export declare const SI_UI_STATE_SERVICE: InjectionToken<SiUIStateService>;
+/**
+ * Service to save and load UI states.
+ * @internal
+ */
+declare class SiUIStateService {
+    private storage;
+    /**
+     * Saves the provided state in the storage.
+     * @param stateId - The unique id or key under which the state shall be saved.
+     * @param state - The state to be saved.
+     * @param version - The version of the state object.
+     * This can be used to migrate state objects.
+     */
+    save<TState>(stateId: string, state: TState, version?: number): Promise<void>;
+    /**
+     * Loads and returns the state for the given stateId and version.
+     * @param stateId - The unique id or key for which the state shall be loaded.
+     * @param version - The version of the state object.
+     * This can be used to migrate state objects.
+     * @returns A Promise containing the state or undefined if the state does not exist or the version did not match.
+     */
+    load<TState = unknown>(stateId: string, version?: number): PromiseLike<TState | undefined>;
+    private readData;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiUIStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiUIStateService>;
+}
+export type { SiUIStateService };
+/** Enables the automatic storage of UI state for enabled components. */
+export declare const provideSiUiState: (config?: {
+    store?: Type<UIStateStorage>;
+}) => Provider[];

package/common/services/text-measure.service.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+export interface FontStyleOverride {
+    fontStyle?: string;
+    fontVariant?: string;
+    fontWeight?: string;
+    fontSize?: string;
+    fontFamily?: string;
+}
+export declare class TextMeasureService {
+    private measureCanvas?;
+    private defaultFont?;
+    private document;
+    /** Measure text width in pixel. */
+    measureText(text: string, fontRef?: HTMLElement | string, overrides?: FontStyleOverride): number;
+    /** Get font styles for `font` CSS short-hand property. */
+    getFontStyle(element: HTMLElement, overrides?: FontStyleOverride): string;
+    private ensureCanvas;
+    private setFontStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextMeasureService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TextMeasureService>;
+}

package/element-ng.scss

@@ -0,0 +1,14 @@
+@use '@angular/cdk/overlay' with (
+  // these muse be higher than the Bootstrap $zindex-modal, otherwise popover/tooltips won't work inside modals
+  $overlay-container-z-index: 1070,
+  $overlay-z-index: 1070,
+  $overlay-backdrop-z-index: 1070
+);
+@use '@angular/cdk/a11y';
+
+@include overlay.overlay();
+@include a11y.a11y-visually-hidden();
+
+.cdk-drag-preview {
+  z-index: overlay.$overlay-z-index !important; // stylelint-disable-line declaration-no-important
+}