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

package/tabs/index.d.ts

@@ -1,7 +1,161 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-tabset/index';
-export * from './si-tab/index';
-export * from './si-tabs.module';
+import * as i0 from '@angular/core';
+import { OnChanges, EventEmitter, AfterViewInit, OnDestroy, QueryList } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+
+declare class SiTabComponent implements OnChanges {
+    private static idCounter;
+    /** Title of the tab item. */
+    heading?: TranslatableString;
+    /** Icon of the tab item. */
+    icon?: string;
+    /** Alternative name or translation key for icon. Used for A11y. */
+    iconAltText?: TranslatableString;
+    /**
+     * Additional badge content. A value of
+     * - `true` will render a red dot
+     * - any string without a `badgeColor` will render a red dot with text
+     * - any string with a `badgeColor` will render a normal badge
+     */
+    badgeContent?: TranslatableString | boolean;
+    /**
+     * Background color of the badge.
+     * If no color is provided a red dot badge will be rendered.
+     */
+    badgeColor?: string;
+    /**
+     * Disables the tab.
+     *
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Close the current tab.
+     *
+     * @defaultValue false
+     */
+    closable?: boolean | undefined;
+    /** Event emitter to notify when a tab is closed. */
+    readonly closeTriggered: EventEmitter<SiTabComponent>;
+    /** @internal */
+    id: string;
+    /** @internal */
+    tabId: string;
+    protected get isHidden(): boolean | null;
+    private parent?;
+    /** @internal */
+    readonly active: i0.WritableSignal<boolean>;
+    /** @internal */
+    registerParent(parent: SiTabsetComponent): void;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiTabComponent, "si-tab", never, { "heading": { "alias": "heading"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconAltText": { "alias": "iconAltText"; "required": false; }; "badgeContent": { "alias": "badgeContent"; "required": false; }; "badgeColor": { "alias": "badgeColor"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; }, { "closeTriggered": "closeTriggered"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_closable: unknown;
+}
+
+interface SiTabDeselectionEvent {
+    /**
+     * The target tab
+     */
+    target: SiTabComponent;
+    /**
+     * The index of target tab
+     */
+    tabIndex: number;
+    /**
+     * To be called to prevent switching the tab
+     */
+    cancel: () => void;
+}
+declare class SiTabsetComponent implements AfterViewInit, OnDestroy {
+    /**
+     * Contains the current tab components.
+     */
+    protected tabPanels: QueryList<SiTabComponent>;
+    /**
+     * Component variable to indicate if scrolling is necessary or the container is big enough to display all tabs.
+     */
+    protected scrollable: boolean;
+    protected xPos: number;
+    protected endArrowDisabled: boolean;
+    protected focusedTabIndex?: number;
+    protected readonly icons: Record<"elementCancel" | "elementLeft3" | "elementRight3", string>;
+    /**
+     * If selectDefaultTab is passed as 'false', this implies no default tab selection
+     * i.e. on initial load of tabset component no tab gets selected.
+     *
+     * @defaultValue true
+     */
+    selectDefaultTab: boolean;
+    /**
+     * Sets a selected tab index. This will activate the tab of the provided
+     * index, activates the tab and fires a notification about the change.
+     * If index is passed as -1 i.e. `selectedTabIndex = -1`, this implies to clear all tab selection.
+     * @defaultref {@link _selectedTabIndex}
+     */
+    set selectedTabIndex(tabIndex: number);
+    /**
+     * Returns the currently selected tab index.
+     */
+    get selectedTabIndex(): number;
+    /** Define an optional max-width in px for the tab buttons. The minimum value is `100`. */
+    tabButtonMaxWidth?: number;
+    /**
+     * Event emitter to notify about selected tab index changes. You can either
+     * use bi-directional binding with [(selectedTabIndex)] or separate both with
+     * [selectedTabIndex]=... and (selectedTabIndexChange)=...
+     */
+    readonly selectedTabIndexChange: EventEmitter<number>;
+    /**
+     * Event emitter to notify when a tab became inactive.
+     */
+    readonly deselect: EventEmitter<SiTabDeselectionEvent>;
+    private initTabIndex;
+    private initialized;
+    private subscription?;
+    private readonly tabContainer;
+    private readonly innerTabContainer;
+    private readonly tabs;
+    private changeDetectorRef;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** @internal */
+    notifyChildrenChanged(): void;
+    protected isTabFocusable(index: number): boolean;
+    protected focusNext(): void;
+    protected focusPrevious(): void;
+    protected resize(): void;
+    /**
+     * Finds the index of the provided tab and sets the index as new selected tab index
+     *
+     * @param selectedTab - The tab to be selected. This must already be part of the container.
+     */
+    protected selectTab(selectedTab: SiTabComponent): void;
+    /**
+     * Scrolls the tab headers to the end (right in LTR).
+     */
+    protected scrollEnd(): void;
+    /**
+     * Scrolls the tab headers to the start (left in LTR).
+     */
+    protected scrollStart(): void;
+    private scroll;
+    protected mouseScroll(event: WheelEvent): void;
+    /** @internal */
+    focus(index: number): void;
+    /** @internal */
+    blur(): void;
+    protected closeTab(event: MouseEvent, tab: SiTabComponent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTabsetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiTabsetComponent, "si-tabset", never, { "selectDefaultTab": { "alias": "selectDefaultTab"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "tabButtonMaxWidth": { "alias": "tabButtonMaxWidth"; "required": false; }; }, { "selectedTabIndexChange": "selectedTabIndexChange"; "deselect": "deselect"; }, ["tabPanels"], ["*"], true, never>;
+    static ngAcceptInputType_selectDefaultTab: unknown;
+}
+
+declare class SiTabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiTabsModule, never, [typeof SiTabsetComponent, typeof SiTabComponent], [typeof SiTabsetComponent, typeof SiTabComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiTabsModule>;
+}
+
+export { SiTabComponent, SiTabsModule, SiTabsetComponent };
+export type { SiTabDeselectionEvent };

package/tabs-next/index.d.ts

@@ -1,7 +1,121 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-tabset-next.component';
-export * from './si-tab-next.component';
-export * from './si-tab-next-link.component';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, Signal, ElementRef, TemplateRef } from '@angular/core';
+import { FocusableOption, FocusKeyManager } from '@angular/cdk/a11y';
+import * as _siemens_element_ng_tabs_next from '@siemens/element-ng/tabs-next';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as i1 from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+declare abstract class SiTabNextBaseDirective implements OnDestroy, FocusableOption {
+    abstract readonly active: Signal<boolean | undefined>;
+    /** Title of the tab item. */
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Icon of the tab item.
+     * If provided, heading text will be ignored and only icon will be displayed.
+     */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Additional badge content. A value of
+     * - `true` will render a red dot
+     * - any string without a `badgeColor` will render a red dot with text
+     * - any string with a `badgeColor` will render a normal badge
+     */
+    readonly badgeContent: _angular_core.InputSignal<boolean | TranslatableString | undefined>;
+    /**
+     * Background color of the badge.
+     * If no color is provided a red dot badge will be rendered.
+     */
+    readonly badgeColor: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Disables the tab.
+     *
+     * @defaultValue false
+     */
+    readonly disabledTab: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Close the current tab.
+     *
+     * @defaultValue false
+     */
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Event emitter to notify when a tab is closed. */
+    readonly closeTriggered: _angular_core.OutputEmitterRef<void>;
+    protected readonly tabButton: ElementRef<HTMLElement>;
+    /** @internal */
+    readonly tabContent: Signal<TemplateRef<any> | undefined>;
+    private static tabCounter;
+    private indexBeforeClose;
+    /** @internal */
+    tabId: string;
+    protected readonly icons: Record<"elementCancel", string>;
+    protected tabset: _siemens_element_ng_tabs_next.SiTabsetNextComponent;
+    private readonly index;
+    constructor();
+    ngOnDestroy(): void;
+    protected closeTab(event: Event): void;
+    /** @internal */
+    focus(): void;
+    /** @internal */
+    get disabled(): boolean;
+    /**
+     * Programmatically selects the current tab.
+     */
+    selectTab(retainFocus?: boolean): void;
+    /** @internal */
+    deSelectTab(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabNextBaseDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiTabNextBaseDirective, "[siTabNextBase]", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badgeContent": { "alias": "badgeContent"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "disabledTab": { "alias": "disabled"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closeTriggered": "closeTriggered"; }, never, never, true, never>;
+}
+
+/** @experimental */
+declare class SiTabNextLinkComponent extends SiTabNextBaseDirective {
+    private router;
+    /** @internal */
+    routerLink: RouterLink;
+    protected routerLinkActive: RouterLinkActive;
+    /** @defaultValue false */
+    readonly active: _angular_core.Signal<boolean | undefined>;
+    /** {@inheritDoc} */
+    selectTab(retainFocus?: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabNextLinkComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabNextLinkComponent, "a[si-tab-next][routerLink]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.RouterLinkActive; inputs: {}; outputs: {}; }]>;
+}
+
+/** @experimental */
+declare class SiTabsetNextComponent {
+    /** @internal */
+    readonly activeTab: _angular_core.Signal<SiTabNextBaseDirective | undefined>;
+    /** @internal */
+    readonly tabPanels: _angular_core.Signal<readonly SiTabNextBaseDirective[]>;
+    /** @internal */
+    focusKeyManager: FocusKeyManager<SiTabNextBaseDirective>;
+    /** @internal */
+    protected readonly showMenuButton: _angular_core.WritableSignal<boolean>;
+    protected tabIsLink(tab: unknown): tab is SiTabNextLinkComponent;
+    /** @internal */
+    removedTabByUser(index: number, active?: boolean): void;
+    protected resizeContainer(width: number, scrollWidth: number): void;
+    protected keydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabsetNextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabsetNextComponent, "si-tabset-next", never, {}, {}, ["tabPanels"], ["*", "router-outlet"], true, never>;
+}
+
+/** @experimental */
+declare class SiTabNextComponent extends SiTabNextBaseDirective implements OnDestroy {
+    /**
+     * Whether the tab is active or not.
+     * If set to `true`, the tab will be selected and its content will be displayed.
+     * @defaultValue false
+     * */
+    readonly active: _angular_core.ModelSignal<boolean>;
+    protected selectTabByUser(): void;
+    /** {@inheritDoc} */
+    selectTab(retainFocus?: boolean): void;
+    /** @internal */
+    deSelectTab(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabNextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabNextComponent, "si-tab-next", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, ["*"], true, never>;
+}
+
+export { SiTabNextComponent, SiTabNextLinkComponent, SiTabsetNextComponent };

package/template-i18n.json

@@ -84,10 +84,7 @@
   "SI_FILE_UPLOADER.UPLOAD_COMPLETED": "Upload completed",
   "SI_FILE_UPLOADER.UPLOAD_FAILED": "Upload failed",
   "SI_FILTERED_SEARCH.CLEAR": "Clear",
-  "SI_FILTERED_SEARCH.ITEMS": "items",
-  "SI_FILTERED_SEARCH.NO_MATCHING_CRITERIA": "No matching criteria",
   "SI_FILTERED_SEARCH.SEARCH": "Search",
-  "SI_FILTERED_SEARCH.SUBMIT": "Apply search criteria",
   "SI_FILTERED_SEARCH.SUBMIT_BUTTON": "Submit search",
   "SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION": "+ {{count}} filters",
   "SI_FILTER_BAR.NO_FILTERS": "No filters applied",

package/theme/index.d.ts

@@ -1,7 +1,263 @@
+import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-export * from './si-theme-store';
-export * from './si-theme.service';
-export * from './si-theme.model';
+interface ThemeDescription {
+    name: string;
+    groups: ThemePropertyGroup[];
+}
+interface ThemePropertyGroup {
+    name: string;
+    description?: string;
+    properties: ThemeProperty[];
+}
+interface ThemeProperty {
+    name: string;
+    usage: string;
+    type: ThemePropertyType;
+}
+type ThemePropertyType = 'color' | 'gradient' | 'font' | 'url' | 'text' | 'number';
+interface Theme {
+    name: string;
+    schemes: ThemeColorSchemes;
+    /**
+     * A map of icons that overrides the default Element icons.
+     * The key must be the key of the original icon that should be overridden.
+     * The value has to be a data SVG string.
+     *
+     * @example
+     * ```ts
+     * {
+     *   elementUser: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>...</svg>"
+     * }
+     * ```
+     *
+     * @experimental
+     */
+    icons?: Record<string, string>;
+}
+interface ThemeColorSchemes {
+    light?: ThemeColorScheme;
+    dark?: ThemeColorScheme;
+}
+type ThemeColorScheme = {
+    [key: string]: string;
+};
+type ThemeType = 'dark' | 'light' | 'auto';
+declare const ELEMENT_THEME_NAME = "element";
+declare const elementTheme: ThemeDescription;
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * SiThemeStore object is used by the theme service to load and
+ * store the themes. You can inject your own implementation to provide
+ * a backend implementation. Otherwise a localStorage based implementation
+ * is used.
+ */
+declare abstract class SiThemeStore {
+    /**
+     * Load and return an alternative custom theme, other then
+     * the default element theme. This method is invoked initially
+     * to check for an alternative custom theme.
+     * @returns The active theme to be used, or undefined if the
+     * default element theme shall be used. All wrapped in an observable
+     * that can also emit errors.
+     */
+    abstract loadActiveTheme(): Observable<Theme | undefined>;
+    /**
+     * Sets the theme with the given name to active.
+     * @param name - The name of the theme to become active.
+     * @returns True on success, otherwise false.
+     */
+    abstract activateTheme(name: string): Observable<boolean>;
+    /**
+     * Deactivate any active theme and makes the element theme the default one.
+     * @returns True on success, otherwise false.
+     */
+    abstract deactivateTheme(): Observable<boolean>;
+    /**
+     * Load and return the available theme names.
+     * @returns An `Observable` of available theme names, other than the
+     * default element theme.
+     */
+    abstract loadThemeNames(): Observable<string[]>;
+    /**
+     * Load theme with the given `name`.
+     * @param name - The name of the theme to be returned.
+     * @returns Observable with the named theme or `undefined` if no such theme exist.
+     */
+    abstract loadTheme(name: string): Observable<Theme | undefined>;
+    /**
+     * Saves a theme to the store. The name shall not be empty. A theme with
+     * identical name gets overwritten.
+     * @param theme - The theme to be saved.
+     * @returns True on success, otherwise false. All nicely wrapped in
+     * an observable that may also emit errors.
+     */
+    abstract saveTheme(theme: Theme): Observable<boolean>;
+    /**
+     * Deletes the theme with the given name from the store.
+     * @param name - The name of the theme to be deleted.
+     * @returns True on success, otherwise false. All nicely wrapped in
+     * an observable that may also emit errors. Returns false,
+     * if the theme does not exist.
+     */
+    abstract deleteTheme(name: string): Observable<boolean>;
+}
+declare const SI_THEME_LOCAL_STORAGE_KEY = "si-themes";
+interface ThemeStorage {
+    activeTheme: string | undefined;
+    themes: {
+        [key: string]: Theme;
+    };
+}
+declare class SiDefaultThemeStore extends SiThemeStore {
+    private isBrowser;
+    constructor(isBrowser: boolean);
+    loadActiveTheme(): Observable<Theme | undefined>;
+    activateTheme(name: string): Observable<boolean>;
+    deactivateTheme(): Observable<boolean>;
+    loadThemeNames(): Observable<string[]>;
+    saveTheme(theme: Theme): Observable<boolean>;
+    loadTheme(name: string): Observable<Theme | undefined>;
+    deleteTheme(name: string): Observable<boolean>;
+    private loadStore;
+    private saveStore;
+}
+
+declare class SiThemeService {
+    /**
+     * The current color scheme. (e.g. light or dark).
+     */
+    private _resolvedColorScheme;
+    private resolvedColorSchemeSub;
+    /**
+     * Emits events when the color scheme changes.
+     *
+     * @defaultValue this.resolvedColorSchemeSub.asObservable()
+     */
+    readonly resolvedColorScheme$: Observable<keyof ThemeColorSchemes>;
+    /**
+     * The current color scheme. (e.g. light or dark).
+     */
+    get resolvedColorScheme(): ThemeType | undefined;
+    /**
+     * All available theme names, including element theme name.
+     */
+    private _themeNames;
+    private themeNamesSub;
+    /**
+     * Emits events when the list of available theme names changes.
+     *
+     * @defaultValue this.themeNamesSub.asObservable()
+     */
+    readonly themeNames$: Observable<string[]>;
+    /**
+     * All available theme names, including element theme name.
+     */
+    get themeNames(): string[];
+    /**
+     * Emits events when the currently applied theme changes. Either by
+     * changing to another theme or by re-applying a theme with updated
+     * properties. When switching to default theme element, `undefined`
+     * is emitted.
+     */
+    readonly themeChange: EventEmitter<Theme | undefined>;
+    /**
+     * The name of the theme that is active. Theme name `element` is the default.
+     */
+    activeThemeName?: string;
+    /**
+     * Icon overrides by the currently activeTheme.
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    readonly themeIcons: i0.WritableSignal<Record<string, SafeHtml>>;
+    private themes;
+    private darkMediaQuery?;
+    private mediaQueryListener?;
+    private isBrowser;
+    private previewTheme?;
+    private themeStore;
+    private meta;
+    private document;
+    private domSanitizer;
+    constructor();
+    /**
+     * Returns `true` if a theme with the given name is available.
+     */
+    hasTheme(name: string): boolean;
+    /**
+     * Returns a clone of the theme with the given name or `undefined` if not
+     * available or name is `element`.
+     * @param name - The name of the theme to be returned.
+     * @returns The theme with the given name and `undefined` if name is `element`.
+     */
+    getTheme(name: string): Observable<Theme | undefined>;
+    /**
+     * Loads and returns the currently active theme. Returns undefined if no custom theme is used.
+     * @returns A custom theme or `undefined` if the default element theme is used.
+     */
+    getActiveTheme(): Observable<Theme | undefined>;
+    /**
+     * Adds or updates the given theme in the theme store.
+     * @param theme - The theme to be saved.
+     * @returns `true` if the theme was saved successfully.
+     */
+    addOrUpdateTheme(theme: Theme): Observable<boolean>;
+    /**
+     * Deletes the theme with the given name from the theme store.
+     */
+    deleteTheme(name: string): Observable<boolean>;
+    /**
+     * Resets the preview theme to the default element theme.
+     */
+    resetPreview(): void;
+    /**
+     * Sets the active theme to the given name. If no name is given, the default element theme is used.
+     */
+    setActiveTheme(name?: string, type?: ThemeType): Observable<boolean>;
+    /**
+     * Apply `light` or `dark` theme to the document.
+     */
+    applyThemeType(type: ThemeType): void;
+    /**
+     * Applies the given theme to the document. If no theme is given, the active theme is applied.
+     */
+    applyTheme(theme?: Theme, type?: ThemeType, overwrite?: boolean): void;
+    /**
+     * Updates the given property of the preview theme.
+     */
+    updateProperty(name: string, value: string, type: keyof ThemeColorSchemes): void;
+    /**
+     * Checks if the given theme JSON object is a valid theme.
+     */
+    isThemeValid(data: unknown): boolean;
+    private isThemeTypeValid;
+    private applyThemeStyle;
+    private activateTheme;
+    private hasThemeCSS;
+    private createThemeCSS;
+    private createThemeVariantCSS;
+    private removeThemeCSS;
+    private toggleDark;
+    private cloneTheme;
+    private dispatchThemeSwitchEvent;
+    private parseDataSvgIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiThemeService>;
+}
+
+export { ELEMENT_THEME_NAME, SI_THEME_LOCAL_STORAGE_KEY, SiDefaultThemeStore, SiThemeService, SiThemeStore, elementTheme };
+export type { Theme, ThemeColorScheme, ThemeColorSchemes, ThemeDescription, ThemeProperty, ThemePropertyGroup, ThemePropertyType, ThemeStorage, ThemeType };