@leanix/components 0.4.942 → 0.4.944

package/fesm2022/leanix-components.mjs

@@ -15,7 +15,7 @@ import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceT
 import * as i1$8 from '@angular/router';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
-import { registerIcon } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';
+import { unsafeRegisterIcon } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';
 import Color from 'color';
 import { isValid, format, formatDistance, startOfDay } from 'date-fns';
 import DOMPurify from 'dompurify';
@@ -1187,44 +1187,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { isSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSortable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }] } });
 
-registerIcon('sort', {
-    pathData: '',
+const SORT_UP_PATH = 'M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z';
+const SORT_DOWN_PATH = 'M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z';
+const INACTIVE = '#99A5BB';
+const ACTIVE = '#2A303D';
+unsafeRegisterIcon('sort', {
     ltr: false,
     collection: 'lx-th-icons',
     packageName: '@leanix/components',
     viewBox: '0 0 16 16',
-    customTemplate: () => ({
-        strings: [
-            '<path d="M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z" fill="#99A5BB"/>',
-            '<path d="M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z" fill="#99A5BB"/>'
-        ]
-    })
+    customTemplateAsString: `<path d="${SORT_UP_PATH}" fill="${INACTIVE}"/><path d="${SORT_DOWN_PATH}" fill="${INACTIVE}"/>`
 });
-registerIcon('sort-desc', {
-    pathData: '',
+unsafeRegisterIcon('sort-desc', {
     ltr: false,
     collection: 'lx-th-icons',
     packageName: '@leanix/components',
     viewBox: '0 0 16 16',
-    customTemplate: () => ({
-        strings: [
-            '<path d="M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z" fill="#99A5BB"/>',
-            '<path d="M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z" fill="#2A303D"/>'
-        ]
-    })
+    customTemplateAsString: `<path d="${SORT_UP_PATH}" fill="${INACTIVE}"/><path d="${SORT_DOWN_PATH}" fill="${ACTIVE}"/>`
 });
-registerIcon('sort-asc', {
-    pathData: '',
+unsafeRegisterIcon('sort-asc', {
     ltr: false,
     collection: 'lx-th-icons',
     packageName: '@leanix/components',
     viewBox: '0 0 16 16',
-    customTemplate: () => ({
-        strings: [
-            '<path d="M8.00278 2C8.19778 2 8.37778 2.09 8.49028 2.2475L10.8903 5.5475C11.0253 5.7275 11.0403 5.975 10.9428 6.17C10.8378 6.3725 10.6353 6.5 10.4103 6.5L5.61028 6.5C5.38528 6.5 5.17528 6.3725 5.07778 6.17C4.97278 5.9675 4.99528 5.7275 5.13028 5.5475L7.53028 2.2475C7.64278 2.09 7.82278 2 8.01778 2H8.00278Z" fill="#2A303D"/>',
-            '<path d="M8.00278 14.455C7.80778 14.455 7.62778 14.365 7.51528 14.2075L5.11528 10.9075C4.98028 10.7275 4.96528 10.48 5.06278 10.285C5.16778 10.0825 5.37028 9.95496 5.59528 9.95496H10.3953C10.6203 9.95496 10.8303 10.0825 10.9278 10.285C11.0328 10.4875 11.0103 10.7275 10.8753 10.9075L8.47528 14.2075C8.36278 14.365 8.18278 14.455 7.98778 14.455H8.00278Z" fill="#99A5BB"/>'
-        ]
-    })
+    customTemplateAsString: `<path d="${SORT_UP_PATH}" fill="${ACTIVE}"/><path d="${SORT_DOWN_PATH}" fill="${INACTIVE}"/>`
 });
 /**
  * The `lx-th` can be used in combination with `lx-table` to implement sortable `<table>` elements.
@@ -4084,7 +4070,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.select(index + offset);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
@@ -4100,7 +4086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AsyncPipe,
                         UpperCasePipe,
                         TranslateModule
-                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"] }]
+                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], initiallySelectedIndex: [{
@@ -8181,7 +8167,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{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -8200,7 +8186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         NgTemplateOutlet,
                         AsyncPipe,
                         IconComponent
-                    ], hostDirectives: [{ directive: FioriReskinAwareDirective }], 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{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;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"] }]
+                    ], hostDirectives: [{ directive: FioriReskinAwareDirective }], 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
                 type: Input
             }], selection: [{
@@ -8262,6 +8248,8 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         super(...arguments);
         /** @internal */
         this.NAME = 'OptionGroupDropdownComponent';
+        /** @internal */
+        this.fioriReskinActive = inject(FioriReskinService).active;
         /**
          * Array of option groups to display in the dropdown.
          * @default []
@@ -8333,11 +8321,11 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown lxOptionGroupDropdownOverlay\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options lxOptionGroupDropdownList\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ fioriReskinActive() ? optionGroup.label : (optionGroup.label | uppercase) }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}:host:where(:not(.lxFioriReskin)) .overlayDropdown,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}:host:where(:not(.lxFioriReskin)) .overlayDropdown:not(.top),:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .overlayDropdown.top,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .scrollingPanel{overflow-y:auto;max-height:400px}:host:where(:not(.lxFioriReskin)) .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}:host:where(:not(.lxFioriReskin)) ul{list-style:none;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) ul:not(:last-child){border-bottom:solid 1px #eaedf1}:host:where(:not(.lxFioriReskin)) .noResult{display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option{cursor:pointer;display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option:hover{background-color:#e1e5eb!important}:host:where(:not(.lxFioriReskin)) .option.highlighted{background:#eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown:not(.top),::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown.top,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .scrollingPanel{overflow-y:auto;max-height:400px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul{list-style:none;margin:0;padding:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul:not(:last-child){border-bottom:solid 1px #eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .noResult{display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option{cursor:pointer;display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option:hover{background-color:#e1e5eb!important}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option.highlighted{background:#eaedf1}:host(.lxFioriReskin){display:block}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .scrollingPanel{overflow-y:auto;max-height:250px}:host(.lxFioriReskin) .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .options ul{list-style:none;margin:0;padding:0}:host(.lxFioriReskin) .options .option{padding:.375rem 1rem}:host(.lxFioriReskin) ul:not(:last-child){border-bottom:0}:host(.lxFioriReskin) .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul{list-style:none;margin:0;padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul:not(:last-child){border-bottom:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], imports: [
+            args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], imports: [
                         CdkOverlayOrigin,
                         CdkConnectedOverlay,
                         NgClass,
@@ -8350,7 +8338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AsyncPipe,
                         UpperCasePipe,
                         TranslateModule
-                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
+                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown lxOptionGroupDropdownOverlay\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options lxOptionGroupDropdownList\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ fioriReskinActive() ? optionGroup.label : (optionGroup.label | uppercase) }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}:host:where(:not(.lxFioriReskin)) .overlayDropdown,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}:host:where(:not(.lxFioriReskin)) .overlayDropdown:not(.top),:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .overlayDropdown.top,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .scrollingPanel{overflow-y:auto;max-height:400px}:host:where(:not(.lxFioriReskin)) .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}:host:where(:not(.lxFioriReskin)) ul{list-style:none;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) ul:not(:last-child){border-bottom:solid 1px #eaedf1}:host:where(:not(.lxFioriReskin)) .noResult{display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option{cursor:pointer;display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option:hover{background-color:#e1e5eb!important}:host:where(:not(.lxFioriReskin)) .option.highlighted{background:#eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown:not(.top),::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown.top,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .scrollingPanel{overflow-y:auto;max-height:400px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul{list-style:none;margin:0;padding:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul:not(:last-child){border-bottom:solid 1px #eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .noResult{display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option{cursor:pointer;display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option:hover{background-color:#e1e5eb!important}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option.highlighted{background:#eaedf1}:host(.lxFioriReskin){display:block}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .scrollingPanel{overflow-y:auto;max-height:250px}:host(.lxFioriReskin) .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .options ul{list-style:none;margin:0;padding:0}:host(.lxFioriReskin) .options .option{padding:.375rem 1rem}:host(.lxFioriReskin) ul:not(:last-child){border-bottom:0}:host(.lxFioriReskin) .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul{list-style:none;margin:0;padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul:not(:last-child){border-bottom:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}\n"] }]
         }], propDecorators: { optionGroups: [{
                 type: Input
             }], newOptionLabel: [{
@@ -9733,7 +9721,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{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -9743,7 +9731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SingleSelectComponent)
                         }
-                    ], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"markInvalid\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"] }]
+                    ], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"markInvalid\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer: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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
                 type: Input
             }], selectionBackground: [{