@leanix/components 0.4.540 → 0.4.541

package/fesm2022/leanix-components.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, afterRenderEffect, ContentChildren, DestroyRef, ChangeDetectorRef, effect, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
+import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$6 from '@angular/common';
 import { NgTemplateOutlet, NgClass, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgSwitch, NgSwitchCase, CommonModule, DecimalPipe, formatDate } from '@angular/common';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
 import * as i5 from 'rxjs';
 import { BehaviorSubject, of, timer, Observable, Subject, combineLatest, merge, concat, fromEvent, ReplaySubject, map as map$1, switchMap as switchMap$1 } from 'rxjs';
@@ -2826,6 +2826,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{ selector: 'lx-token', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+class TokenizerOverflowPopoverComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.startIndex = signal(0);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.tokenizer = input.required();
+        this.horizontalAlign = input('after');
+        this.verticalAlign = input('start');
+        effect(() => {
+            this.overflowClickSubscription?.unsubscribe();
+            this.overflowClickSubscription = this.tokenizer()
+                .overflowPlaceholderClick.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(({ startIndex, counterElement }) => {
+                this.startIndex.set(startIndex);
+                this.popover.anchor = counterElement;
+                this.popover.open();
+            });
+        });
+    }
+    closePopover() {
+        this.popover.close();
+        this.changeDetectorRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TokenizerOverflowPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TokenizerOverflowPopoverComponent, isStandalone: true, selector: "lx-tokenizer-overflow-popover", inputs: { tokenizer: { classPropertyName: "tokenizer", publicName: "tokenizer", isSignal: true, isRequired: true, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: SatPopoverComponent, descendants: true }], ngImport: i0, template: "<sat-popover\n  (backdropClicked)=\"closePopover()\"\n  [hasBackdrop]=\"true\"\n  [horizontalAlign]=\"horizontalAlign()\"\n  [verticalAlign]=\"verticalAlign()\"\n  openTransition=\"100ms\"\n  closeTransition=\"100ms\"\n>\n  @if (popoverTemplate) {\n    <div\n      class=\"tokenizerPopoverContentWrapper\"\n      [class.before]=\"horizontalAlign() === 'before'\"\n      [class.after]=\"horizontalAlign() === 'after'\"\n    >\n      <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n    </div>\n  }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TokenizerOverflowPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-tokenizer-overflow-popover', standalone: true, imports: [SatPopoverModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sat-popover\n  (backdropClicked)=\"closePopover()\"\n  [hasBackdrop]=\"true\"\n  [horizontalAlign]=\"horizontalAlign()\"\n  [verticalAlign]=\"verticalAlign()\"\n  openTransition=\"100ms\"\n  closeTransition=\"100ms\"\n>\n  @if (popoverTemplate) {\n    <div\n      class=\"tokenizerPopoverContentWrapper\"\n      [class.before]=\"horizontalAlign() === 'before'\"\n      [class.after]=\"horizontalAlign() === 'after'\"\n    >\n      <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n    </div>\n  }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { popoverTemplate: [{
+                type: ContentChild,
+                args: ['popoverTemplate']
+            }], popover: [{
+                type: ViewChild,
+                args: [SatPopoverComponent]
+            }] } });
+
 /**
  * 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").
  *
@@ -2963,43 +3000,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['tokensContainer', { read: ElementRef }]
             }] } });
 
-class TokenizerOverflowPopoverComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.startIndex = signal(0);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.tokenizer = input.required();
-        this.horizontalAlign = input('after');
-        this.verticalAlign = input('start');
-        effect(() => {
-            this.overflowClickSubscription?.unsubscribe();
-            this.overflowClickSubscription = this.tokenizer()
-                .overflowPlaceholderClick.pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(({ startIndex, counterElement }) => {
-                this.startIndex.set(startIndex);
-                this.popover.anchor = counterElement;
-                this.popover.open();
-            });
-        });
-    }
-    closePopover() {
-        this.popover.close();
-        this.changeDetectorRef.detectChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TokenizerOverflowPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TokenizerOverflowPopoverComponent, isStandalone: true, selector: "lx-tokenizer-overflow-popover", inputs: { tokenizer: { classPropertyName: "tokenizer", publicName: "tokenizer", isSignal: true, isRequired: true, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: SatPopoverComponent, descendants: true }], ngImport: i0, template: "<sat-popover\n  (backdropClicked)=\"closePopover()\"\n  [hasBackdrop]=\"true\"\n  [horizontalAlign]=\"horizontalAlign()\"\n  [verticalAlign]=\"verticalAlign()\"\n  openTransition=\"100ms\"\n  closeTransition=\"100ms\"\n>\n  @if (popoverTemplate) {\n    <div\n      class=\"tokenizerPopoverContentWrapper\"\n      [class.before]=\"horizontalAlign() === 'before'\"\n      [class.after]=\"horizontalAlign() === 'after'\"\n    >\n      <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n    </div>\n  }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TokenizerOverflowPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-tokenizer-overflow-popover', standalone: true, imports: [TokenizerComponent, SatPopoverModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sat-popover\n  (backdropClicked)=\"closePopover()\"\n  [hasBackdrop]=\"true\"\n  [horizontalAlign]=\"horizontalAlign()\"\n  [verticalAlign]=\"verticalAlign()\"\n  openTransition=\"100ms\"\n  closeTransition=\"100ms\"\n>\n  @if (popoverTemplate) {\n    <div\n      class=\"tokenizerPopoverContentWrapper\"\n      [class.before]=\"horizontalAlign() === 'before'\"\n      [class.after]=\"horizontalAlign() === 'after'\"\n    >\n      <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n    </div>\n  }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { popoverTemplate: [{
-                type: ContentChild,
-                args: ['popoverTemplate']
-            }], popover: [{
-                type: ViewChild,
-                args: [SatPopoverComponent]
-            }] } });
-
 /**
  * Generates an SVG for the avatar initials
  * @param displayName The name of the user
@@ -3141,7 +3141,7 @@ class BasicDropdownItemComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-basic-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgIf, HighlightTermPipe], template: "@if (optionLabelSuffix) {\n  <div [class.boldLabel]=\"labelFontWeight === 'bold'\" class=\"optionLabel\">\n    <div [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n    <ng-content [select]=\"optionLabelSuffix\" />\n  </div>\n} @else {\n  <div [class.boldLabel]=\"labelFontWeight === 'bold'\" [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n}\n<div\n  class=\"optionDescription\"\n  [style.font-style]=\"descriptionFontStyle\"\n  [ngClass]=\"{ maxTextLines: descriptionStyleOptions?.maxLines }\"\n  [style.-webkit-line-clamp]=\"descriptionStyleOptions?.maxLines || 'inherit'\"\n  [innerHtml]=\"description | lxHighlightTerm: (descriptionStyleOptions?.shouldHighlightTerm ? highlightTerm : undefined)\"\n></div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#61779d;font-size:var(--lxFontSmallSize, 12px)}.optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}.optionLabel{display:flex;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'lx-basic-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, HighlightTermPipe], template: "@if (optionLabelSuffix) {\n  <div [class.boldLabel]=\"labelFontWeight === 'bold'\" class=\"optionLabel\">\n    <div [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n    <ng-content [select]=\"optionLabelSuffix\" />\n  </div>\n} @else {\n  <div [class.boldLabel]=\"labelFontWeight === 'bold'\" [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n}\n<div\n  class=\"optionDescription\"\n  [style.font-style]=\"descriptionFontStyle\"\n  [ngClass]=\"{ maxTextLines: descriptionStyleOptions?.maxLines }\"\n  [style.-webkit-line-clamp]=\"descriptionStyleOptions?.maxLines || 'inherit'\"\n  [innerHtml]=\"description | lxHighlightTerm: (descriptionStyleOptions?.shouldHighlightTerm ? highlightTerm : undefined)\"\n></div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#61779d;font-size:var(--lxFontSmallSize, 12px)}.optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}.optionLabel{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], description: [{
@@ -10307,7 +10307,7 @@ __decorate([
 ], TabGroupComponent.prototype, "tabsQueryList$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule, NgTemplateOutlet], template: "<ul\n  #tabListElement\n  class=\"tabs\"\n  role=\"tablist\"\n  (focusout)=\"onFocusOut($event)\"\n  [attr.aria-owns]=\"tabIds.join(' ')\"\n  [class.centered]=\"isCentered\"\n>\n  <ng-content />\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\" />\n", styles: [":host{--tab-group-padding-y: 0}.tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0 var(--tab-group-padding-y);text-align:left}.tabs.centered{text-align:center}\n"] }]
+            args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul\n  #tabListElement\n  class=\"tabs\"\n  role=\"tablist\"\n  (focusout)=\"onFocusOut($event)\"\n  [attr.aria-owns]=\"tabIds.join(' ')\"\n  [class.centered]=\"isCentered\"\n>\n  <ng-content />\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\" />\n", styles: [":host{--tab-group-padding-y: 0}.tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0 var(--tab-group-padding-y);text-align:left}.tabs.centered{text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isCentered: [{
                 type: Input
             }], selectedIndex: [{