@leanix/components 0.4.904 → 0.4.921

package/fesm2022/leanix-components.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Input, Component, input, computed, ChangeDetectionStrategy, HostBinding, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, signal, Optional, Pipe, inject, NgModule, output, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, ApplicationRef, createComponent } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
 import * as i1 from '@leanix/components/ui5';
 import { FioriReskinAwareDirective } from '@leanix/components/ui5';
+import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
 import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
 import { NgClass, AsyncPipe, NgTemplateOutlet, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
 import { __decorate } from 'tslib';
@@ -12,7 +12,7 @@ import { escape, trimEnd, sortBy, get, isEqual as isEqual$1, toLower, some, padC
 import * as i5 from 'rxjs';
 import { BehaviorSubject, timer, Observable, Subject, combineLatest, merge, concat, fromEvent, ReplaySubject, of, map as map$1, switchMap as switchMap$1 } from 'rxjs';
 import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
-import * as i1$9 from '@angular/router';
+import * as i1$8 from '@angular/router';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import { registerIcon } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';
@@ -31,14 +31,14 @@ import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@ncstate/sat-popover';
 import { SatPopoverModule, SatPopoverComponent } from '@ncstate/sat-popover';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i1$5 from '@angular/forms';
+import * as i1$4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, NgForm, Validators, FormControl } from '@angular/forms';
-import * as i1$4 from 'ngx-infinite-scroll';
+import * as i2$1 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import * as i1$6 from '@angular/cdk/drag-drop';
+import * as i1$5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$7 from '@angular/cdk/bidi';
-import * as i1$8 from '@angular/platform-browser';
+import * as i1$6 from '@angular/cdk/bidi';
+import * as i1$7 from '@angular/platform-browser';
 import { Node as Node$1, mergeAttributes, Extension, getMarkRange, findParentNode, Editor, NodeView } from '@tiptap/core';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';
@@ -109,11 +109,11 @@ class BadgeComponent {
         return `${this.color}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color" }, ngImport: i0, template: "<div class=\"wrapper\" [class]=\"colorClass\">\n  <span>{{ content }}</span>\n</div>\n", styles: [".wrapper{border-radius:2px;padding:2px 4px;height:20px;max-width:max-content;font-weight:var(--lxFontSemibold, 600);font-size:var(--lxFontSmallSize, 12px);letter-spacing:.3px}.gray{background-color:#f0f2f5;color:#3e495b}.blue{background-color:#e9f3ff;color:#0a3e6b}.green{background-color:#ebfaee;color:#145027}.red{background-color:#feefef;color:#731616}.yellow{background-color:#fff8ea;color:#78350f}.purple{background-color:#f4efff;color:#531991}.white{background-color:#fff;color:#2a303d;border:1px solid #c2c9d6}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div class=\"wrapper\" [class]=\"colorClass\">\n  <span>{{ content }}</span>\n</div>\n", styles: [":host:where(:not(.lxFioriReskin)) .wrapper{border-radius:2px;padding:2px 4px;height:20px;max-width:max-content;font-weight:var(--lxFontSemibold, 600);font-size:var(--lxFontSmallSize, 12px);letter-spacing:.3px}:host:where(:not(.lxFioriReskin)) .gray{background-color:#f0f2f5;color:#3e495b}:host:where(:not(.lxFioriReskin)) .blue{background-color:#e9f3ff;color:#0a3e6b}:host:where(:not(.lxFioriReskin)) .green{background-color:#ebfaee;color:#145027}:host:where(:not(.lxFioriReskin)) .red{background-color:#feefef;color:#731616}:host:where(:not(.lxFioriReskin)) .yellow{background-color:#fff8ea;color:#78350f}:host:where(:not(.lxFioriReskin)) .purple{background-color:#f4efff;color:#531991}:host:where(:not(.lxFioriReskin)) .white{background-color:#fff;color:#2a303d;border:1px solid #c2c9d6}:host(.lxFioriReskin){display:inline-block}:host(.lxFioriReskin) .wrapper{border-radius:var(--sapButton_BorderCornerRadius);padding:.1875rem .25rem;line-height:1rem;max-width:max-content;font-family:var(--sapFontBoldFamily);font-size:var(--sapFontSmallSize);border:var(--sapButton_BorderWidth) solid transparent;text-shadow:var(--sapContent_TextShadow)}:host(.lxFioriReskin) .blue{color:var(--sapIndicationColor_5b_TextColor);background-color:var(--sapIndicationColor_5b_Background);border-color:var(--sapIndicationColor_5b_BorderColor)}:host(.lxFioriReskin) .gray{color:var(--sapIndicationColor_10b_TextColor);background-color:var(--sapIndicationColor_10b_Background);border-color:var(--sapIndicationColor_10b_BorderColor)}:host(.lxFioriReskin) .red{color:var(--sapIndicationColor_1b_TextColor);background-color:var(--sapIndicationColor_1b_Background);border-color:var(--sapIndicationColor_1b_BorderColor)}:host(.lxFioriReskin) .yellow{color:var(--sapIndicationColor_3b_TextColor);background-color:var(--sapIndicationColor_3b_Background);border-color:var(--sapIndicationColor_3b_BorderColor)}:host(.lxFioriReskin) .green{color:var(--sapIndicationColor_4b_TextColor);background-color:var(--sapIndicationColor_4b_Background);border-color:var(--sapIndicationColor_4b_BorderColor)}:host(.lxFioriReskin) .purple{color:var(--sapIndicationColor_7b_TextColor);background-color:var(--sapIndicationColor_7b_Background);border-color:var(--sapIndicationColor_7b_BorderColor)}:host(.lxFioriReskin) .white{color:var(--sapIndicationColor_9b_TextColor);background-color:var(--sapIndicationColor_9b_Background);border-color:var(--sapIndicationColor_9b_BorderColor)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-badge', template: "<div class=\"wrapper\" [class]=\"colorClass\">\n  <span>{{ content }}</span>\n</div>\n", styles: [".wrapper{border-radius:2px;padding:2px 4px;height:20px;max-width:max-content;font-weight:var(--lxFontSemibold, 600);font-size:var(--lxFontSmallSize, 12px);letter-spacing:.3px}.gray{background-color:#f0f2f5;color:#3e495b}.blue{background-color:#e9f3ff;color:#0a3e6b}.green{background-color:#ebfaee;color:#145027}.red{background-color:#feefef;color:#731616}.yellow{background-color:#fff8ea;color:#78350f}.purple{background-color:#f4efff;color:#531991}.white{background-color:#fff;color:#2a303d;border:1px solid #c2c9d6}\n"] }]
+            args: [{ selector: 'lx-badge', hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "<div class=\"wrapper\" [class]=\"colorClass\">\n  <span>{{ content }}</span>\n</div>\n", styles: [":host:where(:not(.lxFioriReskin)) .wrapper{border-radius:2px;padding:2px 4px;height:20px;max-width:max-content;font-weight:var(--lxFontSemibold, 600);font-size:var(--lxFontSmallSize, 12px);letter-spacing:.3px}:host:where(:not(.lxFioriReskin)) .gray{background-color:#f0f2f5;color:#3e495b}:host:where(:not(.lxFioriReskin)) .blue{background-color:#e9f3ff;color:#0a3e6b}:host:where(:not(.lxFioriReskin)) .green{background-color:#ebfaee;color:#145027}:host:where(:not(.lxFioriReskin)) .red{background-color:#feefef;color:#731616}:host:where(:not(.lxFioriReskin)) .yellow{background-color:#fff8ea;color:#78350f}:host:where(:not(.lxFioriReskin)) .purple{background-color:#f4efff;color:#531991}:host:where(:not(.lxFioriReskin)) .white{background-color:#fff;color:#2a303d;border:1px solid #c2c9d6}:host(.lxFioriReskin){display:inline-block}:host(.lxFioriReskin) .wrapper{border-radius:var(--sapButton_BorderCornerRadius);padding:.1875rem .25rem;line-height:1rem;max-width:max-content;font-family:var(--sapFontBoldFamily);font-size:var(--sapFontSmallSize);border:var(--sapButton_BorderWidth) solid transparent;text-shadow:var(--sapContent_TextShadow)}:host(.lxFioriReskin) .blue{color:var(--sapIndicationColor_5b_TextColor);background-color:var(--sapIndicationColor_5b_Background);border-color:var(--sapIndicationColor_5b_BorderColor)}:host(.lxFioriReskin) .gray{color:var(--sapIndicationColor_10b_TextColor);background-color:var(--sapIndicationColor_10b_Background);border-color:var(--sapIndicationColor_10b_BorderColor)}:host(.lxFioriReskin) .red{color:var(--sapIndicationColor_1b_TextColor);background-color:var(--sapIndicationColor_1b_Background);border-color:var(--sapIndicationColor_1b_BorderColor)}:host(.lxFioriReskin) .yellow{color:var(--sapIndicationColor_3b_TextColor);background-color:var(--sapIndicationColor_3b_Background);border-color:var(--sapIndicationColor_3b_BorderColor)}:host(.lxFioriReskin) .green{color:var(--sapIndicationColor_4b_TextColor);background-color:var(--sapIndicationColor_4b_Background);border-color:var(--sapIndicationColor_4b_BorderColor)}:host(.lxFioriReskin) .purple{color:var(--sapIndicationColor_7b_TextColor);background-color:var(--sapIndicationColor_7b_Background);border-color:var(--sapIndicationColor_7b_BorderColor)}:host(.lxFioriReskin) .white{color:var(--sapIndicationColor_9b_TextColor);background-color:var(--sapIndicationColor_9b_Background);border-color:var(--sapIndicationColor_9b_BorderColor)}\n"] }]
         }], propDecorators: { content: [{
                 type: Input,
                 args: [{ required: true }]
@@ -196,14 +196,14 @@ class BannerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "type()", "attr.size": "size()" } }, ngImport: i0, template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "type()", "attr.size": "size()" } }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host:where(:not(.lxFioriReskin)){display:block;border-left:2px solid}:host:where(:not(.lxFioriReskin))[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host:where(:not(.lxFioriReskin))[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host:where(:not(.lxFioriReskin))[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host:where(:not(.lxFioriReskin))[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host:where(:not(.lxFioriReskin))[size=big]{margin-bottom:12px}:host:where(:not(.lxFioriReskin))[size=big] .banner-wrapper{position:relative;padding:.75rem}:host:where(:not(.lxFioriReskin))[size=big] .banner-content{padding-left:2rem}:host:where(:not(.lxFioriReskin))[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host:where(:not(.lxFioriReskin))[size=small]{margin-bottom:6px}:host:where(:not(.lxFioriReskin))[size=small] .banner-wrapper{padding:.5rem}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content .alert-link{font-weight:700}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content>p,:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content>ul{margin-bottom:0}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content p+p{margin-bottom:5px}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content p:last-child{margin-bottom:0}:host(.lxFioriReskin){display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapTextColor);border-radius:var(--sapPopover_BorderCornerRadius);border:1px solid;padding:.4375rem 1rem}:host(.lxFioriReskin)[type=success]{background-color:var(--sapSuccessBackground);border-color:var(--sapMessage_SuccessBorderColor)}:host(.lxFioriReskin)[type=info]{background-color:var(--sapInformationBackground);border-color:var(--sapMessage_InformationBorderColor)}:host(.lxFioriReskin)[type=warning]{background-color:var(--sapWarningBackground);border-color:var(--sapMessage_WarningBorderColor)}:host(.lxFioriReskin)[type=danger]{background-color:var(--sapErrorBackground);border-color:var(--sapMessage_ErrorBorderColor)}:host(.lxFioriReskin) .banner-wrapper{display:flex;align-items:flex-start;gap:.5rem}:host(.lxFioriReskin) ui5-icon{flex-shrink:0}:host(.lxFioriReskin) .banner-content{flex:1;line-height:1.2}:host(.lxFioriReskin)[size=big]{margin-bottom:12px}:host(.lxFioriReskin)[size=small]{margin-bottom:6px;padding:.25rem .75rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-banner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'lx-banner', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], host: {
                         '[attr.type]': 'type()',
                         '[attr.size]': 'size()'
-                    }, imports: [IconComponent], template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"] }]
+                    }, imports: [IconComponent], template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host:where(:not(.lxFioriReskin)){display:block;border-left:2px solid}:host:where(:not(.lxFioriReskin))[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host:where(:not(.lxFioriReskin))[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host:where(:not(.lxFioriReskin))[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host:where(:not(.lxFioriReskin))[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host:where(:not(.lxFioriReskin))[size=big]{margin-bottom:12px}:host:where(:not(.lxFioriReskin))[size=big] .banner-wrapper{position:relative;padding:.75rem}:host:where(:not(.lxFioriReskin))[size=big] .banner-content{padding-left:2rem}:host:where(:not(.lxFioriReskin))[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host:where(:not(.lxFioriReskin))[size=small]{margin-bottom:6px}:host:where(:not(.lxFioriReskin))[size=small] .banner-wrapper{padding:.5rem}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content .alert-link{font-weight:700}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content>p,:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content>ul{margin-bottom:0}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content p+p{margin-bottom:5px}:host:where(:not(.lxFioriReskin)) ::ng-deep .banner-content p:last-child{margin-bottom:0}:host(.lxFioriReskin){display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapTextColor);border-radius:var(--sapPopover_BorderCornerRadius);border:1px solid;padding:.4375rem 1rem}:host(.lxFioriReskin)[type=success]{background-color:var(--sapSuccessBackground);border-color:var(--sapMessage_SuccessBorderColor)}:host(.lxFioriReskin)[type=info]{background-color:var(--sapInformationBackground);border-color:var(--sapMessage_InformationBorderColor)}:host(.lxFioriReskin)[type=warning]{background-color:var(--sapWarningBackground);border-color:var(--sapMessage_WarningBorderColor)}:host(.lxFioriReskin)[type=danger]{background-color:var(--sapErrorBackground);border-color:var(--sapMessage_ErrorBorderColor)}:host(.lxFioriReskin) .banner-wrapper{display:flex;align-items:flex-start;gap:.5rem}:host(.lxFioriReskin) ui5-icon{flex-shrink:0}:host(.lxFioriReskin) .banner-content{flex:1;line-height:1.2}:host(.lxFioriReskin)[size=big]{margin-bottom:12px}:host(.lxFioriReskin)[size=small]{margin-bottom:6px;padding:.25rem .75rem}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
@@ -3745,11 +3745,11 @@ class BasicDropdownItemComponent {
         return !!this.description;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownItemComponent, isStandalone: true, selector: "lx-basic-dropdown-item", inputs: { label: "label", description: "description", highlightTerm: "highlightTerm", labelFontWeight: "labelFontWeight", descriptionFontStyle: "descriptionFontStyle", descriptionStyleOptions: "descriptionStyleOptions" }, host: { properties: { "class.hasDescription": "this.hasDescription" } }, queries: [{ propertyName: "optionLabelSuffix", first: true, predicate: ["optionLabelSuffix"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HighlightTermPipe, name: "lxHighlightTerm" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownItemComponent, isStandalone: true, selector: "lx-basic-dropdown-item", inputs: { label: "label", description: "description", highlightTerm: "highlightTerm", labelFontWeight: "labelFontWeight", descriptionFontStyle: "descriptionFontStyle", descriptionStyleOptions: "descriptionStyleOptions" }, host: { properties: { "class.hasDescription": "this.hasDescription" } }, queries: [{ propertyName: "optionLabelSuffix", first: true, predicate: ["optionLabelSuffix"], descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, 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:where(:not(.lxFioriReskin)){display:block;padding:2px 0}:host:where(:not(.lxFioriReskin)).hasDescription{padding:4px 0}:host:where(:not(.lxFioriReskin)) .boldLabel{font-weight:700}:host:where(:not(.lxFioriReskin)) .optionDescription{padding-top:2px;color:#61779d;font-size:var(--lxFontSmallSize, 12px)}:host:where(:not(.lxFioriReskin)) .optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}:host:where(:not(.lxFioriReskin)) .optionLabel{display:flex;align-items:center;justify-content:space-between}:host(.lxFioriReskin){display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .boldLabel{font-weight:700}:host(.lxFioriReskin) .optionDescription{padding-top:2px;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize)}:host(.lxFioriReskin) .optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}:host(.lxFioriReskin) .optionLabel{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HighlightTermPipe, name: "lxHighlightTerm" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-basic-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'lx-basic-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], 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:where(:not(.lxFioriReskin)){display:block;padding:2px 0}:host:where(:not(.lxFioriReskin)).hasDescription{padding:4px 0}:host:where(:not(.lxFioriReskin)) .boldLabel{font-weight:700}:host:where(:not(.lxFioriReskin)) .optionDescription{padding-top:2px;color:#61779d;font-size:var(--lxFontSmallSize, 12px)}:host:where(:not(.lxFioriReskin)) .optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}:host:where(:not(.lxFioriReskin)) .optionLabel{display:flex;align-items:center;justify-content:space-between}:host(.lxFioriReskin){display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .boldLabel{font-weight:700}:host(.lxFioriReskin) .optionDescription{padding-top:2px;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize)}:host(.lxFioriReskin) .optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}:host(.lxFioriReskin) .optionLabel{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], description: [{
@@ -4077,11 +4077,11 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.select(index + offset);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], imports: [
+            args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], imports: [
                         NgTemplateOutlet,
                         CdkOverlayOrigin,
                         CdkConnectedOverlay,
@@ -4093,7 +4093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AsyncPipe,
                         UpperCasePipe,
                         TranslateModule
-                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}\n"] }]
+                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], initiallySelectedIndex: [{
@@ -4245,11 +4245,11 @@ class OptionGroupComponent {
         this.select.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupComponent, isStandalone: true, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  @if (label) {\n    <span class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  }\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupComponent, isStandalone: true, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<li>\n  @if (label) {\n    <span class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  }\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}:host(.lxFioriReskin):not(:first-child){border-top:solid 1px var(--sapList_BorderColor)}:host(.lxFioriReskin) .groupLabel{display:block;padding:.25rem .75rem .25rem .5rem;color:var(--sapContent_LabelColor);font-family:var(--sapFontBoldFamily);font-size:var(--sapFontSmallSize);text-transform:uppercase;letter-spacing:.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n  @if (label) {\n    <span class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  }\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"] }]
+            args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "<li>\n  @if (label) {\n    <span class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  }\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}:host(.lxFioriReskin):not(:first-child){border-top:solid 1px var(--sapList_BorderColor)}:host(.lxFioriReskin) .groupLabel{display:block;padding:.25rem .75rem .25rem .5rem;color:var(--sapContent_LabelColor);font-family:var(--sapFontBoldFamily);font-size:var(--sapFontSmallSize);text-transform:uppercase;letter-spacing:.5px}\n"] }]
         }], propDecorators: { hasSelectedState: [{
                 type: Input
             }], label: [{
@@ -4357,11 +4357,11 @@ class OptionComponent {
         this.mouseEnter.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction", mouseEnter: "mouseEnter" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction", mouseEnter: "mouseEnter" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}:host(.lxFioriReskin):first-child .option{border-top-left-radius:var(--sapPopover_BorderCornerRadius);border-top-right-radius:var(--sapPopover_BorderCornerRadius)}:host(.lxFioriReskin):last-child .option{border-bottom-left-radius:var(--sapPopover_BorderCornerRadius);border-bottom-right-radius:var(--sapPopover_BorderCornerRadius)}:host(.lxFioriReskin):has(+lx-options-sub-dropdown:not(.hidden)) .option,:host(.lxFioriReskin).subdropdownOpen .option{background-color:var(--sapList_Hover_SelectionBackground);border-bottom:1px solid var(--sapList_SelectionBorderColor)}:host(.lxFioriReskin) .option{height:2rem;padding:0 .75rem 0 .5rem;cursor:pointer;color:var(--sapList_TextColor);background-color:transparent;border-bottom:1px solid transparent;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);position:relative;display:flex;align-items:center;outline:none}:host(.lxFioriReskin) .option.selected{cursor:default;padding-right:2rem}:host(.lxFioriReskin) .option.hasSubdropdown{padding-right:2rem}:host(.lxFioriReskin) .option:hover:not(.disabled){background-color:var(--sapList_Hover_Background)}:host(.lxFioriReskin) .option:active:not(.disabled){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .option.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .option ui5-icon{width:1rem;height:1rem}:host(.lxFioriReskin) .option ui5-icon[name=accept],:host(.lxFioriReskin) .option ui5-icon[name=circle-task],:host(.lxFioriReskin) .option ui5-icon[name=circle-task-2],:host(.lxFioriReskin) .option ui5-icon[name=navigation-right-arrow]{position:absolute;top:50%;transform:translateY(-50%);left:auto}:host(.lxFioriReskin) .option ui5-icon[name=accept]{right:1rem;color:var(--sapContent_BusyColor)}:host(.lxFioriReskin) .option ui5-icon[name=circle-task]{right:.375rem;color:var(--sapList_TextColor)}:host(.lxFioriReskin) .option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;right:.625rem;color:var(--sapContent_BusyColor)}:host(.lxFioriReskin) .option ui5-icon[name=navigation-right-arrow]{right:.5rem;color:var(--sapContent_NonInteractiveIconColor)}:host(.lxFioriReskin) .option ::ng-deep ui5-icon:not([name=accept]):not([name=circle-task]):not([name=circle-task-2]):not([name=navigation-right-arrow]){color:var(--sapContent_NonInteractiveIconColor)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option', imports: [IconComponent], template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"] }]
+            args: [{ selector: 'lx-option', hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [IconComponent], template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}:host(.lxFioriReskin):first-child .option{border-top-left-radius:var(--sapPopover_BorderCornerRadius);border-top-right-radius:var(--sapPopover_BorderCornerRadius)}:host(.lxFioriReskin):last-child .option{border-bottom-left-radius:var(--sapPopover_BorderCornerRadius);border-bottom-right-radius:var(--sapPopover_BorderCornerRadius)}:host(.lxFioriReskin):has(+lx-options-sub-dropdown:not(.hidden)) .option,:host(.lxFioriReskin).subdropdownOpen .option{background-color:var(--sapList_Hover_SelectionBackground);border-bottom:1px solid var(--sapList_SelectionBorderColor)}:host(.lxFioriReskin) .option{height:2rem;padding:0 .75rem 0 .5rem;cursor:pointer;color:var(--sapList_TextColor);background-color:transparent;border-bottom:1px solid transparent;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);position:relative;display:flex;align-items:center;outline:none}:host(.lxFioriReskin) .option.selected{cursor:default;padding-right:2rem}:host(.lxFioriReskin) .option.hasSubdropdown{padding-right:2rem}:host(.lxFioriReskin) .option:hover:not(.disabled){background-color:var(--sapList_Hover_Background)}:host(.lxFioriReskin) .option:active:not(.disabled){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .option.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .option ui5-icon{width:1rem;height:1rem}:host(.lxFioriReskin) .option ui5-icon[name=accept],:host(.lxFioriReskin) .option ui5-icon[name=circle-task],:host(.lxFioriReskin) .option ui5-icon[name=circle-task-2],:host(.lxFioriReskin) .option ui5-icon[name=navigation-right-arrow]{position:absolute;top:50%;transform:translateY(-50%);left:auto}:host(.lxFioriReskin) .option ui5-icon[name=accept]{right:1rem;color:var(--sapContent_BusyColor)}:host(.lxFioriReskin) .option ui5-icon[name=circle-task]{right:.375rem;color:var(--sapList_TextColor)}:host(.lxFioriReskin) .option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;right:.625rem;color:var(--sapContent_BusyColor)}:host(.lxFioriReskin) .option ui5-icon[name=navigation-right-arrow]{right:.5rem;color:var(--sapContent_NonInteractiveIconColor)}:host(.lxFioriReskin) .option ::ng-deep ui5-icon:not([name=accept]):not([name=circle-task]):not([name=circle-task-2]):not([name=navigation-right-arrow]){color:var(--sapContent_NonInteractiveIconColor)}\n"] }]
         }], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
                     type: Optional
                 }, {
@@ -4610,11 +4610,11 @@ class CdkOptionsDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CdkOptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CdkOptionsDropdownComponent, isStandalone: true, selector: "lx-cdk-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }, { propertyName: "tooltips", predicate: TooltipDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CdkOptionsDropdownComponent, isStandalone: true, selector: "lx-cdk-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }, { propertyName: "tooltips", predicate: TooltipDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    class=\"lxOptionsDropdownList\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionsDropdownList{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CdkOptionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-cdk-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkOverlayOrigin, CdkConnectedOverlay], template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
+            args: [{ selector: 'lx-cdk-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [CdkOverlayOrigin, CdkConnectedOverlay], template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    class=\"lxOptionsDropdownList\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionsDropdownList{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdown']
@@ -4775,6 +4775,7 @@ class CdkOptionsSubDropdownComponent {
         this.mouseInside$.next(false);
     }
     ngOnDestroy() {
+        this.trigger?.elementRef.nativeElement.classList.remove('subdropdownOpen');
         this.destroyed$.next();
     }
     ngAfterViewInit() {
@@ -4787,6 +4788,10 @@ class CdkOptionsSubDropdownComponent {
             .pipe(takeUntil(this.destroyed$), distinctUntilChanged())
             .subscribe((show) => {
             this.open = show;
+            // Mark the trigger option so the Fiori reskin can paint the
+            // active-trail background. Needed because the submenu is teleported
+            // via CdkOverlay and is not a DOM sibling of the trigger.
+            this.trigger?.elementRef.nativeElement.classList.toggle('subdropdownOpen', show);
             this.reloadOverlayPosition(this.open);
         });
         this.options.changes
@@ -4836,11 +4841,11 @@ class CdkOptionsSubDropdownComponent {
         this.mouseInside$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CdkOptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CdkOptionsSubDropdownComponent, isStandalone: true, selector: "lx-cdk-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}\n"], dependencies: [{ 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: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CdkOptionsSubDropdownComponent, isStandalone: true, selector: "lx-cdk-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown lxOptionsDropdownList\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionsDropdownList{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}\n"], dependencies: [{ 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: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CdkOptionsSubDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-cdk-options-sub-dropdown', imports: [CdkConnectedOverlay, AutocloseDirective], template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}\n"] }]
+            args: [{ selector: 'lx-cdk-options-sub-dropdown', hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [CdkConnectedOverlay, AutocloseDirective], template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown lxOptionsDropdownList\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionsDropdownList{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: Input
             }], align: [{
@@ -5173,7 +5178,7 @@ class CurrencyInputComponent {
                 useExisting: forwardRef(() => CurrencyInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (mode === 'edit') {\n  <div class=\"container input-group\" [class.invalid]=\"markInvalid\">\n    @if (iconPosition === 'first') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n    @if (!showCurrencyInput) {\n      <input\n        [attr.disabled]=\"disabled ? true : null\"\n        type=\"text\"\n        class=\"form-control currencyDisplayValue\"\n        placeholder=\"{{ placeholder }}\"\n        [lxMarkInvalid]=\"markInvalid\"\n        [value]=\"dataValue$ | async | number: format\"\n        (focus)=\"focusCurrencyInput()\"\n      />\n    }\n    <input\n      autocomplete=\"off\"\n      [attr.disabled]=\"disabled ? true : null\"\n      [class.hideInput]=\"!showCurrencyInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      class=\"form-control currencyInput\"\n      name=\"inputAmount\"\n      [attr.id]=\"inputId\"\n      #currencyInput\n      placeholder=\"{{ placeholder }}\"\n      [ngModel]=\"dataValue$ | async\"\n      (blur)=\"onBlur()\"\n      (ngModelChange)=\"valueChanged($event)\"\n    />\n    @if (iconPosition === 'end') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n  </div>\n} @else if (mode === 'view') {\n  <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n    <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n    @if (iconPosition === 'first') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n    {{ (dataValue$ | async | number: format) || placeholder }}\n    @if (iconPosition === 'end') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n  </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}:host(.lxFioriReskin) .input-group{border:none;border-radius:var(--sapField_BorderCornerRadius);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);box-shadow:var(--sapField_Shadow);overflow:hidden}:host(.lxFioriReskin) .form-control{height:var(--sapElement_Compact_Height);background:transparent;border:none;border-radius:0;box-shadow:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);padding:0 .5rem;line-height:var(--sapElement_Compact_Height);transition:none}:host(.lxFioriReskin) .input-group-addon{background:transparent;border:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);line-height:var(--sapElement_Compact_Height);padding:0 .5rem;vertical-align:middle}:host(.lxFioriReskin) .form-control[disabled]{background:transparent;opacity:1;cursor:default}:host(.lxFioriReskin):has(.form-control[disabled]) .input-group{opacity:var(--sapContent_DisabledOpacity);box-shadow:none;background:var(--sapField_ReadOnly_Background);background-image:none;pointer-events:none}:host(.lxFioriReskin) .input-group:hover:not(.invalid):not(:has(.form-control[disabled])):not(:focus-within){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .form-control:focus,:host(.lxFioriReskin) .form-control:focus-visible{outline:none;box-shadow:none;background:transparent}:host(.lxFioriReskin) .input-group:not(.invalid):focus-within{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:0;background-image:none;background-color:var(--sapField_Focus_Background);box-shadow:none}:host(.lxFioriReskin) .form-control[style*=border]{border:none!important}:host(.lxFioriReskin) .input-group.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:hover:not(:focus-within){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:focus-within{background-image:none;background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:0}:host(.lxFioriReskin) .form-control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic;opacity:1}:host(.lxFioriReskin)>span{font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapField_TextColor)}:host(.lxFioriReskin)>span.placeholder{color:var(--sapField_PlaceholderTextColor)}\n"], dependencies: [{ kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (mode === 'edit') {\n  <div class=\"container input-group\" [class.invalid]=\"markInvalid\">\n    @if (iconPosition === 'first') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n    @if (!showCurrencyInput) {\n      <input\n        [attr.disabled]=\"disabled ? true : null\"\n        type=\"text\"\n        class=\"form-control currencyDisplayValue\"\n        placeholder=\"{{ placeholder }}\"\n        [lxMarkInvalid]=\"markInvalid\"\n        [value]=\"dataValue$ | async | number: format\"\n        (focus)=\"focusCurrencyInput()\"\n      />\n    }\n    <input\n      autocomplete=\"off\"\n      [attr.disabled]=\"disabled ? true : null\"\n      [class.hideInput]=\"!showCurrencyInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      class=\"form-control currencyInput\"\n      name=\"inputAmount\"\n      [attr.id]=\"inputId\"\n      #currencyInput\n      placeholder=\"{{ placeholder }}\"\n      [ngModel]=\"dataValue$ | async\"\n      (blur)=\"onBlur()\"\n      (ngModelChange)=\"valueChanged($event)\"\n    />\n    @if (iconPosition === 'end') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n  </div>\n} @else if (mode === 'view') {\n  <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n    <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n    @if (iconPosition === 'first') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n    {{ (dataValue$ | async | number: format) || placeholder }}\n    @if (iconPosition === 'end') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n  </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}:host(.lxFioriReskin) .input-group{border:none;border-radius:var(--sapField_BorderCornerRadius);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);box-shadow:var(--sapField_Shadow);overflow:hidden}:host(.lxFioriReskin) .form-control{height:var(--sapElement_Compact_Height);background:transparent;border:none;border-radius:0;box-shadow:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);padding:0 .5rem;line-height:var(--sapElement_Compact_Height);transition:none}:host(.lxFioriReskin) .input-group-addon{background:transparent;border:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);line-height:var(--sapElement_Compact_Height);padding:0 .5rem;vertical-align:middle}:host(.lxFioriReskin) .form-control[disabled]{background:transparent;opacity:1;cursor:default}:host(.lxFioriReskin):has(.form-control[disabled]) .input-group{opacity:var(--sapContent_DisabledOpacity);box-shadow:none;background:var(--sapField_ReadOnly_Background);background-image:none;pointer-events:none}:host(.lxFioriReskin) .input-group:hover:not(.invalid):not(:has(.form-control[disabled])):not(:focus-within){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .form-control:focus,:host(.lxFioriReskin) .form-control:focus-visible{outline:none;box-shadow:none;background:transparent}:host(.lxFioriReskin) .input-group:not(.invalid):focus-within{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:0;background-image:none;background-color:var(--sapField_Focus_Background);box-shadow:none}:host(.lxFioriReskin) .form-control[style*=border]{border:none!important}:host(.lxFioriReskin) .input-group.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:hover:not(:focus-within){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:focus-within{background-image:none;background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:0}:host(.lxFioriReskin) .form-control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic;opacity:1}:host(.lxFioriReskin)>span{font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapField_TextColor)}:host(.lxFioriReskin)>span.placeholder{color:var(--sapField_PlaceholderTextColor)}\n"], dependencies: [{ kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Observe('data')
@@ -6792,7 +6797,7 @@ class DateInputComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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", alwaysEmitDateString: "alwaysEmitDateString" }, 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: "@if (cdk) {\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\" endIcon=\"slim-arrow-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\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          (change)=\"onRawValueChange($event)\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\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} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\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          (change)=\"onRawValueChange($event)\"\n        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\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          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\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:not([lx-button]){border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]){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:not([lx-button]) .text-muted,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: 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: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] }); }
+        ], 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: "@if (cdk) {\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\" endIcon=\"slim-arrow-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\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          (change)=\"onRawValueChange($event)\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\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} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\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          (change)=\"onRawValueChange($event)\"\n        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\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          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\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:not([lx-button]){border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]){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:not([lx-button]) .text-muted,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: 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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] }); }
 }
 __decorate([
     Observe('initDateString')
@@ -7054,7 +7059,7 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$6.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$5.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: KeyboardSortableItemDirective, isStandalone: true, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
@@ -7062,7 +7067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxKeyboardSortableItem]'
                 }]
-        }], ctorParameters: () => [{ type: i1$6.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$5.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -7441,13 +7446,13 @@ class InputComponent {
     ngOnDestroy() {
         this.destroyed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, deps: [{ token: i1$5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, deps: [{ token: i1$4.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: InputComponent, isStandalone: true, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: ``, isInline: true, styles: [":host:where(:not(.lxFioriReskin)){height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:where(:not(.lxFioriReskin)):focus{border-color:#99c6fa}:host:where(:not(.lxFioriReskin)).error{border-color:#f96464}:host:where(:not(.lxFioriReskin)).lx-max-length-counter-input.error{color:#f96464}:host:where(:not(.lxFioriReskin)).lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host:where(:not(.lxFioriReskin)).lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--lxFontSize, 14px);float:right;margin-left:auto;margin-top:2px}:host:where(:not(.lxFioriReskin)).disabled{background-color:#f0f2f5;color:#61779d}:host(.lxFioriReskin){height:var(--sapElement_Compact_Height);padding:0 .5rem;border:none;border-radius:var(--sapField_BorderCornerRadius);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);outline:none;transition:none}:host(.lxFioriReskin)::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin)::selection{background:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}:host(.lxFioriReskin):hover:not(.disabled,:disabled):not(:focus){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin):focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin).disabled,:host(.lxFioriReskin):disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin).error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin).error:hover:not(:focus){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin).error:focus{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px}:host(.lxFioriReskin).lx-max-length-counter-input.error{color:var(--sapField_InvalidColor)}:host(.lxFioriReskin).lx-max-length-counter-input.error+span.lx-max-length-counter{color:var(--sapField_InvalidColor)}:host(.lxFioriReskin).lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--sapFontSize);float:right;margin-left:auto;margin-top:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input[lx-input]', template: ``, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [ReactiveFormsModule], styles: [":host:where(:not(.lxFioriReskin)){height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:where(:not(.lxFioriReskin)):focus{border-color:#99c6fa}:host:where(:not(.lxFioriReskin)).error{border-color:#f96464}:host:where(:not(.lxFioriReskin)).lx-max-length-counter-input.error{color:#f96464}:host:where(:not(.lxFioriReskin)).lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host:where(:not(.lxFioriReskin)).lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--lxFontSize, 14px);float:right;margin-left:auto;margin-top:2px}:host:where(:not(.lxFioriReskin)).disabled{background-color:#f0f2f5;color:#61779d}:host(.lxFioriReskin){height:var(--sapElement_Compact_Height);padding:0 .5rem;border:none;border-radius:var(--sapField_BorderCornerRadius);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);outline:none;transition:none}:host(.lxFioriReskin)::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin)::selection{background:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}:host(.lxFioriReskin):hover:not(.disabled,:disabled):not(:focus){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin):focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin).disabled,:host(.lxFioriReskin):disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin).error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin).error:hover:not(:focus){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin).error:focus{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px}:host(.lxFioriReskin).lx-max-length-counter-input.error{color:var(--sapField_InvalidColor)}:host(.lxFioriReskin).lx-max-length-counter-input.error+span.lx-max-length-counter{color:var(--sapField_InvalidColor)}:host(.lxFioriReskin).lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--sapFontSize);float:right;margin-left:auto;margin-top:2px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { error: [{
                 type: Input
@@ -7753,7 +7758,7 @@ class ResponsiveInputComponent {
                 multi: true,
                 useExisting: forwardRef(() => ResponsiveInputComponent)
             }
-        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  autocomplete=\"off\"\n  aria-autocomplete=\"list\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  autocomplete=\"off\"\n  aria-autocomplete=\"list\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
@@ -8169,7 +8174,7 @@ class MultiSelectComponent extends BaseSelectDirective {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -8321,7 +8326,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -8701,11 +8706,11 @@ class OptionsDropdownComponent {
         this.lxButton?.dispatchEvent(newEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning", dropdownClass: "dropdownClass", isFlexEnabledTriggerContainer: "isFlexEnabledTriggerContainer" }, outputs: { opened: "opened", closed: "closed", closedWithoutSelection: "closedWithoutSelection" }, host: { properties: { "style.display": "this.displayStyle" } }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n} @else {\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n}\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  @if (open) {\n    <ul\n      [id]=\"listboxId\"\n      [class]=\"dropdownClass\"\n      [class.left]=\"align === 'left'\"\n      [class.showScrollbar]=\"maxHeight !== 'none'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-owns]=\"optionIds.join(' ')\"\n    >\n      <ng-content />\n    </ul>\n  }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning", dropdownClass: "dropdownClass", isFlexEnabledTriggerContainer: "isFlexEnabledTriggerContainer" }, outputs: { opened: "opened", closed: "closed", closedWithoutSelection: "closedWithoutSelection" }, host: { properties: { "style.display": "this.displayStyle" } }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n} @else {\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n}\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  @if (open) {\n    <ul\n      [id]=\"listboxId\"\n      [class]=\"dropdownClass\"\n      [class.lxOptionsDropdownList]=\"true\"\n      [class.left]=\"align === 'left'\"\n      [class.showScrollbar]=\"maxHeight !== 'none'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-owns]=\"optionIds.join(' ')\"\n    >\n      <ng-content />\n    </ul>\n  }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}:host-context(body.lxFioriReskin) .overlayDropdown ul{position:static}:host-context(body.lxFioriReskin) ul{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}:host-context(body.lxFioriReskin) ul.left{right:0;padding-right:0}:host-context(body.lxFioriReskin) ul.showScrollbar{overflow-y:auto}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionsDropdownList{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, NgClass, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n} @else {\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n}\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  @if (open) {\n    <ul\n      [id]=\"listboxId\"\n      [class]=\"dropdownClass\"\n      [class.left]=\"align === 'left'\"\n      [class.showScrollbar]=\"maxHeight !== 'none'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-owns]=\"optionIds.join(' ')\"\n    >\n      <ng-content />\n    </ul>\n  }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"] }]
+            args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [NgTemplateOutlet, NgClass, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n} @else {\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n}\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  @if (open) {\n    <ul\n      [id]=\"listboxId\"\n      [class]=\"dropdownClass\"\n      [class.lxOptionsDropdownList]=\"true\"\n      [class.left]=\"align === 'left'\"\n      [class.showScrollbar]=\"maxHeight !== 'none'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-owns]=\"optionIds.join(' ')\"\n    >\n      <ng-content />\n    </ul>\n  }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}:host-context(body.lxFioriReskin) .overlayDropdown ul{position:static}:host-context(body.lxFioriReskin) ul{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}:host-context(body.lxFioriReskin) ul.left{right:0;padding-right:0}:host-context(body.lxFioriReskin) ul.showScrollbar{overflow-y:auto}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionsDropdownList{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
                 type: Input
             }], closeOnScroll: [{
@@ -8822,11 +8827,11 @@ class OptionsSubDropdownComponent {
         this.hidden = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: OptionsSubDropdownComponent, isStandalone: true, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [autocloseIgnore]=\"trigger ? [trigger.elementRef] : []\"\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: OptionsSubDropdownComponent, isStandalone: true, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [autocloseIgnore]=\"trigger ? [trigger.elementRef] : []\"\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}:host(.lxFioriReskin) .spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0}:host(.lxFioriReskin) .spacingContainer.left{left:auto;right:100%;padding:0}:host(.lxFioriReskin) .sub-dropdown{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap;position:relative}:host(.lxFioriReskin) .sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-options-sub-dropdown', imports: [AutocloseDirective, AsyncPipe], template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [autocloseIgnore]=\"trigger ? [trigger.elementRef] : []\"\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"] }]
+            args: [{ selector: 'lx-options-sub-dropdown', hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [AutocloseDirective, AsyncPipe], template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [autocloseIgnore]=\"trigger ? [trigger.elementRef] : []\"\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}:host(.lxFioriReskin) .spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0}:host(.lxFioriReskin) .spacingContainer.left{left:auto;right:100%;padding:0}:host(.lxFioriReskin) .sub-dropdown{position:absolute;width:max-content;min-width:6.25rem;height:auto;background-color:var(--sapGroup_ContentBackground);border:none;border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);text-align:left;list-style:none;margin:0;padding:0;z-index:20;white-space:nowrap;position:relative}:host(.lxFioriReskin) .sub-dropdown.showScrollbar{overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: Input
             }], align: [{
@@ -9208,7 +9213,7 @@ class PickerComponent {
     }
     propagateChange(_value) { }
     onTouched() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerComponent, deps: [{ token: i1$7.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerComponent, deps: [{ token: i1$6.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -9226,7 +9231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             useExisting: forwardRef(() => PickerComponent)
                         }
                     ], imports: [AutocloseDirective], template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\" />\n  @if (open) {\n    <ul\n      class=\"pickerOptions\"\n      lxAutoclose\n      (autoclose)=\"closePicker()\"\n      role=\"listbox\"\n      [style.margin-left]=\"leftOffset\"\n      [attr.aria-activedescendant]=\"activeDescendantsId\"\n      [attr.aria-label]=\"listBoxAriaLabel\"\n      [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n    >\n      <ng-content />\n    </ul>\n  }\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$7.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
+        }], ctorParameters: () => [{ type: i1$6.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
                 type: Input
@@ -9721,17 +9726,17 @@ class SingleSelectComponent extends BaseSelectDirective {
                 multi: true,
                 useExisting: forwardRef(() => SingleSelectComponent)
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"markInvalid\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-single-select', providers: [
+            args: [{ selector: 'lx-single-select', hostDirectives: [{ directive: FioriReskinAwareDirective }], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => SingleSelectComponent)
                         }
-                    ], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
+                    ], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"markInvalid\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
                 type: Input
             }], selectionBackground: [{
@@ -10093,7 +10098,7 @@ class ContenteditableDirective {
     sanitize(content) {
         return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, decorators: [{
@@ -10101,7 +10106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxContenteditableModel]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$8.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$7.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
                 type: Input
             }], lxContenteditableModelChange: [{
                 type: Output
@@ -10225,7 +10230,7 @@ class FormErrorDirective {
             this.ref.instance.dynamicErrorMessage.set('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i1$5.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i1$4.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, decorators: [{
@@ -10233,7 +10238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxFormError]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -11210,7 +11215,7 @@ function truncate(editor) {
         key: truncatePluginKey,
         state: {
             init() {
-                return { collapsed: true, activated: false, showToggleButton: true, maxLines: 1 };
+                return { collapsed: true, activated: false, showToggleButton: true, showToggleButtonOnHover: false, maxLines: 1 };
             },
             apply: (tr, state) => {
                 const meta = tr.getMeta(truncatePluginKey);
@@ -11228,7 +11233,25 @@ function truncate(editor) {
                 }
             });
             resizeObserver.observe(view.dom);
+            function updateLinkTabIndex(collapsed) {
+                const links = view.dom.querySelectorAll('a');
+                links.forEach((link) => {
+                    if (collapsed) {
+                        link.setAttribute('tabindex', '-1');
+                    }
+                    else {
+                        link.removeAttribute('tabindex');
+                    }
+                });
+            }
             return {
+                update() {
+                    if (editor.storage['mode'] !== 'view') {
+                        return;
+                    }
+                    const { collapsed, activated } = truncatePluginKey.getState(view.state);
+                    updateLinkTabIndex(!!collapsed && !!activated);
+                },
                 destroy() {
                     resizeObserver.disconnect();
                 }
@@ -12004,7 +12027,7 @@ class LinkModalComponent {
         dispatchLinkState(this.editor, { open: false, url: null, text: null });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinkModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LinkModalComponent, isStandalone: true, selector: "lx-link-modal", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true, isSignal: true }], ngImport: i0, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n  <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n  <form #form=\"ngForm\" (submit)=\"saveLink()\">\n    <div class=\"link-modal-body\">\n      <div class=\"form-group required\">\n        <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n        <input\n          #titleInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"text\"\n          type=\"text\"\n          [ngModel]=\"text\"\n          [lxAutofocus]=\"true\"\n          [lxAutofocusTimeout]=\"10\"\n          [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group required\">\n        <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n        <input\n          #urlInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"url\"\n          type=\"text\"\n          [ngModel]=\"url\"\n          [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n          lxUrl\n        />\n        @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n          <lx-error-message>\n            {{ NAME + '.invalidUrl' | translate }}\n          </lx-error-message>\n        }\n      </div>\n    </div>\n\n    <lx-modal-footer>\n      <div class=\"link-modal-actions\">\n        <div class=\"link-modal-left-buttons\">\n          @if (url) {\n            <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n              {{ NAME + '.removeLink' | translate }}\n            </button>\n          }\n        </div>\n\n        <div class=\"link-modal-right-buttons\">\n          <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n            {{ NAME + '.cancel' | translate }}\n          </button>\n          <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n            {{ NAME + '.ok' | translate }}\n          </button>\n        </div>\n      </div>\n    </lx-modal-footer>\n  </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lx-modal", inputs: ["open", "showCloseButton", "showBackButton", "verticalScroll", "size", "minWidth", "isFocusTrap", "canModalBeClosed"], outputs: ["close", "back"] }, { kind: "component", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: ["title", "bottomBorder"] }, { kind: "component", type: ModalFooterComponent, selector: "lx-modal-footer", inputs: ["border"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: UrlValidatorDirective, selector: "[lxUrl][ngModel]" }, { kind: "component", type: ErrorMessageComponent, selector: "lx-error-message" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LinkModalComponent, isStandalone: true, selector: "lx-link-modal", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true, isSignal: true }], ngImport: i0, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n  <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n  <form #form=\"ngForm\" (submit)=\"saveLink()\">\n    <div class=\"link-modal-body\">\n      <div class=\"form-group required\">\n        <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n        <input\n          #titleInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"text\"\n          type=\"text\"\n          [ngModel]=\"text\"\n          [lxAutofocus]=\"true\"\n          [lxAutofocusTimeout]=\"10\"\n          [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group required\">\n        <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n        <input\n          #urlInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"url\"\n          type=\"text\"\n          [ngModel]=\"url\"\n          [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n          lxUrl\n        />\n        @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n          <lx-error-message>\n            {{ NAME + '.invalidUrl' | translate }}\n          </lx-error-message>\n        }\n      </div>\n    </div>\n\n    <lx-modal-footer>\n      <div class=\"link-modal-actions\">\n        <div class=\"link-modal-left-buttons\">\n          @if (url) {\n            <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n              {{ NAME + '.removeLink' | translate }}\n            </button>\n          }\n        </div>\n\n        <div class=\"link-modal-right-buttons\">\n          <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n            {{ NAME + '.cancel' | translate }}\n          </button>\n          <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n            {{ NAME + '.ok' | translate }}\n          </button>\n        </div>\n      </div>\n    </lx-modal-footer>\n  </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lx-modal", inputs: ["open", "showCloseButton", "showBackButton", "verticalScroll", "size", "minWidth", "isFocusTrap", "canModalBeClosed"], outputs: ["close", "back"] }, { kind: "component", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: ["title", "bottomBorder"] }, { kind: "component", type: ModalFooterComponent, selector: "lx-modal-footer", inputs: ["border"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: UrlValidatorDirective, selector: "[lxUrl][ngModel]" }, { kind: "component", type: ErrorMessageComponent, selector: "lx-error-message" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinkModalComponent, decorators: [{
             type: Component,
@@ -12129,10 +12152,12 @@ class RichTextEditorComponent {
         this.maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
         this.customExtensions = input([], ...(ngDevMode ? [{ debugName: "customExtensions" }] : []));
         this.autoHideToolbar = input(false, ...(ngDevMode ? [{ debugName: "autoHideToolbar" }] : []));
+        this.clickTogglesExpand = input(false, ...(ngDevMode ? [{ debugName: "clickTogglesExpand" }] : []));
         this.blur = output();
         this.value = null;
         this.disabled = false;
         this.editor = inject(TipTapEditorDirective).editor;
+        this.cdr = inject(ChangeDetectorRef);
         this.toolbarVisibility = computed(() => {
             if (!this.autoHideToolbar()) {
                 return true;
@@ -12142,6 +12167,18 @@ class RichTextEditorComponent {
         this.isToolbarVisible = signal(false, ...(ngDevMode ? [{ debugName: "isToolbarVisible" }] : []));
         this.onChange = (_value) => { };
         this.onTouched = () => { };
+        this.onTransaction = ({ transaction }) => {
+            if (transaction.getMeta(truncatePluginKey)) {
+                this.cdr.markForCheck();
+            }
+        };
+    }
+    get showToggleButtonOnHover() {
+        return truncatePluginKey.getState(this.editor().state)?.showToggleButtonOnHover ?? false;
+    }
+    get isTruncateButtonVisible() {
+        const state = truncatePluginKey.getState(this.editor().state);
+        return (state?.activated && state?.showToggleButton) ?? false;
     }
     onFocusIn() {
         if (this.autoHideToolbar()) {
@@ -12160,7 +12197,20 @@ class RichTextEditorComponent {
             }, 100);
         }
     }
+    ngOnInit() {
+        this.editor().on('transaction', this.onTransaction);
+    }
+    toggleCollapsed(event) {
+        event.stopPropagation();
+        const editor = this.editor();
+        const state = truncatePluginKey.getState(editor.view.state);
+        if (!state?.activated) {
+            return;
+        }
+        editor.view.dispatch(editor.view.state.tr.setMeta(truncatePluginKey, { ...state, collapsed: !state.collapsed }));
+    }
     ngOnDestroy() {
+        this.editor().off('transaction', this.onTransaction);
         this.editor().destroy();
     }
     writeValue(value) {
@@ -12176,14 +12226,14 @@ class RichTextEditorComponent {
         this.disabled = isDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: RichTextEditorComponent, isStandalone: true, selector: "lx-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: true, transformFunction: null }, additionalFeatures: { classPropertyName: "additionalFeatures", publicName: "additionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, customExtensions: { classPropertyName: "customExtensions", publicName: "customExtensions", isSignal: true, isRequired: false, transformFunction: null }, autoHideToolbar: { classPropertyName: "autoHideToolbar", publicName: "autoHideToolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "style.--editor-max-height": "maxHeight()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: RichTextEditorComponent, isStandalone: true, selector: "lx-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: true, transformFunction: null }, additionalFeatures: { classPropertyName: "additionalFeatures", publicName: "additionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, customExtensions: { classPropertyName: "customExtensions", publicName: "customExtensions", isSignal: true, isRequired: false, transformFunction: null }, autoHideToolbar: { classPropertyName: "autoHideToolbar", publicName: "autoHideToolbar", isSignal: true, isRequired: false, transformFunction: null }, clickTogglesExpand: { classPropertyName: "clickTogglesExpand", publicName: "clickTogglesExpand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "style.--editor-max-height": "maxHeight()" } }, providers: [
             ExtensionsBuilder,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RichTextEditorComponent),
                 multi: true
             }
-        ], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#99a5bb;pointer-events:none;float:left;height:0}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror p[data-type=caption]{font-size:var(--lxFontHeader5Size);font-style:italic;color:#61779d;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor", "isVisible"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div\n  [class.viewMode]=\"mode() === 'view'\"\n  [class.editMode]=\"mode() === 'edit'\"\n  [class.disabled]=\"disabled\"\n  [class.compact]=\"showToggleButtonOnHover\"\n>\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n    [attr.tabindex]=\"mode() === 'view' && isTruncateButtonVisible ? 0 : null\"\n    [class.clickable]=\"clickTogglesExpand() && mode() === 'view'\"\n    (click)=\"clickTogglesExpand() && mode() === 'view' ? toggleCollapsed($event) : null\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#99a5bb;pointer-events:none;float:left;height:0}.compact{display:flex;align-items:flex-end;column-gap:12px}.compact lx-truncate-button{flex:0 0 90px;visibility:hidden}.compact:hover lx-truncate-button,.compact:focus-within lx-truncate-button{visibility:visible}.viewMode{width:100%}:host ::ng-deep tiptap-editor.clickable{cursor:pointer}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror p[data-type=caption]{font-size:var(--lxFontHeader5Size);font-style:italic;color:#61779d;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor", "isVisible"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -12214,8 +12264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TableBubbleMenuComponent,
                         ExtensionEnabledPipe,
                         TruncateButtonComponent
-                    ], template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#99a5bb;pointer-events:none;float:left;height:0}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror p[data-type=caption]{font-size:var(--lxFontHeader5Size);font-style:italic;color:#61779d;margin-top:4px}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: true }] }], additionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFeatures", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], customExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customExtensions", required: false }] }], autoHideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHideToolbar", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
+                    ], template: "<div\n  [class.viewMode]=\"mode() === 'view'\"\n  [class.editMode]=\"mode() === 'edit'\"\n  [class.disabled]=\"disabled\"\n  [class.compact]=\"showToggleButtonOnHover\"\n>\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n    [attr.tabindex]=\"mode() === 'view' && isTruncateButtonVisible ? 0 : null\"\n    [class.clickable]=\"clickTogglesExpand() && mode() === 'view'\"\n    (click)=\"clickTogglesExpand() && mode() === 'view' ? toggleCollapsed($event) : null\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#99a5bb;pointer-events:none;float:left;height:0}.compact{display:flex;align-items:flex-end;column-gap:12px}.compact lx-truncate-button{flex:0 0 90px;visibility:hidden}.compact:hover lx-truncate-button,.compact:focus-within lx-truncate-button{visibility:visible}.viewMode{width:100%}:host ::ng-deep tiptap-editor.clickable{cursor:pointer}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror p[data-type=caption]{font-size:var(--lxFontHeader5Size);font-style:italic;color:#61779d;margin-top:4px}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: true }] }], additionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFeatures", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], customExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customExtensions", required: false }] }], autoHideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHideToolbar", required: false }] }], clickTogglesExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickTogglesExpand", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
 
 class FocusEditorDirective {
     constructor() {
@@ -12672,7 +12722,7 @@ class MaxLengthCounterDirective {
             this.ngControl.control?.updateValueAndValidity({ onlySelf: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$4.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: MaxLengthCounterDirective, isStandalone: true, selector: "[lxMaxLengthCounter]", inputs: { lxMaxLengthCounter: "lxMaxLengthCounter", lxMaxLengthCounterRef: "lxMaxLengthCounterRef" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaxLengthCounterDirective, decorators: [{
@@ -12680,7 +12730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxMaxLengthCounter]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$4.NgControl, decorators: [{
                     type: Self
                 }] }], propDecorators: { lxMaxLengthCounter: [{
                 type: Input
@@ -13338,7 +13388,7 @@ class TabComponent {
             this.select();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$9.Router }, { token: i1$9.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$8.Router }, { token: i1$8.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", iconDesign: "iconDesign", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
@@ -13347,7 +13397,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent], template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$9.Router }, { type: i1$9.ActivatedRoute }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$8.Router }, { type: i1$8.ActivatedRoute }], propDecorators: { icon: [{
                 type: Input
             }], iconDesign: [{
                 type: Input