@leanix/components 0.4.470 → 0.4.473

package/fesm2022/leanix-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, Output, HostListener, Injectable, ElementRef, Inject, ViewChild, Directive, ContentChildren, Pipe, Optional, NgModule, effect, DestroyRef, ChangeDetectorRef, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
+import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, Output, HostListener, Injectable, ElementRef, Inject, ViewChild, model, Directive, Optional, Pipe, NgModule, effect, ContentChildren, DestroyRef, ChangeDetectorRef, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@angular/common';
@@ -15,6 +15,7 @@ import * as i1$9 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import * as i1$2 from '@angular/cdk/bidi';
+import { registerIcon } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';
 import Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
 import DOMPurify from 'dompurify';
@@ -1100,10 +1101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * 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.
  */
 class SpinnerComponent {
     constructor() {
@@ -1186,50 +1187,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{ selector: 'lx-stepper', standalone: true, imports: [CommonModule, CdkStepperModule], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <i [class]=\"'far fa-check check-icon'\" [ngClass]=\"{ 'small-icon': isSmallVariant }\"></i>\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:15.5px;font-style:normal;font-weight:var(--lxFontNormal, 400);line-height:20px;width:100%;height:100%;padding-top:8px;text-align:center}.step-container-small .step-number{padding-top:0}.step-title{width:max-content;top:50px;position:absolute}.check-icon{font-size:20px;color:#0070f2}.small-icon{position:relative;font-size:var(--lxFontSmallSize, 12px)}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
 
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class TableComponent {
+    constructor() {
+        this.isSortable = input(false);
+        this.sort = model({});
+    }
+    onTableHeaderSortChange(sort) {
+        this.sort.set(sort);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.8", type: TableComponent, isStandalone: true, selector: "table[lx-table]", inputs: { isSortable: { classPropertyName: "isSortable", publicName: "isSortable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange" }, host: { classAttribute: "table table-hover" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'table[lx-table]',
+                    host: {
+                        class: 'table table-hover'
+                    },
+                    standalone: true
+                }]
+        }] });
+
+registerIcon('sort', {
+    pathData: '',
+    ltr: false,
+    collection: 'lx-icons',
+    packageName: '@leanix/theming',
+    viewBox: '0 0 16 16',
+    customTemplate: () => ({
+        strings: [
+            '<path d="M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z" fill="#99A5BB"/>',
+            '<path d="M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z" fill="#99A5BB"/>'
+        ]
+    })
+});
+registerIcon('sort-desc', {
+    pathData: '',
+    ltr: false,
+    collection: 'lx-icons',
+    packageName: '@leanix/theming',
+    viewBox: '0 0 16 16',
+    customTemplate: () => ({
+        strings: [
+            '<path d="M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z" fill="#99A5BB"/>',
+            '<path d="M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z" fill="#2A303D"/>'
+        ]
+    })
+});
+registerIcon('sort-asc', {
+    pathData: '',
+    ltr: false,
+    collection: 'lx-icons',
+    packageName: '@leanix/theming',
+    viewBox: '0 0 16 16',
+    customTemplate: () => ({
+        strings: [
+            '<path d="M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z" fill="#2A303D"/>',
+            '<path d="M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z" fill="#99A5BB"/>'
+        ]
+    })
+});
 class TableHeaderComponent {
-    constructor(elmentRef, changeDetection) {
-        this.elmentRef = elmentRef;
-        this.changeDetection = changeDetection;
+    #sort;
+    constructor(parentTable) {
+        this.parentTable = parentTable;
         this.sortChange = new EventEmitter();
-        this.sortable = false;
+        this.sortable = computed(() => this.parentTable?.isSortable() ?? false);
+        this.order = computed(() => {
+            const sort = this.parentTable ? this.parentTable.sort() : this.#sort();
+            if (this.column !== sort?.key) {
+                return undefined;
+            }
+            else {
+                return sort?.order;
+            }
+        });
+        this.#sort = signal({ key: this.column, order: undefined });
     }
     onSort() {
         if (this.column) {
-            if (!this.order) {
-                this.order = 'ASC';
-            }
-            else if (this.order === 'ASC') {
-                this.order = 'DESC';
+            const sort = { key: this.column, order: determineNewOrder(this.order()) };
+            if (!this.parentTable) {
+                this.#sort.set(sort);
             }
-            else {
-                this.order = undefined;
-            }
-            this.sortChange.emit({ key: this.order ? this.column : undefined, order: this.order });
+            this.sortChange.emit(sort);
+            this.parentTable?.onTableHeaderSortChange(sort);
         }
     }
-    set order(value) {
-        this._order = value;
-        this.changeDetection.markForCheck();
-    }
-    get order() {
-        return this._order;
-    }
-    set isTabable(tabable) {
-        this.elmentRef.nativeElement.tabIndex = tabable ? 0 : -1;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TableHeaderComponent, isStandalone: true, selector: "lx-th", inputs: { column: "column" }, outputs: { sortChange: "sortChange" }, host: { listeners: { "keydown.enter": "onSort()", "click": "onSort()" }, properties: { "class.sortable": "this.sortable" } }, ngImport: i0, template: "<span>\n  <ng-content />\n</span>\n<i\n  class=\"fas\"\n  [class.fa-sort]=\"!order\"\n  [class.inactive]=\"!order\"\n  [class.fa-sort-up]=\"order === 'ASC'\"\n  [class.fa-sort-down]=\"order === 'DESC'\"\n  *ngIf=\"sortable\"\n></i>\n", styles: [":host{display:table-cell;padding:8px;vertical-align:bottom;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700}:host.sortable span{cursor:pointer}i{margin-left:4px;cursor:pointer}.inactive{color:#e1e5eb}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableHeaderComponent, deps: [{ token: TableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TableHeaderComponent, isStandalone: true, selector: "lx-th", inputs: { column: "column" }, outputs: { sortChange: "sortChange" }, host: { attributes: { "role": "columnheader" }, listeners: { "keydown.enter": "onSort()", "click": "onSort()" }, properties: { "class.sortable": "sortable()", "tabIndex": "sortable() ? 0 : -1" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <span>\n    <ng-content />\n  </span>\n  @if (sortable()) {\n    @if (!order()) {\n      <ui5-icon name=\"lx-icons/sort\" />\n    } @else if (order() === 'ASC') {\n      <ui5-icon name=\"lx-icons/sort-asc\" />\n    } @else if (order() === 'DESC') {\n      <ui5-icon name=\"lx-icons/sort-desc\" />\n    }\n  }\n</div>\n", styles: [":host{display:table-cell;line-height:normal;padding:8px;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700;color:#526179}:host.sortable span{cursor:pointer}.wrapper{display:flex;align-items:center;gap:4px}ui5-icon{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-th', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<span>\n  <ng-content />\n</span>\n<i\n  class=\"fas\"\n  [class.fa-sort]=\"!order\"\n  [class.inactive]=\"!order\"\n  [class.fa-sort-up]=\"order === 'ASC'\"\n  [class.fa-sort-down]=\"order === 'DESC'\"\n  *ngIf=\"sortable\"\n></i>\n", styles: [":host{display:table-cell;padding:8px;vertical-align:bottom;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700}:host.sortable span{cursor:pointer}i{margin-left:4px;cursor:pointer}.inactive{color:#e1e5eb}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { column: [{
+            args: [{ selector: 'lx-th', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '[class.sortable]': 'sortable()',
+                        '[tabIndex]': 'sortable() ? 0 : -1',
+                        role: 'columnheader'
+                    }, imports: [IconComponent$1], template: "<div class=\"wrapper\">\n  <span>\n    <ng-content />\n  </span>\n  @if (sortable()) {\n    @if (!order()) {\n      <ui5-icon name=\"lx-icons/sort\" />\n    } @else if (order() === 'ASC') {\n      <ui5-icon name=\"lx-icons/sort-asc\" />\n    } @else if (order() === 'DESC') {\n      <ui5-icon name=\"lx-icons/sort-desc\" />\n    }\n  }\n</div>\n", styles: [":host{display:table-cell;line-height:normal;padding:8px;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700;color:#526179}:host.sortable span{cursor:pointer}.wrapper{display:flex;align-items:center;gap:4px}ui5-icon{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: TableComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { column: [{
                 type: Input
             }], sortChange: [{
                 type: Output
-            }], sortable: [{
-                type: HostBinding,
-                args: ['class.sortable']
             }], onSort: [{
                 type: HostListener,
                 args: ['keydown.enter']
@@ -1237,72 +1300,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: HostListener,
                 args: ['click']
             }] } });
-
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-class TableComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.isSortable = false;
-        this.sortChange = new EventEmitter();
-        this.elementRef.nativeElement.classList.add('table', 'table-hover');
-    }
-    ngOnChanges(changes) {
-        if (changes['sort'] && this.tableHeaders) {
-            this.tableHeaders.forEach((header) => {
-                this.setSortValueOnHeader(header);
-            });
-        }
-        if (changes['isSortable'] && this.tableHeaders) {
-            this.tableHeaders.forEach((header) => {
-                header.sortable = this.isSortable;
-                header.isTabable = this.isSortable;
-            });
-        }
+function determineNewOrder(currentOrder) {
+    let newOrder = undefined;
+    if (!currentOrder) {
+        newOrder = 'ASC';
     }
-    ngAfterContentInit() {
-        this.tableHeaders.forEach((header) => {
-            header.sortable = this.isSortable;
-            header.isTabable = this.isSortable;
-            if (this.sort) {
-                this.setSortValueOnHeader(header);
-            }
-        });
-        const sortChange$ = merge(...this.tableHeaders.map((header) => header.sortChange.asObservable()));
-        sortChange$.subscribe((change) => {
-            this.tableHeaders.forEach((header) => {
-                this.setSortValueOnHeader(header);
-            });
-            this.sortChange.emit(change);
-        });
+    else if (currentOrder === 'ASC') {
+        newOrder = 'DESC';
     }
-    setSortValueOnHeader(header) {
-        if (header.column !== this.sort?.key) {
-            header.order = undefined;
-        }
-        else {
-            header.order = this.sort?.order;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: TableComponent, isStandalone: true, selector: "table[lx-table]", inputs: { isSortable: "isSortable", sort: "sort" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "tableHeaders", predicate: TableHeaderComponent, descendants: true }], usesOnChanges: true, ngImport: i0 }); }
+    return newOrder;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'table[lx-table]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isSortable: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], sortChange: [{
-                type: Output
-            }], tableHeaders: [{
-                type: ContentChildren,
-                args: [TableHeaderComponent, { descendants: true }]
-            }] } });
 
 /**
  * Allows to register an event handler for the "AfterViewInit" lifecycle hook.
@@ -2465,6 +2472,7 @@ class LxCoreUiModule {
             CollapsibleComponent,
             EllipsisComponent,
             StepperComponent,
+            TableHeaderComponent,
             EmptyStateComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LxCoreUiModule, decorators: [{
@@ -2622,6 +2630,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{ selector: 'lx-token', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+/**
+ * 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
+ */
 class TokenizerComponent {
     constructor(elementRef, destroyRef, changeDetectorRef, resizeObserverService) {
         this.elementRef = elementRef;
@@ -6656,6 +6703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 /**
  * Usage:
+ *
+ * ```
  * <lx-single-select
  *    #singleSelect
  *    [selection]="value"
@@ -6670,7 +6719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  *     (onItemSelected)="singleSelect.selectOption($event)">
  *    </lx-option-group-dropdown>
  * </lx-single-select>
- *
+ * ```
  */
 class OptionGroupDropdownComponent extends KeyboardSelectDirective {
     constructor() {
@@ -7283,11 +7332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * 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>
@@ -7296,6 +7346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  *       <lx-icon lx-picker-option [name]="option.label" [color]="option.value" fontAwsomeStyle="solid"></lx-icon>
  *    </li>
  * </lx-picker>
+ * ```
  */
 class PickerComponent {
     get activeDescendantsId() {
@@ -7765,6 +7816,17 @@ 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 {
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition, keyCode) {
         switch (keyCode) {
@@ -9819,6 +9881,29 @@ 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 {
     get tabIds() {
         return this.tabs.map((t) => t.tabId);