@leanix/components 0.4.406 → 0.4.408

package/fesm2022/leanix-components.mjs

@@ -50,11 +50,31 @@ const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
 const LOCALE_FN = new InjectionToken('LOCALE_FN');
 const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
 
+/**
+ * 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';
+ * ```
+ */
 class BadgeComponent {
     constructor() {
+        /**
+         * The color of the badge component
+         */
         this.color = 'blue';
+        /**
+         * 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.
+         */
         this.calculateColorsDynamically = false;
+        /** @internal */
         this.textColor = '';
+        /** @internal */
         this.backGroundColor = '';
     }
     ngOnInit() {
@@ -106,13 +126,31 @@ const BANNER_SIZE = {
     SMALL: 'small'
 };
 
+/**
+ * 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.
+ */
 class BannerComponent {
     constructor() {
         this._type = signal(BANNER_TYPE.WARNING);
         this._size = signal(BANNER_SIZE.BIG);
+        /** @internal */
         this.showIcon = signal(false);
+        /** @internal */
         this.iconClass = signal('');
     }
+    /**
+     * The type of the banner
+     */
     set type(type) {
         this._type.set(type);
         this.iconClass.set(this.getIconClass(type));
@@ -120,6 +158,9 @@ class BannerComponent {
     get type() {
         return this._type();
     }
+    /**
+     * The size of the banner
+     */
     set size(size) {
         this._size.set(size);
         this.showIcon.set(size === BANNER_SIZE.BIG);
@@ -130,6 +171,7 @@ class BannerComponent {
     ngOnInit() {
         this.showIcon.set(this.size === BANNER_SIZE.BIG);
     }
+    /** @internal */
     getIconClass(type) {
         switch (type) {
             case BANNER_TYPE.SUCCESS:
@@ -185,6 +227,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['class.borderSeparator']
             }] } });
 
+/**
+ * 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';
+ * ```
+ */
 class TinySpinnerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TinySpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TinySpinnerComponent, isStandalone: true, selector: "lx-tiny-spinner", ngImport: i0, template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\n" }); }
@@ -194,16 +247,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{ selector: 'lx-tiny-spinner', standalone: true, template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\n" }]
         }] });
 
+/**
+ * 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';
+ * ```
+ */
 class ButtonComponent {
     constructor() {
+        /**
+         * The size of the button.
+         */
         this.size = 'medium';
+        /**
+         * The color of the button.
+         */
         this.color = 'default';
+        /**
+         * The mode of the button.
+         */
         this.mode = 'solid';
+        /**
+         * The pressed state of the button. This simulates the `:active` state of the button.
+         */
         this.pressed = false;
+        /**
+         * The selected state of the button. This simulates the `:hover` state of the button.
+         */
         this.selected = false;
+        /**
+         * This makes the button square.
+         */
         this.square = false;
+        /**
+         * This makes corners rounded. Use with `square` for a true circle.
+         */
         this.circle = false;
+        /**
+         * This disables the button.
+         */
         this.disabled = false;
+        /**
+         * This shows a spinner inside the button.
+         */
         this.showSpinner = false;
     }
     get isDisabled() {
@@ -262,8 +354,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['disabled']
             }] } });
 
+/**
+ * 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';
+ * ```
+ */
 class CardComponent {
     constructor() {
+        /**
+         * The style of the card.
+         */
         this.dataStyle = 'white';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -328,9 +435,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
+/**
+ * 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';
+ * ```
+ */
 class CounterComponent {
     constructor() {
+        /** The size of the counter. */
         this.size = 'default';
+        /** The color of the counter. */
         this.color = 'primary';
     }
     get classes() {
@@ -804,7 +924,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
+/**
+ * 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';
+ * ```
+ */
 class TooltipDirective {
+    /** The position of the tooltip. */
     set lxTooltipPosition(value) {
         this.position = {
             x: value && isValidX(value.x) ? value.x : 'center',
@@ -823,6 +955,7 @@ class TooltipDirective {
             x: 'center',
             y: 'top'
         };
+        /** Whether the tooltip content is HTML. */
         this.lxTooltipIsHtmlContent = false;
         this.mouseOrFocusOnHost = false;
     }
@@ -848,6 +981,7 @@ class TooltipDirective {
             }
         }
     }
+    /** @internal */
     show() {
         this.mouseOrFocusOnHost = true;
         setTimeout(() => {
@@ -866,6 +1000,7 @@ class TooltipDirective {
         this.mouseOrFocusOnHost = false;
         this.overlayRef?.dispose();
     }
+    /** @internal */
     hide() {
         this.mouseOrFocusOnHost = false;
         this.ariaDescriber.removeDescription(this.elementRef.nativeElement, this.tooltipRef?.location.nativeElement);
@@ -906,15 +1041,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['blur']
             }] } });
 
+/**
+ * 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.
+ */
 class IntegrationLinkCardComponent {
     constructor() {
+        /**
+         * Determines if the integration is in an inactive state
+         * When set to true, the card will display in an inactive state
+         * */
         this.isInactive = false;
+        /** Event emitted when the action button is clicked */
         this.actionButtonClicked = new EventEmitter();
+        /** Event emitted when the link is clicked */
         this.linkClicked = new EventEmitter();
     }
+    /** @internal */
     onActionButtonClicked() {
         this.actionButtonClicked.emit();
     }
+    /** @internal */
     onLinkClicked(event) {
         this.linkClicked.emit(event);
     }
@@ -990,19 +1171,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
+/**
+ * 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).
+ */
 class StepperComponent extends CdkStepper {
     // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
     // Storybook smoke tests for stepper component are failing without this constructor
     constructor(_dir, _changeDetectorRef, _elementRef) {
         super(_dir, _changeDetectorRef, _elementRef);
+        /** @internal */
         this.size = 'normal';
     }
     get isSmallVariant() {
         return this.size === 'small';
     }
+    /** @internal */
     isCompleted(index) {
         return index < this.selectedIndex;
     }
+    /** @internal */
     isActiveStep(index) {
         return index === this.selectedIndex;
     }
@@ -2164,14 +2385,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
+/**
+ * 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';
+ * ```
+ */
 class ContentPanelComponent {
     constructor() {
-        this.baseClass = 'contentPanel';
+        /** Event emitted when the close button is clicked */
         this.contentPanelClose = new EventEmitter();
+        /** @internal */
+        this.baseClass = 'contentPanel';
     }
+    /** @internal */
     onClose() {
         this.contentPanelClose.emit();
     }
+    /** @internal */
     scrollToTop() {
         this.body.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
     }
@@ -2190,6 +2426,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['body']
             }] } });
 
+/**
+ * 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.
+ */
 class SkeletonComponent {
     constructor() {
         /**
@@ -3142,9 +3396,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: [TooltipDirective, { descendants: true }]
             }] } });
 
+/**
+ * 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';
+ * ```
+ */
 class BreadcrumbComponent {
     constructor() {
+        /**
+         * Breadcrumbs array to build the component.
+         */
         this.breadcrumbs = [];
+        /** @internal */
         this.viewBreadcrumbs = [];
     }
     ngOnChanges(changes) {
@@ -3170,6 +3439,7 @@ class BreadcrumbComponent {
             }, []);
         }
     }
+    /** @internal */
     isEllipsedBreadcrumb(breadcrumb) {
         return !!breadcrumb.breadcrumbs;
     }
@@ -4778,46 +5048,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 const DEFAULT_MIN_DATE = new Date('0000-01-01');
 const DEFAULT_MAX_DATE = new Date('9999-12-31');
+/**
+ * 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';
+ * ```
+ */
 class DateInputComponent {
     constructor(cd, dateFormatsProvider, getDateFnLocale) {
         this.cd = cd;
         this.dateFormatsProvider = dateFormatsProvider;
         this.getDateFnLocale = getDateFnLocale;
-        this.date = null; // main date input; this is also the one used for ngModel & formControl!
-        this.dateChange = new EventEmitter(); // triggered whenever the date changes
-        this.dateString = null; // secondary, alternative input with date string
-        this.dateStringChange = new EventEmitter(); // triggered whenever the date changes
-        // Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects
+        /** The initial date value for the date input field. This is used for `ngModel` and `formControl`. */
+        this.date = null;
+        /** Secondary, alternative input with date string */
+        this.dateString = null;
+        /** Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects */
         this.valueAccessor = 'date';
-        this.inputId = ''; // id to be set on input to correspond to outside label
+        /** ID to be set on input to correspond to outside label */
+        this.inputId = '';
+        /** The rendering style of the date input component. Can be one of "LINK", "BUTTON", or "INPUT". */
         this.renderingStyle = 'INPUT';
+        /** The placeholder text to show in the date input field when there is no date selected */
         this.placeholder = 'yyyy-mm-dd';
-        this.cdk = true; // Deactivate to use old date picker
-        //--- Inputs replicated from datepicker; (selectionDone) is not needed, as (dateChange) is equivalen
-        this.datepickerMode = 'day'; // sets datepicker mode, supports: day, month, year
-        this.minDate = DEFAULT_MIN_DATE; // oldest selectable date
-        this.maxDate = DEFAULT_MAX_DATE; // latest selectable date
-        this.minMode = 'day'; // set lower datepicker mode, supports: day, month, year
-        this.maxMode = 'year'; // sets upper datepicker mode, supports: day, month, year
-        this.showWeeks = true; // if false week numbers will be hidden
-        this.formatDay = 'DD'; // format of day in month
-        this.formatMonth = 'MMMM'; // format of month in year
-        this.formatYear = 'YYYY'; // format of year in year range
-        this.formatDayHeader = 'dd'; // format of day in week header
-        this.formatDayTitle = 'MMMM YYYY'; // format of title when selecting day
-        this.formatMonthTitle = 'YYYY'; // format of title when selecting month
-        this.startingDay = 0; // starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public
-        this.yearRange = 20; // number of years displayed in year selection
-        this.onlyCurrentMonth = false; // if true only dates from the currently displayed month will be shown
-        this.shortcutPropagation = false; //  if true shortcut`s event propagation will be disabled
-        this.customClass = []; // array of custom css classes to be applied to
-        this.dateDisabled = []; // array of disabled dates if mode is day, or years, etc.
+        /** Deactivate to use old date picker */
+        this.cdk = true;
+        /** Sets datepicker mode, supports: day, month, year */
+        this.datepickerMode = 'day';
+        /** Oldest selectable date */
+        this.minDate = DEFAULT_MIN_DATE;
+        /** Latest selectable date */
+        this.maxDate = DEFAULT_MAX_DATE;
+        /** Set lower datepicker mode, supports: day, month, year */
+        this.minMode = 'day';
+        /** Sets upper datepicker mode, supports: day, month, year */
+        this.maxMode = 'year';
+        /** If false week numbers will be hidden */
+        this.showWeeks = true;
+        /** Format of day in month */
+        this.formatDay = 'DD';
+        /** Format of month in year */
+        this.formatMonth = 'MMMM';
+        /** Format of year in year range */
+        this.formatYear = 'YYYY';
+        /** Format of day in week header */
+        this.formatDayHeader = 'dd';
+        /** Format of title when selecting day */
+        this.formatDayTitle = 'MMMM YYYY';
+        /** Format of title when selecting month */
+        this.formatMonthTitle = 'YYYY';
+        /** Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public */
+        this.startingDay = 0;
+        /** Number of years displayed in year selection */
+        this.yearRange = 20;
+        /** If true only dates from the currently displayed month will be shown */
+        this.onlyCurrentMonth = false;
+        /** If true shortcut`s event propagation will be disabled */
+        this.shortcutPropagation = false;
+        /** Array of custom css classes to be applied to */
+        this.customClass = [];
+        /** Array of disabled dates if mode is day, or years, etc. */
+        this.dateDisabled = [];
+        /** If true, the date input field will be auto-focused when the component is first rendered. */
         this.autoFocus = false;
+        /** If true, the date input field will be marked as invalid. */
         this.markInvalid = false;
+        /** Triggered whenever the datepicker is closed */
         this.closeDateInput = new EventEmitter();
+        /** Triggered whenever the date changes */
+        this.dateStringChange = new EventEmitter();
+        /** Triggered whenever the date changes. */
+        this.dateChange = new EventEmitter();
+        /** @internal */
         this.showDatepicker = false;
+        /** @internal */
         this.destroyed$ = new Subject();
+        /** @internal */
         this.hasError = false;
+        /** @internal */
         this.propagateChange = (_date) => { };
         this.dateFormat = this.dateFormatsProvider.getDateFormat();
         // Patch DatePicker until https://github.com/valor-software/ng2-bootstrap/issues/1385 is resolved
@@ -4835,11 +5148,13 @@ class DateInputComponent {
             return format(date, f, { locale });
         };
     }
+    /** @internal */
     ngOnInit() {
         this.initDateString$.pipe(takeUntil(this.destroyed$)).subscribe((date) => {
             this.initDate = createDateFromDateString(date) ?? startOfDay(new Date());
         });
     }
+    /** @internal */
     ngOnChanges(changes) {
         if (changes['date']) {
             this.dateString = this.date ? convertDateToLocaleDateString(this.date) : null;
@@ -4848,25 +5163,31 @@ class DateInputComponent {
             this.onDateStringChange(this.dateString, false);
         }
     }
+    /** @internal */
     ngOnDestroy() {
         this.destroyed$.next();
     }
+    /** @internal */
     focus() {
         this.input.nativeElement.focus();
     }
+    /** @internal */
     showPopup() {
         this.showDatepicker = true;
         this.cd.detectChanges();
     }
+    /** @internal */
     togglePopup() {
         this.showDatepicker = !this.showDatepicker;
     }
+    /** @internal */
     hidePopup() {
         if (this.showDatepicker) {
             this.showDatepicker = false;
             this.closeDateInput.emit();
         }
     }
+    /** @internal */
     onDateStringChange(newDateString, emit = true) {
         if (isValidDateString(newDateString)) {
             const date = createDateFromDateString(newDateString);
@@ -4882,10 +5203,12 @@ class DateInputComponent {
             }
         }
     }
+    /** @internal */
     onSelectionDone(newDate) {
         this.updateDate(newDate);
         this.hidePopup();
     }
+    /** @internal */
     onBlur() {
         if (this.onTouched) {
             this.onTouched();
@@ -4907,8 +5230,10 @@ class DateInputComponent {
             this.formControl.updateValueAndValidity();
         }
     }
-    //--- Implement ControlValueAccessor
-    /** Write a new value to the element. */
+    /**
+     * Write a new value to the element.
+     * @internal
+     */
     writeValue(newDate) {
         if (this.valueAccessor === 'date') {
             this.date = newDate;
@@ -4919,7 +5244,10 @@ class DateInputComponent {
             this.onDateStringChange(this.dateString, false);
         }
     }
-    /** 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) {
         if (this.valueAccessor === 'date') {
             this.dateChange.pipe(takeUntil(this.destroyed$)).subscribe(fn);
@@ -4928,10 +5256,14 @@ class DateInputComponent {
             this.dateStringChange.pipe(takeUntil(this.destroyed$)).subscribe(fn);
         }
     }
-    /** 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) {
         this.onTouched = fn;
     }
+    /** @internal */
     validate(c) {
         this.formControl = c;
         return this.hasError
@@ -4944,7 +5276,7 @@ class DateInputComponent {
             : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DATE_FORMATS }, { token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid" }, outputs: { closeDateInput: "closeDateInput", dateStringChange: "dateStringChange", dateChange: "dateChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
         ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n          <i class=\"far fa-angle-down lx-margin-left\"></i>\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          [lxMarkInvalid]=\"markInvalid\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          />\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [lxMarkInvalid]=\"markInvalid\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          />\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:14px}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:12px}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:12px}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
@@ -4979,12 +5311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     args: [DATE_FN_LOCALE]
                 }] }], propDecorators: { date: [{
                 type: Input
-            }], dateChange: [{
-                type: Output
             }], dateString: [{
                 type: Input
-            }], dateStringChange: [{
-                type: Output
             }], valueAccessor: [{
                 type: Input
             }], inputId: [{
@@ -4999,7 +5327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], initDateString: [{
                 type: Input
-            }], initDateString$: [], minDate: [{
+            }], minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
@@ -5041,7 +5369,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], closeDateInput: [{
                 type: Output
-            }], input: [{
+            }], dateStringChange: [{
+                type: Output
+            }], dateChange: [{
+                type: Output
+            }], initDateString$: [], input: [{
                 type: ViewChild,
                 args: ['input']
             }], dateStringTemplate: [{
@@ -7539,29 +7871,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['queryInput', { static: true }]
             }] } });
 
+/**
+ * Switch component is a toggle switch that can be used to switch between two states.
+ *
+ * ## Usage
+ *
+ * 1. Import the `SliderToggleComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { SliderToggleComponent } from '@leanix/components';
+ * ```
+ */
 class SliderToggleComponent {
     constructor() {
+        /** Size of the switch */
         this.size = 'small';
+        /** Whether the switch is disabled */
         this.disabled = false;
+        /** Whether the label is in front of the switch */
         this.labelInFront = true;
+        /** Event that is emitted when the switch is toggled */
         this.toggle = new EventEmitter();
     }
+    /** @internal */
     onToggle() {
         this.toggle.emit(!this.value);
     }
     get id() {
         return this.elementId ? `tour${this.elementId}` : null;
     }
+    /** @internal */
     focus(checkbox) {
         // without a delay the checkbox will not be focused again
         setTimeout(() => checkbox.focus(), 150);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SliderToggleComponent, isStandalone: true, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.wrapper.withLabelBehind .checkbox{margin-right:4px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--sapFontSize, 13.5px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SliderToggleComponent, isStandalone: true, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--sapFontSize, 13.5px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SliderToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-slider-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.wrapper.withLabelBehind .checkbox{margin-right:4px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--sapFontSize, 13.5px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"] }]
+            args: [{ selector: 'lx-slider-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--sapFontSize, 13.5px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], size: [{
@@ -8530,12 +8879,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }] });
 
 /**
- * GLOBAL PROVIDERS required for this component:
- * - provideAnimations()
+ * This documentation provides details on the usage and configuration of the Modal.
+ *
+ * ## Usage
+ *
+ * 1. Import `LxModalModule` and `LxCoreUiModule` modules from `@leanix/components` in your module where you want to use the component.
  *
- * ATTENTION - SCROLLABLE DIALOG:
+ * ```ts
+ * import { LxModalModule, LxCoreUiModule } from '@leanix/components';
+ * ```
+ *
+ * 2. Use the **lx-modal** component in your template with the parameters described below.
+ *
+ * - **`open`**: Whether the modal is open or closed.
+ * - **`size`**: 'dialog' | 'dialog-large'.
+ * - **`verticalScroll`**: Whether the modal is scrollable or not.
+ * - **`showHeader`**: Whether the modal has a header or not.
+ * - **`showFooter`**: Whether the modal has a footer or not.
+ * - **`showCloseButton`**: Whether to show the close button.
+ * - **`showBackButton`**: Whether to show the back button.
+ *
+ * 3. Use optional **lx-modal-header** component in your template with the parameters described below.
+ *
+ * - **`title`**: Title of the modal.
+ * - **`subtitle`**: Subtitle of the modal.
+ * - **`bottomBorder`**: Whether to show a bottom border.
+ *
+ * 4. Use optional **lx-modal-footer** component in your template with the parameters described below.
+ *
+ * - **`border`**: Whether to show the footer at the bottom of the modal.
+ *
+ * **GLOBAL PROVIDERS** required for this component:
+ * - `provideAnimations()`
+ *
+ * **ATTENTION - SCROLLABLE DIALOG**:
  * The <lx-modal> component when used as "dialog" is not designed to work with a
- * scrollable body (via "overflow: auto | scroll") in combination with dropdowns.
+ * scrollable body (via `overflow: auto | scroll`) in combination with dropdowns.
  * The overflow on the body will also clip the dropdowns, which is expected.
  *
  * Reasoning:
@@ -8544,12 +8923,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * requires scrolling, we should discuss whether to put it into a dialog at all
  * and rather think about putting the content on a separate route or
  * using the fullscreen version of the modal.
- *
  */
 class ModalComponent {
     get content() {
         return this.explicitContent || this.implicitContent;
     }
+    /** @internal */
     onEscape() {
         if (this.open && this.showCloseButton) {
             this.closeModal(ModalCloseClickLocation.Escape);
@@ -8560,21 +8939,36 @@ class ModalComponent {
         this.renderer = renderer;
         this.closeModal$ = closeModal$;
         this.focusTrap = focusTrap;
+        /** @internal */
         this.NAME = 'ModalComponent';
+        /** Whether the modal is open or closed. */
         this.open = false;
+        /** Whether to show the close button. */
         this.showCloseButton = true;
+        /** Whether to show the back button. */
         this.showBackButton = false;
         /*
          * If true, then the content area scrolls vertically instead of expanding its height.
          * This can be a problem if the content has dropdowns or date inputs, but can be good if the content has a huge amount of text.
          */
         this.verticalScroll = false;
+        /** The size of the modal. */
         this.size = 'fullscreen';
-        this.minWidth = '600px'; // NB: Some modal implementations rely on this minWidth being 600px
+        /**
+         * Minimum width of the modal.
+         *
+         * _NB: Some modal implementations rely on this minWidth being 600px_
+         */
+        this.minWidth = '600px';
+        /** Whether the modal is a focus trap. */
         this.isFocusTrap = false;
+        /** Event emitted when the modal is closed. */
         this.close = new EventEmitter();
+        /** Event emitted when the back button is clicked. */
         this.back = new EventEmitter();
+        /** @internal */
         this.closeLocation = ModalCloseClickLocation;
+        /** @internal */
         this.destroyed$ = new Subject();
     }
     ngOnInit() {
@@ -8634,6 +9028,7 @@ class ModalComponent {
                 .subscribe(() => this.openModal());
         }
     }
+    /** @internal */
     openModal() {
         this.oldOverflow = document.documentElement.style.overflowY;
         if (this.size === 'fullscreen') {
@@ -8642,6 +9037,7 @@ class ModalComponent {
         this.overlayRef.attach(this.cdkPortal);
         this.trapFocusInModal(this.overlayRef.hostElement);
     }
+    /** @internal */
     emitBack() {
         this.back.emit();
     }
@@ -8654,6 +9050,7 @@ class ModalComponent {
             this.overlayRef.dispose();
         }
     }
+    /** @internal */
     async closeModal(closeLocation) {
         if (!this.canModalBeClosed || (await this.canModalBeClosed(closeLocation))) {
             this.open = false;
@@ -8778,7 +9175,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }] });
 
 /**
- * HOW TO USE
+ * The Popover component is based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
+ *
+ * ## Usage
+ *
+ * 1. Import `LxPopoverUiModule` and `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxPopoverUiModule, LxCoreUiModule } from '@leanix/components';
+ * ```
  *
  * This popover encapsulates this open source library: https://github.com/ncstate-sat/popover,
  * make sure to also check out the docs over there.
@@ -8789,7 +9194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  *
  * For use case 1. you would use the lxPopoverHover directive, which exports as hoverAnchor.
  *
- * Example:
+ * ### Example:
+ * ```html
  * <div lxPopoverHover
  *      hoverAnchor
  *      satPopoverAnchor
@@ -8799,13 +9205,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  *             verticalAlign="center">
  *    <p>Popover content</p>
  * </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:
+ * ```html
  * <div lxPopoverClick
  *      clickAnchor
  *      satPopoverAnchor
@@ -8817,21 +9225,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  *             #popover>
  *    <p>Popover content</p>
  * </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:
- *  <div [satPopoverAnchor]="popover.satPopover"></div>
+ * ### Example:
+ * ```html
+ * <div [satPopoverAnchor]="popover.satPopover"></div>
  * <lx-popover #popover>
  *    <p>Popover content</p>
  * </lx-popover>
+ * ```
  */
 class PopoverComponent {
     constructor() {
+        /** Whether to apply margins. */
         this.noMargin = false;
+        /** Whether to allow the popover to overflow the viewport. */
         this.allowOverflow = false;
+        /** Whether to focus the first focusable element in the popover when it is opened. */
         this.autoFocus = false;
+        /** Whether to restore focus to the previously-focused element when the popover is closed. */
         this.restoreFocus = true;
         /**
          * If you have a popover, that should usually be displayed above or below its anchor,
@@ -8842,7 +9257,9 @@ class PopoverComponent {
          * position of the popover after opening.
          */
         this.adaptMarginsForViewportAlignChange = false;
+        /** Event emitted when the popover is opened. */
         this.opened = new EventEmitter();
+        /** Event emitted when the popover is closed. */
         this.closed = new EventEmitter();
         this._isOpen = false;
     }
@@ -8857,21 +9274,26 @@ class PopoverComponent {
             this.marginClasses = this.getDefaultMarginClasses(this.horizontalAlign, this.verticalAlign);
         }
     }
+    /** @internal */
     open() {
         this.satPopover.open();
     }
+    /** @internal */
     close() {
         this.satPopover.close();
     }
+    /** @internal */
     onOpen() {
         this._isOpen = true;
         this.opened.emit();
     }
+    /** @internal */
     onAfterOpen() {
         if (this.adaptMarginsForViewportAlignChange) {
             this.marginClasses = this.getMarginClassesForClassList(this.satPopover._classList);
         }
     }
+    /** @internal */
     onClose() {
         this._isOpen = false;
         this.closed.emit();