@leanix/components 0.4.585 → 0.4.586

package/fesm2022/leanix-components.mjs

@@ -6,7 +6,7 @@ import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, Commo
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
 import * as i5 from 'rxjs';
-import { BehaviorSubject, of, timer, Observable, Subject, combineLatest, merge, concat, fromEvent, ReplaySubject, map as map$1, switchMap as switchMap$1 } from 'rxjs';
+import { BehaviorSubject, of, timer, Observable, Subject, combineLatest, merge, concat, fromEvent, map as map$1, ReplaySubject, switchMap as switchMap$1 } from 'rxjs';
 import { __decorate } from 'tslib';
 import { escape, trimEnd, sortBy, get, isEqual as isEqual$1, toLower, some, padCharsStart, toString, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
 import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
@@ -3151,10 +3151,12 @@ function getCssVariable(cssVariableName) {
 }
 function scrollTop(container, item) {
     if (container && item) {
-        const scrollDownNeeded = item.offsetTop + item.clientHeight > container.clientHeight;
-        const scrollTopNeeded = item.offsetTop - item.clientHeight < container.scrollTop;
+        const itemClientRect = item.getBoundingClientRect();
+        const containerClientRect = container.getBoundingClientRect();
+        const scrollDownNeeded = itemClientRect.y > containerClientRect.y;
+        const scrollTopNeeded = itemClientRect.y < containerClientRect.y;
         if (scrollDownNeeded || scrollTopNeeded) {
-            container.scrollTop = item.offsetTop - container.offsetTop;
+            container.scrollTop = itemClientRect.y - containerClientRect.y + container.scrollTop;
         }
     }
     else {
@@ -3168,28 +3170,77 @@ class SelectableItemDirective {
     }
     constructor(element) {
         this.element = element;
+        this.belongsToParentKeyboardSelect = false;
         this.select = new EventEmitter();
+        this.navigate = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.belongsToParentKeyboardSelect) {
+            this.parentKeyboardSelect?.registerItem(this);
+        }
+    }
+    ngOnChanges(changes) {
+        const belongsToParentKeyboardSelectChanges = changes['belongsToParentKeyboardSelect'];
+        if (!belongsToParentKeyboardSelectChanges || belongsToParentKeyboardSelectChanges.firstChange)
+            return;
+        if (belongsToParentKeyboardSelectChanges.previousValue && !belongsToParentKeyboardSelectChanges.currentValue) {
+            this.parentKeyboardSelect?.unregisterItem(this);
+            this.parentKeyboardSelect?.select(-1);
+        }
+        if (belongsToParentKeyboardSelectChanges.currentValue && !belongsToParentKeyboardSelectChanges.previousValue) {
+            this.parentKeyboardSelect?.registerItem(this);
+            this.parentKeyboardSelect?.select(-1);
+        }
+    }
+    ngOnDestroy() {
+        if (this.belongsToParentKeyboardSelect) {
+            this.parentKeyboardSelect?.unregisterItem(this);
+        }
     }
-    ngOnDestroy() { }
     scrollToItem() {
         if (this.scrollInContainer && this.element.nativeElement) {
             scrollTop(this.scrollInContainer, this.element.nativeElement);
         }
     }
+    isSelectedItem() {
+        if (!this.parentKeyboardSelect)
+            return of(false);
+        const kbd = this.parentKeyboardSelect;
+        return kbd.selectedItem$.pipe(map$1((item) => kbd.isItemSelected(this.element.nativeElement, item?.element)));
+    }
+    performNavigation(action) {
+        const items = this.parentKeyboardSelect?._items.toArray() || [];
+        const index = items.findIndex((item) => item === this);
+        if (index > -1) {
+            if (action === 'next') {
+                this.parentKeyboardSelect?.select(index + 1);
+            }
+            if (action === 'current') {
+                this.parentKeyboardSelect?.select(index);
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectableItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: SelectableItemDirective, isStandalone: true, selector: "[lxSelectableItem]", inputs: { scrollInContainer: "scrollInContainer", lxSelectableItem: "lxSelectableItem" }, outputs: { select: "select" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: SelectableItemDirective, isStandalone: true, selector: "[lxSelectableItem]", inputs: { scrollInContainer: "scrollInContainer", lxSelectableItem: "lxSelectableItem", belongsToParentKeyboardSelect: "belongsToParentKeyboardSelect", parentKeyboardSelect: "parentKeyboardSelect" }, outputs: { select: "select", navigate: "navigate" }, exportAs: ["selectableItem"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectableItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxSelectableItem]'
+                    selector: '[lxSelectableItem]',
+                    exportAs: 'selectableItem'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrollInContainer: [{
                 type: Input
             }], lxSelectableItem: [{
                 type: Input
+            }], belongsToParentKeyboardSelect: [{
+                type: Input
+            }], parentKeyboardSelect: [{
+                type: Input
             }], select: [{
                 type: Output
+            }], navigate: [{
+                type: Output
             }] } });
 
 var KeyboardSelectAction;
@@ -3236,6 +3287,9 @@ class KeyboardSelectDirective {
         this.keyboardSelectAction
             .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.EXECUTE), withLatestFrom(this.selectedItem$, (_, item) => item), takeUntil(this.destroyed$))
             .subscribe((item) => item?.select?.emit());
+        this.keyboardSelectAction
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction != null && [KeyboardSelectAction.LEFT, KeyboardSelectAction.RIGHT].includes(keyboardSelectAction)), withLatestFrom(this.selectedItem$, (keyboardSelectAction, item) => [keyboardSelectAction, item]), takeUntil(this.destroyed$))
+            .subscribe(([keyboardSelectAction, item]) => item?.navigate?.emit(keyboardSelectAction));
         this.selectedItemIndex$.pipe(takeUntil(this.destroyed$)).subscribe((index) => {
             this.selectedItemIndexChange.emit(index);
         });
@@ -3257,6 +3311,25 @@ class KeyboardSelectDirective {
     isItemSelected(item, selectedItem) {
         return selectedItem && item === selectedItem.nativeElement;
     }
+    registerItem(item) {
+        const items = this._items.toArray();
+        let insertionIdx = 0;
+        items.forEach((registeredItem, idx) => {
+            const selectableItem = item;
+            const registeredSelectableItem = registeredItem;
+            if (selectableItem.element.nativeElement.compareDocumentPosition(registeredSelectableItem.element.nativeElement) ===
+                Node.DOCUMENT_POSITION_PRECEDING) {
+                insertionIdx = idx;
+            }
+        });
+        items.splice(insertionIdx + 1, 0, item);
+        this._items.reset([...items]);
+        this._items.notifyOnChanges();
+    }
+    unregisterItem(item) {
+        this._items.reset(this._items.filter((registeredItem) => registeredItem !== item));
+        this._items.notifyOnChanges();
+    }
     adaptSelectedIndexBasedOnKeyboardSelectAction(keyboardSelectAction, currentIndex, items) {
         if (keyboardSelectAction === KeyboardSelectAction.PREV) {
             this.selectedItemIndex$.next(this.prev(currentIndex));
@@ -3372,7 +3445,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.createNewOptionSelected.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    @if (newOptionLabel && isNewItem) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onNewItemSelected()\"\n        (select)=\"onNewItemSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable onTheFlyOption\"\n        [attr.aria-label]=\"newOptionLabel\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n      </li>\n    }\n    @if (showCreateNewOption) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOptionSelected()\"\n        (select)=\"onCreateNewOptionSelected()\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable newEntryOption\"\n      >\n        <span class=\"newEntryContent\">\n          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option keyboardSelectable noOptionsAvailable\"\n        [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n      >\n        {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n      </li>\n    }\n    @if (placeholder) {\n      <li\n        tabindex=\"-1\"\n        class=\"option keyboardSelectable clearSelection\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"selectOption(null)\"\n        (select)=\"selectOption(null)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [attr.aria-label]=\"placeholder\"\n      >\n        {{ placeholder }}\n      </li>\n    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\n        tabindex=\"-1\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        class=\"option keyboardSelectable\"\n        (click)=\"selectOption(option)\"\n        (select)=\"selectOption(option)\"\n        [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        [class.initiallySelected]=\"index === initiallySelectedIndex\"\n        [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n        [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n      >\n        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem", "belongsToParentKeyboardSelect", "parentKeyboardSelect"], outputs: ["select", "navigate"], exportAs: ["selectableItem"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
@@ -6630,7 +6703,7 @@ class MultiSelectSelectionComponent extends KeyboardSelectDirective {
         this.selectionTemplate = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultiSelectSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultiSelectSelectionComponent, isStandalone: true, selector: "lx-multi-select-selection", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tokenize: { classPropertyName: "tokenize", publicName: "tokenize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, queries: [{ propertyName: "selectionTemplate", first: true, predicate: ["innerSelectionTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ul>\n  <lx-tokenizer [active]=\"tokenize()\">\n    @for (selectedItem of selection(); track $index) {\n      <lx-token>\n        <li\n          lxSelectableItem\n          #item\n          [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          (select)=\"removeItem.emit(selectedItem)\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: selectedItem }\" />\n        </li>\n      </lx-token>\n    }\n  </lx-tokenizer>\n</ul>\n", styles: [":host{display:block;overflow:hidden;overflow-x:auto;scrollbar-width:none}ul{display:block;margin:0!important;padding:0!important}li{display:inline}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: TokenizerComponent, selector: "lx-tokenizer", inputs: ["active"], outputs: ["overflowPlaceholderClick"] }, { kind: "component", type: TokenComponent, selector: "lx-token" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultiSelectSelectionComponent, isStandalone: true, selector: "lx-multi-select-selection", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tokenize: { classPropertyName: "tokenize", publicName: "tokenize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, queries: [{ propertyName: "selectionTemplate", first: true, predicate: ["innerSelectionTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ul>\n  <lx-tokenizer [active]=\"tokenize()\">\n    @for (selectedItem of selection(); track $index) {\n      <lx-token>\n        <li\n          lxSelectableItem\n          #item\n          [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          (select)=\"removeItem.emit(selectedItem)\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: selectedItem }\" />\n        </li>\n      </lx-token>\n    }\n  </lx-tokenizer>\n</ul>\n", styles: [":host{display:block;overflow:hidden;overflow-x:auto;scrollbar-width:none}ul{display:block;margin:0!important;padding:0!important}li{display:inline}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem", "belongsToParentKeyboardSelect", "parentKeyboardSelect"], outputs: ["select", "navigate"], exportAs: ["selectableItem"] }, { kind: "component", type: TokenizerComponent, selector: "lx-tokenizer", inputs: ["active"], outputs: ["overflowPlaceholderClick"] }, { kind: "component", type: TokenComponent, selector: "lx-token" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultiSelectSelectionComponent, decorators: [{
             type: Component,
@@ -6700,6 +6773,7 @@ class MultiSelectComponent extends BaseSelectDirective {
         this.markInvalid = false;
         this.selection = [];
         this.size = 'default';
+        this.closeDropdownOnTab = true;
         this.selectionChange = new EventEmitter();
         this.blur = new EventEmitter();
         /** @internal */
@@ -6795,6 +6869,8 @@ class MultiSelectComponent extends BaseSelectDirective {
         inputKeyboardEvents$
             .pipe(filter((event) => event.keyCode === ESCAPE || event.keyCode === TAB), takeUntil(this.destroyed$))
             .subscribe((event) => {
+            if (event.keyCode === TAB && !this.closeDropdownOnTab)
+                return;
             if (event.keyCode === ESCAPE && this.dropdownOpen) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
@@ -6802,7 +6878,7 @@ class MultiSelectComponent extends BaseSelectDirective {
             this.open.next(false);
         });
         inputKeyboardEvents$
-            .pipe(filter((event) => includes(event.keyCode, [ENTER, ARROW_UP, ARROW_DOWN])), map((event) => {
+            .pipe(filter((event) => includes(event.keyCode, [ENTER, ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT])), map((event) => {
             switch (event.keyCode) {
                 case ENTER:
                     return KeyboardSelectAction.EXECUTE;
@@ -6810,6 +6886,10 @@ class MultiSelectComponent extends BaseSelectDirective {
                     return KeyboardSelectAction.PREV;
                 case ARROW_DOWN:
                     return KeyboardSelectAction.NEXT;
+                case ARROW_LEFT:
+                    return KeyboardSelectAction.LEFT;
+                case ARROW_RIGHT:
+                    return KeyboardSelectAction.RIGHT;
                 default:
                     return null;
             }
@@ -6890,7 +6970,7 @@ class MultiSelectComponent extends BaseSelectDirective {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultiSelectComponent, isStandalone: true, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", inputId: "inputId" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultiSelectComponent, isStandalone: true, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", inputId: "inputId", closeDropdownOnTab: "closeDropdownOnTab" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
@@ -6923,6 +7003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], inputId: [{
                 type: Input
+            }], closeDropdownOnTab: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], blur: [{
@@ -6998,7 +7080,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem", "belongsToParentKeyboardSelect", "parentKeyboardSelect"], outputs: ["select", "navigate"], exportAs: ["selectableItem"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -7837,7 +7919,7 @@ class PillListComponent extends KeyboardSelectDirective {
         return this.itemKey ? pill[this.itemKey] : index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PillListComponent, isStandalone: true, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PillListComponent, isStandalone: true, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem", "belongsToParentKeyboardSelect", "parentKeyboardSelect"], outputs: ["select", "navigate"], exportAs: ["selectableItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PillListComponent, decorators: [{
             type: Component,
@@ -7891,7 +7973,7 @@ function getKeyboardNavigationEvents(sourceElement, destroyed$) {
     const inputKeyboardEvents$ = fromEvent(sourceElement, 'keydown').pipe(takeUntil(destroyed$));
     const verticalNavigation$ = inputKeyboardEvents$.pipe(filter((event) => includes(event.keyCode, [ARROW_UP, ARROW_DOWN])));
     const close$ = inputKeyboardEvents$.pipe(filter((event) => event.keyCode === ESCAPE || event.keyCode === TAB));
-    const dropdownKeyboardEvent$ = inputKeyboardEvents$.pipe(filter((event) => includes(event.keyCode, [ENTER, ARROW_UP, ARROW_DOWN])), map((event) => {
+    const dropdownKeyboardEvent$ = inputKeyboardEvents$.pipe(filter((event) => includes(event.keyCode, [ENTER, ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT])), map((event) => {
         switch (event.keyCode) {
             case ENTER:
                 return KeyboardSelectAction.EXECUTE;
@@ -7899,6 +7981,10 @@ function getKeyboardNavigationEvents(sourceElement, destroyed$) {
                 return KeyboardSelectAction.PREV;
             case ARROW_DOWN:
                 return KeyboardSelectAction.NEXT;
+            case ARROW_LEFT:
+                return KeyboardSelectAction.LEFT;
+            case ARROW_RIGHT:
+                return KeyboardSelectAction.RIGHT;
             default:
                 return null;
         }
@@ -7964,6 +8050,7 @@ class SingleSelectComponent extends BaseSelectDirective {
         this.size = 'default';
         this.padding = 'default';
         this.required = false;
+        this.closeDropdownOnTab = true;
         this.selectionChange = new EventEmitter();
         this.blur = new EventEmitter();
         this.allowClear = true;
@@ -8071,6 +8158,8 @@ class SingleSelectComponent extends BaseSelectDirective {
             event.preventDefault();
         });
         keyboardEvents.close$.subscribe((event) => {
+            if (event.keyCode === TAB && !this.closeDropdownOnTab)
+                return;
             if (event.keyCode === ESCAPE && this.dropdownOpen) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
@@ -8078,7 +8167,11 @@ class SingleSelectComponent extends BaseSelectDirective {
             this.open.next(false);
         });
         keyboardEvents.dropdownKeyboardEvent$.subscribe(this.optionsKeyboardSelectAction$);
-        keyboardEvents.enter$.subscribe(() => this.open.next(!this.dropdownOpen));
+        keyboardEvents.enter$.subscribe(() => {
+            if (this.dropdownOpen)
+                return;
+            this.open.next(!this.dropdownOpen);
+        });
         keyboardEvents.space$.pipe(filter(() => !this.allowQuery)).subscribe(() => {
             if (this.dropdownOpen) {
                 this.optionsKeyboardSelectAction$.next(KeyboardSelectAction.EXECUTE);
@@ -8134,7 +8227,7 @@ class SingleSelectComponent extends BaseSelectDirective {
             : options.findIndex((option) => isEqual$1(selection, option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], closeDropdownOnTab: "closeDropdownOnTab", allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -8164,6 +8257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], required: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], closeDropdownOnTab: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], blur: [{