@leanix/components 0.2.75 → 0.2.79

package/fesm2015/leanix-components.js

@@ -5,14 +5,14 @@ import { Component, Input, HostBinding, HostListener, EventEmitter, ChangeDetect
 import * as i3$3 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
+import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { trimEnd, escape, sortBy, get, isEqual, toLower, some, padCharsStart, toString, isNaN as isNaN$1, toNumber, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/platform-browser';
 import * as i6 from 'rxjs';
 import { merge, Subject, fromEvent, Observable, BehaviorSubject, combineLatest, ReplaySubject, of } from 'rxjs';
-import { takeUntil, first, startWith, withLatestFrom, filter, delay, map, distinctUntilChanged, skipWhile, tap, switchMap, debounceTime } from 'rxjs/operators';
+import { takeUntil, first, startWith, withLatestFrom, filter, delay, map, distinctUntilChanged, switchMap, debounceTime, mapTo, skipWhile, tap } from 'rxjs/operators';
 import * as Color from 'color';
 import { format, distanceInWords } from 'date-fns';
 import * as _ from 'lodash';
@@ -352,7 +352,7 @@ class TooltipComponent {
     }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TooltipComponent, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, ngImport: i0, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n  <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:11px;font-weight:400;text-shadow:0 1px #000;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.x-left:after,.x-right:after,.y-bottom:after,.y-top:after{content:\" \";position:absolute;border:5px solid transparent;border-top-color:#292929}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-bottom.x-center:after,.y-top.x-center:after{left:50%}.y-bottom.x-left:after,.y-top.x-left:after{right:10px}.y-bottom.x-right:after,.y-top.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TooltipComponent, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, ngImport: i0, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n  <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin:5px}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:11px;font-weight:400;text-shadow:0 1px #000;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.x-left:after,.x-right:after,.y-bottom:after,.y-top:after{content:\" \";position:absolute;border:5px solid transparent;border-top-color:#292929}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-bottom.x-center:after,.y-top.x-center:after{left:50%}.y-bottom.x-left:after,.y-top.x-left:after{right:10px}.y-bottom.x-right:after,.y-top.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
@@ -1872,6 +1872,517 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                 args: ['createNewOptionTemplate']
             }] } });
 
+// We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
+const BACKSPACE = 8;
+const TAB = 9;
+const ARROW_DOWN = 40;
+const ARROW_UP = 38;
+const ARROW_LEFT = 37;
+const ARROW_RIGHT = 39;
+const ENTER = 13;
+const ESCAPE = 27;
+const SPACE = 32;
+
+class KeyboardActionSourceDirective {
+    constructor(element) {
+        this.element = element;
+        this.dontEmit = false;
+        this.destroyed$ = new Subject();
+        this.keyboardActions$ = fromEvent(this.element.nativeElement, 'keydown').pipe(filter((_event) => !this.dontEmit), map((event) => {
+            switch (event.keyCode) {
+                case ARROW_UP:
+                    event.preventDefault();
+                    return KeyboardSelectAction.PREV;
+                case ARROW_DOWN:
+                    event.preventDefault();
+                    return KeyboardSelectAction.NEXT;
+                case ARROW_LEFT:
+                    event.preventDefault();
+                    return KeyboardSelectAction.LEFT;
+                case ARROW_RIGHT:
+                    event.preventDefault();
+                    return KeyboardSelectAction.RIGHT;
+                case ENTER:
+                    event.preventDefault();
+                    return KeyboardSelectAction.EXECUTE;
+                case ESCAPE:
+                case TAB:
+                    return KeyboardSelectAction.CLOSE;
+            }
+        }), takeUntil(this.destroyed$));
+    }
+    blur() {
+        this.element.nativeElement.blur();
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+    }
+}
+KeyboardActionSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+KeyboardActionSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'keyboardActionSource',
+                    selector: '[lxKeyboardActionSource]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class OptionGroupComponent {
+    constructor() {
+        /**
+         * Is true when option children have a selected state.
+         * In this case we want to align the padding of the group label with the lx-options'.
+         */
+        this.hasSelectedState = true;
+        this.select = new EventEmitter();
+    }
+    selectOption(value) {
+        this.select.emit(value);
+    }
+}
+OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}:host:not(:first-child){border-top:1px solid #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lx-option-group',
+                    templateUrl: 'option-group.component.html',
+                    styleUrls: ['option-group.component.styl'],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { hasSelectedState: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }] } });
+
+class OptionComponent {
+    constructor(group, elementRef) {
+        this.group = group;
+        this.elementRef = elementRef;
+        this.selected = false;
+        this.isHighlighted = false;
+        this.disabled = false;
+        /**
+         * Is true when option has a selection nature like sorting.
+         * In this case we show a check icon on the left to indicate selection.
+         *
+         * Is false when option represents a one time action like printing.
+         * Cannot have selectedState when Option has dropdown
+         */
+        this.hasSelectedState = true;
+        this.select = new EventEmitter();
+        this.highlight = new EventEmitter();
+        this.selectedClick = new EventEmitter();
+        this.hasSubdropdown = false;
+        this.isSuboption = false;
+    }
+    selectOption(event) {
+        if (this.disabled || this.hasSubdropdown) {
+            if (event) {
+                event.stopImmediatePropagation();
+            }
+        }
+        else {
+            if (this.selected) {
+                return this.selectedClick.emit();
+            }
+            if (this.group) {
+                this.group.selectOption(this.value);
+            }
+            this.select.emit(this.value);
+        }
+    }
+    setSelected(value) {
+        this.selected = value;
+    }
+    setHighlighted(value) {
+        this.isHighlighted = value;
+        this.highlight.emit(this.isHighlighted);
+    }
+}
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{left:8px}.fa-check,.fa-chevron-right{line-height:23px;position:absolute}.fa-chevron-right{right:8px;font-size:8px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lx-option',
+                    templateUrl: 'option.component.html',
+                    styleUrls: ['option.component.styl']
+                }]
+        }], ctorParameters: function () { return [{ type: OptionGroupComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => OptionGroupComponent)]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { selected: [{
+                type: Input
+            }], isHighlighted: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], hasSelectedState: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], highlight: [{
+                type: Output
+            }], selectedClick: [{
+                type: Output
+            }], selectOption: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+const BOTTOM_LEFT_POSITION$1 = {
+    originX: 'end',
+    overlayX: 'end',
+    originY: 'bottom',
+    overlayY: 'top'
+};
+const BOTTOM_RIGHT_POSITION$1 = {
+    originX: 'start',
+    overlayX: 'start',
+    originY: 'bottom',
+    overlayY: 'top'
+};
+const TOP_LEFT_POSITION$1 = {
+    originX: 'end',
+    overlayX: 'end',
+    originY: 'top',
+    overlayY: 'bottom'
+};
+const TOP_RIGHT_POSITION$1 = {
+    originX: 'start',
+    overlayX: 'start',
+    originY: 'top',
+    overlayY: 'bottom'
+};
+const LEFT_ALIGN_POSITIONS$1 = [BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1, BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1];
+const RIGHT_ALIGN_POSITIONS$1 = [BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1, BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1];
+class CdkOptionsDropdownComponent {
+    constructor(changeDetection) {
+        this.changeDetection = changeDetection;
+        this.align = 'right';
+        this.closeOnScroll = false;
+        this.disabled = false;
+        this.maxHeight = 'none';
+        this.highlightedOptionIndex$ = new BehaviorSubject(0);
+        this._open = false;
+        this.isSubdropdownExpanded = false;
+        this.destroyed$ = new Subject();
+        this.isPositionComputed = true;
+    }
+    set open(value) {
+        if (this.disabled) {
+            return;
+        }
+        this._open = value;
+        if (this.trigger) {
+            // Don't emit keyboard actions while the dropdown is not open yet.
+            this.trigger.dontEmit = !this.open;
+        }
+        if (this.open) {
+            this.isSubdropdownExpanded = false;
+            this.setInitialHighlightingIndex();
+        }
+        this.reloadOverlayPosition(this.open);
+    }
+    get open() {
+        return this._open;
+    }
+    get options() {
+        return this._options.toArray();
+    }
+    ngAfterViewInit() {
+        this.trigger.dontEmit = !this.open;
+        this.overlay.positions = this.align === 'left' ? LEFT_ALIGN_POSITIONS$1 : RIGHT_ALIGN_POSITIONS$1;
+        const optionsChanges$ = this._options.changes.pipe(startWith(this._options), map((options) => options.toArray()));
+        this.trigger.keyboardActions$
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.NEXT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.next(index, options)))
+            .subscribe(this.highlightedOptionIndex$);
+        this.trigger.keyboardActions$
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.PREV), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.prev(index, options)))
+            .subscribe(this.highlightedOptionIndex$);
+        this.trigger.keyboardActions$
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LEFT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)))
+            .subscribe(this.highlightedOptionIndex$);
+        this.trigger.keyboardActions$
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.RIGHT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)))
+            .subscribe(this.highlightedOptionIndex$);
+        this.trigger.keyboardActions$
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.CLOSE))
+            .subscribe(() => this.closeDropdown());
+        this.trigger.keyboardActions$
+            .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.EXECUTE), withLatestFrom(this.highlightedOptionIndex$, (_, index) => index))
+            .subscribe((index) => {
+            if (this.options[index]) {
+                this.options[index].selectOption();
+            }
+        });
+        /** Combined stream of all of the child options' select outputs. */
+        this._options.changes
+            .pipe(startWith(this._options), switchMap(() => merge(...this._options.map((option) => option.select), ...this._options.map((option) => option.selectedClick))), delay(0), takeUntil(this.destroyed$))
+            .subscribe((_value) => {
+            this.closeDropdown();
+        });
+        combineLatest([optionsChanges$, this.highlightedOptionIndex$])
+            .pipe(delay(0), map(([options, index]) => options[index]), distinctUntilChanged(), takeUntil(this.destroyed$))
+            .subscribe((optionToBeHighlighted) => {
+            this.options.forEach((option) => option.setHighlighted(optionToBeHighlighted === option));
+            this.changeDetection.markForCheck();
+        });
+        if (this.closeOnScroll) {
+            fromEvent(window, 'scroll')
+                .pipe(debounceTime(100), takeUntil(this.destroyed$))
+                .subscribe(() => {
+                this.open = false;
+                this.trigger.blur();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+    }
+    closeDropdown() {
+        this.tooltips.toArray().forEach((tooltip) => tooltip.hide());
+        this.open = false;
+    }
+    setInitialHighlightingIndex() {
+        const firstAvailableIndex = this.options.map((option) => !this.optionIsHighlightable(option)).indexOf(false, 0);
+        this.highlightedOptionIndex$.next(firstAvailableIndex);
+    }
+    prev(currentIndex, items) {
+        if (currentIndex > 0) {
+            const prevEnabledIndex = items.map((option) => !this.optionIsHighlightable(option)).lastIndexOf(false, currentIndex - 1);
+            return prevEnabledIndex !== -1 ? prevEnabledIndex : currentIndex;
+        }
+        else {
+            return currentIndex;
+        }
+    }
+    next(currentIndex, items) {
+        if (currentIndex < items.length) {
+            const nextEnabledIndex = items.map((option) => !this.optionIsHighlightable(option)).indexOf(false, currentIndex + 1);
+            return nextEnabledIndex !== -1 ? nextEnabledIndex : currentIndex;
+        }
+        else {
+            return currentIndex;
+        }
+    }
+    expand(currentIndex, items) {
+        if (items[currentIndex].hasSubdropdown) {
+            this.isSubdropdownExpanded = true;
+            return this.next(currentIndex, items);
+        }
+        else {
+            return currentIndex;
+        }
+    }
+    collapse(currentIndex, items) {
+        if (this.isSubdropdownExpanded) {
+            this.isSubdropdownExpanded = false;
+            return this.prev(currentIndex, items);
+        }
+        else {
+            return currentIndex;
+        }
+    }
+    optionIsHighlightable(option) {
+        const isToplevelOptionAndAllowed = !option.isSuboption && !this.isSubdropdownExpanded;
+        const isSecondlevelOptionAndAllowed = option.isSuboption && this.isSubdropdownExpanded;
+        return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
+    }
+    reloadOverlayPosition(open) {
+        if (open) {
+            this.isPositionComputed = false;
+            setTimeout(() => {
+                const dropdownElement = this.dropdownContainer.nativeElement;
+                this.overlay.overlayRef.updateSize({
+                    height: dropdownElement.offsetHeight,
+                    width: dropdownElement.offsetWidth
+                });
+                this.overlay.overlayRef.updatePosition();
+                this.isPositionComputed = true;
+                this.changeDetection.markForCheck();
+            }, 0);
+        }
+        else {
+            this.changeDetection.markForCheck();
+        }
+    }
+}
+CdkOptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CdkOptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }, { propertyName: "tooltips", predicate: TooltipDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lx-cdk-options-dropdown',
+                    templateUrl: 'cdk-options-dropdown.component.html',
+                    styleUrls: ['cdk-options-dropdown.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdownContainer: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], align: [{
+                type: Input
+            }], closeOnScroll: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], trigger: [{
+                type: ContentChild,
+                args: [KeyboardActionSourceDirective]
+            }], overlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], _options: [{
+                type: ContentChildren,
+                args: [OptionComponent, { descendants: true }]
+            }], tooltips: [{
+                type: ContentChildren,
+                args: [TooltipDirective, { descendants: true }]
+            }] } });
+
+const BOTTOM_LEFT_POSITION = {
+    originX: 'start',
+    overlayX: 'end',
+    originY: 'top',
+    overlayY: 'top',
+    offsetX: -4
+};
+const BOTTOM_RIGHT_POSITION = {
+    originX: 'end',
+    overlayX: 'start',
+    originY: 'top',
+    overlayY: 'top',
+    offsetX: 4
+};
+const TOP_LEFT_POSITION = {
+    originX: 'start',
+    overlayX: 'end',
+    originY: 'bottom',
+    overlayY: 'bottom',
+    offsetX: -4
+};
+const TOP_RIGHT_POSITION = {
+    originX: 'end',
+    overlayX: 'start',
+    originY: 'bottom',
+    overlayY: 'bottom',
+    offsetX: 4
+};
+const LEFT_ALIGN_POSITIONS = [BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION];
+const RIGHT_ALIGN_POSITIONS = [BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION, BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION];
+class CdkOptionsSubDropdownComponent {
+    constructor(changeDetection) {
+        this.changeDetection = changeDetection;
+        this.align = 'right';
+        this.open = false;
+        this.isPositionComputed = true;
+        this.mouseInside$ = new Subject();
+        this.destroyed$ = new Subject();
+    }
+    mouseenter() {
+        this.mouseInside$.next(true);
+    }
+    mouseleave() {
+        this.mouseInside$.next(false);
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+    }
+    ngAfterViewInit() {
+        // To avoid `Expression has changed after it was checked`
+        executeOnNextTick(() => {
+            this.trigger.hasSubdropdown = true;
+            this.overlay.positions = this.align === 'left' ? LEFT_ALIGN_POSITIONS : RIGHT_ALIGN_POSITIONS;
+        });
+        merge(this.showByMouse(), this.showByKeyboard())
+            .pipe(takeUntil(this.destroyed$), distinctUntilChanged())
+            .subscribe((show) => {
+            this.open = show;
+            this.reloadOverlayPosition(this.open);
+        });
+        this.options.changes
+            .pipe(startWith(this.options), switchMap(() => merge(...this.options.map((option) => option.select), ...this.options.map((option) => option.selectedClick))), delay(0), takeUntil(this.destroyed$))
+            .subscribe(() => {
+            this.closeDropdown();
+        });
+    }
+    showByKeyboard() {
+        const optionChange$ = this.options.changes.pipe(startWith(this.options), map((options) => options.toArray()), map((options) => options.map((option) => {
+            option.isSuboption = true;
+            return option;
+        })));
+        return combineLatest([this.trigger.highlight.asObservable(), optionChange$]).pipe(delay(0), // Need tick delay to get option highlighted and filter it out after
+        map(([isHighlighted, options]) => isHighlighted || options.some((option) => option.isHighlighted)));
+    }
+    showByMouse() {
+        const mouseEnterTrigger$ = fromEvent(this.trigger.elementRef.nativeElement, 'mouseenter');
+        const mouseLeaveTrigger$ = fromEvent(this.trigger.elementRef.nativeElement, 'mouseleave');
+        const showOnEnterMouse$ = mouseEnterTrigger$.pipe(mapTo(true));
+        const hideOnLeaveMouse$ = mouseLeaveTrigger$.pipe(mapTo(false));
+        // react to trigger mouse leave events, and mouse enter events in the sub-dropdown. We'll use a 300ms
+        // debounce, so that while navigating from the trigger to the sub-dropdown, all the intermediate events
+        // are ignored.
+        const showSubdropdown$ = merge(hideOnLeaveMouse$, this.mouseInside$).pipe(debounceTime(300));
+        const showOnEnterSubdropdown$ = mouseEnterTrigger$.pipe(switchMap(() => showSubdropdown$));
+        return merge(showOnEnterMouse$, showOnEnterSubdropdown$);
+    }
+    reloadOverlayPosition(open) {
+        // force a rendering so that the dropdown container's dimensions are computed.
+        this.changeDetection.markForCheck();
+        if (open && this.dropdownContainer) {
+            this.isPositionComputed = false;
+            setTimeout(() => {
+                const dropdownElement = this.dropdownContainer.nativeElement;
+                this.overlay.overlayRef.updateSize({
+                    height: dropdownElement.offsetHeight,
+                    width: dropdownElement.offsetWidth
+                });
+                this.overlay.overlayRef.updatePosition();
+                this.isPositionComputed = true;
+            }, 0);
+        }
+    }
+    closeDropdown() {
+        this.open = false;
+        this.mouseInside$.next(false);
+    }
+}
+CdkOptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CdkOptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CdkOptionsSubDropdownComponent, selector: "lx-cdk-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:1px solid #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);text-align:left;list-style:none}"], directives: [{ type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsSubDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lx-cdk-options-sub-dropdown',
+                    templateUrl: 'cdk-options-sub-dropdown.component.html',
+                    styleUrls: ['cdk-options-sub-dropdown.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], options: [{
+                type: ContentChildren,
+                args: [OptionComponent, { descendants: true }]
+            }], overlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], dropdownContainer: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }] } });
+
 /**
  * Observe creates an Observable stream and notifies the changes from an observed property.
  *
@@ -2719,17 +3230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                 }]
         }] });
 
-// We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
-const BACKSPACE = 8;
-const TAB = 9;
-const ARROW_DOWN = 40;
-const ARROW_UP = 38;
-const ARROW_LEFT = 37;
-const ARROW_RIGHT = 39;
-const ENTER = 13;
-const ESCAPE = 27;
-const SPACE = 32;
-
 class BaseSelectDirective {
     constructor() {
         this.disabled = false;
@@ -3362,162 +3862,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                 args: ['noResultsOptionTemplateRef']
             }] } });
 
-class OptionGroupComponent {
-    constructor() {
-        /**
-         * Is true when option children have a selected state.
-         * In this case we want to align the padding of the group label with the lx-options'.
-         */
-        this.hasSelectedState = true;
-        this.select = new EventEmitter();
-    }
-    selectOption(value) {
-        this.select.emit(value);
-    }
-}
-OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}:host:not(:first-child){border-top:1px solid #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lx-option-group',
-                    templateUrl: 'option-group.component.html',
-                    styleUrls: ['option-group.component.styl'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { hasSelectedState: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], select: [{
-                type: Output
-            }] } });
-
-class OptionComponent {
-    constructor(group, elementRef) {
-        this.group = group;
-        this.elementRef = elementRef;
-        this.selected = false;
-        this.isHighlighted = false;
-        this.disabled = false;
-        /**
-         * Is true when option has a selection nature like sorting.
-         * In this case we show a check icon on the left to indicate selection.
-         *
-         * Is false when option represents a one time action like printing.
-         * Cannot have selectedState when Option has dropdown
-         */
-        this.hasSelectedState = true;
-        this.select = new EventEmitter();
-        this.highlight = new EventEmitter();
-        this.selectedClick = new EventEmitter();
-        this.hasSubdropdown = false;
-        this.isSuboption = false;
-    }
-    selectOption(event) {
-        if (this.disabled || this.hasSubdropdown) {
-            if (event) {
-                event.stopImmediatePropagation();
-            }
-        }
-        else {
-            if (this.selected) {
-                return this.selectedClick.emit();
-            }
-            if (this.group) {
-                this.group.selectOption(this.value);
-            }
-            this.select.emit(this.value);
-        }
-    }
-    setSelected(value) {
-        this.selected = value;
-    }
-    setHighlighted(value) {
-        this.isHighlighted = value;
-        this.highlight.emit(this.isHighlighted);
-    }
-}
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{left:8px}.fa-check,.fa-chevron-right{line-height:23px;position:absolute}.fa-chevron-right{right:8px;font-size:8px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lx-option',
-                    templateUrl: 'option.component.html',
-                    styleUrls: ['option.component.styl']
-                }]
-        }], ctorParameters: function () { return [{ type: OptionGroupComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [forwardRef(() => OptionGroupComponent)]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { selected: [{
-                type: Input
-            }], isHighlighted: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], hasSelectedState: [{
-                type: Input
-            }], select: [{
-                type: Output
-            }], highlight: [{
-                type: Output
-            }], selectedClick: [{
-                type: Output
-            }], selectOption: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class KeyboardActionSourceDirective {
-    constructor(element) {
-        this.element = element;
-        this.dontEmit = false;
-        this.destroyed$ = new Subject();
-        this.keyboardActions$ = fromEvent(this.element.nativeElement, 'keydown').pipe(filter((_event) => !this.dontEmit), map((event) => {
-            switch (event.keyCode) {
-                case ARROW_UP:
-                    event.preventDefault();
-                    return KeyboardSelectAction.PREV;
-                case ARROW_DOWN:
-                    event.preventDefault();
-                    return KeyboardSelectAction.NEXT;
-                case ARROW_LEFT:
-                    event.preventDefault();
-                    return KeyboardSelectAction.LEFT;
-                case ARROW_RIGHT:
-                    event.preventDefault();
-                    return KeyboardSelectAction.RIGHT;
-                case ENTER:
-                    event.preventDefault();
-                    return KeyboardSelectAction.EXECUTE;
-                case ESCAPE:
-                case TAB:
-                    return KeyboardSelectAction.CLOSE;
-            }
-        }), takeUntil(this.destroyed$));
-    }
-    blur() {
-        this.element.nativeElement.blur();
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-    }
-}
-KeyboardActionSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-KeyboardActionSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'keyboardActionSource',
-                    selector: '[lxKeyboardActionSource]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
 class OptionsDropdownComponent {
     constructor(changeDetection) {
         this.changeDetection = changeDetection;
@@ -4748,6 +5092,8 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         OptionGroupDropdownComponent,
         OptionsDropdownComponent,
         OptionsSubDropdownComponent,
+        CdkOptionsDropdownComponent,
+        CdkOptionsSubDropdownComponent,
         PickerComponent,
         PickerOptionComponent,
         PickerTriggerDirective,
@@ -4767,6 +5113,7 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FormsModule,
         ReactiveFormsModule, i1$2.TranslateModule, DatepickerModule,
         InfiniteScrollModule,
+        OverlayModule,
         LxCoreUiModule], exports: [BasicDropdownComponent,
         BasicDropdownItemComponent,
         CurrencyInputComponent,
@@ -4786,6 +5133,8 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         OptionGroupDropdownComponent,
         OptionsDropdownComponent,
         OptionsSubDropdownComponent,
+        CdkOptionsDropdownComponent,
+        CdkOptionsSubDropdownComponent,
         PickerComponent,
         PickerOptionComponent,
         PickerTriggerDirective,
@@ -4808,6 +5157,7 @@ LxFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             TranslateModule.forChild(),
             DatepickerModule,
             InfiniteScrollModule,
+            OverlayModule,
             LxCoreUiModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxFormsModule, decorators: [{
@@ -4833,6 +5183,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                         OptionGroupDropdownComponent,
                         OptionsDropdownComponent,
                         OptionsSubDropdownComponent,
+                        CdkOptionsDropdownComponent,
+                        CdkOptionsSubDropdownComponent,
                         PickerComponent,
                         PickerOptionComponent,
                         PickerTriggerDirective,
@@ -4857,6 +5209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                         TranslateModule.forChild(),
                         DatepickerModule,
                         InfiniteScrollModule,
+                        OverlayModule,
                         LxCoreUiModule
                     ],
                     exports: [
@@ -4879,6 +5232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                         OptionGroupDropdownComponent,
                         OptionsDropdownComponent,
                         OptionsSubDropdownComponent,
+                        CdkOptionsDropdownComponent,
+                        CdkOptionsSubDropdownComponent,
                         PickerComponent,
                         PickerOptionComponent,
                         PickerTriggerDirective,
@@ -5670,5 +6025,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LxCoreUiModule, LxFormsModule, LxIsUuidPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, shorthandHexHandle };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LxCoreUiModule, LxFormsModule, LxIsUuidPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.js.map