@leanix/components 0.4.407 → 0.4.409

package/index.d.ts

@@ -38,6 +38,7 @@ export * from './lib/core-ui/components/table/table-header/table-header.componen
 export * from './lib/core-ui/components/table/table.component';
 export * from './lib/core-ui/components/tiny-spinner/tiny-spinner.component';
 export * from './lib/core-ui/components/tokenizer/token/token.component';
+export * from './lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component';
 export * from './lib/core-ui/components/tokenizer/tokenizer.component';
 export * from './lib/core-ui/tooltip/tooltip-position.interface';
 export * from './lib/core-ui/tooltip/tooltip.component';

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

@@ -1,10 +1,33 @@
 import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Badge component is used to show a small piece of information in a colored badge.
+ *
+ * ## Usage
+ *
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxCoreUiModule } from '@leanix/components';
+ * ```
+ */
 export declare class BadgeComponent implements OnInit {
+    /**
+     * The content to show in the badge
+     */
     content: string | number;
+    /**
+     * The color of the badge component
+     */
     color: 'blue' | 'gray' | 'red' | 'yellow' | 'green' | 'purple' | 'white';
+    /**
+     * If set to true, the badge will create a color for itself based on the content, ignoring other color settings.
+     * This could be useful if we want to show a range of different colors for different contents.
+     */
     calculateColorsDynamically: boolean;
+    /** @internal */
     textColor: string;
+    /** @internal */
     backGroundColor: string;
     ngOnInit(): void;
     get colorClass(): string;

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

@@ -1,16 +1,38 @@
 import { OnInit } from '@angular/core';
 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.
+ *
+ * ## Usage
+ *
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxCoreUiModule } from '@leanix/components';
+ * ```
+ *
+ * 2. Use the component in your template.
+ */
 export declare class BannerComponent implements OnInit {
     private readonly _type;
     private readonly _size;
+    /** @internal */
     readonly showIcon: import("@angular/core").WritableSignal<boolean>;
+    /** @internal */
     readonly iconClass: import("@angular/core").WritableSignal<string>;
+    /**
+     * The type of the banner
+     */
     set type(type: BannerTypes);
     get type(): BannerTypes;
+    /**
+     * The size of the banner
+     */
     set size(size: BannerSizes);
     get size(): BannerSizes;
     ngOnInit(): void;
+    /** @internal */
     getIconClass(type: BannerTypes): "fa-check" | "fa-info" | "fa-exclamation" | "fa-times";
     static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "lx-banner", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;

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

@@ -1,13 +1,52 @@
 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.
+ *
+ * ## Usage
+ *
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxCoreUiModule } from '@leanix/components';
+ * ```
+ */
 export declare class ButtonComponent {
+    /**
+     * The size of the button.
+     */
     size: 'small' | 'medium' | 'large' | 'auto';
+    /**
+     * The color of the button.
+     */
     color: 'default' | 'primary' | 'danger' | 'success' | 'light';
+    /**
+     * The mode of the button.
+     */
     mode: 'solid' | 'ghost' | 'outline' | 'link';
+    /**
+     * The pressed state of the button. This simulates the `:active` state of the button.
+     */
     pressed: boolean;
+    /**
+     * The selected state of the button. This simulates the `:hover` state of the button.
+     */
     selected: boolean;
+    /**
+     * This makes the button square.
+     */
     square: boolean;
+    /**
+     * This makes corners rounded. Use with `square` for a true circle.
+     */
     circle: boolean;
+    /**
+     * This disables the button.
+     */
     disabled: boolean;
+    /**
+     * This shows a spinner inside the button.
+     */
     showSpinner: boolean;
     get isDisabled(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;

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

@@ -1,5 +1,20 @@
 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.
+ *
+ * ## Usage
+ *
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxCoreUiModule } from '@leanix/components';
+ * ```
+ */
 export declare class CardComponent {
+    /**
+     * The style of the card.
+     */
     dataStyle: 'white';
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "lx-card", never, { "dataStyle": { "alias": "dataStyle"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/core-ui/components/content-panel/content-panel.component.d.ts

@@ -1,11 +1,28 @@
 import { ElementRef, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * A content panel component is used to show a panel with a title and content.
+ *
+ * ## Usage
+ *
+ * 1. Import the `ContentPanelComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { ContentPanelComponent } from '@leanix/components';
+ * ```
+ */
 export declare class ContentPanelComponent {
-    baseClass: string;
+    /** The title text at the panel header */
     title?: string;
+    /** Event emitted when the close button is clicked */
     contentPanelClose: EventEmitter<void>;
+    /** @internal */
     body: ElementRef;
+    /** @internal */
+    baseClass: string;
+    /** @internal */
     onClose(): void;
+    /** @internal */
     scrollToTop(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ContentPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ContentPanelComponent, "lx-content-panel", never, { "title": { "alias": "title"; "required": false; }; }, { "contentPanelClose": "contentPanelClose"; }, never, ["*"], true, never>;

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

@@ -1,7 +1,21 @@
 import * as i0 from "@angular/core";
+/**
+ * Counter component is used to create a counter with different styles and sizes.
+ *
+ * ## Usage
+ *
+ * 1. Import the `CounterComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { CounterComponent } from '@leanix/components';
+ * ```
+ */
 export declare class CounterComponent {
+    /** The content of the counter. */
     content?: string | number;
+    /** The size of the counter. */
     size: 'default' | 'small';
+    /** The color of the counter. */
     color: 'primary' | 'gray' | 'darkgray' | 'red' | 'yellow' | 'green';
     get classes(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CounterComponent, never>;

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

@@ -3,22 +3,82 @@ import * as i0 from "@angular/core";
 interface RouteQueryParams {
     [x: string]: string;
 }
+/**
+ * Integration Link Card Component is a card component that displays information about an integration link.
+ *
+ * This documentation provides details on the usage and configuration of the Integration Link Card Component.
+ *
+ * ## Usage
+ *
+ * 1. Import `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component, or in case of a standalone parent component, import the
+ *    `IntegrationLinkCardComponent` directly into your standalone component.
+ *
+ * - Module import:
+ *
+ * ```ts
+ * import { LxCoreUiModule } from '@leanix/components';
+ * ```
+ *
+ * - Standalone component import:
+ *
+ * ```ts
+ * import { IntegrationLinkCardComponent } from '@leanix/components';
+ *
+ * @Component({
+ *   selector: 'lx-my-component',
+ *   standalone: true,
+ *   imports: [IntegrationLinkCardComponent],
+ *   templateUrl: './my-component.component.html'
+ * })
+ * export class MyComponent {}
+ * ```
+ *
+ * ## Usage
+ *
+ * #### Required Inputs:
+ *
+ * - `sourceIconClasses` (`string`) - font awesome classes for source icon;
+ * - `sourceName` (`string`) - the name of the source associated with the integration card;
+ * - `title` (`string`) - the main title of the integration card.
+ */
 export declare class IntegrationLinkCardComponent {
+    /** Font awesome classes for source icon */
     sourceIconClasses: string;
+    /** The name of the source associated with the integration card */
     sourceName: string;
+    /** The main title of the integration card */
     title: string;
+    /**
+     * Determines if the integration is in an inactive state
+     * When set to true, the card will display in an inactive state
+     * */
     isInactive: boolean;
+    /** URL or route the card links to */
     link?: string;
+    /** Query parameters for the route */
     queryParams?: RouteQueryParams;
+    /**
+     * Determines if the link associated with the card is an external link.
+     * This influences how the link displayed. When set to true links open in a new browser tab
+     */
     externalLink?: boolean;
+    /** Content to be displayed within a link icon tooltip */
     tooltipContent?: string;
+    /** Content for a badge element on the card */
     badgeContent?: string;
+    /** The name or label of the primary action button on the card */
     actionButtonName?: string;
+    /** Timestamp related to the integration, such as the last updated time (relative time) */
     timestamp?: string;
+    /** Additional, less critical information to display on the card */
     tertiaryInfo?: string;
+    /** Event emitted when the action button is clicked */
     actionButtonClicked: EventEmitter<void>;
+    /** Event emitted when the link is clicked */
     linkClicked: EventEmitter<MouseEvent>;
+    /** @internal */
     onActionButtonClicked(): void;
+    /** @internal */
     onLinkClicked(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IntegrationLinkCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IntegrationLinkCardComponent, "lx-integration-link-card", never, { "sourceIconClasses": { "alias": "sourceIconClasses"; "required": true; }; "sourceName": { "alias": "sourceName"; "required": true; }; "title": { "alias": "title"; "required": true; }; "isInactive": { "alias": "isInactive"; "required": false; }; "link": { "alias": "link"; "required": false; }; "queryParams": { "alias": "queryParams"; "required": false; }; "externalLink": { "alias": "externalLink"; "required": false; }; "tooltipContent": { "alias": "tooltipContent"; "required": false; }; "badgeContent": { "alias": "badgeContent"; "required": false; }; "actionButtonName": { "alias": "actionButtonName"; "required": false; }; "timestamp": { "alias": "timestamp"; "required": false; }; "tertiaryInfo": { "alias": "tertiaryInfo"; "required": false; }; }, { "actionButtonClicked": "actionButtonClicked"; "linkClicked": "linkClicked"; }, never, never, true, never>;

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

@@ -1,4 +1,22 @@
 import * as i0 from "@angular/core";
+/**
+ * Skeleton is a component that can be used to show a loading state of a component.
+ *
+ * ## Usage
+ *
+ * 1. Import the `SkeletonComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { SkeletonComponent } from '@leanix/components';
+ * ```
+ *
+ * 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.
+ *
+ * To get started, import the `SkeletonComponent` in your Angular module or standalone component and use it in the
+ * template using the `<lx-skeleton />` selector with the desired width, height, and border radius.
+ */
 export declare class SkeletonComponent {
     /**
      * Width of the skeleton element. Valid CSS values are supported. Default is 100% width of the parent.

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

@@ -2,11 +2,51 @@ import { Directionality } from '@angular/cdk/bidi';
 import { CdkStepper } from '@angular/cdk/stepper';
 import { ChangeDetectorRef, ElementRef } from '@angular/core';
 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.
+ *
+ * ## 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
+ *    `StepperComponent` and `CdkStepperModule` directly into your standalone component.
+ *
+ * - Module import:
+ *
+ * ```ts
+ * import { LxCoreUiModule } from '@leanix/components';
+ * import { CdkStepperModule } from '@angular/cdk/stepper';
+ * ```
+ *
+ * - Standalone component import:
+ *
+ * ```ts
+ * import { StepperComponent } from '@leanix/components';
+ * import { CdkStepperModule } from '@angular/cdk/stepper';
+ *
+ * @Component({
+ *   selector: 'lx-my-component',
+ *   standalone: true,
+ *   imports: [CdkStepperModule, StepperComponent],
+ *   templateUrl: './my-component.component.html'
+ * })
+ * export class MyComponent {}
+ * ```
+ *
+ * 2. Use the component in your template. All steps added to the stepper should be wrapped in a `cdk-step` element.
+ *
+ * Since this component extends the Angular CDK `CdkStepper` component, all the inputs, outputs, and methods available in the
+ * `CdkStepper` component are also available in the `StepperComponent` and are documented in the
+ * [Angular CDK documentation](https://material.angular.io/cdk/stepper/api).
+ */
 export declare class StepperComponent extends CdkStepper {
+    /** @internal */
     size: 'small' | 'normal';
     constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
     get isSmallVariant(): boolean;
+    /** @internal */
     isCompleted(index: number): boolean;
+    /** @internal */
     isActiveStep(index: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "lx-stepper", never, {}, {}, never, never, true, never>;

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

@@ -1,4 +1,15 @@
 import * as i0 from "@angular/core";
+/**
+ * Tiny spinner component is used to show a small spinner.
+ *
+ * ## Usage
+ *
+ * 1. Import the `TinySpinnerComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { TinySpinnerComponent } from '@leanix/components';
+ * ```
+ */
 export declare class TinySpinnerComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<TinySpinnerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TinySpinnerComponent, "lx-tiny-spinner", never, {}, {}, never, never, true, never>;

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

@@ -0,0 +1,19 @@
+import { TemplateRef } from '@angular/core';
+import { SatPopoverComponent, SatPopoverHorizontalAlign, SatPopoverVerticalAlign } from '@ncstate/sat-popover';
+import { TokenizerComponent } from '../tokenizer.component';
+import * as i0 from "@angular/core";
+export declare class TokenizerOverflowPopoverComponent {
+    private destroyRef;
+    private overflowClickSubscription?;
+    protected startIndex: import("@angular/core").WritableSignal<number>;
+    private changeDetectorRef;
+    protected readonly popoverTemplate?: TemplateRef<unknown>;
+    protected readonly popover: SatPopoverComponent;
+    tokenizer: import("@angular/core").InputSignal<TokenizerComponent>;
+    horizontalAlign: import("@angular/core").InputSignal<SatPopoverHorizontalAlign>;
+    verticalAlign: import("@angular/core").InputSignal<SatPopoverVerticalAlign>;
+    constructor();
+    protected closePopover(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TokenizerOverflowPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TokenizerOverflowPopoverComponent, "lx-tokenizer-overflow-popover", never, { "tokenizer": { "alias": "tokenizer"; "required": true; "isSignal": true; }; "horizontalAlign": { "alias": "horizontalAlign"; "required": false; "isSignal": true; }; "verticalAlign": { "alias": "verticalAlign"; "required": false; "isSignal": true; }; }, {}, ["popoverTemplate"], never, true, never>;
+}

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

@@ -2,18 +2,33 @@ import { AriaDescriber } from '@angular/cdk/a11y';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Tooltip directive is used to show a tooltip on hover or focus on an element.
+ *
+ * ## Usage
+ *
+ * 1. Import the `TooltipDirective` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { TooltipDirective } from '@leanix/components';
+ * ```
+ */
 export declare class TooltipDirective implements OnChanges, OnDestroy {
     private overlayPositionBuilder;
     private elementRef;
     private overlay;
     private ariaDescriber;
+    /** The content of the tooltip. */
     content?: string | null;
+    /** The position of the tooltip. */
     set lxTooltipPosition(value: {
         x: string;
         y: string;
     } | undefined);
     private position;
+    /** The delay in milliseconds before the tooltip is shown. */
     lxTooltipDelay?: number;
+    /** Whether the tooltip content is HTML. */
     lxTooltipIsHtmlContent: boolean;
     private overlayRef?;
     private tooltipRef?;
@@ -21,8 +36,10 @@ export declare class TooltipDirective implements OnChanges, OnDestroy {
     get positionStrategy(): import("@angular/cdk/overlay").FlexibleConnectedPositionStrategy;
     constructor(overlayPositionBuilder: OverlayPositionBuilder, elementRef: ElementRef, overlay: Overlay, ariaDescriber: AriaDescriber);
     ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
     show(): void;
     ngOnDestroy(): void;
+    /** @internal */
     hide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[lxTooltip]", never, { "content": { "alias": "lxTooltip"; "required": false; }; "lxTooltipPosition": { "alias": "lxTooltipPosition"; "required": false; }; "lxTooltipDelay": { "alias": "lxTooltipDelay"; "required": false; }; "lxTooltipIsHtmlContent": { "alias": "lxTooltipIsHtmlContent"; "required": false; }; }, {}, never, never, true, never>;

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

@@ -9,10 +9,26 @@ interface EllipsedBreadcrumb {
     breadcrumbs: Breadcrumb[];
 }
 type ViewBreadcrumb = Breadcrumb | EllipsedBreadcrumb;
+/**
+ * Breadcrumb component is used to show a list of labels, usually to show the path of user's navigation.
+ *
+ * ## Usage
+ *
+ * 1. Import the LxFormsModule module from @leanix/components in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxFormsModule } from '@leanix/components';
+ * ```
+ */
 export declare class BreadcrumbComponent implements OnChanges {
+    /**
+     * Breadcrumbs array to build the component.
+     */
     breadcrumbs: Breadcrumb[];
+    /** @internal */
     viewBreadcrumbs: ViewBreadcrumb[];
     ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
     isEllipsedBreadcrumb(breadcrumb: ViewBreadcrumb): breadcrumb is EllipsedBreadcrumb;
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "lx-breadcrumb", never, { "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; }, {}, never, never, true, never>;

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

@@ -4,79 +4,152 @@ import { Observable, Subject } from 'rxjs';
 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.
+ *
+ * ## Usage
+ *
+ * 1. Import the `LxFormsUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxFormsUiModule } from '@leanix/components';
+ * ```
+ */
 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`. */
     date: Date | null;
-    dateChange: EventEmitter<Date | null>;
+    /** Secondary, alternative input with date string */
     dateString: string | null;
-    dateStringChange: EventEmitter<string | null>;
+    /** Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects */
     valueAccessor: 'date' | 'dateString';
+    /** ID to be set on input to correspond to outside label */
     inputId: string;
+    /** The rendering style of the date input component. Can be one of "LINK", "BUTTON", or "INPUT". */
     renderingStyle: DateInputRenderingStyle;
+    /** The placeholder text to show in the date input field when there is no date selected */
     placeholder: string;
+    /** Deactivate to use old date picker */
     cdk: boolean;
+    /** Sets datepicker mode, supports: day, month, year */
     datepickerMode: string;
+    /** Default date to show if ng-model value is not specified. Default date to show if ng-model value is not specified */
     initDateString: string;
-    initDateString$: Observable<string>;
+    /** Oldest selectable date */
     minDate: Date;
+    /** Latest selectable date */
     maxDate: Date;
+    /** Set lower datepicker mode, supports: day, month, year */
     minMode: string;
+    /** Sets upper datepicker mode, supports: day, month, year */
     maxMode: string;
+    /** If false week numbers will be hidden */
     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;
+    /** Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public */
     startingDay: number;
+    /** Number of years displayed in year selection */
     yearRange: number;
+    /** If true only dates from the currently displayed month will be shown */
     onlyCurrentMonth: boolean;
+    /** If true shortcut`s event propagation will be disabled */
     shortcutPropagation: boolean;
+    /** Array of custom css classes to be applied to */
     customClass: {
         date: Date;
         mode: string;
         clazz: string;
     }[];
+    /** If true, the date input field will be disabled. */
     disabled: boolean;
+    /** Array of disabled dates if mode is day, or years, etc. */
     dateDisabled: {
         date: Date;
         mode: string;
     }[];
+    /** If true, the date input field will be auto-focused when the component is first rendered. */
     autoFocus: boolean;
+    /** If true, the date input field will be marked as invalid. */
     markInvalid: boolean;
+    /** Triggered whenever the datepicker is closed */
     closeDateInput: EventEmitter<void>;
+    /** Triggered whenever the date changes */
+    dateStringChange: EventEmitter<string | null>;
+    /** Triggered whenever the date changes. */
+    dateChange: EventEmitter<Date | null>;
+    /** @internal */
+    initDateString$: Observable<string>;
+    /** @internal */
     input: ElementRef<HTMLInputElement>;
+    /** @internal */
     dateStringTemplate?: TemplateRef<any>;
+    /** @internal */
     showDatepicker: boolean;
+    /** @internal */
     dateFormat: string;
+    /** @internal */
     initDate: Date;
+    /** @internal */
     readonly destroyed$: Subject<void>;
     private formControl;
+    /** @internal */
     hasError: boolean;
+    /** @internal */
     onTouched: () => void;
+    /** @internal */
     propagateChange: (_date: Date | null) => void;
     constructor(cd: ChangeDetectorRef, dateFormatsProvider: DateFormatsProvider, getDateFnLocale?: Function | undefined);
+    /** @internal */
     ngOnInit(): void;
+    /** @internal */
     ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
     ngOnDestroy(): void;
+    /** @internal */
     focus(): void;
+    /** @internal */
     showPopup(): void;
+    /** @internal */
     togglePopup(): void;
+    /** @internal */
     hidePopup(): void;
+    /** @internal */
     onDateStringChange(newDateString: string | null, emit?: boolean): void;
+    /** @internal */
     onSelectionDone(newDate: Date): void;
+    /** @internal */
     onBlur(): void;
     private updateDate;
     private recheckErrors;
-    /** Write a new value to the element. */
+    /**
+     * Write a new value to the element.
+     * @internal
+     */
     writeValue(newDate: Date | string): void;
-    /** Set the function to be called when the control receives a change event. */
+    /**
+     * Set the function to be called when the control receives a change event.
+     * @internal
+     */
     registerOnChange(fn: any): void;
-    /** Set the function to be called when the control receives a touch event. */
+    /**
+     * Set the function to be called when the control receives a touch event.
+     * @internal
+     */
     registerOnTouched(fn: () => void): void;
+    /** @internal */
     validate(c: UntypedFormControl): {
         dateFormatError: {
             given: string | null;
@@ -84,5 +157,5 @@ export declare class DateInputComponent implements OnChanges, OnInit, OnDestroy,
         };
     } | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "lx-date-input", never, { "date": { "alias": "date"; "required": false; }; "dateString": { "alias": "dateString"; "required": false; }; "valueAccessor": { "alias": "valueAccessor"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "renderingStyle": { "alias": "renderingStyle"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "cdk": { "alias": "cdk"; "required": false; }; "datepickerMode": { "alias": "datepickerMode"; "required": false; }; "initDateString": { "alias": "initDateString"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minMode": { "alias": "minMode"; "required": false; }; "maxMode": { "alias": "maxMode"; "required": false; }; "showWeeks": { "alias": "showWeeks"; "required": false; }; "formatDay": { "alias": "formatDay"; "required": false; }; "formatMonth": { "alias": "formatMonth"; "required": false; }; "formatYear": { "alias": "formatYear"; "required": false; }; "formatDayHeader": { "alias": "formatDayHeader"; "required": false; }; "formatDayTitle": { "alias": "formatDayTitle"; "required": false; }; "formatMonthTitle": { "alias": "formatMonthTitle"; "required": false; }; "startingDay": { "alias": "startingDay"; "required": false; }; "yearRange": { "alias": "yearRange"; "required": false; }; "onlyCurrentMonth": { "alias": "onlyCurrentMonth"; "required": false; }; "shortcutPropagation": { "alias": "shortcutPropagation"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dateDisabled": { "alias": "dateDisabled"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "markInvalid": { "alias": "markInvalid"; "required": false; }; }, { "dateChange": "dateChange"; "dateStringChange": "dateStringChange"; "closeDateInput": "closeDateInput"; }, ["dateStringTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "lx-date-input", never, { "date": { "alias": "date"; "required": false; }; "dateString": { "alias": "dateString"; "required": false; }; "valueAccessor": { "alias": "valueAccessor"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "renderingStyle": { "alias": "renderingStyle"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "cdk": { "alias": "cdk"; "required": false; }; "datepickerMode": { "alias": "datepickerMode"; "required": false; }; "initDateString": { "alias": "initDateString"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minMode": { "alias": "minMode"; "required": false; }; "maxMode": { "alias": "maxMode"; "required": false; }; "showWeeks": { "alias": "showWeeks"; "required": false; }; "formatDay": { "alias": "formatDay"; "required": false; }; "formatMonth": { "alias": "formatMonth"; "required": false; }; "formatYear": { "alias": "formatYear"; "required": false; }; "formatDayHeader": { "alias": "formatDayHeader"; "required": false; }; "formatDayTitle": { "alias": "formatDayTitle"; "required": false; }; "formatMonthTitle": { "alias": "formatMonthTitle"; "required": false; }; "startingDay": { "alias": "startingDay"; "required": false; }; "yearRange": { "alias": "yearRange"; "required": false; }; "onlyCurrentMonth": { "alias": "onlyCurrentMonth"; "required": false; }; "shortcutPropagation": { "alias": "shortcutPropagation"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dateDisabled": { "alias": "dateDisabled"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "markInvalid": { "alias": "markInvalid"; "required": false; }; }, { "closeDateInput": "closeDateInput"; "dateStringChange": "dateStringChange"; "dateChange": "dateChange"; }, ["dateStringTemplate"], never, true, never>;
 }