@leanix/components 0.4.503 → 0.4.505

package/fesm2022/leanix-components.mjs

@@ -274,14 +274,6 @@ const ICON_MAP = {
 
 /**
  * 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() {
@@ -350,16 +342,6 @@ const BANNER_SIZE = {
 
 /**
  * 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() {
@@ -451,14 +433,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * 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 }); }
@@ -482,14 +456,6 @@ const LX_BUTTON_USE_SAP_ICONS = new InjectionToken('LX_BUTTON_USE_SAP_ICONS', {
 /**
  * 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 `ButtonComponent` from `@leanix/components` where you want to use the component.
- *
- * ```ts
- * import { ButtonComponent } from '@leanix/components';
- * ```
  */
 class ButtonComponent {
     constructor() {
@@ -650,14 +616,6 @@ function removeFontAwesomeVariant(iconName) {
 /**
  * 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() {
@@ -730,14 +688,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * 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() {
@@ -2365,14 +2315,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * 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. */
@@ -2651,20 +2593,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 /**
  * 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() {
@@ -3706,14 +3637,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * 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() {
@@ -5370,14 +5293,6 @@ 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) {
@@ -8007,17 +7922,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-/**
- * ## 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';
- * ```
- *
- * 2. Use the component in your template.
- */
 class SingleSelectComponent extends BaseSelectDirective {
     /** @internal */
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition, keyCode) {
@@ -8373,14 +8277,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * Switch component is a toggle switch that can be used to switch between two states.
- *
- * ## Usage
- *
- * 1. Import the `SwitchComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
- *
- * ```ts
- * import { SwitchComponent } from '@leanix/components';
- * ```
  */
 class SwitchComponent {
     constructor() {
@@ -9601,14 +9497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 /**
  * 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';
- * ```
- *
+ * ## Examples
+
  * This popover encapsulates this open source library: https://github.com/ncstate-sat/popover,
  * make sure to also check out the docs over there.
  *
@@ -10083,36 +9973,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: [RouterLinkActive]
             }] } });
 
-/**
- * ## Usage
- *
- * 1. Import the `LxTabUiModule` module from `@leanix/components` in your module where you want to use the component.
- *
- * ```ts
- * import { LxTabUiModule } from '@leanix/components';
- *
- * // ...
- *
- * @NgModule({
- *   // ...
- *   imports: [
- *     // ...
- *     LxTabUiModule
- *     // ...
- *   ]
- * })
- * export class MyModule {}
- * ```
- *
- * 2. Use the component in your template.
- */
 class TabGroupComponent {
+    /** @internal */
     get tabIds() {
         return this.tabs.map((t) => t.tabId);
     }
     get tabs() {
         return this.tabsQueryList?.toArray() || [];
     }
+    /** @internal */
     get activeTabPortal() {
         return this.tabs[this.selectedIndex]?.content;
     }
@@ -10126,8 +9995,10 @@ class TabGroupComponent {
         this.indexChange = new EventEmitter();
         /**
          * The tab that is currently focused via keyboard.
+         * @internal
          */
         this.focusedIndex = 0;
+        /** @internal */
         this.destroyed$ = new Subject();
         this.listenToFirstTabSelectByAngularRouterForTabLinks().subscribe((tab) => {
             // synchonize the focusedIndex and selectedIndex state with the tab that is active through the current route.
@@ -10163,12 +10034,14 @@ class TabGroupComponent {
     ngOnDestroy() {
         this.destroyed$.next();
     }
+    /** @internal */
     onFocusOut(event) {
         if (!this.tabListElement?.nativeElement?.contains(event.relatedTarget)) {
             // resync focused index on selected index when leaving tabs
             this.focusedIndex = this.selectedIndex;
         }
     }
+    /** @internal */
     switchTo(tab) {
         this.tabsQueryList?.forEach((t, index) => {
             t.isActive = t === tab;
@@ -10180,6 +10053,7 @@ class TabGroupComponent {
         });
         this.cd.markForCheck();
     }
+    /** @internal */
     handleKeyDown(event) {
         switch (event.code) {
             case LxTabGroupKeyCode.ArrowRight: