@leanix/components 0.4.818 → 0.4.820

package/lib/core-ui/components/table/table.component.d.ts

@@ -4,6 +4,26 @@ import * as i0 from "@angular/core";
  * The `lx-table` directive can be applied to `<table>` elements to provide a common styling.
  * Furthermore it supports column sorting in combination with `<lx-th>` for table headers.
  *
+ * ### Example
+ * @example
+ * ```html
+ * <table lx-table [isSortable]="true" [(sort)]="sort">
+ *   <thead>
+ *     <tr>
+ *       <lx-th column="name">Name</lx-th>
+ *       <lx-th column="status" [disableSortClear]="true">Status</lx-th>
+ *       <lx-th column="actions" [disableSort]="true">Actions</lx-th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>Item 1</td>
+ *       <td>Active</td>
+ *       <td><button>Edit</button></td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * ```
  *
  * ## Usage
  *
@@ -44,11 +64,14 @@ import * as i0 from "@angular/core";
  */
 export declare class TableComponent {
     /**
-     * This enables or disables the sortability of the table.
+     * Enables or disables the sortability of the table. When enabled, `<lx-th>` elements with a `column` attribute become sortable.
+     * @default false
      */
     readonly isSortable: import("@angular/core").InputSignal<boolean>;
     /**
-     * The sort state of the table. Which column is sorted in what order.
+     * The sort state of the table containing the column key and sort order (ASC, DESC, or undefined).
+     * Can be used with two-way binding to control and react to sort changes.
+     * @default {}
      */
     readonly sort: import("@angular/core").ModelSignal<SortingOptions>;
     /**

package/lib/core-ui/components/tokenizer/token/token.component.d.ts

@@ -1,5 +1,21 @@
 import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * A token wrapper component used within `lx-tokenizer` to represent individual items.
+ * The tokenizer manages visibility of tokens based on available space.
+ *
+ * ### Projection slots
+ * - Default slot: The content to display inside the token (text, icons, badges, etc.)
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tokenizer>
+ *   <lx-token>Token One</lx-token>
+ *   <lx-token>Token Two</lx-token>
+ * </lx-tokenizer>
+ * ```
+ */
 export declare class TokenComponent {
     private elementRef;
     constructor(elementRef: ElementRef<HTMLElement>);

package/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.d.ts

@@ -2,6 +2,33 @@ import { TemplateRef } from '@angular/core';
 import { SatPopoverComponent, SatPopoverHorizontalAlign, SatPopoverVerticalAlign } from '@ncstate/sat-popover';
 import { TokenizerComponent } from '../tokenizer.component';
 import * as i0 from "@angular/core";
+/**
+ * A companion component for `lx-tokenizer` that displays overflowing tokens in a popover.
+ * Automatically listens to the tokenizer's overflow events and shows a popover anchored to the counter button.
+ *
+ * ### Projection slots
+ * - `popoverTemplate`: Template to render inside the popover. Receives the `startIndex` of overflowing tokens as context.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tokenizer #tokenizer [active]="true">
+ *   <lx-token>Item 1</lx-token>
+ *   <lx-token>Item 2</lx-token>
+ *   <lx-token>Item 3</lx-token>
+ * </lx-tokenizer>
+ *
+ * <lx-tokenizer-overflow-popover [tokenizer]="tokenizer">
+ *   <ng-template #popoverTemplate let-startIndex>
+ *     <div class="overflow-items">
+ *       @for (item of getOverflowItems(startIndex); track item) {
+ *         <div>{{ item }}</div>
+ *       }
+ *     </div>
+ *   </ng-template>
+ * </lx-tokenizer-overflow-popover>
+ * ```
+ */
 export declare class TokenizerOverflowPopoverComponent {
     private destroyRef;
     private overflowClickSubscription?;
@@ -9,8 +36,19 @@ export declare class TokenizerOverflowPopoverComponent {
     private changeDetectorRef;
     protected readonly popoverTemplate?: TemplateRef<unknown>;
     protected readonly popover: SatPopoverComponent;
+    /**
+     * Reference to the tokenizer component to listen for overflow events.
+     */
     tokenizer: import("@angular/core").InputSignal<TokenizerComponent>;
+    /**
+     * Horizontal alignment of the popover relative to the counter button.
+     * @default 'after'
+     */
     horizontalAlign: import("@angular/core").InputSignal<SatPopoverHorizontalAlign>;
+    /**
+     * Vertical alignment of the popover relative to the counter button.
+     * @default 'start'
+     */
     verticalAlign: import("@angular/core").InputSignal<SatPopoverVerticalAlign>;
     constructor();
     protected closePopover(): void;

package/lib/core-ui/components/tokenizer/tokenizer.component.d.ts

@@ -3,7 +3,22 @@ import { ResizeObserverService } from '../../services/resize-observer.service';
 import { TokenComponent } from './token/token.component';
 import * as i0 from "@angular/core";
 /**
- * The tokenizer component (`lx-tokenizer`) is responsible for rendering a list of items into a container and hiding those that do not fit behind a placeholder. The items are represented as `lx-token`. Each `lx-token` allows to project any content into it, so anything can become a token. The tokenizer calculates how many items fit into the container (based on width), hiding those items that are overflowing and showing a overflow placeholder instead (e.g. "+4").
+ * Renders a list of items (`lx-token`) into a container and hides overflowing items behind a counter (e.g., "+4").
+ * Automatically calculates how many tokens fit based on available width and responds to container resize events.
+ *
+ * ### Projection slots
+ * - `lx-token`: Individual token items to be managed by the tokenizer
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tokenizer [active]="true" (overflowPlaceholderClick)="onOverflowClick($event)">
+ *   <lx-token>Item 1</lx-token>
+ *   <lx-token>Item 2</lx-token>
+ *   <lx-token>Item 3</lx-token>
+ *   <lx-token>Item 4</lx-token>
+ * </lx-tokenizer>
+ * ```
  *
  * ## Usage
  *
@@ -50,14 +65,16 @@ export declare class TokenizerComponent implements AfterContentInit {
     protected overflowItems: import("@angular/core").WritableSignal<TokenComponent[]>;
     protected overflowItemCount: import("@angular/core").Signal<number>;
     protected showCounter: import("@angular/core").Signal<boolean>;
-    /** Can be used to activate & deactivate tokenization */
+    /**
+     * Enables or disables tokenization. When false, all tokens are shown regardless of available space.
+     * @default true
+     */
     active: import("@angular/core").InputSignal<boolean>;
     private active$;
     private overflowStartIndex;
     /**
-     * Emitted when the counter button is clicked
-     * @param startIndex The index of the first overflowing element
-     * @param counterElement The counter button element
+     * Emitted when the overflow counter button (e.g., "+4") is clicked.
+     * Provides the index of the first hidden token and the counter button element for positioning popovers.
      */
     overflowPlaceholderClick: EventEmitter<{
         startIndex: number;

package/lib/core-ui/icon/fa-to-sap-icon.pipe.d.ts

@@ -5,7 +5,8 @@ import * as i0 from "@angular/core";
  * Useful for scenarios in which icon names need to be mapped at runtime,
  * e.g. because they are stored in the backend.
  *
- * @example ```html
+ * @example
+ * ```html
  * <ui5-icon [name]="fontAwesomeIcon() | lxFaToSapIcon" />
  * ```
  */

package/lib/core-ui/tooltip/tooltip.component.d.ts

@@ -1,8 +1,38 @@
 import { TooltipPosition } from './tooltip-position.interface';
 import * as i0 from "@angular/core";
+/**
+ * Tooltip component for displaying contextual information on hover.
+ *
+ * Supports plain text or HTML content with configurable positioning.
+ * Typically used via the `lxTooltip` directive rather than directly.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <button [lxTooltip]="'Save changes'">Save</button>
+ *
+ * <button [lxTooltip]="'<strong>Warning:</strong> Cannot be undone'" [lxTooltipHtml]="true">Delete</button>
+ * ```
+ */
 export declare class TooltipComponent {
+    /**
+     * The tooltip content to display as plain text or HTML.
+     *
+     * @default ''
+     */
     content: string;
+    /**
+     * Whether the content should be rendered as HTML.
+     * When false, content is displayed as plain text.
+     *
+     * @default false
+     */
     isHtmlContent: boolean;
+    /**
+     * The position of the tooltip relative to the target element.
+     *
+     * @default { x: 'center', y: 'top' }
+     */
     position: TooltipPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "lx-tooltip", never, { "content": { "alias": "content"; "required": false; }; "isHtmlContent": { "alias": "isHtmlContent"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, {}, never, never, true, never>;

package/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.d.ts

@@ -3,27 +3,106 @@ import { AfterViewInit, EventEmitter, TemplateRef } from '@angular/core';
 import { SingleSelectPadding } from '../../models/single-select-padding.interface';
 import { KeyboardSelectDirective } from '../keyboard-select.directive';
 import * as i0 from "@angular/core";
+/**
+ * A simple dropdown component for selecting a single value from a flat list of options.
+ * Supports keyboard navigation, custom templates, infinite scrolling, and the ability to create new options.
+ * Uses Angular CDK overlay for positioning and supports both top and bottom dropdown placement.
+ *
+ * ### Projection slots
+ * - `optionTemplate`: Custom template for rendering each option
+ * - `createNewOptionTemplate`: Custom template for the "create new option" button
+ * - `descriptionTemplateRef`: Custom template for additional description content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-basic-dropdown
+ *   [options]="items"
+ *   [labelKey]="'name'"
+ *   [itemKey]="'id'"
+ *   [placeholder]="'Select an item'"
+ *   (onItemSelected)="handleSelection($event)">
+ * </lx-basic-dropdown>
+ * ```
+ */
 export declare class BasicDropdownComponent extends KeyboardSelectDirective implements AfterViewInit {
     static isNewItem(items: any[], term: string, key?: string): boolean;
     readonly NAME = "BasicDropdownComponent";
+    /**
+     * Array of options to display in the dropdown.
+     */
     options: any[];
+    /**
+     * Index of the option to be selected initially.
+     * @default -1
+     */
     initiallySelectedIndex: number;
+    /**
+     * Property name to use as the display label for each option.
+     */
     labelKey?: string;
+    /**
+     * Property name to use as the unique identifier for each option.
+     */
     itemKey?: string;
+    /**
+     * Placeholder text to display when no option is selected.
+     */
     placeholder?: string;
+    /**
+     * Whether the dropdown is in a loading state.
+     * @default false
+     */
     loading: boolean;
+    /**
+     * Label for the "create new option" functionality.
+     */
     newOptionLabel: string;
+    /**
+     * Padding variant for the dropdown items.
+     * @default 'default'
+     */
     padding?: SingleSelectPadding;
+    /**
+     * Whether to show the "create new option" button.
+     * @default false
+     */
     showCreateNewOption: boolean;
+    /**
+     * Map of disabled options, keyed by the item's unique identifier.
+     */
     disabledOptions: {
         [itemKey: string]: any;
     };
+    /**
+     * Whether to use CDK overlay positioning.
+     * @default false
+     */
     overlayPositioning: boolean;
+    /**
+     * Whether to truncate long option text.
+     * @default false
+     */
     truncateOptions: boolean;
+    /**
+     * Custom text to display when no results are found.
+     */
     noResultsText?: string;
+    /**
+     * Event emitted when an option is selected.
+     */
     onItemSelected: EventEmitter<any>;
+    /**
+     * Event emitted when the user scrolls to the bottom, triggering a request for more entries (infinite scroll).
+     */
     triggerRequestForMoreEntries: EventEmitter<void>;
+    /**
+     * Event emitted when a new option label is selected (for creating new items).
+     */
     newOptionLabelSelected: EventEmitter<string>;
+    /**
+     * Event emitted when the "create new option" button is clicked.
+     */
     createNewOptionSelected: EventEmitter<void>;
     optionTemplateRef: TemplateRef<any>;
     createNewOptionTemplateRef: TemplateRef<any>;

package/lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component.d.ts

@@ -1,11 +1,47 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Renders a dropdown item with label and optional description.
+ * Supports text highlighting and custom styling options.
+ *
+ * ### Projection slots
+ * - `optionLabelSuffix`: Template to append to the label (e.g., badges, icons)
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-basic-dropdown-item
+ *   label="Option Name"
+ *   description="Additional details"
+ *   highlightTerm="search">
+ *   <ng-template #optionLabelSuffix>
+ *     <span class="badge">New</span>
+ *   </ng-template>
+ * </lx-basic-dropdown-item>
+ * ```
+ */
 export declare class BasicDropdownItemComponent {
+    /** The main text displayed for the dropdown item. */
     label: string;
+    /** Optional secondary text displayed below the label. */
     description?: string;
+    /** Term to highlight in the label and optionally in the description. */
     highlightTerm?: string;
+    /**
+     * Font weight for the label text.
+     * @default 'bold'
+     */
     labelFontWeight: 'bold' | 'normal';
+    /**
+     * Font style for the description text.
+     * @default 'normal'
+     */
     descriptionFontStyle: 'italic' | 'normal';
+    /**
+     * Styling options for the description text.
+     * - `maxLines`: Maximum number of lines before truncation.
+     * - `shouldHighlightTerm`: Whether to highlight the search term in the description.
+     */
     descriptionStyleOptions?: {
         maxLines?: number;
         shouldHighlightTerm?: boolean;

package/lib/forms-ui/components/breadcrumb/breadcrumb.component.d.ts

@@ -12,11 +12,29 @@ type ViewBreadcrumb = Breadcrumb | EllipsedBreadcrumb;
 /**
  * @deprecated Use the `ui5-breadcrumbs` instead.
  *
- * Breadcrumb component is used to show a list of labels, usually to show the path of user's navigation.
+ * Breadcrumb component displays a list of labels showing the navigation path.
+ * Supports ellipsing consecutive items into a dropdown for space efficiency.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-breadcrumb [breadcrumbs]="breadcrumbs"></lx-breadcrumb>
+ * ```
+ *
+ * ```ts
+ * breadcrumbs: Breadcrumb[] = [
+ *   { label: 'Home', onClick: (b) => this.navigate(b) },
+ *   { label: 'Products', onClick: (b) => this.navigate(b) },
+ *   { label: 'Category', ellipsed: true },
+ *   { label: 'Subcategory', ellipsed: true },
+ *   { label: 'Item Details' }
+ * ];
+ * ```
  */
 export declare class BreadcrumbComponent implements OnChanges {
     /**
-     * Breadcrumbs array to build the component.
+     * Array of breadcrumb items to display. Consecutive items with `ellipsed: true` are grouped into a dropdown.
+     * @default []
      */
     breadcrumbs: Breadcrumb[];
     /** @internal */

package/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.d.ts

@@ -4,12 +4,46 @@ import { TooltipDirective } from '../../../core-ui/tooltip/tooltip.directive';
 import { KeyboardActionSourceDirective } from '../../directives/keyboard-action-source.directive';
 import { OptionComponent } from '../option/option.component';
 import * as i0 from "@angular/core";
+/**
+ * A dropdown component using CDK Overlay with keyboard navigation support.
+ * Manages option selection, highlighting, and sub-dropdown interactions.
+ *
+ * ### Projection slots
+ * - `[lxKeyboardActionSource]`: The trigger element (e.g., button) that opens the dropdown.
+ * - Default slot: Dropdown options (`lx-option` components).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-cdk-options-dropdown [open]="isOpen" align="left" maxHeight="300px">
+ *   <button lxKeyboardActionSource>Select Option</button>
+ *   <lx-option [value]="1">Option 1</lx-option>
+ *   <lx-option [value]="2">Option 2</lx-option>
+ * </lx-cdk-options-dropdown>
+ * ```
+ */
 export declare class CdkOptionsDropdownComponent implements AfterViewInit, OnDestroy {
     private changeDetection;
     dropdownContainer?: ElementRef<HTMLElement>;
+    /**
+     * Horizontal alignment of the dropdown relative to its trigger.
+     * @default 'right'
+     */
     align: 'right' | 'left';
+    /**
+     * Whether to close the dropdown when the window is scrolled.
+     * @default false
+     */
     closeOnScroll: boolean;
+    /**
+     * Whether the dropdown trigger is disabled.
+     * @default false
+     */
     disabled: boolean;
+    /**
+     * Maximum height of the dropdown container. Use 'none' for no limit.
+     * @default 'none'
+     */
     maxHeight: string;
     set open(value: boolean);
     get open(): boolean;

package/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.d.ts

@@ -3,9 +3,30 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } fr
 import { Subject } from 'rxjs';
 import { OptionComponent } from '../option/option.component';
 import * as i0 from "@angular/core";
+/**
+ * A nested sub-dropdown that appears next to a parent option.
+ * Opens on hover or keyboard navigation and supports both mouse and keyboard interactions.
+ *
+ * ### Projection slots
+ * - Default slot: Nested dropdown options (`lx-option` components).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-cdk-options-sub-dropdown [trigger]="parentOption" align="right">
+ *   <lx-option [value]="1">Sub-option 1</lx-option>
+ *   <lx-option [value]="2">Sub-option 2</lx-option>
+ * </lx-cdk-options-sub-dropdown>
+ * ```
+ */
 export declare class CdkOptionsSubDropdownComponent implements AfterViewInit, OnDestroy {
     private changeDetection;
+    /** The parent option component that triggers this sub-dropdown. */
     trigger: OptionComponent;
+    /**
+     * Horizontal alignment of the sub-dropdown relative to the trigger option.
+     * @default 'right'
+     */
     align: 'right' | 'left';
     options: QueryList<OptionComponent>;
     overlay: CdkConnectedOverlay;

package/lib/forms-ui/components/currency/currency-input.component.d.ts

@@ -5,22 +5,75 @@ import * as i0 from "@angular/core";
 export type CurrencyInputMode = 'view' | 'edit';
 export type CurrencyIconPosition = 'first' | 'end' | 'none';
 export type DecimalSeparator = ',' | '.';
+/**
+ * Currency input field with locale-aware formatting and validation.
+ *
+ * Supports both view and edit modes with configurable currency symbols, decimal separators, and number types.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-currency-input
+ *   [code]="'USD'"
+ *   [data]="1234.56"
+ *   [mode]="'edit'"
+ *   [fieldDefinitionType]="'DOUBLE'"
+ *   [decimalSeparator]="'.'"
+ *   [iconPosition]="'first'"
+ *   (onChange)="handleValueChange($event)"
+ * ></lx-currency-input>
+ * ```
+ */
 export declare class CurrencyInputComponent implements AfterViewInit, OnDestroy, ControlValueAccessor, OnInit {
     private changeDetector;
+    /** ISO currency code to display as a symbol (e.g., 'USD', 'EUR'). */
     code: string | null;
+    /**
+     * Character used as decimal separator in input.
+     * @default '.'
+     */
     decimalSeparator: DecimalSeparator;
+    /** Placeholder text shown when the input is empty. */
     placeholder: string;
+    /**
+     * The numeric value of the input.
+     * @default 0
+     */
     data: number;
+    /** Optional ID attribute for the input element. */
     inputId?: string;
     /** @internal */
     data$: Observable<number>;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
     disabled: boolean;
+    /**
+     * Display mode of the component.
+     * @default 'edit'
+     */
     mode: CurrencyInputMode;
+    /** Numeric type allowed - DOUBLE for decimals, INTEGER for whole numbers. */
     fieldDefinitionType: 'DOUBLE' | 'INTEGER';
+    /**
+     * Position of the currency symbol relative to the value.
+     * @default 'first'
+     */
     iconPosition: CurrencyIconPosition;
+    /**
+     * Angular decimal pipe format string.
+     * @default '1.2-2'
+     */
     format: string;
+    /**
+     * Whether to visually mark the input as invalid.
+     * @default false
+     */
     markInvalid: boolean;
+    /** Emitted when the input loses focus. */
     onFocusLost: EventEmitter<boolean>;
+    /** Emitted when the numeric value changes. */
     onChange: EventEmitter<number>;
     /** @internal */
     private currencyInput;

package/lib/forms-ui/components/currency/currency-symbol.component.d.ts

@@ -1,7 +1,23 @@
 import { OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * Displays a currency symbol based on an ISO currency code.
+ *
+ * Converts currency codes (e.g., 'USD', 'EUR') to their symbolic representations ($, €).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-currency-symbol [code]="'USD'"></lx-currency-symbol>
+ * <lx-currency-symbol [code]="'EUR'"></lx-currency-symbol>
+ * ```
+ */
 export declare class CurrencySymbolComponent implements OnInit {
+    /**
+     * ISO currency code (e.g., 'USD', 'EUR', 'GBP').
+     * Falls back to displaying the code itself if no symbol is mapped.
+     */
     code: string | null;
     code$: Observable<string>;
     currency$: Observable<string>;