@leanix/components 0.4.973 → 0.4.974

package/fesm2022/leanix-components.mjs

@@ -4069,7 +4069,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.select(index + offset);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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.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.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.25", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
@@ -4085,7 +4085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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,: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"] }]
+                    ], 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.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.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: [{
@@ -8339,7 +8339,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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.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.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.25", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -8356,7 +8356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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 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"] }]
+                    ], 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.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.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: [{