@leanix/components 0.4.818 → 0.4.820

package/lib/forms-ui/components/rich-text-editor/extensions/table/table-bubble-menu/table-bubble-menu.component.d.ts

@@ -1,8 +1,25 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
 import { Editor } from '@tiptap/core';
 import * as i0 from "@angular/core";
+/**
+ * Contextual bubble menu for table editing in the rich text editor.
+ *
+ * Provides three context-sensitive menus that appear when interacting with tables:
+ * - Row menu: appears when a table row selector is active
+ * - Column menu: appears when a table column selector is active
+ * - Table menu: appears when the entire table is selected
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-table-bubble-menu [editor]="editor" />
+ * ```
+ */
 export declare class TableBubbleMenuComponent implements AfterViewInit {
     NAME: string;
+    /**
+     * The Tiptap editor instance to attach table bubble menus to.
+     */
     editor: Editor;
     bubbleMenuRowRef: ElementRef;
     bubbleMenuColumnRef: ElementRef;

package/lib/forms-ui/components/rich-text-editor/ngx-tiptap/node-view.component.d.ts

@@ -1,12 +1,26 @@
 import * as i0 from "@angular/core";
+/**
+ * Base component for custom Tiptap node views in Angular.
+ *
+ * Extend this component to create custom node views for the rich text editor.
+ * Provides all Tiptap NodeViewProps as required input signals.
+ */
 export declare class AngularNodeViewComponent {
+    /** The Tiptap editor instance. */
     editor: import("@angular/core").InputSignal<import("@tiptap/core").Editor>;
+    /** The ProseMirror node being rendered. */
     node: import("@angular/core").InputSignal<import("prosemirror-model").Node>;
+    /** Array of decorations for this node. */
     decorations: import("@angular/core").InputSignal<readonly import("@tiptap/core").DecorationWithType[]>;
+    /** Whether the node is currently selected. */
     selected: import("@angular/core").InputSignal<boolean>;
+    /** The Tiptap extension that created this node. */
     extension: import("@angular/core").InputSignal<import("@tiptap/core").Node<any, any>>;
+    /** Function to get the node's position in the document. */
     getPos: import("@angular/core").InputSignal<() => number>;
+    /** Function to update the node's attributes. */
     updateAttributes: import("@angular/core").InputSignal<(attributes: Record<string, any>) => void>;
+    /** Function to delete the node from the document. */
     deleteNode: import("@angular/core").InputSignal<() => void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AngularNodeViewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AngularNodeViewComponent, "ng-component", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "node": { "alias": "node"; "required": true; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": true; "isSignal": true; }; "extension": { "alias": "extension"; "required": true; "isSignal": true; }; "getPos": { "alias": "getPos"; "required": true; "isSignal": true; }; "updateAttributes": { "alias": "updateAttributes"; "required": true; "isSignal": true; }; "deleteNode": { "alias": "deleteNode"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;

package/lib/forms-ui/components/single-select/single-select.component.d.ts

@@ -6,21 +6,57 @@ import { SingleSelectPadding } from '../../models/single-select-padding.interfac
 import { KeyboardSelectAction } from '../keyboard-select.directive';
 import * as i0 from "@angular/core";
 export type SingleSelectSize = 'default' | 'small' | 'select2' | 'large';
+/**
+ * A dropdown component for selecting a single value from a list of options.
+ * Implements `ControlValueAccessor` for seamless integration with Angular reactive forms.
+ *
+ * ### Projection slots
+ * - `.selectedOption`: Displays the currently selected value in the input field
+ * - `.dropdownComponent`: Contains the dropdown (typically `lx-basic-dropdown`)
+ *
+ * Alternatively, use `lxSelectDropdown` and `lxSelectedOption` directives on `<ng-template>`.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-single-select
+ *   #select
+ *   [formControl]="control"
+ *   (query)="searchTerm = $event">
+ *   <span class="selectedOption">{{ control.value?.name }}</span>
+ *   <lx-basic-dropdown
+ *     class="dropdownComponent"
+ *     [keyboardSelectAction]="select.optionsKeyboardSelectAction$"
+ *     [options]="options | lxFilterByTerm: { term: searchTerm }"
+ *     labelKey="name"
+ *     (onItemSelected)="select.selectOption($event)">
+ *   </lx-basic-dropdown>
+ * </lx-single-select>
+ * ```
+ */
 export declare class SingleSelectComponent extends BaseSelectDirective implements OnDestroy, AfterViewInit, ControlValueAccessor {
     private cd;
     /** @internal */
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition: number, keyCode: number): number;
     /** @internal */
     static getKeyboardSelectAction(cursorPosition: number, keyCode: number): KeyboardSelectAction | null;
+    /** The currently selected value. */
     selection: any;
+    /** Background color of the selection input field. */
     selectionBackground: 'white' | 'gray';
+    /** Size variant of the select component. */
     size: SingleSelectSize;
     /** @deprecated To keep different inputs aligned, we should use the default padding */
     padding?: SingleSelectPadding;
+    /** Optional ID attribute for the input element. */
     inputId?: string;
+    /** Whether the select field is required. */
     required: boolean;
+    /** Whether to close the dropdown when the Tab key is pressed. */
     closeDropdownOnTab: boolean;
+    /** Event emitted when the selection changes. */
     selectionChange: EventEmitter<any>;
+    /** Event emitted when the input loses focus. */
     blur: EventEmitter<FocusEvent>;
     /** @internal */
     explicitDropdown?: TemplateRef<any>;
@@ -36,8 +72,11 @@ export declare class SingleSelectComponent extends BaseSelectDirective implement
     get selectedOptionTmpl(): TemplateRef<any>;
     /** @internal */
     get dropdownTmpl(): TemplateRef<any>;
+    /** Whether to show a clear button to remove the selection. */
     allowClear: boolean;
+    /** Tab index of the input element for keyboard navigation. */
     tabIndex: number;
+    /** Whether to visually mark the input as invalid. */
     markInvalid: boolean;
     /** @internal */
     toggleElement?: ElementRef<HTMLElement>;

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

@@ -7,10 +7,34 @@ import * as i0 from "@angular/core";
  * score will be used for sorting.
  */
 export declare const RELEVANCE_SORTING_KEY = "lx-relevance";
+/**
+ * Dropdown for selecting sorting mode and direction.
+ * Displays available sorting options and allows toggling between ascending/descending order.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-sorting-dropdown
+ *   [currentSorting]="{ key: 'name', order: 'asc' }"
+ *   [sortingOptions]="sortOptions"
+ *   (apply)="handleSortChange($event)">
+ * </lx-sorting-dropdown>
+ * ```
+ */
 export declare class SortingDropdownComponent implements OnInit {
+    /** The currently active sorting configuration. */
     currentSorting: Sorting | null;
+    /**
+     * Available sorting options to choose from.
+     * @default []
+     */
     sortingOptions: Sorting[];
+    /**
+     * Whether to show ascending/descending direction options.
+     * @default true
+     */
     showDirectionOptions: boolean;
+    /** Event emitted when a new sorting configuration is applied. */
     apply: EventEmitter<Sorting>;
     readonly NAME = "SortingDropdownComponent";
     readonly sortingDirections: SortingOrder[];

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

@@ -1,7 +1,27 @@
 import * as i0 from "@angular/core";
+/**
+ * Trigger button for the sorting dropdown.
+ * Displays the current sorting mode with a dropdown chevron icon.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-sorting-dropdown-trigger
+ *   label="Sort by"
+ *   currentSortingLabel="Name"
+ *   [disabled]="false">
+ * </lx-sorting-dropdown-trigger>
+ * ```
+ */
 export declare class SortingDropdownTriggerComponent {
+    /** Prefix label displayed before the current sorting option (e.g., "Sort by"). */
     label: string;
+    /** Label of the currently selected sorting option. */
     currentSortingLabel: string;
+    /**
+     * Whether the trigger button is disabled.
+     * @default false
+     */
     disabled: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortingDropdownTriggerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SortingDropdownTriggerComponent, "lx-sorting-dropdown-trigger", never, { "label": { "alias": "label"; "required": false; }; "currentSortingLabel": { "alias": "currentSortingLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;

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

@@ -1,22 +1,51 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Switch component is a toggle switch that can be used to switch between two states.
+ * A toggle switch component for selecting between two states (on/off, true/false).
+ * Provides a visual toggle with optional label and supports disabled states.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-switch
+ *   [value]="isEnabled"
+ *   [label]="'Enable notifications'"
+ *   [labelInFront]="true"
+ *   (toggle)="handleToggle($event)">
+ * </lx-switch>
+ * ```
  */
 export declare class SwitchComponent {
-    /** Value of the switch */
+    /**
+     * Current boolean value of the switch (true for on, false for off).
+     */
     value: boolean;
-    /** Size of the switch */
+    /**
+     * Visual size variant of the switch.
+     * @default 'small'
+     */
     size: 'small';
-    /** Whether the switch is disabled */
+    /**
+     * Whether the switch is disabled and cannot be toggled.
+     * @default false
+     */
     disabled: boolean;
-    /** Label of the switch */
+    /**
+     * Text label to display alongside the switch.
+     */
     label: string;
-    /** Whether the label is in front of the switch */
+    /**
+     * Whether the label should appear before (left of) the switch.
+     * @default true
+     */
     labelInFront: boolean;
-    /** Id of the switch */
+    /**
+     * Optional ID attribute for the switch element (prefixed with "tour" for internal use).
+     */
     elementId?: string;
-    /** Event that is emitted when the switch is toggled */
+    /**
+     * Event emitted when the switch is toggled, returning the new boolean value.
+     */
     toggle: EventEmitter<boolean>;
     /** @internal */
     onToggle(): void;

package/lib/modal-ui/components/modal-footer/modal-footer.component.d.ts

@@ -1,5 +1,24 @@
 import * as i0 from "@angular/core";
+/**
+ * Footer component for modals with content projection for action buttons.
+ *
+ * ### Projection slots
+ * - Default slot: Action buttons or footer content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-modal-footer [border]="true">
+ *   <button lx-button (click)="cancel()">Cancel</button>
+ *   <button lx-button color="primary" (click)="save()">Save</button>
+ * </lx-modal-footer>
+ * ```
+ */
 export declare class ModalFooterComponent {
+    /**
+     * Whether to show a top border on the footer.
+     * @default false
+     */
     border: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalFooterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModalFooterComponent, "lx-modal-footer", never, { "border": { "alias": "border"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/modal-ui/components/modal-header/modal-header.component.d.ts

@@ -1,6 +1,28 @@
 import * as i0 from "@angular/core";
+/**
+ * Header component for modals with optional title and content projection.
+ *
+ * ### Projection slots
+ * - Default slot: Custom header content displayed before the title
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-modal-header [title]="'Create New Item'" [bottomBorder]="true">
+ *   <button class="close-button">×</button>
+ * </lx-modal-header>
+ * ```
+ */
 export declare class ModalHeaderComponent {
+    /**
+     * The title text to display in the header.
+     * @default ''
+     */
     title: string;
+    /**
+     * Whether to show a bottom border on the header.
+     * @default true
+     */
     bottomBorder: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModalHeaderComponent, "lx-modal-header", never, { "title": { "alias": "title"; "required": false; }; "bottomBorder": { "alias": "bottomBorder"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/popover-ui/components/popover/popover.component.d.ts

@@ -3,25 +3,20 @@ import { SatPopoverComponent, SatPopoverHorizontalAlign, SatPopoverVerticalAlign
 import { PopoverTriggerDirective } from '../../directives/popover-hover.directive';
 import * as i0 from "@angular/core";
 /**
- * The Popover component is based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
+ * A floating overlay component anchored to a trigger element.
+ * Based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
  *
- * ## Examples
-
- * This popover encapsulates this open source library: https://github.com/ncstate-sat/popover,
- * make sure to also check out the docs over there.
+ * The popover requires one of the trigger directives:
+ * - `lxPopoverHover`: Shows on hover (both anchor and popover body)
+ * - `lxPopoverClick`: Shows on click (stays open while hovering popover body)
  *
- * As of today they are two trigger strategies to display a popover.
- * 1. Show on hovering the anchor and while hovering the popover body.
- * 2. Show on click and while hovering the popover body.
- *
- * For use case 1. you would use the lxPopoverHover directive, which exports as hoverAnchor.
- *
- * ### Example:
+ * ### Example with hover trigger
+ * @example
  * ```html
  * <div lxPopoverHover
  *      hoverAnchor
  *      satPopoverAnchor
- *      #anchor="hoverAnchor"></div>
+ *      #anchor="hoverAnchor">Hover me</div>
  * <lx-popover [trigger]="anchor"
  *             horizontalAlign="after"
  *             verticalAlign="center">
@@ -29,18 +24,14 @@ import * as i0 from "@angular/core";
  * </lx-popover>
  * ```
  *
- * For use case 2. you would use the lxPopoverClick directive, which exports as clickAnchor.
- * Note: Since the only component where we use the lxPopoverClick directive (ReportComponent)
- * needs to fetch some data before opening it, we do not register a click EventListener in this directive,
- * but require the developer to implement that in the component, where the popover is used.
- *
- * ### Example:
+ * ### Example with click trigger
+ * @example
  * ```html
  * <div lxPopoverClick
  *      clickAnchor
  *      satPopoverAnchor
  *      #anchor="clickAnchor"
- *      (click)="popover.open()">Click Me!</div>
+ *      (click)="popover.open()">Click me</div>
  * <lx-popover [trigger]="anchor"
  *             horizontalAlign="after"
  *             verticalAlign="center"
@@ -49,10 +40,10 @@ import * as i0 from "@angular/core";
  * </lx-popover>
  * ```
  *
- * If this component is used with angularCompilerOptions strictTemplates=true,
- * satPopoverAnchor must be set to the reference to the SatPopover inside lx-popover.
- *
- * ### Example:
+ * ### With strict templates
+ * When using `strictTemplates=true`, bind `satPopoverAnchor` to the popover's internal reference:
+ * ### Example
+ * @example
  * ```html
  * <div [satPopoverAnchor]="popover.satPopover"></div>
  * <lx-popover #popover>

package/lib/tab-ui/components/tab/tab.component.d.ts

@@ -4,38 +4,99 @@ import { ActivatedRoute, Router, RouterLinkActive } from '@angular/router';
 import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * Individual tab component used inside `lx-tab-group`.
+ * Supports icons, counters, router links, and keyboard navigation.
+ * Content is projected and rendered by the parent tab group when the tab is active.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tab-group>
+ *   <lx-tab [label]="'General'" [icon]="'settings'" [disabled]="false">
+ *     <p>General content</p>
+ *   </lx-tab>
+ *   <lx-tab [label]="'Notifications'" [counter]="3">
+ *     <p>Notification content</p>
+ *   </lx-tab>
+ *   <lx-tab [label]="'Settings'" [tabLink]="['/settings']">
+ *     <p>Settings content</p>
+ *   </lx-tab>
+ * </lx-tab-group>
+ * ```
+ */
 export declare class TabComponent {
     private cd;
     private router;
     private activatedRoute;
     /**
-     * The icon input takes an SAP icon name
+     * The icon input takes an SAP icon name.
      * WARNING: Currently this component does not support using an icon together with a counter.
      */
     icon?: string;
     /**
-     * The `design` of the icon.
+     * The design of the icon.
      * @default NonInteractive
      */
     iconDesign: IconComponent['design'];
+    /**
+     * The label text displayed for the tab.
+     * @default ''
+     */
     label: string;
+    /**
+     * Optional title attribute for the tab element (shown on hover).
+     */
     title?: string;
     /**
-     * In some parts of the application, we are passing a plain string to the tabLink input, whereas in
-     * most parts, the input is passed as an array. The RouterLink directive also accepts both types,
-     * therefore we are using type of the input as string | any[].
+     * Router link for tab navigation. Accepts both string and array formats.
+     * When set, the tab will navigate to the specified route when selected.
      */
     tabLink?: string | any[];
+    /**
+     * Counter badge displayed on the tab.
+     * WARNING: Currently this component does not support using a counter together with an icon.
+     */
     counter?: number;
+    /**
+     * Options for the RouterLinkActive directive.
+     * @default { exact: true }
+     */
     routerLinkActiveOptions: {
         exact: boolean;
     };
+    /**
+     * Size of the counter badge.
+     * @default 'default'
+     */
     counterBadgeSize: 'default' | 'small';
+    /**
+     * Whether to remove margin from the tab.
+     * @default false
+     */
     noMargin: boolean;
+    /**
+     * Whether to remove left margin for the first tab.
+     * @default false
+     */
     noLeftMarginForFirstTab: boolean;
+    /**
+     * Background color of the tab.
+     * @default 'white'
+     */
     background: 'white' | 'gray';
+    /**
+     * Whether the tab is disabled and cannot be selected.
+     * @default false
+     */
     disabled: boolean;
+    /**
+     * Event emitted when the tab is selected.
+     */
     switch: EventEmitter<any>;
+    /**
+     * Event emitted when a keyboard key is pressed on the tab.
+     */
     keyDownAction: EventEmitter<KeyboardEvent>;
     tabId: string;
     content?: TemplatePortal<any>;

package/lib/tab-ui/components/tab-group/tab-group.component.d.ts

@@ -2,13 +2,41 @@ import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChange
 import { Observable, Subject } from 'rxjs';
 import { TabComponent } from '../tab/tab.component';
 import * as i0 from "@angular/core";
+/**
+ * Container for tab navigation that manages active tab state and keyboard interactions.
+ * Supports both static tabs and router-linked tabs with keyboard navigation (arrow keys, Home, End).
+ *
+ * ### Content Projection
+ * - Project `lx-tab` components as children
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tab-group [selectedIndex]="0" (indexChange)="onTabChange($event)">
+ *   <lx-tab [label]="'General'" [icon]="'settings'">
+ *     <p>General content</p>
+ *   </lx-tab>
+ *   <lx-tab [label]="'Notifications'" [counter]="3">
+ *     <p>Notification content</p>
+ *   </lx-tab>
+ * </lx-tab-group>
+ * ```
+ */
 export declare class TabGroupComponent implements OnChanges, AfterContentInit, OnDestroy {
     private cd;
+    /**
+     * Whether the tabs should be centered.
+     * @default false
+     */
     isCentered: boolean;
     /**
-     * The tab whose content should be displayed.
+     * The index of the tab whose content should be displayed.
+     * @default 0
      */
     selectedIndex: number;
+    /**
+     * Event emitted when the selected tab index changes.
+     */
     indexChange: EventEmitter<number>;
     /** @internal */
     tabsQueryList$: Observable<QueryList<TabComponent>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanix/components",
-  "version": "0.4.818",
+  "version": "0.4.820",
   "license": "Apache-2.0",
   "author": "LeanIX GmbH",
   "repository": {