@siemens/element-ng 49.0.0 → 49.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "49.0.0",
+  "version": "49.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,9 +43,9 @@
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
     "@siemens/element-icons": "1",
-    "@siemens/element-translate-ng": "49.0.0",
-    "@siemens/element-theme": "49.0.0",
-    "@siemens/ngx-datatable": "25",
+    "@siemens/element-translate-ng": "49.2.0",
+    "@siemens/element-theme": "49.2.0",
+    "@siemens/ngx-datatable": "22 - 26",
     "ag-grid-community": "^34.3.1",
     "flag-icons": "^7.3.2",
     "google-libphonenumber": "^3.2.40",

package/schematics/utils/ts-compiler-host.js

@@ -44,6 +44,9 @@ export const createTreeAwareCompilerHost = (tree, options) => {
     host.directoryExists = path => {
         const treePath = toTreePath(path);
         if (treePath) {
+            if (tree.exists(treePath) && tree.get(treePath) !== null) {
+                return false;
+            }
             const dir = tree.getDir(treePath);
             if (dir.subfiles.length || dir.subdirs.length) {
                 return true;

package/template-i18n.json

@@ -161,9 +161,11 @@
   "SI_LIST_WIDGET.SORT_DESCENDING": "Sort descending",
   "SI_LOADING_SPINNER.LABEL": "Loading",
   "SI_LOGIN_BASIC.BACK": "Back",
+  "SI_LOGIN_BASIC.FORGOT_PASSWORD": "Forgot password",
   "SI_LOGIN_BASIC.LOGIN": "Login",
   "SI_LOGIN_BASIC.NEXT": "Next",
   "SI_LOGIN_BASIC.PASSWORD": "Password",
+  "SI_LOGIN_BASIC.REGISTER_NOW": "Register now",
   "SI_LOGIN_BASIC.USERNAME": "Username",
   "SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP": "Login / Sign un",
   "SI_MAIN_DETAIL_CONTAINER.BACK": "Back",

package/types/siemens-element-ng-application-header.d.ts

@@ -367,6 +367,7 @@ declare class SiLaunchpadFactoryComponent {
     protected toggleFavorite(app: App, favorite: boolean): void;
     protected escape(): void;
     protected isCategories(items: App[] | AppCategory[]): items is AppCategory[];
+    protected isFavoriteToggleDisabled(app: App): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLaunchpadFactoryComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLaunchpadFactoryComponent, "si-launchpad-factory", never, { "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "titleText": { "alias": "titleText"; "required": false; "isSignal": true; }; "subtitleText": { "alias": "subtitleText"; "required": false; "isSignal": true; }; "apps": { "alias": "apps"; "required": true; "isSignal": true; }; "enableFavorites": { "alias": "enableFavorites"; "required": false; "isSignal": true; }; "favoriteAppsText": { "alias": "favoriteAppsText"; "required": false; "isSignal": true; }; "showMoreAppsText": { "alias": "showMoreAppsText"; "required": false; "isSignal": true; }; "showLessAppsText": { "alias": "showLessAppsText"; "required": false; "isSignal": true; }; }, { "favoriteChange": "favoriteChange"; }, never, never, true, never>;
 }

package/types/siemens-element-ng-common.d.ts

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Type, Provider, ElementRef } from '@angular/core';
 import { Link } from '@siemens/element-ng/link';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
-import { ConnectionPositionPair, Overlay, PositionStrategy, OverlayRef, FlexibleConnectedPositionStrategy, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
+import { ConnectionPositionPair, ConnectedOverlayPositionChange, Overlay, OverlayRef, FlexibleConnectedPositionStrategy, PositionStrategy } from '@angular/cdk/overlay';
 
 /**
  * A global blink pulse generator for synchronized blinking patterns across an entire application.

package/types/siemens-element-ng-dashboard.d.ts

@@ -1,7 +1,7 @@
 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 { OnDestroy, ElementRef, OnChanges, AfterViewInit, SimpleChanges, OnInit } from '@angular/core';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import { SiCardComponent } from '@siemens/element-ng/card';
@@ -185,13 +185,13 @@ declare class SiDashboardService {
 }
 
 /**
- * The SiWidgetBaseComponent<T> implements the timing for the skeleton loading
+ * The SiWidgetBaseDirective<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 {
+declare abstract class SiWidgetBaseDirective<T> implements OnInit, OnChanges {
     /**
      * The main value to be displayed. If no value is set,
      * the skeleton indicates the loading of the value. Disable
@@ -219,19 +219,18 @@ declare abstract class SiWidgetBaseComponent<T> implements OnInit, OnChanges {
      * @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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiWidgetBaseDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiWidgetBaseDirective<any>, never, 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[]> {
+declare class SiLinkWidgetComponent extends SiWidgetBaseDirective<Link[]> {
     /**
      * Option to enable trailing link arrow icons for each link.
      *
@@ -276,7 +275,7 @@ interface SiListWidgetItem {
  * The `<si-link-widget>` supports an easy composition of links and actions
  * with support for skeleton loading indicator.
  */
-declare class SiListWidgetItemComponent extends SiWidgetBaseComponent<SiListWidgetItem> {
+declare class SiListWidgetItemComponent extends SiWidgetBaseDirective<SiListWidgetItem> {
     protected readonly isLink: _angular_core.Signal<boolean>;
     protected readonly badgeColor: _angular_core.Signal<string>;
     protected readonly link: _angular_core.Signal<Link>;
@@ -292,7 +291,7 @@ 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 {
+declare class SiListWidgetBodyComponent extends SiWidgetBaseDirective<SiListWidgetItem[]> implements OnChanges {
     /** Optional footer link for the list widget */
     readonly link: _angular_core.InputSignal<Link | undefined>;
     /**
@@ -380,7 +379,7 @@ declare class SiListWidgetBodyComponent extends SiWidgetBaseComponent<SiListWidg
  * 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 {
+declare class SiListWidgetComponent extends SiWidgetBaseDirective<SiListWidgetItem[]> implements OnChanges {
     protected readonly icons: Record<"elementRight2" | "elementSortDown" | "elementSortUp", string>;
     /** List widget heading. */
     readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
@@ -569,7 +568,7 @@ interface SiTimelineWidgetItem {
 /**
  * The items of the `<si-timeline-widget>`.
  */
-declare class SiTimelineWidgetItemComponent extends SiWidgetBaseComponent<SiTimelineWidgetItem> implements OnInit, OnChanges {
+declare class SiTimelineWidgetItemComponent extends SiWidgetBaseDirective<SiTimelineWidgetItem> implements OnInit, OnChanges {
     /**
      * Whether to show or hide the description row during skeleton progress indication.
      *
@@ -585,7 +584,7 @@ declare class SiTimelineWidgetItemComponent extends SiWidgetBaseComponent<SiTime
     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 {
+declare class SiTimelineWidgetComponent extends SiWidgetBaseDirective<SiTimelineWidgetItem[]> implements OnChanges {
     /**
      * Timeline widget header text.
      */
@@ -630,7 +629,7 @@ declare class SiTimelineWidgetComponent extends SiWidgetBaseComponent<SiTimeline
     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[]> {
+declare class SiTimelineWidgetBodyComponent extends SiWidgetBaseDirective<SiTimelineWidgetItem[]> {
     /**
      * Number of skeleton progress indication items.
      *
@@ -652,7 +651,7 @@ declare class SiTimelineWidgetBodyComponent extends SiWidgetBaseComponent<SiTime
 /**
  * The body of the `<si-value-widget>`. Useful for compositions.
  */
-declare class SiValueWidgetBodyComponent extends SiWidgetBaseComponent<TranslatableString> implements OnInit {
+declare class SiValueWidgetBodyComponent extends SiWidgetBaseDirective<TranslatableString> implements OnInit {
     /**
      * The unit of the value (e.g. kWh or users). Only visible if `value` is available.
      */

package/types/siemens-element-ng-datatable.d.ts

@@ -107,6 +107,7 @@ interface SiDatatableConfig extends NgxDatatableConfig {
     rowHeightSmall: number;
     rowHeightExtraSmall: number;
     rowHeightTiny: number;
+    summaryHeight: number;
 }
 declare const SI_DATATABLE_CONFIG: SiDatatableConfig;
 /**

package/types/siemens-element-ng-file-uploader.d.ts

@@ -2,7 +2,7 @@ import * as _siemens_element_translate_ng_translate from '@siemens/element-trans
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _angular_core from '@angular/core';
 import { OnChanges, SimpleChanges } from '@angular/core';
-import { HttpResponse, HttpHeaders, HttpRequest, HttpEvent } from '@angular/common/http';
+import { HttpHeaders, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
 import { Observable, Subscription } from 'rxjs';
 
 /**
@@ -486,7 +486,7 @@ declare class SiFileUploaderComponent implements OnChanges {
     protected readonly icons: Record<"elementCancel" | "elementDelete" | "elementDocument" | "elementRedo", string>;
     protected files: ExtUploadFile[];
     protected pending: number;
-    protected uploading: number;
+    private uploading;
     protected uploadEnabled: boolean;
     protected maxFilesReached: boolean;
     private readonly dropZone;

package/types/siemens-element-ng-filtered-search.d.ts

@@ -371,11 +371,11 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private readonly valueComponents;
     protected dataSource: Observable<InternalCriterionDefinition[]>;
     protected autoEditCriteria: boolean;
-    protected values: {
+    protected readonly values: _angular_core.WritableSignal<{
         config: InternalCriterionDefinition;
         value: CriterionValue;
-    }[];
-    protected searchValue: string;
+    }[]>;
+    protected readonly searchValue: _angular_core.WritableSignal<string>;
     /** Internal criteria model */
     protected internalCriterionDefinitions: InternalCriterionDefinition[];
     protected readonly icons: Record<"elementCancel" | "elementSearch", string>;
@@ -387,11 +387,6 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private readonly cdRef;
     private readonly translateService;
     private readonly locale;
-    /**
-     * The cache is used to control when the interceptDisplayedCriteria event needs to be called.
-     * Every time a criteria gain the focus we have to reset the cache to call the interceptor.
-     */
-    private allowedCriteriaCache?;
     protected readonly allowFreeTextCache: _angular_core.WritableSignal<boolean>;
     private lastEmittedSearchCriteria?;
     protected readonly isStrictOrOnlySelectValue: _angular_core.Signal<boolean>;
@@ -428,7 +423,6 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private addCriterion;
     /**
      * Get criteria list to be shown in typeahead.
-     * @param token - input field value.
      * @returns list of criteria to be shown in typeahead.
      */
     private getFilteredTypeaheadCriteria;

package/types/siemens-element-ng-form.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { DoCheck, Signal, InjectionToken, AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, ElementRef, SimpleChanges, ModuleWithProviders, Provider } from '@angular/core';
+import { DoCheck, InjectionToken, Signal, AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, ElementRef, SimpleChanges, ModuleWithProviders, Provider } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
 import { AbstractControl, FormGroup, NgControl, RequiredValidator } from '@angular/forms';
 import { Breakpoints } from '@siemens/element-ng/resize-observer';

package/types/siemens-element-ng-landing-page.d.ts

@@ -212,10 +212,12 @@ declare class SiLoginBasicComponent implements OnInit {
     readonly passwordLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     /**
      * Config for Forgot Password link.
+     * If `title` is omitted, a default translated label is used.
      */
     readonly forgotPasswordLink: _angular_core.InputSignal<Link | undefined>;
     /**
      * Config for Register Now link.
+     * If `title` is omitted, a default translated label is used.
      */
     readonly registerNowLink: _angular_core.InputSignal<Link | undefined>;
     /**
@@ -278,6 +280,10 @@ declare class SiLoginBasicComponent implements OnInit {
     private destroyRef;
     protected readonly secondStepVisible: _angular_core.WritableSignal<boolean>;
     protected readonly loadingNext: _angular_core.WritableSignal<boolean>;
+    private readonly defaultForgotPasswordTitle;
+    private readonly defaultRegisterNowTitle;
+    protected readonly effectiveForgotPasswordLink: _angular_core.Signal<Link>;
+    protected readonly effectiveRegisterNowLink: _angular_core.Signal<Link>;
     private readonly index;
     protected usernameId: string;
     protected passwordId: string;

package/types/siemens-element-ng-tabs.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, Signal, ElementRef, TemplateRef } from '@angular/core';
 import { FocusableOption, FocusKeyManager } from '@angular/cdk/a11y';
+import { DomPortal } from '@angular/cdk/portal';
 import * as _siemens_element_ng_tabs from '@siemens/element-ng/tabs';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as i1 from '@angular/router';
@@ -101,7 +102,20 @@ declare class SiTabLinkComponent extends SiTabBaseDirective {
  * Can either be used with {@link SiTabLinkComponent} or {@link SiTabComponent} components.
  */
 declare class SiTabsetComponent {
+    /**
+     * When set, the overflowing content inside the tab will automatically scroll
+     * @defaultValue false
+     **/
+    readonly contentOverflowAuto: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly icons: Record<"elementOptions", string>;
+    private readonly contentNode;
+    /**
+     * A `DomPortal` wrapping the tab panel container. Used by {@link SiTabPortalComponent}
+     * to render the active tab's content at a remote location in the DOM.
+     *
+     * @internal
+     */
+    readonly contentPortal: _angular_core.Signal<DomPortal<unknown>>;
     /** @internal */
     readonly activeTab: _angular_core.Signal<SiTabBaseDirective | undefined>;
     /** @internal */
@@ -117,7 +131,7 @@ declare class SiTabsetComponent {
     protected resizeContainer(width: number, scrollWidth: number): void;
     protected keydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabsetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabsetComponent, "si-tabset", never, {}, {}, ["tabPanels"], ["*", "router-outlet"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabsetComponent, "si-tabset", never, { "contentOverflowAuto": { "alias": "contentOverflowAuto"; "required": false; "isSignal": true; }; }, {}, ["tabPanels"], ["*", "router-outlet"], true, never>;
 }
 
 /**
@@ -158,4 +172,39 @@ declare class SiTabComponent extends SiTabBaseDirective implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabComponent, "si-tab", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "canActivate": { "alias": "canActivate"; "required": false; "isSignal": true; }; "canDeactivate": { "alias": "canDeactivate"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, ["*"], true, never>;
 }
 
-export { SiTabComponent, SiTabLinkComponent, SiTabsetComponent };
+/**
+ * A component that renders the active tab's content at a remote
+ * location in the DOM using an Angular CDK `DomPortal`.
+ *
+ * This component **automatically** renders the content of the currently
+ * active `si-tab`, including the `role="tabpanel"` container with proper
+ * ARIA attributes linked to the active tab.
+ *
+ * @example
+ * ```html
+ * <si-tabset #tabset>
+ *   <si-tab heading="Overview" [active]="true">
+ *     overview content
+ *   </si-tab>
+ *   <si-tab heading="History">
+ *     history content
+ *   </si-tab>
+ * </si-tabset>
+ *
+ * <si-tab-portal [tabset]="tabset" />
+ * ```
+ */
+declare class SiTabPortalComponent {
+    /**
+     * Reference to the {@link SiTabsetComponent} whose active tab content
+     * this component renders via a `DomPortal`.
+     *
+     * The tabset's tab panel container, including the `role="tabpanel"` element
+     * with proper ARIA attributes, is transported to this component's location.
+     */
+    readonly tabset: _angular_core.InputSignal<SiTabsetComponent>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabPortalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabPortalComponent, "si-tab-portal", never, { "tabset": { "alias": "tabset"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SiTabComponent, SiTabLinkComponent, SiTabPortalComponent, SiTabsetComponent };

package/types/siemens-element-ng-translate.d.ts

@@ -164,9 +164,11 @@ interface SiTranslatableKeys {
     'SI_LIST_WIDGET.SORT_DESCENDING'?: string;
     'SI_LOADING_SPINNER.LABEL'?: string;
     'SI_LOGIN_BASIC.BACK'?: string;
+    'SI_LOGIN_BASIC.FORGOT_PASSWORD'?: string;
     'SI_LOGIN_BASIC.LOGIN'?: string;
     'SI_LOGIN_BASIC.NEXT'?: string;
     'SI_LOGIN_BASIC.PASSWORD'?: string;
+    'SI_LOGIN_BASIC.REGISTER_NOW'?: string;
     'SI_LOGIN_BASIC.USERNAME'?: string;
     'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;
     'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;

package/types/siemens-element-ng-typeahead.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnChanges, OnDestroy, TemplateRef, SimpleChanges } from '@angular/core';
-import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { ConnectionPositionPair, ScrollStrategy } from '@angular/cdk/overlay';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import { Observable } from 'rxjs';
 import * as i1 from '@siemens/element-ng/autocomplete';
@@ -37,10 +37,22 @@ type TypeaheadArray = TypeaheadOption[];
  * An observable of a {@link TypeaheadArray} (array of {@link TypeaheadOption}).
  */
 type TypeaheadObservable = Observable<TypeaheadArray>;
+/**
+ * Defines a source of options for the {@link SiTypeaheadDirective}.
+ * Use it for server-side pre-filtering.
+ *
+ * This function will be called, whenever the search value is updated by the user.
+ *
+ * A loading indicator is shown when this function was called
+ * until the Observable completes.
+ *
+ * @experimental
+ */
+type TypeaheadOptionSource = (search: string) => Observable<TypeaheadArray>;
 /**
  * Either a {@link TypeaheadObservable} (observable of a {@link TypeaheadArray}) or a {@link TypeaheadArray}.
  */
-type Typeahead = TypeaheadArray | TypeaheadObservable;
+type Typeahead = TypeaheadArray | TypeaheadObservable | TypeaheadOptionSource;
 /**
  * A segment of a {@link TypeaheadMatch}, which is a matching or non-matching segment of a typeahead option.
  */
@@ -207,6 +219,11 @@ declare class SiTypeaheadDirective implements OnChanges, OnDestroy {
      * @defaultValue false
      */
     readonly typeaheadFullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Optional CDK scroll strategy used for the typeahead overlay.
+     * If not provided, no strategy is set explicitly and CDK will apply its default behavior.
+     */
+    readonly typeaheadScrollStrategy: _angular_core.InputSignal<ScrollStrategy | undefined>;
     /**
      * This option will be shown at the end of the typeahead.
      * Use it to allow users to create new options on the fly.
@@ -294,6 +311,16 @@ declare class SiTypeaheadDirective implements OnChanges, OnDestroy {
     private sourceSubscription?;
     private matchSorter;
     private overlayRef?;
+    private loadingSubscription?;
+    /**
+     * Indicates whether the typeahead is currently loading.
+     * When using {@link TypeaheadOptionSource}, this is controlled by the `isLoading()` method
+     * or automatically set to `true` while fetching options.
+     *
+     * @internal
+     * @defaultValue false
+     */
+    readonly typeaheadLoading: _angular_core.WritableSignal<boolean>;
     /**
      * Indicates that the typeahead can be potentially open.
      * This signal is typically `true` when the input is focussed.
@@ -312,6 +339,11 @@ declare class SiTypeaheadDirective implements OnChanges, OnDestroy {
     protected onInput(event: Event): void;
     protected onKeydownEscape(): void;
     ngOnDestroy(): void;
+    /**
+     * Handles TypeaheadOptionSource by subscribing to query changes and fetching options.
+     * Manages loading state automatically or uses custom isLoading() observable if provided.
+     */
+    private handleTypeaheadOptionSource;
     private loadComponent;
     /**
      * Extracts the display value from a typeahead option.
@@ -344,7 +376,7 @@ declare class SiTypeaheadDirective implements OnChanges, OnDestroy {
     private clearTimer;
     private escapeRegex;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTypeaheadDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiTypeaheadDirective, "[siTypeahead]", ["si-typeahead"], { "siTypeahead": { "alias": "siTypeahead"; "required": true; "isSignal": true; }; "typeaheadProcess": { "alias": "typeaheadProcess"; "required": false; "isSignal": true; }; "typeaheadScrollable": { "alias": "typeaheadScrollable"; "required": false; "isSignal": true; }; "typeaheadOptionsInScrollableView": { "alias": "typeaheadOptionsInScrollableView"; "required": false; "isSignal": true; }; "typeaheadOptionsLimit": { "alias": "typeaheadOptionsLimit"; "required": false; "isSignal": true; }; "typeaheadScrollableAdditionalHeight": { "alias": "typeaheadScrollableAdditionalHeight"; "required": false; "isSignal": true; }; "typeaheadAutoSelectIndex": { "alias": "typeaheadAutoSelectIndex"; "required": false; "isSignal": true; }; "typeaheadCloseOnEsc": { "alias": "typeaheadCloseOnEsc"; "required": false; "isSignal": true; }; "typeaheadClearValueOnSelect": { "alias": "typeaheadClearValueOnSelect"; "required": false; "isSignal": true; }; "typeaheadWaitMs": { "alias": "typeaheadWaitMs"; "required": false; "isSignal": true; }; "typeaheadMinLength": { "alias": "typeaheadMinLength"; "required": false; "isSignal": true; }; "typeaheadOptionField": { "alias": "typeaheadOptionField"; "required": false; "isSignal": true; }; "typeaheadMultiSelect": { "alias": "typeaheadMultiSelect"; "required": false; "isSignal": true; }; "typeaheadTokenize": { "alias": "typeaheadTokenize"; "required": false; "isSignal": true; }; "typeaheadMatchAllTokens": { "alias": "typeaheadMatchAllTokens"; "required": false; "isSignal": true; }; "typeaheadItemTemplate": { "alias": "typeaheadItemTemplate"; "required": false; "isSignal": true; }; "typeaheadSkipSortingMatches": { "alias": "typeaheadSkipSortingMatches"; "required": false; "isSignal": true; }; "typeaheadAutocompleteListLabel": { "alias": "typeaheadAutocompleteListLabel"; "required": false; "isSignal": true; }; "typeaheadFullWidth": { "alias": "typeaheadFullWidth"; "required": false; "isSignal": true; }; "typeaheadCreateOption": { "alias": "typeaheadCreateOption"; "required": false; "isSignal": true; }; }, { "typeaheadOnInput": "typeaheadOnInput"; "typeaheadOnSelect": "typeaheadOnSelect"; "typeaheadOnFullMatch": "typeaheadOnFullMatch"; "typeaheadOpenChange": "typeaheadOpenChange"; "typeaheadOnCreateOption": "typeaheadOnCreateOption"; }, never, never, true, [{ directive: typeof i1.SiAutocompleteDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiTypeaheadDirective, "[siTypeahead]", ["si-typeahead"], { "siTypeahead": { "alias": "siTypeahead"; "required": true; "isSignal": true; }; "typeaheadProcess": { "alias": "typeaheadProcess"; "required": false; "isSignal": true; }; "typeaheadScrollable": { "alias": "typeaheadScrollable"; "required": false; "isSignal": true; }; "typeaheadOptionsInScrollableView": { "alias": "typeaheadOptionsInScrollableView"; "required": false; "isSignal": true; }; "typeaheadOptionsLimit": { "alias": "typeaheadOptionsLimit"; "required": false; "isSignal": true; }; "typeaheadScrollableAdditionalHeight": { "alias": "typeaheadScrollableAdditionalHeight"; "required": false; "isSignal": true; }; "typeaheadAutoSelectIndex": { "alias": "typeaheadAutoSelectIndex"; "required": false; "isSignal": true; }; "typeaheadCloseOnEsc": { "alias": "typeaheadCloseOnEsc"; "required": false; "isSignal": true; }; "typeaheadClearValueOnSelect": { "alias": "typeaheadClearValueOnSelect"; "required": false; "isSignal": true; }; "typeaheadWaitMs": { "alias": "typeaheadWaitMs"; "required": false; "isSignal": true; }; "typeaheadMinLength": { "alias": "typeaheadMinLength"; "required": false; "isSignal": true; }; "typeaheadOptionField": { "alias": "typeaheadOptionField"; "required": false; "isSignal": true; }; "typeaheadMultiSelect": { "alias": "typeaheadMultiSelect"; "required": false; "isSignal": true; }; "typeaheadTokenize": { "alias": "typeaheadTokenize"; "required": false; "isSignal": true; }; "typeaheadMatchAllTokens": { "alias": "typeaheadMatchAllTokens"; "required": false; "isSignal": true; }; "typeaheadItemTemplate": { "alias": "typeaheadItemTemplate"; "required": false; "isSignal": true; }; "typeaheadSkipSortingMatches": { "alias": "typeaheadSkipSortingMatches"; "required": false; "isSignal": true; }; "typeaheadAutocompleteListLabel": { "alias": "typeaheadAutocompleteListLabel"; "required": false; "isSignal": true; }; "typeaheadFullWidth": { "alias": "typeaheadFullWidth"; "required": false; "isSignal": true; }; "typeaheadScrollStrategy": { "alias": "typeaheadScrollStrategy"; "required": false; "isSignal": true; }; "typeaheadCreateOption": { "alias": "typeaheadCreateOption"; "required": false; "isSignal": true; }; }, { "typeaheadOnInput": "typeaheadOnInput"; "typeaheadOnSelect": "typeaheadOnSelect"; "typeaheadOnFullMatch": "typeaheadOnFullMatch"; "typeaheadOpenChange": "typeaheadOpenChange"; "typeaheadOnCreateOption": "typeaheadOnCreateOption"; }, never, never, true, [{ directive: typeof i1.SiAutocompleteDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class SiTypeaheadItemTemplateDirective {
@@ -360,4 +392,4 @@ declare class SiTypeaheadModule {
 }
 
 export { SiTypeaheadDirective, SiTypeaheadItemTemplateDirective, SiTypeaheadModule };
-export type { MatchSegment, Typeahead, TypeaheadArray, TypeaheadMatch, TypeaheadObservable, TypeaheadOption, TypeaheadOptionItemContext };
+export type { MatchSegment, Typeahead, TypeaheadArray, TypeaheadMatch, TypeaheadObservable, TypeaheadOption, TypeaheadOptionItemContext, TypeaheadOptionSource };