@leanix/components 0.4.818 → 0.4.820

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

@@ -5,61 +5,151 @@ import { DateFormatsProvider } from '../../../core-ui/core-ui.constants';
 import * as i0 from "@angular/core";
 export type DateInputRenderingStyle = 'INPUT' | 'LINK' | 'BUTTON';
 /**
- * This is a date input component that can be used to select a date.
+ * Date input with integrated datepicker dropdown.
+ *
+ * Supports multiple rendering styles (input, link, button) and flexible date range restrictions.
+ *
+ * ### Projection slots
+ * - `dateStringTemplate`: Custom template for displaying the date string when `renderingStyle` is 'BUTTON'.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-date-input
+ *   [(date)]="selectedDate"
+ *   [minDate]="minDate"
+ *   [maxDate]="maxDate"
+ *   [renderingStyle]="'INPUT'"
+ *   [placeholder]="'Select a date'"
+ *   (dateChange)="onDateSelected($event)"
+ * ></lx-date-input>
+ * ```
  */
 export declare class DateInputComponent implements OnChanges, OnInit, OnDestroy, ControlValueAccessor, Validator {
     private cd;
     private dateFormatsProvider;
     private getDateFnLocale?;
-    /** The initial date value for the date input field. This is used for `ngModel` and `formControl`. */
+    /**
+     * The initial date value for the date input field. This is used for `ngModel` and `formControl`.
+     * @default null
+     */
     date: Date | null;
-    /** Secondary, alternative input with date string */
+    /**
+     * Secondary, alternative input with date string (format: 'yyyy-mm-dd').
+     * @default null
+     */
     dateString: string | null;
-    /** Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects */
+    /**
+     * Determines whether formGroup's value accessor uses Date objects or date strings.
+     * @default 'date'
+     */
     valueAccessor: 'date' | 'dateString';
-    /** ID to be set on input to correspond to outside label */
+    /**
+     * ID to be set on input to correspond to outside label.
+     * @default ''
+     */
     inputId: string;
-    /** The rendering style of the date input component. Can be one of "LINK", "BUTTON", or "INPUT". */
+    /**
+     * The rendering style of the date input component.
+     * @default 'INPUT'
+     */
     renderingStyle: DateInputRenderingStyle;
-    /** The placeholder text to show in the date input field when there is no date selected */
+    /**
+     * The placeholder text to show in the date input field when there is no date selected.
+     * @default 'yyyy-mm-dd'
+     */
     placeholder: string;
-    /** Deactivate to use old date picker */
+    /**
+     * Use CDK overlay for datepicker positioning. Set to false to use legacy positioning.
+     * @default true
+     */
     cdk: boolean;
-    /** Sets datepicker mode, supports: day, month, year */
+    /**
+     * Sets datepicker mode, supports: 'day', 'month', 'year'.
+     * @default 'day'
+     */
     datepickerMode: string;
-    /** Default date to show if ng-model value is not specified. Default date to show if ng-model value is not specified */
+    /** Default date to show if ng-model value is not specified. */
     initDateString: string;
-    /** Oldest selectable date */
+    /**
+     * Oldest selectable date.
+     * @default new Date('0000-01-01')
+     */
     minDate: Date;
-    /** Latest selectable date */
+    /**
+     * Latest selectable date.
+     * @default new Date('9999-12-31')
+     */
     maxDate: Date;
-    /** Set lower datepicker mode, supports: day, month, year */
+    /**
+     * Set lower datepicker mode, supports: 'day', 'month', 'year'.
+     * @default 'day'
+     */
     minMode: string;
-    /** Sets upper datepicker mode, supports: day, month, year */
+    /**
+     * Sets upper datepicker mode, supports: 'day', 'month', 'year'.
+     * @default 'year'
+     */
     maxMode: string;
-    /** If false week numbers will be hidden */
+    /**
+     * If false week numbers will be hidden in day picker.
+     * @default true
+     */
     showWeeks: boolean;
-    /** Format of day in month */
+    /**
+     * Format of day in month (date-fns format).
+     * @default 'dd'
+     */
     formatDay: string;
-    /** Format of month in year */
+    /**
+     * Format of month in year (date-fns format).
+     * @default 'MMMM'
+     */
     formatMonth: string;
-    /** Format of year in year range */
+    /**
+     * Format of year in year range (date-fns format).
+     * @default 'yyyy'
+     */
     formatYear: string;
-    /** Format of day in week header */
+    /**
+     * Format of day in week header (date-fns format).
+     * @default 'EE'
+     */
     formatDayHeader: string;
-    /** Format of title when selecting day */
+    /**
+     * Format of title when selecting day (date-fns format).
+     * @default 'MMMM yyyy'
+     */
     formatDayTitle: string;
-    /** Format of title when selecting month */
+    /**
+     * Format of title when selecting month (date-fns format).
+     * @default 'yyyy'
+     */
     formatMonthTitle: string;
-    /** Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public */
+    /**
+     * Starting day of the week from 0-6 (0=Sunday, 6=Saturday).
+     * @default 0
+     */
     startingDay: number;
-    /** Number of years displayed in year selection */
+    /**
+     * Number of years displayed in year selection.
+     * @default 20
+     */
     yearRange: number;
-    /** If true only dates from the currently displayed month will be shown */
+    /**
+     * If true only dates from the currently displayed month will be shown.
+     * @default false
+     */
     onlyCurrentMonth: boolean;
-    /** If true shortcut`s event propagation will be disabled */
+    /**
+     * If true shortcut event propagation will be disabled.
+     * @default false
+     */
     shortcutPropagation: boolean;
-    /** Array of custom css classes to be applied to */
+    /**
+     * Array of custom css classes to be applied to specific dates.
+     * @default []
+     */
     customClass: {
         date: Date;
         mode: string;
@@ -67,22 +157,34 @@ export declare class DateInputComponent implements OnChanges, OnInit, OnDestroy,
     }[];
     /** If true, the date input field will be disabled. */
     disabled: boolean;
-    /** Array of disabled dates if mode is day, or years, etc. */
+    /**
+     * Array of disabled dates with mode specification.
+     * @default []
+     */
     dateDisabled: {
         date: Date;
         mode: string;
     }[];
-    /** If true, the date input field will be auto-focused when the component is first rendered. */
+    /**
+     * If true, the date input field will be auto-focused when the component is first rendered.
+     * @default false
+     */
     autoFocus: boolean;
-    /** If true, the date input field will be marked as invalid. */
+    /**
+     * If true, the date input field will be marked as invalid.
+     * @default false
+     */
     markInvalid: boolean;
-    /** Also emit on invalid date string */
+    /**
+     * Also emit dateStringChange on invalid date string.
+     * @default false
+     */
     alwaysEmitDateString: boolean;
-    /** Triggered whenever the datepicker is closed */
+    /** Emitted whenever the datepicker is closed. */
     closeDateInput: EventEmitter<void>;
-    /** Triggered whenever the date changes */
+    /** Emitted whenever the date string changes. */
     dateStringChange: EventEmitter<string | null>;
-    /** Triggered whenever the date changes. */
+    /** Emitted whenever the date changes. */
     dateChange: EventEmitter<Date | null>;
     /** @internal */
     initDateString$: Observable<string>;

package/lib/forms-ui/components/date-picker-ui/datepicker-inner.component.d.ts

@@ -1,39 +1,74 @@
 import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DateFormatter } from './date-formatter';
 import * as i0 from "@angular/core";
+/**
+ * Core datepicker component managing date selection logic.
+ *
+ * Provides the underlying logic for day, month, and year selection modes.
+ * Used internally by DatePickerComponent.
+ *
+ * ### Projection slots
+ * - Default slot: Child picker components (daypicker, monthpicker, yearpicker).
+ */
 export declare class DatePickerInnerComponent implements OnInit, OnChanges {
+    /** Locale code for date formatting. */
     locale: string;
+    /** Current datepicker mode: 'day', 'month', or 'year'. */
     datepickerMode: string;
+    /** Starting day of the week from 0-6 (0=Sunday). */
     startingDay: number;
+    /** Number of years displayed in year selection. */
     yearRange: number;
+    /** Minimum selectable date. */
     minDate: Date;
+    /** Maximum selectable date. */
     maxDate: Date;
+    /** Minimum picker mode. */
     minMode: string;
+    /** Maximum picker mode. */
     maxMode: string;
+    /** Whether to show week numbers. */
     showWeeks: boolean;
+    /** Format of day in month. */
     formatDay: string;
+    /** Format of month in year. */
     formatMonth: string;
+    /** Format of year in year range. */
     formatYear: string;
+    /** Format of day in week header. */
     formatDayHeader: string;
+    /** Format of title when selecting day. */
     formatDayTitle: string;
+    /** Format of title when selecting month. */
     formatMonthTitle: string;
+    /** If true, only dates from the currently displayed month will be shown. */
     onlyCurrentMonth: boolean;
+    /** If true, shortcut event propagation will be disabled. */
     shortcutPropagation: boolean;
+    /** Array of custom css classes to be applied to dates. */
     customClass: {
         date: Date;
         mode: string;
         clazz: string;
     }[];
+    /** Number of columns in month picker. */
     monthColLimit: number;
+    /** Number of columns in year picker. */
     yearColLimit: number;
+    /** Array of disabled dates. */
     dateDisabled: {
         date: Date;
         mode: string;
     }[];
+    /** Array of disabled day indices (0-6). */
     dayDisabled: number[];
+    /** Initial date to display. */
     initDate: Date;
+    /** Emitted when a date is selected. */
     selectionDone: EventEmitter<Date>;
+    /** Emitted when active date is updated. */
     update: EventEmitter<Date>;
+    /** Emitted when active date changes. */
     activeDateChange: EventEmitter<Date>;
     stepDay: any;
     stepMonth: any;

package/lib/forms-ui/components/date-picker-ui/daypicker.component.d.ts

@@ -1,6 +1,12 @@
 import { OnInit } from '@angular/core';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 import * as i0 from "@angular/core";
+/**
+ * Day selection view for the datepicker.
+ *
+ * Displays a calendar grid for selecting individual days within a month.
+ * Used internally by DatePickerInnerComponent.
+ */
 export declare class DayPickerComponent implements OnInit {
     labels: any[];
     title: string;

package/lib/forms-ui/components/date-picker-ui/monthpicker.component.d.ts

@@ -1,6 +1,12 @@
 import { OnInit } from '@angular/core';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 import * as i0 from "@angular/core";
+/**
+ * Month selection view for the datepicker.
+ *
+ * Displays a grid of months for selecting a month within a year.
+ * Used internally by DatePickerInnerComponent.
+ */
 export declare class MonthPickerComponent implements OnInit {
     title: string;
     rows: any[];

package/lib/forms-ui/components/date-picker-ui/yearpicker.component.d.ts

@@ -1,6 +1,12 @@
 import { OnInit } from '@angular/core';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 import * as i0 from "@angular/core";
+/**
+ * Year selection view for the datepicker.
+ *
+ * Displays a grid of years for selecting a year within a range.
+ * Used internally by DatePickerInnerComponent.
+ */
 export declare class YearPickerComponent implements OnInit {
     datePicker: DatePickerInnerComponent;
     title: string;

package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.d.ts

@@ -22,16 +22,41 @@ export interface DragAndDropListActionEvent {
     actionId: string;
     item: string;
 }
+/**
+ * Individual item within a drag-and-drop list.
+ *
+ * Supports custom templates and optional action buttons.
+ *
+ * ### Projection slots
+ * - `customTemplate`: Custom template for the item content. If not provided, displays the item string with a drag handle.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-drag-and-drop-list-item
+ *   [item]="'Task 1'"
+ *   [draggable]="true"
+ *   [actions]="[{ id: 'delete', label: 'Delete', icon: 'delete', showOnlyOnHover: true }]"
+ *   (action)="handleAction($event)"
+ * ></lx-drag-and-drop-list-item>
+ * ```
+ */
 export declare class DragAndDropListItemComponent {
     private element;
     readonly NAME = "DragAndDropListItemComponent";
+    /** The string representation of the item, used as the default display text. */
     item: string;
+    /**
+     * Whether the item can be dragged.
+     * @default true
+     */
     draggable: boolean;
     /**
-     * An array of DragAndDropListActions
-     * When this array is defined, the drag handle is shown at the start of an item and the action buttons are rendered in their provided order at the right end of an item.
+     * An array of DragAndDropListActions.
+     * When defined, the drag handle is shown at the start of an item and action buttons are rendered at the right end.
      */
     actions?: DragAndDropListAction[];
+    /** Emitted when an action button is clicked. */
     action: EventEmitter<DragAndDropListActionEvent>;
     get draggingDisabled(): boolean;
     get hasCustomTemplate(): boolean;

package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts

@@ -12,6 +12,27 @@ export interface DragAndDropListMoveIndexEvent {
     index: number;
     previous: number;
 }
+/**
+ * Sortable list with drag-and-drop and keyboard navigation support.
+ *
+ * Items can be reordered via mouse drag or keyboard controls (Arrow keys, Space).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-drag-and-drop-list
+ *   [label]="'My Tasks'"
+ *   (moveToIndex)="handleReorder($event)"
+ * >
+ *   @for (task of tasks; track $index) {
+ *     <lx-drag-and-drop-list-item
+ *       [item]="task.name"
+ *       [draggable]="true"
+ *     />
+ *   }
+ * </lx-drag-and-drop-list>
+ * ```
+ */
 export declare class DragAndDropListComponent implements AfterContentInit, AfterViewInit {
     /** @internal */
     readonly NAME = "DragAndDropListComponent";
@@ -19,21 +40,31 @@ export declare class DragAndDropListComponent implements AfterContentInit, After
     items$: Observable<DragAndDropListItemComponent[]>;
     /** @internal */
     keyboardSortableItems$: Observable<KeyboardSortableItemDirective[]>;
-    /**
-     * A label for describing this list.
-     */
+    /** A label for describing this list. */
     label?: string | undefined;
     /**
-     * Override the global label font weight of 700
+     * Override the global label font weight.
+     * @default 700
      */
     labelFontWeight?: number;
+    /**
+     * Color theme of the list items.
+     * @default 'light'
+     */
     color?: 'light' | 'dark';
+    /**
+     * Font size of the list items.
+     * @default 'normal'
+     */
     fontSize?: 'normal' | 'big';
     /**
-     * Use the moveToIndex Output in favor of moveItem,
-     * when moving is restricted to one item through this.draggableItem.
+     * Emitted when an item is moved, providing the new and previous index.
+     * Use this when you need index-based reordering.
      */
     moveToIndex: EventEmitter<DragAndDropListMoveIndexEvent>;
+    /**
+     * Emitted when an item is moved, providing the item data and new index.
+     */
     moveItem: EventEmitter<DragAndDropListMoveEvent>;
     /** @internal */
     private _items;

package/lib/forms-ui/components/error-message/error-message.component.d.ts

@@ -1,5 +1,20 @@
 import * as i0 from "@angular/core";
+/**
+ * Displays form validation error messages.
+ *
+ * Shows either projected content or a programmatically set error message.
+ *
+ * ### Projection slots
+ * - Default slot: Static error message text. Hidden but captured for display.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-error-message>This field is required</lx-error-message>
+ * ```
+ */
 export declare class ErrorMessageComponent {
+    /** Signal for setting error message programmatically. */
     readonly dynamicErrorMessage: import("@angular/core").WritableSignal<string>;
     private readonly wrapper;
     protected computedErrorMessage: import("@angular/core").Signal<string>;

package/lib/forms-ui/components/form-error/form-error.component.d.ts

@@ -1,9 +1,27 @@
 import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import * as i0 from "@angular/core";
+/**
+ * Displays translated form validation errors for a specific form control.
+ *
+ * Automatically updates when form errors change.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-form-error
+ *   [form]="myFormGroup"
+ *   [controlName]="'email'"
+ *   [namespace]="'USER_FORM'"
+ * ></lx-form-error>
+ * ```
+ */
 export declare class FormErrorComponent implements OnInit, OnChanges, OnDestroy {
+    /** Translation namespace prefix for error messages (e.g., 'USER_FORM'). */
     namespace: string;
+    /** The FormGroup containing the control to validate. */
     form: UntypedFormGroup;
+    /** The name of the form control to display errors for. */
     controlName: string;
     /** @internal */
     translationKeys: string[];

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

@@ -1,9 +1,36 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
+/**
+ * A directive applied to native `<input>` elements to provide consistent styling and automatic error state handling.
+ * Integrates with Angular's `NgControl` to automatically apply error and disabled classes based on form control state.
+ * The directive listens to form control status changes and updates the visual state accordingly.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <input lx-input type="text" [formControl]="nameControl" />
+ * ```
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <input lx-input type="email" [error]="true" [disabled]="false" />
+ * ```
+ */
 export declare class InputComponent implements OnInit, OnDestroy {
     ngControl?: NgControl | undefined;
+    /**
+     * Whether to display the input in an error state (applies 'error' CSS class).
+     * Automatically updated when used with `NgControl` based on validation state.
+     * @default false
+     */
     error: boolean;
+    /**
+     * Whether the input is disabled (applies 'disabled' CSS class).
+     * Automatically updated when used with `NgControl` based on control state.
+     * @default false
+     */
     disabled: boolean;
     private destroyed$;
     constructor(ngControl?: NgControl | undefined);

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

@@ -1,9 +1,39 @@
 import { EventEmitter, TemplateRef } from '@angular/core';
 import { KeyboardSelectDirective } from '../../keyboard-select.directive';
 import * as i0 from "@angular/core";
+/**
+ * Displays selected items in a multi-select component.
+ *
+ * Items can be rendered as tokens or custom templates.
+ *
+ * ### Projection slots
+ * - `innerSelectionTemplate`: Custom template for rendering each selected item.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-multi-select-selection
+ *   [selection]="selectedItems"
+ *   [tokenize]="true"
+ *   (removeItem)="handleRemove($event)"
+ * >
+ *   <ng-template #innerSelectionTemplate let-item>
+ *     {{ item.name }}
+ *   </ng-template>
+ * </lx-multi-select-selection>
+ * ```
+ */
 export declare class MultiSelectSelectionComponent extends KeyboardSelectDirective {
+    /**
+     * Array of selected items to display.
+     */
     selection: import("@angular/core").InputSignal<any[] | null | undefined>;
+    /**
+     * Whether to render items as tokens (pills).
+     * @default true
+     */
     tokenize: import("@angular/core").InputSignal<boolean>;
+    /** Emitted when an item is clicked for removal. */
     removeItem: EventEmitter<unknown>;
     selectionTemplate: TemplateRef<any> | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectSelectionComponent, never>;

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

@@ -13,6 +13,63 @@ export type MultiSelectRemoveItemEvent = {
      */
     isMouse: boolean;
 };
+/**
+ * A dropdown component for selecting multiple values from a list of options.
+ * Implements `ControlValueAccessor` for seamless integration with Angular reactive forms.
+ * Supports keyboard navigation, custom templates, and various sizing options.
+ *
+ * ### Projection slots
+ * - `.pills`: Contains the pill list for selected items (`lx-pill-list`).
+ *   The pill list shows removable pills for each selected item.
+ *   Use `lx-pill-item` inside a `#pillTemplate` for custom pill rendering.
+ * - `.dropdownComponent`: Contains the dropdown (`lx-basic-dropdown`)
+ *
+ * Alternatively, use `lxSelectDropdown` directive on `<ng-template>` for the dropdown,
+ * and `#selectionTemplate` on `<ng-template>` for tokenized selection display.
+ *
+ * ### Example — with pill list and basic dropdown
+ * @example
+ * ```html
+ * <lx-multi-select
+ *   #multiSelect
+ *   [(selection)]="selectedItems"
+ *   (query)="searchTerm = $event">
+ *   <lx-pill-list
+ *     class="pills"
+ *     [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
+ *     [pills]="selectedItems"
+ *     labelKey="name"
+ *     itemKey="id"
+ *     (remove)="multiSelect.removeItem($event)">
+ *   </lx-pill-list>
+ *   <lx-basic-dropdown
+ *     class="dropdownComponent"
+ *     [keyboardSelectAction]="multiSelect.optionsKeyboardSelectAction$"
+ *     [options]="options | lxFilterBySelection: selectedItems | lxFilterByTerm: { term: searchTerm }"
+ *     labelKey="name"
+ *     (onItemSelected)="multiSelect.addItemToSelection($event)">
+ *   </lx-basic-dropdown>
+ * </lx-multi-select>
+ * ```
+ *
+ * ### Example — with custom pill template
+ * @example
+ * ```html
+ * <lx-multi-select #multiSelect [(selection)]="selectedItems">
+ *   <lx-pill-list
+ *     class="pills"
+ *     [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
+ *     [pills]="selectedItems"
+ *     itemKey="id"
+ *     (remove)="multiSelect.removeItem($event)">
+ *     <ng-template #pillTemplate let-pill>
+ *       <lx-pill-item [label]="pill.name" [item]="pill" [class.readOnly]="pill.readOnly" />
+ *     </ng-template>
+ *   </lx-pill-list>
+ *   <!-- dropdown omitted for brevity -->
+ * </lx-multi-select>
+ * ```
+ */
 export declare class MultiSelectComponent extends BaseSelectDirective implements AfterViewInit, ControlValueAccessor {
     private cd;
     /** @internal */
@@ -23,12 +80,35 @@ export declare class MultiSelectComponent extends BaseSelectDirective implements
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition: number, keyCode: number): number;
     /** @internal */
     static getKeyboardSelectAction(cursorPosition: number, keyCode: number): KeyboardSelectAction | null;
+    /**
+     * Whether to visually mark the input as invalid.
+     */
     markInvalid: boolean;
+    /**
+     * Array of currently selected items.
+     */
     selection?: any[] | null;
+    /**
+     * Visual size variant of the multi-select component.
+     * @default 'default'
+     */
     size: MultiSelectSize;
+    /**
+     * Optional ID attribute for the input element.
+     */
     inputId?: string;
+    /**
+     * Whether pressing Tab should close the dropdown.
+     * @default true
+     */
     closeDropdownOnTab: boolean;
+    /**
+     * Event emitted when the selection changes.
+     */
     selectionChange: EventEmitter<any[]>;
+    /**
+     * Event emitted when the input loses focus.
+     */
     blur: EventEmitter<void>;
     /** @internal */
     explicitDropdown?: TemplateRef<any>;