@leanix/components 0.4.472 → 0.4.474

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

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
 /**
  * The following CSS classes should be used to style this component. The use of the inputs is deprecated.
- * - fullSpace: Sets position to absolute with full height and width => fills ancestor with position set.
- * - fullSpaceFixed: Sets position to fixed with full height and width => fills window
+ * - `fullSpace`: Sets position to absolute with full height and width => fills ancestor with position set.
+ * - `fullSpaceFixed`: Sets position to fixed with full height and width => fills window
  *   (or ancestor with new rendering context, created, for example, with `transform: translate(0, 0)`
- * - fadeBackground: Sets background to 60% transparent white. TODO: Always use for fullSpace* classes and remove.
+ * - `fadeBackground`: Sets background to 60% transparent white. TODO: Always use for fullSpace* classes and remove.
  */
 export declare class SpinnerComponent {
     fadeBackground: boolean;

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

@@ -2,6 +2,45 @@ import { AfterContentInit, ChangeDetectorRef, DestroyRef, ElementRef, EventEmitt
 import { ResizeObserverService } from '../../services/resize-observer.service';
 import { TokenComponent } from './token/token.component';
 import * as i0 from "@angular/core";
+/**
+ * The tokenizer component (`lx-tokenizer`) is responsible for rendering a list of items into a container and hiding those that do not fit behind a placeholder. The items are represented as `lx-token`. Each `lx-token` allows to project any content into it, so anything can become a token. The tokenizer calculates how many items fit into the container (based on width), hiding those items that are overflowing and showing a overflow placeholder instead (e.g. "+4").
+ *
+ * ## Usage
+ *
+ * 1. Import `TokenizerComponent` & `TokenComponent` into your module or component.
+ * 2. Use the component in your template. All items should be wrapped in a `lx-token` element for the tokenizer to identify the individual tokens.
+ *
+ * ```ts
+ * import { TokenizerComponent } from '@leanix/components';
+ *
+ * @Component({
+ *   selector: 'lx-my-component',
+ *   standalone: true,
+ *   imports: [TokenizerComponent, TokenComponent],
+ *   template: `
+ *     <lx-tokenizer>
+ *       <lx-token>Token One</lx-token>
+ *       <lx-token>Token Two</lx-token>
+ *     </lx-tokenizer>
+ *   `
+ * })
+ * export class MyComponent {}
+ * ```
+ *
+ * ## API
+ *
+ * ### Inputs
+ *
+ * - `active`: Can be used to activate & deactivate tokenization
+ *
+ * ### Outputs
+ *
+ * - `overflowPlaceholderClick`: Fires when the user clicks on the overflow placeholder
+ *
+ * ### Content projection
+ *
+ * - `lx-token`: All `lx-tokens` will be projected into the tokenizer
+ */
 export declare class TokenizerComponent implements AfterContentInit {
     private elementRef;
     private destroyRef;

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

@@ -15,6 +15,8 @@ export type SingleSelectOptionGroup<T = any> = {
 };
 /**
  * Usage:
+ *
+ * ```
  * <lx-single-select
  *    #singleSelect
  *    [selection]="value"
@@ -29,7 +31,7 @@ export type SingleSelectOptionGroup<T = any> = {
  *     (onItemSelected)="singleSelect.selectOption($event)">
  *    </lx-option-group-dropdown>
  * </lx-single-select>
- *
+ * ```
  */
 export declare class OptionGroupDropdownComponent extends KeyboardSelectDirective {
     readonly NAME = "OptionGroupDropdownComponent";

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

@@ -9,11 +9,12 @@ import * as i0 from "@angular/core";
  * How to use:
  * Provide the lx-picker with two kinds of ContentChildren:
  * 1. A lxPickerTrigger, preferably a button element, which we use to open the dropdown on click or enter.
- * 2. A list of <li> elements with an lx-picker-option attribute that own the option template as content children.
+ * 2. A list of `<li>` elements with an lx-picker-option attribute that own the option template as content children.
  *
  * You can use this component as part of a FormGroup or wire it up yourself by listening on the (select) output of the options.
  *
  * Example usage (non FormGroup style):
+ * ```
  * <lx-picker listBoxAriaLabel="Awesome picker">
  *   <button lxPickerTrigger lx-button mode="outline" size="large" [square]="true" aria-label="Awesome picker" title="Awesome picker">
  *       <lx-icon [name]="selection.label" [color]="selection.value" fontAwsomeStyle="solid"></lx-icon>
@@ -22,6 +23,7 @@ import * as i0 from "@angular/core";
  *       <lx-icon lx-picker-option [name]="option.label" [color]="option.value" fontAwsomeStyle="solid"></lx-icon>
  *    </li>
  * </lx-picker>
+ * ```
  */
 export declare class PickerComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
     private dir;

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

@@ -6,6 +6,17 @@ import { SingleSelectPadding } from '../../models/single-select-padding.interfac
 import { KeyboardSelectAction } from '../keyboard-select.directive';
 import * as i0 from "@angular/core";
 export type SingleSelectSize = 'default' | 'small' | 'select2' | 'large';
+/**
+ * ## 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.
+ */
 export declare class SingleSelectComponent extends BaseSelectDirective implements OnDestroy, AfterViewInit, ControlValueAccessor {
     private cd;
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition: number, keyCode: number): number;

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

@@ -2,6 +2,29 @@ import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChange
 import { Observable, Subject } from 'rxjs';
 import { TabComponent } from '../tab/tab.component';
 import * as i0 from "@angular/core";
+/**
+ * ## 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.
+ */
 export declare class TabGroupComponent implements OnChanges, AfterContentInit, OnDestroy {
     private cd;
     isCentered: boolean;

package/package.json

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