@leanix/components 0.4.817 → 0.4.819

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

@@ -1,13 +1,40 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { ImageReader, User, UserAvatarSize } from './avatar.model';
 import * as i0 from "@angular/core";
+/**
+ * Avatar component displays a user's profile picture or a placeholder icon for technical users.
+ * Optionally includes a mailto link when an email is provided.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-avatar [user]="currentUser" size="M" />
+ * <lx-avatar [user]="{ displayName: 'Bot', technicalUser: true }" [showMailToLink]="false" />
+ * <lx-avatar [user]="inactiveUser" [disabled]="true" size="S" />
+ * ```
+ */
 export declare class AvatarComponent implements OnChanges {
     private imageReader;
+    /**
+     * The user object containing display name, email, and optional technicalUser flag.
+     */
     user: User & {
         technicalUser?: boolean;
     };
+    /**
+     * The size of the avatar.
+     * @default 'M'
+     */
     size: UserAvatarSize;
+    /**
+     * Whether to show a mailto link when clicking on the avatar.
+     * @default true
+     */
     showMailToLink: boolean;
+    /**
+     * Whether the avatar should appear in a disabled state.
+     * @default false
+     */
     disabled: boolean;
     readonly NAME = "AvatarComponent";
     imageURL: Promise<string>;

package/lib/core-ui/components/avatar-group/avatar-group.component.d.ts

@@ -2,19 +2,64 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy } from
 import { ResizeObserverService } from '../../services/resize-observer.service';
 import { User, UserAvatarSize } from '../avatar/avatar.model';
 import * as i0 from "@angular/core";
+/**
+ * Avatar group component displays multiple user avatars in a compact layout.
+ * Supports automatic overflow handling with a "+N" indicator and overlay expansion.
+ * Includes tooltip showing all user names on hover and click-to-expand functionality.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-avatar-group [users]="teamMembers" size="M" />
+ * <lx-avatar-group [users]="assignees" type="individual" [maxLength]="5" />
+ * <lx-avatar-group
+ *   [users]="participants"
+ *   [title]="'Project Team'"
+ *   [disabledUserIds]="inactiveUserIds"
+ *   [autoScale]="true"
+ * />
+ * ```
+ */
 export declare class AvatarGroupComponent implements AfterViewInit, OnDestroy {
     private cdr;
     private zone;
     private resizeObserverService;
     readonly NAME = "AvatarGroupComponent";
+    /**
+     * Optional title displayed in the expanded overlay.
+     */
     title?: string;
+    /**
+     * Array of user objects to display as avatars.
+     * @default []
+     */
     users: (User & {
         technicalUser?: boolean;
     })[];
+    /**
+     * The size of all avatars in the group.
+     * @default 'M'
+     */
     size: UserAvatarSize;
+    /**
+     * The display type: 'individual' for separate avatars or 'group' for overlapping.
+     * @default 'group'
+     */
     type: 'individual' | 'group';
+    /**
+     * Maximum number of avatars to display before showing "+N" indicator.
+     * @default 0
+     */
     maxLength: number;
+    /**
+     * Whether to automatically scale down avatars to fit container width.
+     * @default false
+     */
     autoScale: boolean;
+    /**
+     * Array of user IDs that should be displayed in a disabled state.
+     * @default []
+     */
     disabledUserIds: string[];
     userGroupElement: ElementRef<HTMLElement>;
     get userNames(): string;

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

@@ -1,6 +1,15 @@
 import * as i0 from "@angular/core";
 /**
  * Badge component is used to show a small piece of information in a colored badge.
+ * Commonly used for status indicators, counts, or labels.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-badge [content]="42" color="blue" />
+ * <lx-badge [content]="'New'" color="green" />
+ * <lx-badge [content]="errorCount" color="red" />
+ * ```
  */
 export declare class BadgeComponent {
     /**
@@ -9,6 +18,7 @@ export declare class BadgeComponent {
     content: string | number;
     /**
      * The color of the badge component
+     * @default 'blue'
      */
     color: 'blue' | 'gray' | 'red' | 'yellow' | 'green' | 'purple' | 'white';
     get colorClass(): string;

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

@@ -2,14 +2,32 @@ import { BannerSizes, BannerTypes } from './banner.models';
 import * as i0 from "@angular/core";
 /**
  * Banner can be used to display important information to the user. It allows for any type of content to be displayed in a banner.
+ * Banners automatically display an icon based on the type when using the 'big' size.
+ *
+ * ### Projection slots
+ * - Default slot: Main content of the banner (text, links, actions)
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-banner [type]="'warning'" [size]="'big'">
+ *   <p>Your session will expire in 5 minutes.</p>
+ * </lx-banner>
+ *
+ * <lx-banner [type]="'success'" [size]="'small'">
+ *   Changes saved successfully!
+ * </lx-banner>
+ * ```
  */
 export declare class BannerComponent {
     /**
      * The type of the banner
+     * @default BANNER_TYPE.WARNING
      */
     readonly type: import("@angular/core").InputSignal<BannerTypes>;
     /**
      * The size of the banner
+     * @default BANNER_SIZE.BIG
      */
     readonly size: import("@angular/core").InputSignal<BannerSizes>;
     protected readonly showIcon: import("@angular/core").Signal<boolean>;

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

@@ -2,38 +2,59 @@ import * as i0 from "@angular/core";
 /**
  * Button component is used to create a button with different styles and sizes. This uses native button element and
  * only provides styling and some additional features like loading spinner.
+ *
+ * ### Projection slots
+ * - Default slot: Button label or content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <button lx-button color="primary" size="medium">Save</button>
+ * <button lx-button icon="delete" color="danger" mode="outline">Delete</button>
+ * <button lx-button [showSpinner]="isLoading" [disabled]="isLoading">Submit</button>
+ * <button lx-button icon="download" endIcon="slim-arrow-down" mode="ghost">Export</button>
+ * <button lx-button icon="action-settings" [square]="true" [circle]="true" mode="ghost"></button>
+ * ```
  */
 export declare class ButtonComponent {
     /**
      * The size of the button.
+     * @default 'medium'
      */
     size: 'small' | 'medium' | 'large' | 'auto';
     /**
      * The color of the button.
+     * @default 'default'
      */
     color: 'default' | 'primary' | 'danger' | 'success' | 'light';
     /**
      * The mode of the button.
+     * @default 'solid'
      */
     mode: 'solid' | 'ghost' | 'outline' | 'link';
     /**
      * The pressed state of the button. This simulates the `:active` state of the button.
+     * @default false
      */
     pressed: boolean;
     /**
      * The selected state of the button. This simulates the `:hover` state of the button.
+     * @default false
      */
     selected: boolean;
     /**
      * This makes the button square.
+     * @default false
      */
     square: boolean;
     /**
      * This makes corners rounded. Use with `square` for a true circle.
+     * @default false
      */
     circle: boolean;
     /**
      * This disables the button.
+     * @default false
      */
     disabled: boolean;
     get hasIcon(): boolean;
@@ -67,6 +88,7 @@ export declare class ButtonComponent {
     protected readonly endIconKind: import("@angular/core").Signal<"fa" | "sap">;
     /**
      * This shows a spinner inside the button.
+     * @default false
      */
     showSpinner: boolean;
     get isDisabled(): boolean;

package/lib/core-ui/components/button-group/button-group.component.d.ts

@@ -1,5 +1,31 @@
 import * as i0 from "@angular/core";
+/**
+ * Button group component arranges multiple buttons in a horizontal layout with configurable separators.
+ * Use 'margin' for spaced buttons or 'border' for connected buttons with dividing lines.
+ *
+ * ### Projection slots
+ * - Default slot: Button elements to display in the group
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-button-group separator="margin">
+ *   <button lx-button color="primary">Save</button>
+ *   <button lx-button>Cancel</button>
+ * </lx-button-group>
+ *
+ * <lx-button-group separator="border">
+ *   <button lx-button mode="outline">View</button>
+ *   <button lx-button mode="outline">Edit</button>
+ *   <button lx-button mode="outline">Delete</button>
+ * </lx-button-group>
+ * ```
+ */
 export declare class ButtonGroupComponent {
+    /**
+     * The type of separator between buttons: 'margin' for spacing or 'border' for dividing lines.
+     * @default 'margin'
+     */
     separator: 'margin' | 'border';
     get hasMarginSeperator(): boolean;
     get hasBorderSeparator(): boolean;

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

@@ -1,11 +1,24 @@
 import * as i0 from "@angular/core";
 /**
- * Card component is a container component that can be used to display content in a card-like style.
- * This documentation provides details on the usage and configuration of the Card Component.
+ * A simple container component for displaying content in a card-like style.
+ * Provides consistent styling and layout for grouped content.
+ *
+ * ### Projection slots
+ * - Default slot: All card content including title, body, and any other elements
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-card [dataStyle]="'white'">
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here.</p>
+ * </lx-card>
+ * ```
  */
 export declare class CardComponent {
     /**
-     * The style of the card.
+     * The visual style variant of the card.
+     * @default 'white'
      */
     dataStyle: 'white';
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;

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

@@ -1,13 +1,52 @@
 import { EventEmitter } from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
 import * as i0 from "@angular/core";
+/**
+ * An expandable and collapsible section container with a toggle button.
+ * Useful for organizing content that can be shown or hidden on demand.
+ *
+ * ### Projection slots
+ * - Default slot: The title or header content that is always visible. The entire component is clickable to toggle.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-collapsible [toggleTitle]="'Show Details'" [(collapsed)]="isCollapsed">
+ *   <h3>Section Title</h3>
+ *   <span class="subtitle">Additional info</span>
+ * </lx-collapsible>
+ * ```
+ */
 export declare class CollapsibleComponent {
     readonly NAME = "CollapsibleComponent";
+    /**
+     * When true, prevents the section from being toggled. The toggle button remains visible but disabled.
+     * @default false
+     */
     disableSectionToggle: boolean;
+    /**
+     * When true, hides the toggle button entirely. The section cannot be collapsed/expanded.
+     * @default false
+     */
     hideSectionToggle: boolean;
+    /**
+     * Size of the toggle button (arrow icon).
+     * @default 'small'
+     */
     toggleSize: ButtonComponent['size'];
+    /**
+     * Text label displayed as the title attribute of the toggle button for accessibility.
+     * @default ''
+     */
     toggleTitle: string;
+    /**
+     * Whether the section is currently collapsed. Can be used with two-way binding.
+     * @default false
+     */
     collapsed: boolean;
+    /**
+     * Emitted when the collapsed state changes, either through user interaction or programmatic changes.
+     */
     collapsedChange: EventEmitter<boolean>;
     get notClickable(): boolean;
     onClick(event: MouseEvent): void;

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

@@ -1,13 +1,30 @@
 import * as i0 from "@angular/core";
 /**
  * Counter component is used to create a counter with different styles and sizes.
+ * Useful for displaying notification counts, item quantities, or numeric indicators.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-counter [content]="5" color="primary" size="default" />
+ * <lx-counter [content]="99" color="red" size="small" />
+ * <lx-counter [content]="unreadCount" color="green" />
+ * ```
  */
 export declare class CounterComponent {
-    /** The content of the counter. */
+    /**
+     * The content of the counter.
+     */
     content?: string | number;
-    /** The size of the counter. */
+    /**
+     * The size of the counter.
+     * @default 'default'
+     */
     size: 'default' | 'small';
-    /** The color of the counter. */
+    /**
+     * The color of the counter.
+     * @default 'primary'
+     */
     color: 'primary' | 'gray' | 'darkgray' | 'red' | 'yellow' | 'green';
     get classes(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CounterComponent, never>;

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

@@ -6,6 +6,14 @@ import * as i0 from "@angular/core";
 export declare const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE: InjectionToken<number>;
 /**
  * You can set `max-width` CSS property on your `lx-ellipsis` host element or the parent element if you want its content to never exceed a specific width.
+ * The component automatically truncates overflowing text and provides a "Show more" / "Show less" toggle button.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-ellipsis [content]="longDescription" style="max-width: 300px;" />
+ * <lx-ellipsis [content]="userInput" [escapeHtmlInContent]="true" />
+ * ```
  */
 export declare class EllipsisComponent implements OnInit, OnDestroy, AfterViewChecked {
     private debounceMsAfterResize;
@@ -15,10 +23,15 @@ export declare class EllipsisComponent implements OnInit, OnDestroy, AfterViewCh
     private translateService;
     /** @internal */
     static DEFAULT_RESIZE_DEBOUNCE_MS: number;
+    /**
+     * The text content to display and potentially truncate.
+     * @default ''
+     */
     content: string;
     /**
      * Only set this to false if the content is not a user provided string
      * or if you sanitize the provided content yourself.
+     * @default true
      */
     escapeHtmlInContent: boolean;
     private contentSpanEl$;

package/lib/core-ui/components/empty-state/empty-state.component.d.ts

@@ -1,58 +1,81 @@
 import { EventEmitter, Signal } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Displays an empty state with an optional icon, title, description, action buttons, and a more link.
+ * Useful for showing initial states before data is loaded or when no data is available.
+ *
+ * ### Projection slots
+ * - Default slot: Description text or additional content to display below the title
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-empty-state
+ *   [title]="'No items found'"
+ *   [icon]="'inbox'"
+ *   [buttonLabel]="'Add Item'"
+ *   [secondaryButtonLabel]="'Import'"
+ *   [moreLinkLabel]="'Learn more'"
+ *   [moreLink]="'https://docs.example.com'"
+ *   (buttonClicked)="onAddItem()"
+ *   (secondaryButtonClicked)="onImport()"
+ * >
+ *   <p>Start by adding your first item or importing existing data.</p>
+ * </lx-empty-state>
+ * ```
+ */
 export declare class EmptyStateComponent {
     /**
-     * The title to be displayed
+     * The title to be displayed. Can contain HTML.
      */
     title: import("@angular/core").InputSignal<string>;
     /**
-     * The SAP icon to show in the empty state.
+     * The SAP icon name to show in the empty state (e.g., 'inbox', 'add-document').
      */
     icon: import("@angular/core").InputSignal<string | undefined>;
     /**
-     * The main call-to-action button label
+     * The main call-to-action button label. If not provided, the button will not be shown.
      */
     buttonLabel: import("@angular/core").InputSignal<string | undefined>;
     /**
-     * The secondary call-to-action button label
+     * The secondary call-to-action button label. If not provided, the button will not be shown.
      */
     secondaryButtonLabel: import("@angular/core").InputSignal<string | undefined>;
     /**
-     * Whether the empty state is in a loading state. If true, main call-to-action button will show a spinner
+     * Whether the empty state is in a loading state. If true, action buttons will show a spinner.
+     * @default false
      */
     loading: import("@angular/core").InputSignal<boolean>;
     /**
-     * The more link label
+     * The text label for the more link.
      */
     moreLinkLabel: import("@angular/core").InputSignal<string | undefined>;
     /**
-     * The URL of the more link
+     * The URL of the more link. Can be a string for external links or an array for Angular router links.
      */
     moreLink: import("@angular/core").InputSignal<string | string[] | undefined>;
     /**
-     * Whether the more link should be opened in a new tab
-     *
+     * Whether the more link should be opened in a new tab.
      * @default true
      */
     openMoreLinkInNewTab: import("@angular/core").InputSignal<boolean>;
     /**
-     * The size of the empty state
-     *
-     * @default medium
+     * The size of the empty state.
+     * @default 'medium'
      */
     size: import("@angular/core").InputSignal<"small" | "medium">;
     protected useRouterLink: Signal<boolean>;
     protected get _size(): "small" | "medium";
     /**
-     * Emitted when the main call-to-action button is clicked
+     * Emitted when the main call-to-action button is clicked.
      */
     buttonClicked: EventEmitter<MouseEvent>;
     /**
-     * Emitted when the secondary call-to-action button is clicked
+     * Emitted when the secondary call-to-action button is clicked.
      */
     secondaryButtonClicked: EventEmitter<MouseEvent>;
     /**
-     * Emitted when the more link is clicked
+     * Emitted when the more link is clicked.
      */
     moreLinkClicked: EventEmitter<MouseEvent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;

package/lib/core-ui/components/page-header/page-header.component.d.ts

@@ -21,7 +21,8 @@ import * as i0 from "@angular/core";
  *
  *
  * ### Example
- * @example ```html
+ * @example
+ * ```html
  * <lx-page-header [pageTitle]="'Agile Tracking'">
  *   <ui5-breadcrumbs>
  *     <ui5-breadcrumbs-item routerLink="/">Root Page</ui5-breadcrumbs-item>

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

@@ -5,22 +5,34 @@ import * as i0 from "@angular/core";
  * Use skeleton loaders for pages or sections that load content progressively, like text and images. The component can
  * be used to compose various scenarios like placeholders for thumbnails, lists, and avatars. See the example
  * [patterns](?path=/docs/skeleton-patterns--docs) for more details.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-skeleton width="100%" height="20px" />
+ * <lx-skeleton width="200px" height="200px" borderRadius="50%" />
+ * <lx-skeleton width="80%" height="16px" color="dark" />
+ * ```
  */
 export declare class SkeletonComponent {
     /**
-     * Width of the skeleton element. Valid CSS values are supported. Default is 100% width of the parent.
+     * Width of the skeleton element. Valid CSS values are supported.
+     * @default '100%'
      */
     width?: string;
     /**
-     * Height of the skeleton element. Valid CSS values are supported. Default is 100% height of the parent.
+     * Height of the skeleton element. Valid CSS values are supported.
+     * @default '100%'
      */
     height?: string;
     /**
-     * Border radius of the skeleton element. Valid CSS values are supported. Default is 4px.
+     * Border radius of the skeleton element. Valid CSS values are supported.
+     * @default '4px'
      */
     borderRadius?: string;
     /**
-     * Color of the skeleton element. 'dark' or 'light' are supported. Default is 'light'.
+     * Color of the skeleton element. 'dark' or 'light' are supported.
+     * @default 'light'
      */
     color: 'dark' | 'light';
     static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;

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

@@ -6,9 +6,24 @@ import * as i0 from "@angular/core";
  *   (or ancestor with new rendering context, created, for example, with `transform: translate(0, 0)`
  * - `fadeBackground`: Sets background to 60% transparent white. TODO: Always use for fullSpace* classes and remove.
  *
+ * ### Projection slots
+ * - Default slot: Optional text or content to display below the spinner
+ *
  * @deprecated Use the `ui5-busy-indicator` component instead.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-spinner class="fullSpace fadeBackground">Loading...</lx-spinner>
+ * <lx-spinner [fadeBackground]="true" />
+ * ```
  */
 export declare class SpinnerComponent {
+    /**
+     * Applies a semi-transparent white background.
+     * @default false
+     * @deprecated Use the `fadeBackground` CSS class instead.
+     */
     fadeBackground: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpinnerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SpinnerComponent, "lx-spinner", never, { "fadeBackground": { "alias": "fadeBackground"; "required": false; }; }, {}, never, ["*"], true, never>;

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

@@ -4,6 +4,29 @@ import * as i0 from "@angular/core";
  * Stepper component is a wrapper around the Angular CDK Stepper component. It provides a way to create a linear
  * sequence of steps that guide users through a process.
  *
+ * ### Projection slots
+ * Each `cdk-step` element projects its content into the stepper's content area when that step is active.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-stepper [selectedIndex]="currentStep">
+ *   <cdk-step label="Personal Info">
+ *     <form>
+ *       <input type="text" placeholder="Name" />
+ *     </form>
+ *   </cdk-step>
+ *   <cdk-step label="Contact Details">
+ *     <form>
+ *       <input type="email" placeholder="Email" />
+ *     </form>
+ *   </cdk-step>
+ *   <cdk-step label="Review">
+ *     <p>Review your information</p>
+ *   </cdk-step>
+ * </lx-stepper>
+ * ```
+ *
  * ## Usage
  *
  * 1. Import `LxCoreUiModule` module from `@leanix/components` and `CdkStepperModule` module from `@angular/cdk/stepper` in your module where you want to use the component, or in case of a standalone parent component, import the

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

@@ -4,25 +4,46 @@ import { TableComponent } from '../table.component';
 import * as i0 from "@angular/core";
 /**
  * The `lx-th` can be used in combination with `lx-table` to implement sortable `<table>` elements.
+ * Renders a table header cell with optional sorting functionality.
+ *
+ * ### Projection slots
+ * - Default slot: The header text content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <table lx-table [isSortable]="true" [(sort)]="sort">
+ *   <thead>
+ *     <tr>
+ *       <lx-th column="name">Name</lx-th>
+ *       <lx-th column="date" [disableSortClear]="true">Date</lx-th>
+ *       <lx-th column="actions" [disableSort]="true">Actions</lx-th>
+ *     </tr>
+ *   </thead>
+ * </table>
+ * ```
  */
 export declare class TableHeaderComponent {
     #private;
     private parentTable?;
     /**
-     * The technical column name.
+     * The technical column name used as the key in sort operations. Required for sortable columns.
      */
     column?: string;
     /**
-     * Indicates that the column is not sortable (default `false`).
+     * Disables sorting for this column even when the table has sorting enabled.
+     * @default false
      */
     disableSort: boolean;
     /**
-     * Prevents the user from clearing the sort.
-     * Only allowing to toggle between asc & desc.
+     * Prevents the user from clearing the sort state.
+     * When true, only allows toggling between ascending and descending order.
+     * @default false
      */
     disableSortClear: boolean;
     /**
-     * Triggers whenever the user changes the sort order.
+     * Emitted whenever the user changes the sort order by clicking the header.
+     * Provides the new sort state with column key and order.
      */
     sortChange: EventEmitter<SortingOptions>;
     readonly sortable: import("@angular/core").Signal<boolean>;