@leanix/components 0.4.954 → 0.4.956

package/fesm2022/leanix-components.mjs

@@ -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$8 from '@angular/router';
+import * as i1$7 from '@angular/router';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import { unsafeRegisterIcon } 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$4 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, NgForm, Validators, FormControl } from '@angular/forms';
 import * as i2$1 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import * as i1$5 from '@angular/cdk/drag-drop';
+import * as i1$4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$6 from '@angular/cdk/bidi';
-import * as i1$7 from '@angular/platform-browser';
+import * as i1$5 from '@angular/cdk/bidi';
+import * as i1$6 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';
@@ -5171,7 +5171,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$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 }); }
+        ], 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: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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')
@@ -5935,9 +5935,17 @@ class MonthPickerComponent {
         <thead>
           <tr>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
-                ‹
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-left-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
+                (click)="datePicker.move(-1)"
+                tabindex="-1"
+              ></button>
             </th>
             <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
               <button
@@ -5954,9 +5962,17 @@ class MonthPickerComponent {
               </button>
             </th>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-                ›
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-right-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
+                (click)="datePicker.move(1)"
+                tabindex="-1"
+              ></button>
             </th>
           </tr>
         </thead>
@@ -5990,7 +6006,7 @@ class MonthPickerComponent {
         </tbody>
       </table>
     }
-  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
@@ -6000,9 +6016,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <thead>
           <tr>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
-                ‹
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-left-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
+                (click)="datePicker.move(-1)"
+                tabindex="-1"
+              ></button>
             </th>
             <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
               <button
@@ -6019,9 +6043,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               </button>
             </th>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-                ›
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-right-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
+                (click)="datePicker.move(1)"
+                tabindex="-1"
+              ></button>
             </th>
           </tr>
         </thead>
@@ -6055,7 +6087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </tbody>
       </table>
     }
-  `, imports: [NgClass], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+  `, imports: [NgClass, ButtonComponent], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
 // @deprecated
@@ -6107,9 +6139,17 @@ class YearPickerComponent {
         <thead>
           <tr>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
-                ‹
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-left-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
+                (click)="datePicker.move(-1)"
+                tabindex="-1"
+              ></button>
             </th>
             <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
               <button
@@ -6126,9 +6166,17 @@ class YearPickerComponent {
               </button>
             </th>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-                ›
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-right-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
+                (click)="datePicker.move(1)"
+                tabindex="-1"
+              ></button>
             </th>
           </tr>
         </thead>
@@ -6162,7 +6210,7 @@ class YearPickerComponent {
         </tbody>
       </table>
     }
-  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: YearPickerComponent, decorators: [{
             type: Component,
@@ -6172,9 +6220,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <thead>
           <tr>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
-                ‹
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-left-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
+                (click)="datePicker.move(-1)"
+                tabindex="-1"
+              ></button>
             </th>
             <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
               <button
@@ -6191,9 +6247,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               </button>
             </th>
             <th>
-              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-                ›
-              </button>
+              <button
+                lx-button
+                type="button"
+                color="primary"
+                mode="ghost"
+                [square]="true"
+                icon="navigation-right-arrow"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
+                (click)="datePicker.move(1)"
+                tabindex="-1"
+              ></button>
             </th>
           </tr>
         </thead>
@@ -6227,7 +6291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </tbody>
       </table>
     }
-  `, imports: [NgClass], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+  `, imports: [NgClass, ButtonComponent], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
 class DatepickerConfig {
@@ -6790,7 +6854,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$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" }] }); }
+        ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], 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          [class.invalid]=\"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      [cdkConnectedOverlayPanelClass]=\"'lxDateInputOverlay'\"\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          [class.invalid]=\"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: [":host:where(:not(.lxFioriReskin)) .backdrop{background-color:transparent}:host:where(:not(.lxFioriReskin)) .datepickerContainer{z-index:700}:host:where(:not(.lxFioriReskin)) .wrapper .forLink .popup{top:15px}:host:where(:not(.lxFioriReskin)) .dateControl{position:relative}:host:where(:not(.lxFioriReskin)) .calendar{position:relative}:host:where(:not(.lxFioriReskin)) .legacy .backdrop{position:fixed;z-index:2;inset:0}:host:where(:not(.lxFioriReskin)) .legacy .datepickerContainer{position:absolute}:host:where(:not(.lxFioriReskin)) .legacy.forLink{display:inline-block}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .text-info{color:#2a303d}:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .text-muted{color:#99a5bb}:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .btn.active,:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .btn.active .text-info{color:#fff}:host:where(:not(.lxFioriReskin)) datepicker.popup{position:relative;left:0;z-index:700;border-radius:3px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .well{margin:0;padding:12px 0 0;border:none;background:none;box-shadow:none}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent;border-radius:8px;padding:8px 6px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid;border-radius:8px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]){background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2;background-color:#0070f2;border-radius:8px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background-color:#0070f2;border-color:#0070f2}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}:host-context(.input-group):where(:not(.lxFioriReskin)) .datepickerContainer{top:100%}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay .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}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .text-info{color:#2a303d}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .text-muted{color:#99a5bb}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .btn.active,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .btn.active .text-info{color:#fff}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup{position:relative;left:0;z-index:700;border-radius:3px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .well{margin:0;padding:12px 0 0;border:none;background:none;box-shadow:none}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--lxFontSize, 14px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent;border-radius:8px;padding:8px 6px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid;border-radius:8px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]){background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2;background-color:#0070f2;border-radius:8px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background-color:#0070f2;border-color:#0070f2}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}:host(.lxFioriReskin) .backdrop{background-color:transparent}:host(.lxFioriReskin) .datepickerContainer{z-index:700}:host(.lxFioriReskin) .dateControl{position:relative}:host(.lxFioriReskin) .calendar{position:relative}:host(.lxFioriReskin) .legacy .backdrop{position:fixed;z-index:2;inset:0}:host(.lxFioriReskin) .legacy .datepickerContainer{position:absolute}:host(.lxFioriReskin) .legacy.forLink{display:inline-block}:host(.lxFioriReskin) .wrapper:has(input.dateControl){position:relative;display:block}:host(.lxFioriReskin) .wrapper:has(input.dateControl):after{content:\"\";position:absolute;top:50%;right:.5rem;transform:translateY(-50%);width:1rem;height:1rem;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231d2d3e' d='M403 64q32 0 54.5 22.5T480 141v294q0 32-22.5 54.5T403 512H109q-32 0-54.5-22.5T32 435V141q0-32 22.5-54.5T109 64h25V26q0-11 7.5-18.5T160 0t18.5 7.5T186 26v38h140V26q0-11 7.5-18.5T352 0t18.5 7.5T378 26v38h25zm-294 51q-11 0-18.5 7.5T83 141v64h346v-64q0-11-7.5-18.5T403 115h-25v19q0 11-7.5 18.5T352 160t-18.5-7.5T326 134v-19H186v19q0 11-7.5 18.5T160 160t-18.5-7.5T134 134v-19h-25zm294 346q11 0 18.5-7.5T429 435V256H83v179q0 11 7.5 18.5T109 461h294zM160 320q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9zm96 0q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9zm96 0q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9z'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center}:host(.lxFioriReskin) .wrapper:has(input.dateControl):has(input:disabled):after{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) input.dateControl{height:var(--sapElement_Compact_Height);padding:0 2rem 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) input.dateControl::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) input.dateControl::selection{background:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}:host(.lxFioriReskin) input.dateControl:hover:not(:disabled):not(:focus){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) input.dateControl:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) input.dateControl:disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .has-error input.dateControl,:host(.lxFioriReskin) input.dateControl.text-danger,:host(.lxFioriReskin) input.dateControl.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .has-error input.dateControl:hover:not(:focus),:host(.lxFioriReskin) input.dateControl.text-danger:hover:not(:focus),:host(.lxFioriReskin) input.dateControl.invalid:hover:not(:focus){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .has-error input.dateControl:focus,:host(.lxFioriReskin) input.dateControl.text-danger:focus,:host(.lxFioriReskin) input.dateControl.invalid: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) .datepickerContainer datepicker{display:block;background:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);width:17.75rem;height:18rem;padding:.5rem .25rem 0;margin-top:.25rem;box-sizing:border-box;z-index:700;font-family:var(--sapFontFamily);color:var(--sapTextColor)}:host(.lxFioriReskin) datepicker ::ng-deep .well{margin:0;padding:0;border:none;background:none;box-shadow:none}:host(.lxFioriReskin) datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);background:transparent;box-shadow:none;height:auto;min-width:0;padding:0}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th{padding:0;height:2rem}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:var(--sapButton_TextColor);font-family:var(--sapFontBoldFamily);border-radius:.5rem;border-color:var(--sapButton_Lite_BorderColor);height:2rem;padding:0 .5rem}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):focus,:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:-2px}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):disabled,:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th button[lx-button]{width:1.625rem;min-width:1.625rem;height:2rem;border-radius:.5rem}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th button[lx-button]:hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);border-color:transparent;box-shadow:0 0 .125rem #556b82b8}:host(.lxFioriReskin) datepicker ::ng-deep th small b{font-weight:400;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize)}:host(.lxFioriReskin) datepicker ::ng-deep tr td:first-child{color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize);padding:0}:host(.lxFioriReskin) datepicker ::ng-deep table{border-spacing:2px;border-collapse:separate;width:100%}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:first-child td{padding-top:2rem}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:last-child td{padding-bottom:1rem}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody td{padding-left:.25rem;padding-right:.25rem}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]){color:var(--sapButton_TextColor);background:transparent}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:none;border-radius:.4375rem;padding:0;height:2rem;width:2rem;min-width:0;background:var(--sapLegend_WorkingBackground);color:var(--sapTextColor);font-size:var(--sapFontSize)}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) span,:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted,:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-info{color:inherit}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted{color:var(--sapContent_LabelColor)}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background:var(--sapList_Hover_Background);color:var(--sapTextColor)}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:-.125rem;border-radius:.4375rem}:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]){background:transparent;box-shadow:none;color:var(--sapContent_Selected_TextColor);border:.0625rem solid var(--sapList_SelectionBorderColor);border-radius:.5rem;font-family:var(--sapFontBoldFamily)}:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) span,:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background:var(--sapList_Hover_Background)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay .datepickerContainer datepicker{display:block;background:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);width:17.75rem;height:18rem;padding:.5rem .25rem 0;margin-top:.25rem;box-sizing:border-box;z-index:700;font-family:var(--sapFontFamily);color:var(--sapTextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .well{margin:0;padding:0;border:none;background:none;box-shadow:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);background:transparent;box-shadow:none;height:auto;min-width:0;padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th{padding:0;height:2rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:var(--sapButton_TextColor);font-family:var(--sapFontBoldFamily);border-radius:.5rem;border-color:var(--sapButton_Lite_BorderColor);height:2rem;padding:0 .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):focus,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:-2px}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):disabled,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).disabled{opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th button[lx-button]{width:1.625rem;min-width:1.625rem;height:2rem;border-radius:.5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th button[lx-button]:hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);border-color:transparent;box-shadow:0 0 .125rem #556b82b8}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep th small b{font-weight:400;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep tr td:first-child{color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize);padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table{border-spacing:2px;border-collapse:separate;width:100%}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:first-child td{padding-top:2rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:last-child td{padding-bottom:1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody td{padding-left:.25rem;padding-right:.25rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]){color:var(--sapButton_TextColor);background:transparent}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:none;border-radius:.4375rem;padding:0;height:2rem;width:2rem;min-width:0;background:var(--sapLegend_WorkingBackground);color:var(--sapTextColor);font-size:var(--sapFontSize)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) span,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-info{color:inherit}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted{color:var(--sapContent_LabelColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background:var(--sapList_Hover_Background);color:var(--sapTextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:-.125rem;border-radius:.4375rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]){background:transparent;box-shadow:none;color:var(--sapContent_Selected_TextColor);border:.0625rem solid var(--sapList_SelectionBorderColor);border-radius:.5rem;font-family:var(--sapFontBoldFamily)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) span,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background:var(--sapList_Hover_Background)}\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: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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')
@@ -6800,7 +6864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{ selector: 'lx-date-input', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-                    ], imports: [
+                    ], hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [
                         NgTemplateOutlet,
                         CdkOverlayOrigin,
                         FormsModule,
@@ -6810,7 +6874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         CustomDatePipe,
                         MarkInvalidDirective,
                         ButtonComponent
-                    ], 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"] }]
+                    ], 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          [class.invalid]=\"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      [cdkConnectedOverlayPanelClass]=\"'lxDateInputOverlay'\"\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          [class.invalid]=\"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: [":host:where(:not(.lxFioriReskin)) .backdrop{background-color:transparent}:host:where(:not(.lxFioriReskin)) .datepickerContainer{z-index:700}:host:where(:not(.lxFioriReskin)) .wrapper .forLink .popup{top:15px}:host:where(:not(.lxFioriReskin)) .dateControl{position:relative}:host:where(:not(.lxFioriReskin)) .calendar{position:relative}:host:where(:not(.lxFioriReskin)) .legacy .backdrop{position:fixed;z-index:2;inset:0}:host:where(:not(.lxFioriReskin)) .legacy .datepickerContainer{position:absolute}:host:where(:not(.lxFioriReskin)) .legacy.forLink{display:inline-block}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .text-info{color:#2a303d}:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .text-muted{color:#99a5bb}:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .btn.active,:host:where(:not(.lxFioriReskin)) datepicker.popup ::ng-deep .btn.active .text-info{color:#fff}:host:where(:not(.lxFioriReskin)) datepicker.popup{position:relative;left:0;z-index:700;border-radius:3px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .well{margin:0;padding:12px 0 0;border:none;background:none;box-shadow:none}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent;border-radius:8px;padding:8px 6px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid;border-radius:8px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]){background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2;background-color:#0070f2;border-radius:8px}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background-color:#0070f2;border-color:#0070f2}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}:host:where(:not(.lxFioriReskin)) datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}:host-context(.input-group):where(:not(.lxFioriReskin)) .datepickerContainer{top:100%}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay .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}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .text-info{color:#2a303d}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .text-muted{color:#99a5bb}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .btn.active,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup ::ng-deep .btn.active .text-info{color:#fff}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker.popup{position:relative;left:0;z-index:700;border-radius:3px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .well{margin:0;padding:12px 0 0;border:none;background:none;box-shadow:none}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--lxFontSize, 14px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent;border-radius:8px;padding:8px 6px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid;border-radius:8px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]){background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2;background-color:#0070f2;border-radius:8px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background-color:#0070f2;border-color:#0070f2}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}:host(.lxFioriReskin) .backdrop{background-color:transparent}:host(.lxFioriReskin) .datepickerContainer{z-index:700}:host(.lxFioriReskin) .dateControl{position:relative}:host(.lxFioriReskin) .calendar{position:relative}:host(.lxFioriReskin) .legacy .backdrop{position:fixed;z-index:2;inset:0}:host(.lxFioriReskin) .legacy .datepickerContainer{position:absolute}:host(.lxFioriReskin) .legacy.forLink{display:inline-block}:host(.lxFioriReskin) .wrapper:has(input.dateControl){position:relative;display:block}:host(.lxFioriReskin) .wrapper:has(input.dateControl):after{content:\"\";position:absolute;top:50%;right:.5rem;transform:translateY(-50%);width:1rem;height:1rem;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231d2d3e' d='M403 64q32 0 54.5 22.5T480 141v294q0 32-22.5 54.5T403 512H109q-32 0-54.5-22.5T32 435V141q0-32 22.5-54.5T109 64h25V26q0-11 7.5-18.5T160 0t18.5 7.5T186 26v38h140V26q0-11 7.5-18.5T352 0t18.5 7.5T378 26v38h25zm-294 51q-11 0-18.5 7.5T83 141v64h346v-64q0-11-7.5-18.5T403 115h-25v19q0 11-7.5 18.5T352 160t-18.5-7.5T326 134v-19H186v19q0 11-7.5 18.5T160 160t-18.5-7.5T134 134v-19h-25zm294 346q11 0 18.5-7.5T429 435V256H83v179q0 11 7.5 18.5T109 461h294zM160 320q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9zm96 0q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9zm96 0q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9z'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center}:host(.lxFioriReskin) .wrapper:has(input.dateControl):has(input:disabled):after{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) input.dateControl{height:var(--sapElement_Compact_Height);padding:0 2rem 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) input.dateControl::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) input.dateControl::selection{background:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}:host(.lxFioriReskin) input.dateControl:hover:not(:disabled):not(:focus){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) input.dateControl:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) input.dateControl:disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .has-error input.dateControl,:host(.lxFioriReskin) input.dateControl.text-danger,:host(.lxFioriReskin) input.dateControl.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .has-error input.dateControl:hover:not(:focus),:host(.lxFioriReskin) input.dateControl.text-danger:hover:not(:focus),:host(.lxFioriReskin) input.dateControl.invalid:hover:not(:focus){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .has-error input.dateControl:focus,:host(.lxFioriReskin) input.dateControl.text-danger:focus,:host(.lxFioriReskin) input.dateControl.invalid: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) .datepickerContainer datepicker{display:block;background:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);width:17.75rem;height:18rem;padding:.5rem .25rem 0;margin-top:.25rem;box-sizing:border-box;z-index:700;font-family:var(--sapFontFamily);color:var(--sapTextColor)}:host(.lxFioriReskin) datepicker ::ng-deep .well{margin:0;padding:0;border:none;background:none;box-shadow:none}:host(.lxFioriReskin) datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);background:transparent;box-shadow:none;height:auto;min-width:0;padding:0}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th{padding:0;height:2rem}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:var(--sapButton_TextColor);font-family:var(--sapFontBoldFamily);border-radius:.5rem;border-color:var(--sapButton_Lite_BorderColor);height:2rem;padding:0 .5rem}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):focus,:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:-2px}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):disabled,:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th button[lx-button]{width:1.625rem;min-width:1.625rem;height:2rem;border-radius:.5rem}:host(.lxFioriReskin) datepicker ::ng-deep table tr:first-child th button[lx-button]:hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);border-color:transparent;box-shadow:0 0 .125rem #556b82b8}:host(.lxFioriReskin) datepicker ::ng-deep th small b{font-weight:400;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize)}:host(.lxFioriReskin) datepicker ::ng-deep tr td:first-child{color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize);padding:0}:host(.lxFioriReskin) datepicker ::ng-deep table{border-spacing:2px;border-collapse:separate;width:100%}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:first-child td{padding-top:2rem}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:last-child td{padding-bottom:1rem}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody td{padding-left:.25rem;padding-right:.25rem}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]){color:var(--sapButton_TextColor);background:transparent}:host(.lxFioriReskin) datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:none;border-radius:.4375rem;padding:0;height:2rem;width:2rem;min-width:0;background:var(--sapLegend_WorkingBackground);color:var(--sapTextColor);font-size:var(--sapFontSize)}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) span,:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted,:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-info{color:inherit}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted{color:var(--sapContent_LabelColor)}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background:var(--sapList_Hover_Background);color:var(--sapTextColor)}:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,:host(.lxFioriReskin) datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:-.125rem;border-radius:.4375rem}:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]){background:transparent;box-shadow:none;color:var(--sapContent_Selected_TextColor);border:.0625rem solid var(--sapList_SelectionBorderColor);border-radius:.5rem;font-family:var(--sapFontBoldFamily)}:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) span,:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}:host(.lxFioriReskin) datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background:var(--sapList_Hover_Background)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay .datepickerContainer datepicker{display:block;background:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);width:17.75rem;height:18rem;padding:.5rem .25rem 0;margin-top:.25rem;box-sizing:border-box;z-index:700;font-family:var(--sapFontFamily);color:var(--sapTextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .well{margin:0;padding:0;border:none;background:none;box-shadow:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn:not([lx-button]){border:none;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);background:transparent;box-shadow:none;height:auto;min-width:0;padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th{padding:0;height:2rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:var(--sapButton_TextColor);font-family:var(--sapFontBoldFamily);border-radius:.5rem;border-color:var(--sapButton_Lite_BorderColor);height:2rem;padding:0 .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):focus,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:-2px}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]):disabled,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]).disabled{opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th button[lx-button]{width:1.625rem;min-width:1.625rem;height:2rem;border-radius:.5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table tr:first-child th button[lx-button]:hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);border-color:transparent;box-shadow:0 0 .125rem #556b82b8}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep th small b{font-weight:400;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep tr td:first-child{color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize);padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table{border-spacing:2px;border-collapse:separate;width:100%}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:first-child td{padding-top:2rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody tr:last-child td{padding-bottom:1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) tbody td{padding-left:.25rem;padding-right:.25rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]){color:var(--sapButton_TextColor);background:transparent}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep table:not(:has(thead tr:nth-child(2))) [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Lite_TextColor);box-shadow:0 0 .125rem #556b82b8}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:none;border-radius:.4375rem;padding:0;height:2rem;width:2rem;min-width:0;background:var(--sapLegend_WorkingBackground);color:var(--sapTextColor);font-size:var(--sapFontSize)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) span,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-info{color:inherit}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]) .text-muted{color:var(--sapContent_LabelColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover:not(:disabled){background:var(--sapList_Hover_Background);color:var(--sapTextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:-.125rem;border-radius:.4375rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]){background:transparent;box-shadow:none;color:var(--sapContent_Selected_TextColor);border:.0625rem solid var(--sapList_SelectionBorderColor);border-radius:.5rem;font-family:var(--sapFontBoldFamily)}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) span,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}::ng-deep body.lxFioriReskin .cdk-overlay-pane.lxDateInputOverlay datepicker ::ng-deep .btn-default.active:not([lx-button]):hover{background:var(--sapList_Hover_Background)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_FORMATS]
@@ -7052,7 +7116,7 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$4.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: [{
@@ -7060,7 +7124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxKeyboardSortableItem]'
                 }]
-        }], ctorParameters: () => [{ type: i1$5.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$4.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -7439,13 +7503,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$4.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: i2$2.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$4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i2$2.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { error: [{
                 type: Input
@@ -7751,7 +7815,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 }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], 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}:host(.lxFioriReskin){height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .responsiveInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);background:transparent}:host(.lxFioriReskin) .responsiveInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}\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 }); }
+        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], 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}:host(.lxFioriReskin){height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .responsiveInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);background:transparent}:host(.lxFioriReskin) .responsiveInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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,
@@ -8167,7 +8231,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, 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\"\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  [class.invalid]=\"markInvalid\"\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: [":host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}: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;margin-top:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;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;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 .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;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:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){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;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{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:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>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 .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\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" }] }); }
+        ], 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, 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\"\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  [class.invalid]=\"markInvalid\"\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: [":host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}: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;margin-top:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;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;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 .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;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:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){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;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{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:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>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 .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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,
@@ -9208,7 +9272,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$6.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$5.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 +9290,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$6.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
+        }], ctorParameters: () => [{ type: i1$5.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
                 type: Input
@@ -9721,7 +9785,7 @@ 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, 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:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){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" }] }); }
+        ], 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:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){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: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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,
@@ -10105,7 +10169,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$7.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$6.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: [{
@@ -10113,7 +10177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxContenteditableModel]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$7.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$6.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
                 type: Input
             }], lxContenteditableModelChange: [{
                 type: Output
@@ -10237,7 +10301,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$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.ɵ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: i2$2.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: [{
@@ -10245,7 +10309,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$4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i2$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -12034,7 +12098,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$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 }); }
+    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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.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,
@@ -12240,7 +12304,7 @@ class RichTextEditorComponent {
                 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\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 }); }
+        ], 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
@@ -12729,7 +12793,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$4.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: i2$2.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: [{
@@ -12737,7 +12801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: '[lxMaxLengthCounter]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
                     type: Self
                 }] }], propDecorators: { lxMaxLengthCounter: [{
                 type: Input
@@ -13395,7 +13459,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$8.Router }, { token: i1$8.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$7.Router }, { token: i1$7.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 }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], 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}.content{height:100%}:host:where(:not(.lxFioriReskin)) .tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}:host:where(:not(.lxFioriReskin)) .tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}:host:where(:not(.lxFioriReskin)) .tab:hover:after,:host:where(:not(.lxFioriReskin)) .tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin)) .tab.active{cursor:default}:host:where(:not(.lxFioriReskin)) .tab.disabled{opacity:.3;cursor:default}:host:where(:not(.lxFioriReskin)) .tab:hover .tabLabel,:host:where(:not(.lxFioriReskin)) .tab.active .tabLabel{color:#2a303d;transition:color .1s}:host:where(:not(.lxFioriReskin)) .tab:hover ui5-icon[design=NonInteractive],:host:where(:not(.lxFioriReskin)) .tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}:host:where(:not(.lxFioriReskin)) .portalTab,:host:where(:not(.lxFioriReskin)) .routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}:host:where(:not(.lxFioriReskin)) .portalTab.withIcon,:host:where(:not(.lxFioriReskin)) .routerLinkTab a.withIcon{padding-inline:14px}:host:where(:not(.lxFioriReskin)) .routerLinkTab a:focus{outline:0}:host:where(:not(.lxFioriReskin)) .routerLinkTab.active a,:host:where(:not(.lxFioriReskin)) .routerLinkTab.disabled a{cursor:default}:host:where(:not(.lxFioriReskin)) .withLabel .icon{margin-right:.5rem}:host:where(:not(.lxFioriReskin)) .icon{vertical-align:middle}:host:where(:not(.lxFioriReskin)) .noMargin{margin:0}:host:where(:not(.lxFioriReskin)) .noLeftMarginForFirstTab{margin-left:0}:host:where(:not(.lxFioriReskin)) .backgroundGray{background-color:#c2c9d6}:host:where(:not(.lxFioriReskin)) .backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}:host:where(:not(.lxFioriReskin)) .tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}:host:where(:not(.lxFioriReskin)) lx-counter{margin-left:8px}:host(.lxFioriReskin) .tab{position:relative;display:inline-flex;align-items:center;height:2.75rem;padding:0 1rem;margin:0;text-align:center;transition:none;cursor:pointer;color:var(--sapTab_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .tab.active{cursor:default}:host(.lxFioriReskin) .tab.active .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.active:after{content:\"\";position:absolute;left:1rem;right:1rem;bottom:0;height:.1875rem;background-color:var(--sapTab_ForegroundColor);border-radius:.125rem .125rem 0 0}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .tab:focus{outline:none}:host(.lxFioriReskin) .tab:focus .tabLabel{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:0;border-radius:.375rem}:host(.lxFioriReskin) .routerLinkTab a{display:inline-flex;align-items:center;height:100%;line-height:1.4;padding:0}:host(.lxFioriReskin) .routerLinkTab a:focus{outline:0}:host(.lxFioriReskin) .routerLinkTab.active a,:host(.lxFioriReskin) .routerLinkTab.disabled a{cursor:default}:host(.lxFioriReskin) .withLabel .icon{margin-right:.5rem}:host(.lxFioriReskin) .icon{vertical-align:middle;--sapContent_NonInteractiveIconColor: var(--sapTab_TextColor)}:host(.lxFioriReskin) .noMargin{margin:0}:host(.lxFioriReskin) .noLeftMarginForFirstTab{margin-left:0}:host(.lxFioriReskin) .backgroundGray{background-color:transparent}:host(.lxFioriReskin) .tabLabel{color:var(--sapTab_TextColor);display:inline-block;font-size:var(--sapFontSize);line-height:1.514;font-weight:700;text-decoration:none;padding:0 .1875rem}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\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([
@@ -13404,7 +13468,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, hostDirectives: [{ directive: FioriReskinAwareDirective }], 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}.content{height:100%}:host:where(:not(.lxFioriReskin)) .tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}:host:where(:not(.lxFioriReskin)) .tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}:host:where(:not(.lxFioriReskin)) .tab:hover:after,:host:where(:not(.lxFioriReskin)) .tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin)) .tab.active{cursor:default}:host:where(:not(.lxFioriReskin)) .tab.disabled{opacity:.3;cursor:default}:host:where(:not(.lxFioriReskin)) .tab:hover .tabLabel,:host:where(:not(.lxFioriReskin)) .tab.active .tabLabel{color:#2a303d;transition:color .1s}:host:where(:not(.lxFioriReskin)) .tab:hover ui5-icon[design=NonInteractive],:host:where(:not(.lxFioriReskin)) .tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}:host:where(:not(.lxFioriReskin)) .portalTab,:host:where(:not(.lxFioriReskin)) .routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}:host:where(:not(.lxFioriReskin)) .portalTab.withIcon,:host:where(:not(.lxFioriReskin)) .routerLinkTab a.withIcon{padding-inline:14px}:host:where(:not(.lxFioriReskin)) .routerLinkTab a:focus{outline:0}:host:where(:not(.lxFioriReskin)) .routerLinkTab.active a,:host:where(:not(.lxFioriReskin)) .routerLinkTab.disabled a{cursor:default}:host:where(:not(.lxFioriReskin)) .withLabel .icon{margin-right:.5rem}:host:where(:not(.lxFioriReskin)) .icon{vertical-align:middle}:host:where(:not(.lxFioriReskin)) .noMargin{margin:0}:host:where(:not(.lxFioriReskin)) .noLeftMarginForFirstTab{margin-left:0}:host:where(:not(.lxFioriReskin)) .backgroundGray{background-color:#c2c9d6}:host:where(:not(.lxFioriReskin)) .backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}:host:where(:not(.lxFioriReskin)) .tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}:host:where(:not(.lxFioriReskin)) lx-counter{margin-left:8px}:host(.lxFioriReskin) .tab{position:relative;display:inline-flex;align-items:center;height:2.75rem;padding:0 1rem;margin:0;text-align:center;transition:none;cursor:pointer;color:var(--sapTab_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .tab.active{cursor:default}:host(.lxFioriReskin) .tab.active .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.active:after{content:\"\";position:absolute;left:1rem;right:1rem;bottom:0;height:.1875rem;background-color:var(--sapTab_ForegroundColor);border-radius:.125rem .125rem 0 0}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .tab:focus{outline:none}:host(.lxFioriReskin) .tab:focus .tabLabel{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:0;border-radius:.375rem}:host(.lxFioriReskin) .routerLinkTab a{display:inline-flex;align-items:center;height:100%;line-height:1.4;padding:0}:host(.lxFioriReskin) .routerLinkTab a:focus{outline:0}:host(.lxFioriReskin) .routerLinkTab.active a,:host(.lxFioriReskin) .routerLinkTab.disabled a{cursor:default}:host(.lxFioriReskin) .withLabel .icon{margin-right:.5rem}:host(.lxFioriReskin) .icon{vertical-align:middle;--sapContent_NonInteractiveIconColor: var(--sapTab_TextColor)}:host(.lxFioriReskin) .noMargin{margin:0}:host(.lxFioriReskin) .noLeftMarginForFirstTab{margin-left:0}:host(.lxFioriReskin) .backgroundGray{background-color:transparent}:host(.lxFioriReskin) .tabLabel{color:var(--sapTab_TextColor);display:inline-block;font-size:var(--sapFontSize);line-height:1.514;font-weight:700;text-decoration:none;padding:0 .1875rem}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$8.Router }, { type: i1$8.ActivatedRoute }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$7.Router }, { type: i1$7.ActivatedRoute }], propDecorators: { icon: [{
                 type: Input
             }], iconDesign: [{
                 type: Input