@leanix/components 0.2.75 → 0.2.79

package/bundles/leanix-components.umd.js

@@ -383,7 +383,7 @@
         return TooltipComponent;
     }());
     TooltipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TooltipComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TooltipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TooltipComponent, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TooltipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TooltipComponent, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TooltipComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2341,6 +2341,546 @@
                     args: ['createNewOptionTemplate']
                 }] } });
 
+    // We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
+    var BACKSPACE = 8;
+    var TAB = 9;
+    var ARROW_DOWN = 40;
+    var ARROW_UP = 38;
+    var ARROW_LEFT = 37;
+    var ARROW_RIGHT = 39;
+    var ENTER = 13;
+    var ESCAPE = 27;
+    var SPACE = 32;
+
+    var KeyboardActionSourceDirective = /** @class */ (function () {
+        function KeyboardActionSourceDirective(element) {
+            var _this = this;
+            this.element = element;
+            this.dontEmit = false;
+            this.destroyed$ = new i6.Subject();
+            this.keyboardActions$ = i6.fromEvent(this.element.nativeElement, 'keydown').pipe(operators.filter(function (_event) { return !_this.dontEmit; }), operators.map(function (event) {
+                switch (event.keyCode) {
+                    case ARROW_UP:
+                        event.preventDefault();
+                        return exports.KeyboardSelectAction.PREV;
+                    case ARROW_DOWN:
+                        event.preventDefault();
+                        return exports.KeyboardSelectAction.NEXT;
+                    case ARROW_LEFT:
+                        event.preventDefault();
+                        return exports.KeyboardSelectAction.LEFT;
+                    case ARROW_RIGHT:
+                        event.preventDefault();
+                        return exports.KeyboardSelectAction.RIGHT;
+                    case ENTER:
+                        event.preventDefault();
+                        return exports.KeyboardSelectAction.EXECUTE;
+                    case ESCAPE:
+                    case TAB:
+                        return exports.KeyboardSelectAction.CLOSE;
+                }
+            }), operators.takeUntil(this.destroyed$));
+        }
+        KeyboardActionSourceDirective.prototype.blur = function () {
+            this.element.nativeElement.blur();
+        };
+        KeyboardActionSourceDirective.prototype.ngOnDestroy = function () {
+            this.destroyed$.next();
+        };
+        return KeyboardActionSourceDirective;
+    }());
+    KeyboardActionSourceDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    KeyboardActionSourceDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        exportAs: 'keyboardActionSource',
+                        selector: '[lxKeyboardActionSource]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+
+    var OptionGroupComponent = /** @class */ (function () {
+        function OptionGroupComponent() {
+            /**
+             * 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 i0.EventEmitter();
+        }
+        OptionGroupComponent.prototype.selectOption = function (value) {
+            this.select.emit(value);
+        };
+        return OptionGroupComponent;
+    }());
+    OptionGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OptionGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lx-option-group',
+                        templateUrl: 'option-group.component.html',
+                        styleUrls: ['option-group.component.styl'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], propDecorators: { hasSelectedState: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], select: [{
+                    type: i0.Output
+                }] } });
+
+    var OptionComponent = /** @class */ (function () {
+        function OptionComponent(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 i0.EventEmitter();
+            this.highlight = new i0.EventEmitter();
+            this.selectedClick = new i0.EventEmitter();
+            this.hasSubdropdown = false;
+            this.isSuboption = false;
+        }
+        OptionComponent.prototype.selectOption = function (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);
+            }
+        };
+        OptionComponent.prototype.setSelected = function (value) {
+            this.selected = value;
+        };
+        OptionComponent.prototype.setHighlighted = function (value) {
+            this.isHighlighted = value;
+            this.highlight.emit(this.isHighlighted);
+        };
+        return OptionComponent;
+    }());
+    OptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, deps: [{ token: i0.forwardRef(function () { return OptionGroupComponent; }), optional: true }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OptionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lx-option',
+                        templateUrl: 'option.component.html',
+                        styleUrls: ['option.component.styl']
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: OptionGroupComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Inject,
+                            args: [i0.forwardRef(function () { return OptionGroupComponent; })]
+                        }] }, { type: i0__namespace.ElementRef }];
+        }, propDecorators: { selected: [{
+                    type: i0.Input
+                }], isHighlighted: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], hasSelectedState: [{
+                    type: i0.Input
+                }], select: [{
+                    type: i0.Output
+                }], highlight: [{
+                    type: i0.Output
+                }], selectedClick: [{
+                    type: i0.Output
+                }], selectOption: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+
+    var BOTTOM_LEFT_POSITION$1 = {
+        originX: 'end',
+        overlayX: 'end',
+        originY: 'bottom',
+        overlayY: 'top'
+    };
+    var BOTTOM_RIGHT_POSITION$1 = {
+        originX: 'start',
+        overlayX: 'start',
+        originY: 'bottom',
+        overlayY: 'top'
+    };
+    var TOP_LEFT_POSITION$1 = {
+        originX: 'end',
+        overlayX: 'end',
+        originY: 'top',
+        overlayY: 'bottom'
+    };
+    var TOP_RIGHT_POSITION$1 = {
+        originX: 'start',
+        overlayX: 'start',
+        originY: 'top',
+        overlayY: 'bottom'
+    };
+    var LEFT_ALIGN_POSITIONS$1 = [BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1, BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1];
+    var RIGHT_ALIGN_POSITIONS$1 = [BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1, BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1];
+    var CdkOptionsDropdownComponent = /** @class */ (function () {
+        function CdkOptionsDropdownComponent(changeDetection) {
+            this.changeDetection = changeDetection;
+            this.align = 'right';
+            this.closeOnScroll = false;
+            this.disabled = false;
+            this.maxHeight = 'none';
+            this.highlightedOptionIndex$ = new i6.BehaviorSubject(0);
+            this._open = false;
+            this.isSubdropdownExpanded = false;
+            this.destroyed$ = new i6.Subject();
+            this.isPositionComputed = true;
+        }
+        Object.defineProperty(CdkOptionsDropdownComponent.prototype, "open", {
+            get: function () {
+                return this._open;
+            },
+            set: function (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);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CdkOptionsDropdownComponent.prototype, "options", {
+            get: function () {
+                return this._options.toArray();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CdkOptionsDropdownComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.trigger.dontEmit = !this.open;
+            this.overlay.positions = this.align === 'left' ? LEFT_ALIGN_POSITIONS$1 : RIGHT_ALIGN_POSITIONS$1;
+            var optionsChanges$ = this._options.changes.pipe(operators.startWith(this._options), operators.map(function (options) { return options.toArray(); }));
+            this.trigger.keyboardActions$
+                .pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.NEXT; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.next(index, options); }))
+                .subscribe(this.highlightedOptionIndex$);
+            this.trigger.keyboardActions$
+                .pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.PREV; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.prev(index, options); }))
+                .subscribe(this.highlightedOptionIndex$);
+            this.trigger.keyboardActions$
+                .pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.LEFT; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.isSubdropdownExpanded ? _this.collapse(index, options) : _this.expand(index, options); }))
+                .subscribe(this.highlightedOptionIndex$);
+            this.trigger.keyboardActions$
+                .pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.RIGHT; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.isSubdropdownExpanded ? _this.collapse(index, options) : _this.expand(index, options); }))
+                .subscribe(this.highlightedOptionIndex$);
+            this.trigger.keyboardActions$
+                .pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.CLOSE; }))
+                .subscribe(function () { return _this.closeDropdown(); });
+            this.trigger.keyboardActions$
+                .pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.EXECUTE; }), operators.withLatestFrom(this.highlightedOptionIndex$, function (_, index) { return index; }))
+                .subscribe(function (index) {
+                if (_this.options[index]) {
+                    _this.options[index].selectOption();
+                }
+            });
+            /** Combined stream of all of the child options' select outputs. */
+            this._options.changes
+                .pipe(operators.startWith(this._options), operators.switchMap(function () { return i6.merge.apply(void 0, __spreadArray(__spreadArray([], __read(_this._options.map(function (option) { return option.select; }))), __read(_this._options.map(function (option) { return option.selectedClick; })))); }), operators.delay(0), operators.takeUntil(this.destroyed$))
+                .subscribe(function (_value) {
+                _this.closeDropdown();
+            });
+            i6.combineLatest([optionsChanges$, this.highlightedOptionIndex$])
+                .pipe(operators.delay(0), operators.map(function (_a) {
+                var _b = __read(_a, 2), options = _b[0], index = _b[1];
+                return options[index];
+            }), operators.distinctUntilChanged(), operators.takeUntil(this.destroyed$))
+                .subscribe(function (optionToBeHighlighted) {
+                _this.options.forEach(function (option) { return option.setHighlighted(optionToBeHighlighted === option); });
+                _this.changeDetection.markForCheck();
+            });
+            if (this.closeOnScroll) {
+                i6.fromEvent(window, 'scroll')
+                    .pipe(operators.debounceTime(100), operators.takeUntil(this.destroyed$))
+                    .subscribe(function () {
+                    _this.open = false;
+                    _this.trigger.blur();
+                });
+            }
+        };
+        CdkOptionsDropdownComponent.prototype.ngOnDestroy = function () {
+            this.destroyed$.next();
+        };
+        CdkOptionsDropdownComponent.prototype.closeDropdown = function () {
+            this.tooltips.toArray().forEach(function (tooltip) { return tooltip.hide(); });
+            this.open = false;
+        };
+        CdkOptionsDropdownComponent.prototype.setInitialHighlightingIndex = function () {
+            var _this = this;
+            var firstAvailableIndex = this.options.map(function (option) { return !_this.optionIsHighlightable(option); }).indexOf(false, 0);
+            this.highlightedOptionIndex$.next(firstAvailableIndex);
+        };
+        CdkOptionsDropdownComponent.prototype.prev = function (currentIndex, items) {
+            var _this = this;
+            if (currentIndex > 0) {
+                var prevEnabledIndex = items.map(function (option) { return !_this.optionIsHighlightable(option); }).lastIndexOf(false, currentIndex - 1);
+                return prevEnabledIndex !== -1 ? prevEnabledIndex : currentIndex;
+            }
+            else {
+                return currentIndex;
+            }
+        };
+        CdkOptionsDropdownComponent.prototype.next = function (currentIndex, items) {
+            var _this = this;
+            if (currentIndex < items.length) {
+                var nextEnabledIndex = items.map(function (option) { return !_this.optionIsHighlightable(option); }).indexOf(false, currentIndex + 1);
+                return nextEnabledIndex !== -1 ? nextEnabledIndex : currentIndex;
+            }
+            else {
+                return currentIndex;
+            }
+        };
+        CdkOptionsDropdownComponent.prototype.expand = function (currentIndex, items) {
+            if (items[currentIndex].hasSubdropdown) {
+                this.isSubdropdownExpanded = true;
+                return this.next(currentIndex, items);
+            }
+            else {
+                return currentIndex;
+            }
+        };
+        CdkOptionsDropdownComponent.prototype.collapse = function (currentIndex, items) {
+            if (this.isSubdropdownExpanded) {
+                this.isSubdropdownExpanded = false;
+                return this.prev(currentIndex, items);
+            }
+            else {
+                return currentIndex;
+            }
+        };
+        CdkOptionsDropdownComponent.prototype.optionIsHighlightable = function (option) {
+            var isToplevelOptionAndAllowed = !option.isSuboption && !this.isSubdropdownExpanded;
+            var isSecondlevelOptionAndAllowed = option.isSuboption && this.isSubdropdownExpanded;
+            return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
+        };
+        CdkOptionsDropdownComponent.prototype.reloadOverlayPosition = function (open) {
+            var _this = this;
+            if (open) {
+                this.isPositionComputed = false;
+                setTimeout(function () {
+                    var 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();
+            }
+        };
+        return CdkOptionsDropdownComponent;
+    }());
+    CdkOptionsDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CdkOptionsDropdownComponent.ɵcmp = i0__namespace.ɵɵ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: i1.CdkConnectedOverlay, descendants: true }], ngImport: i0__namespace, 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__namespace.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1__namespace.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__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lx-cdk-options-dropdown',
+                        templateUrl: 'cdk-options-dropdown.component.html',
+                        styleUrls: ['cdk-options-dropdown.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { dropdownContainer: [{
+                    type: i0.ViewChild,
+                    args: ['dropdown']
+                }], align: [{
+                    type: i0.Input
+                }], closeOnScroll: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], maxHeight: [{
+                    type: i0.Input
+                }], trigger: [{
+                    type: i0.ContentChild,
+                    args: [KeyboardActionSourceDirective]
+                }], overlay: [{
+                    type: i0.ViewChild,
+                    args: [i1.CdkConnectedOverlay]
+                }], _options: [{
+                    type: i0.ContentChildren,
+                    args: [OptionComponent, { descendants: true }]
+                }], tooltips: [{
+                    type: i0.ContentChildren,
+                    args: [TooltipDirective, { descendants: true }]
+                }] } });
+
+    var BOTTOM_LEFT_POSITION = {
+        originX: 'start',
+        overlayX: 'end',
+        originY: 'top',
+        overlayY: 'top',
+        offsetX: -4
+    };
+    var BOTTOM_RIGHT_POSITION = {
+        originX: 'end',
+        overlayX: 'start',
+        originY: 'top',
+        overlayY: 'top',
+        offsetX: 4
+    };
+    var TOP_LEFT_POSITION = {
+        originX: 'start',
+        overlayX: 'end',
+        originY: 'bottom',
+        overlayY: 'bottom',
+        offsetX: -4
+    };
+    var TOP_RIGHT_POSITION = {
+        originX: 'end',
+        overlayX: 'start',
+        originY: 'bottom',
+        overlayY: 'bottom',
+        offsetX: 4
+    };
+    var LEFT_ALIGN_POSITIONS = [BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION];
+    var RIGHT_ALIGN_POSITIONS = [BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION, BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION];
+    var CdkOptionsSubDropdownComponent = /** @class */ (function () {
+        function CdkOptionsSubDropdownComponent(changeDetection) {
+            this.changeDetection = changeDetection;
+            this.align = 'right';
+            this.open = false;
+            this.isPositionComputed = true;
+            this.mouseInside$ = new i6.Subject();
+            this.destroyed$ = new i6.Subject();
+        }
+        CdkOptionsSubDropdownComponent.prototype.mouseenter = function () {
+            this.mouseInside$.next(true);
+        };
+        CdkOptionsSubDropdownComponent.prototype.mouseleave = function () {
+            this.mouseInside$.next(false);
+        };
+        CdkOptionsSubDropdownComponent.prototype.ngOnDestroy = function () {
+            this.destroyed$.next();
+        };
+        CdkOptionsSubDropdownComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            // To avoid `Expression has changed after it was checked`
+            executeOnNextTick(function () {
+                _this.trigger.hasSubdropdown = true;
+                _this.overlay.positions = _this.align === 'left' ? LEFT_ALIGN_POSITIONS : RIGHT_ALIGN_POSITIONS;
+            });
+            i6.merge(this.showByMouse(), this.showByKeyboard())
+                .pipe(operators.takeUntil(this.destroyed$), operators.distinctUntilChanged())
+                .subscribe(function (show) {
+                _this.open = show;
+                _this.reloadOverlayPosition(_this.open);
+            });
+            this.options.changes
+                .pipe(operators.startWith(this.options), operators.switchMap(function () { return i6.merge.apply(void 0, __spreadArray(__spreadArray([], __read(_this.options.map(function (option) { return option.select; }))), __read(_this.options.map(function (option) { return option.selectedClick; })))); }), operators.delay(0), operators.takeUntil(this.destroyed$))
+                .subscribe(function () {
+                _this.closeDropdown();
+            });
+        };
+        CdkOptionsSubDropdownComponent.prototype.showByKeyboard = function () {
+            var optionChange$ = this.options.changes.pipe(operators.startWith(this.options), operators.map(function (options) { return options.toArray(); }), operators.map(function (options) { return options.map(function (option) {
+                option.isSuboption = true;
+                return option;
+            }); }));
+            return i6.combineLatest([this.trigger.highlight.asObservable(), optionChange$]).pipe(operators.delay(0), // Need tick delay to get option highlighted and filter it out after
+            operators.map(function (_a) {
+                var _b = __read(_a, 2), isHighlighted = _b[0], options = _b[1];
+                return isHighlighted || options.some(function (option) { return option.isHighlighted; });
+            }));
+        };
+        CdkOptionsSubDropdownComponent.prototype.showByMouse = function () {
+            var mouseEnterTrigger$ = i6.fromEvent(this.trigger.elementRef.nativeElement, 'mouseenter');
+            var mouseLeaveTrigger$ = i6.fromEvent(this.trigger.elementRef.nativeElement, 'mouseleave');
+            var showOnEnterMouse$ = mouseEnterTrigger$.pipe(operators.mapTo(true));
+            var hideOnLeaveMouse$ = mouseLeaveTrigger$.pipe(operators.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.
+            var showSubdropdown$ = i6.merge(hideOnLeaveMouse$, this.mouseInside$).pipe(operators.debounceTime(300));
+            var showOnEnterSubdropdown$ = mouseEnterTrigger$.pipe(operators.switchMap(function () { return showSubdropdown$; }));
+            return i6.merge(showOnEnterMouse$, showOnEnterSubdropdown$);
+        };
+        CdkOptionsSubDropdownComponent.prototype.reloadOverlayPosition = function (open) {
+            var _this = this;
+            // force a rendering so that the dropdown container's dimensions are computed.
+            this.changeDetection.markForCheck();
+            if (open && this.dropdownContainer) {
+                this.isPositionComputed = false;
+                setTimeout(function () {
+                    var dropdownElement = _this.dropdownContainer.nativeElement;
+                    _this.overlay.overlayRef.updateSize({
+                        height: dropdownElement.offsetHeight,
+                        width: dropdownElement.offsetWidth
+                    });
+                    _this.overlay.overlayRef.updatePosition();
+                    _this.isPositionComputed = true;
+                }, 0);
+            }
+        };
+        CdkOptionsSubDropdownComponent.prototype.closeDropdown = function () {
+            this.open = false;
+            this.mouseInside$.next(false);
+        };
+        return CdkOptionsSubDropdownComponent;
+    }());
+    CdkOptionsSubDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsSubDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CdkOptionsSubDropdownComponent.ɵcmp = i0__namespace.ɵɵ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: i1.CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0__namespace, 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__namespace.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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsSubDropdownComponent, decorators: [{
+                type: i0.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__namespace.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
+                    type: i0.Input
+                }], align: [{
+                    type: i0.Input
+                }], options: [{
+                    type: i0.ContentChildren,
+                    args: [OptionComponent, { descendants: true }]
+                }], overlay: [{
+                    type: i0.ViewChild,
+                    args: [i1.CdkConnectedOverlay]
+                }], dropdownContainer: [{
+                    type: i0.ViewChild,
+                    args: ['dropdown']
+                }] } });
+
     /**
      * Observe creates an Observable stream and notifies the changes from an observed property.
      *
@@ -3221,17 +3761,6 @@
                     }]
             }] });
 
-    // We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
-    var BACKSPACE = 8;
-    var TAB = 9;
-    var ARROW_DOWN = 40;
-    var ARROW_UP = 38;
-    var ARROW_LEFT = 37;
-    var ARROW_RIGHT = 39;
-    var ENTER = 13;
-    var ESCAPE = 27;
-    var SPACE = 32;
-
     var BaseSelectDirective = /** @class */ (function () {
         function BaseSelectDirective() {
             this.disabled = false;
@@ -3889,168 +4418,6 @@
                     args: ['noResultsOptionTemplateRef']
                 }] } });
 
-    var OptionGroupComponent = /** @class */ (function () {
-        function OptionGroupComponent() {
-            /**
-             * 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 i0.EventEmitter();
-        }
-        OptionGroupComponent.prototype.selectOption = function (value) {
-            this.select.emit(value);
-        };
-        return OptionGroupComponent;
-    }());
-    OptionGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OptionGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'lx-option-group',
-                        templateUrl: 'option-group.component.html',
-                        styleUrls: ['option-group.component.styl'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
-                    }]
-            }], propDecorators: { hasSelectedState: [{
-                    type: i0.Input
-                }], label: [{
-                    type: i0.Input
-                }], select: [{
-                    type: i0.Output
-                }] } });
-
-    var OptionComponent = /** @class */ (function () {
-        function OptionComponent(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 i0.EventEmitter();
-            this.highlight = new i0.EventEmitter();
-            this.selectedClick = new i0.EventEmitter();
-            this.hasSubdropdown = false;
-            this.isSuboption = false;
-        }
-        OptionComponent.prototype.selectOption = function (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);
-            }
-        };
-        OptionComponent.prototype.setSelected = function (value) {
-            this.selected = value;
-        };
-        OptionComponent.prototype.setHighlighted = function (value) {
-            this.isHighlighted = value;
-            this.highlight.emit(this.isHighlighted);
-        };
-        return OptionComponent;
-    }());
-    OptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, deps: [{ token: i0.forwardRef(function () { return OptionGroupComponent; }), optional: true }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OptionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'lx-option',
-                        templateUrl: 'option.component.html',
-                        styleUrls: ['option.component.styl']
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: OptionGroupComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Inject,
-                            args: [i0.forwardRef(function () { return OptionGroupComponent; })]
-                        }] }, { type: i0__namespace.ElementRef }];
-        }, propDecorators: { selected: [{
-                    type: i0.Input
-                }], isHighlighted: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], value: [{
-                    type: i0.Input
-                }], hasSelectedState: [{
-                    type: i0.Input
-                }], select: [{
-                    type: i0.Output
-                }], highlight: [{
-                    type: i0.Output
-                }], selectedClick: [{
-                    type: i0.Output
-                }], selectOption: [{
-                    type: i0.HostListener,
-                    args: ['click', ['$event']]
-                }] } });
-
-    var KeyboardActionSourceDirective = /** @class */ (function () {
-        function KeyboardActionSourceDirective(element) {
-            var _this = this;
-            this.element = element;
-            this.dontEmit = false;
-            this.destroyed$ = new i6.Subject();
-            this.keyboardActions$ = i6.fromEvent(this.element.nativeElement, 'keydown').pipe(operators.filter(function (_event) { return !_this.dontEmit; }), operators.map(function (event) {
-                switch (event.keyCode) {
-                    case ARROW_UP:
-                        event.preventDefault();
-                        return exports.KeyboardSelectAction.PREV;
-                    case ARROW_DOWN:
-                        event.preventDefault();
-                        return exports.KeyboardSelectAction.NEXT;
-                    case ARROW_LEFT:
-                        event.preventDefault();
-                        return exports.KeyboardSelectAction.LEFT;
-                    case ARROW_RIGHT:
-                        event.preventDefault();
-                        return exports.KeyboardSelectAction.RIGHT;
-                    case ENTER:
-                        event.preventDefault();
-                        return exports.KeyboardSelectAction.EXECUTE;
-                    case ESCAPE:
-                    case TAB:
-                        return exports.KeyboardSelectAction.CLOSE;
-                }
-            }), operators.takeUntil(this.destroyed$));
-        }
-        KeyboardActionSourceDirective.prototype.blur = function () {
-            this.element.nativeElement.blur();
-        };
-        KeyboardActionSourceDirective.prototype.ngOnDestroy = function () {
-            this.destroyed$.next();
-        };
-        return KeyboardActionSourceDirective;
-    }());
-    KeyboardActionSourceDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    KeyboardActionSourceDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        exportAs: 'keyboardActionSource',
-                        selector: '[lxKeyboardActionSource]'
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
-
     var OptionsDropdownComponent = /** @class */ (function () {
         function OptionsDropdownComponent(changeDetection) {
             this.changeDetection = changeDetection;
@@ -5391,6 +5758,8 @@
             OptionGroupDropdownComponent,
             OptionsDropdownComponent,
             OptionsSubDropdownComponent,
+            CdkOptionsDropdownComponent,
+            CdkOptionsSubDropdownComponent,
             PickerComponent,
             PickerOptionComponent,
             PickerTriggerDirective,
@@ -5410,6 +5779,7 @@
             i3$2.FormsModule,
             i3$2.ReactiveFormsModule, i1__namespace$2.TranslateModule, i1$3.DatepickerModule,
             i3$1.InfiniteScrollModule,
+            i1.OverlayModule,
             LxCoreUiModule], exports: [BasicDropdownComponent,
             BasicDropdownItemComponent,
             CurrencyInputComponent,
@@ -5429,6 +5799,8 @@
             OptionGroupDropdownComponent,
             OptionsDropdownComponent,
             OptionsSubDropdownComponent,
+            CdkOptionsDropdownComponent,
+            CdkOptionsSubDropdownComponent,
             PickerComponent,
             PickerOptionComponent,
             PickerTriggerDirective,
@@ -5451,6 +5823,7 @@
                 i1$2.TranslateModule.forChild(),
                 i1$3.DatepickerModule,
                 i3$1.InfiniteScrollModule,
+                i1.OverlayModule,
                 LxCoreUiModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxFormsModule, decorators: [{
@@ -5476,6 +5849,8 @@
                             OptionGroupDropdownComponent,
                             OptionsDropdownComponent,
                             OptionsSubDropdownComponent,
+                            CdkOptionsDropdownComponent,
+                            CdkOptionsSubDropdownComponent,
                             PickerComponent,
                             PickerOptionComponent,
                             PickerTriggerDirective,
@@ -5500,6 +5875,7 @@
                             i1$2.TranslateModule.forChild(),
                             i1$3.DatepickerModule,
                             i3$1.InfiniteScrollModule,
+                            i1.OverlayModule,
                             LxCoreUiModule
                         ],
                         exports: [
@@ -5522,6 +5898,8 @@
                             OptionGroupDropdownComponent,
                             OptionsDropdownComponent,
                             OptionsSubDropdownComponent,
+                            CdkOptionsDropdownComponent,
+                            CdkOptionsSubDropdownComponent,
                             PickerComponent,
                             PickerOptionComponent,
                             PickerTriggerDirective,
@@ -6407,6 +6785,8 @@
     exports.ButtonGroupComponent = ButtonGroupComponent;
     exports.CURRENCY_SYMBOL_MAP = CURRENCY_SYMBOL_MAP;
     exports.CardComponent = CardComponent;
+    exports.CdkOptionsDropdownComponent = CdkOptionsDropdownComponent;
+    exports.CdkOptionsSubDropdownComponent = CdkOptionsSubDropdownComponent;
     exports.CollapsibleComponent = CollapsibleComponent;
     exports.ColoredLabelComponent = ColoredLabelComponent;
     exports.ContrastColorPipe = ContrastColorPipe;