@leanix/components 0.2.226 → 0.2.229

package/bundles/leanix-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('lodash/fp'), require('@ngx-translate/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('color'), require('date-fns'), require('lodash'), require('marked'), require('@angular/cdk/drag-drop'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-infinite-scroll'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/animations'), require('@ncstate/sat-popover'), require('@angular/cdk/coercion'), require('@angular/router')) :
-    typeof define === 'function' && define.amd ? define('@leanix/components', ['exports', '@angular/common', '@angular/core', '@angular/cdk/portal', '@angular/cdk/overlay', 'lodash/fp', '@ngx-translate/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', 'color', 'date-fns', 'lodash', 'marked', '@angular/cdk/drag-drop', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-infinite-scroll', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/animations', '@ncstate/sat-popover', '@angular/cdk/coercion', '@angular/router'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.leanix = global.leanix || {}, global.leanix.components = {}), global.ng.common, global.ng.core, global.ng.cdk.portal, global.ng.cdk.overlay, global.fp, global.i1$2, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.Color, global.dateFns, global._, global.marked, global.ng.cdk.dragDrop, global.ng.forms, global.i1$3, global.i3$1, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.animations, global.i1$5, global.ng.cdk.coercion, global.ng.router));
-})(this, (function (exports, i2, i0, i3, i1, fp, i1$2, i1$1, i6, operators, Color, dateFns, _, marked, i3$3, i3$2, i1$3, i3$1, i2$1, i1$4, animations, i1$5, coercion, i3$4) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('lodash/fp'), require('@ngx-translate/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('color'), require('date-fns'), require('lodash'), require('marked'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-infinite-scroll'), require('@angular/cdk/drag-drop'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/animations'), require('@ncstate/sat-popover'), require('@angular/cdk/coercion'), require('@angular/router')) :
+    typeof define === 'function' && define.amd ? define('@leanix/components', ['exports', '@angular/common', '@angular/core', '@angular/cdk/portal', '@angular/cdk/overlay', 'lodash/fp', '@ngx-translate/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', 'color', 'date-fns', 'lodash', 'marked', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-infinite-scroll', '@angular/cdk/drag-drop', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/animations', '@ncstate/sat-popover', '@angular/cdk/coercion', '@angular/router'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.leanix = global.leanix || {}, global.leanix.components = {}), global.ng.common, global.ng.core, global.ng.cdk.portal, global.ng.cdk.overlay, global.fp, global.i1$2, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.Color, global.dateFns, global._, global.marked, global.ng.forms, global.i1$3, global.i3$1, global.ng.cdk.dragDrop, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.animations, global.i1$6, global.ng.cdk.coercion, global.ng.router));
+})(this, (function (exports, i2, i0, i3, i1, fp, i1$2, i1$1, i6, operators, Color, dateFns, _, marked, i3$2, i1$3, i3$1, i1$4, i2$1, i1$5, animations, i1$6, coercion, i3$3) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,21 +24,21 @@
 
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var Color__namespace = /*#__PURE__*/_interopNamespace(Color);
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
-    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$3);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$2);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
-    var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
+    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
+    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
 
     var BadgeComponent = /** @class */ (function () {
         function BadgeComponent() {
@@ -1328,12 +1328,24 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * Compute the most eligible text color for a given background color (black or white), depending on the luminance of the
+     * background color. In case the provided color is undefined or invalid, white (#FFFFFF) is returned.
+     *
+     * @param colorHex Color string in hexadecimal encoding.
+     * @returns Equivalent contrast color in hexadecimal encoding.
+     */
     function getContrastColor(colorHex) {
-        var color = Color__namespace(colorHex || '#000');
-        // Check http://codepen.io/WebSeed/pen/pvgqEq
-        var a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
-        var d = a < 0.4 ? 0 : 255;
-        return Color__namespace({ r: d, g: d, b: d }).hex();
+        try {
+            var color = Color__namespace(colorHex || '#000');
+            // Check http://codepen.io/WebSeed/pen/pvgqEq
+            var a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
+            var d = a < 0.4 ? 0 : 255;
+            return Color__namespace({ r: d, g: d, b: d }).hex();
+        }
+        catch (_a) {
+            return '#FFFFFF';
+        }
     }
     function shorthandHexHandle(hex) {
         var shorthandRegex = /^(#)([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -3492,14 +3504,12 @@
                 }] } });
 
     var DragAndDropListItemComponent = /** @class */ (function () {
-        function DragAndDropListItemComponent() {
+        function DragAndDropListItemComponent(element) {
+            this.element = element;
             this.NAME = 'DragAndDropListItemComponent';
             this.draggable = true;
             this.action = new i0.EventEmitter();
-            this.moveToTop = new i0.EventEmitter();
-            this.moveUp = new i0.EventEmitter();
-            this.moveToBottom = new i0.EventEmitter();
-            this.moveDown = new i0.EventEmitter();
+            this.customTemplateRef = null;
         }
         Object.defineProperty(DragAndDropListItemComponent.prototype, "draggingDisabled", {
             get: function () {
@@ -3508,13 +3518,23 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DragAndDropListItemComponent.prototype, "hasCustomTemplate", {
+            get: function () {
+                return !!this.customTemplateRef;
+            },
+            enumerable: false,
+            configurable: true
+        });
         DragAndDropListItemComponent.prototype.trackByAction = function (_index, action) {
             return action.id;
         };
+        DragAndDropListItemComponent.prototype.focus = function () {
+            this.element.nativeElement.focus();
+        };
         return DragAndDropListItemComponent;
     }());
-    DragAndDropListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DragAndDropListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action", moveToTop: "moveToTop", moveUp: "moveUp", moveToBottom: "moveToBottom", moveDown: "moveDown" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled" } }, ngImport: i0__namespace, template: "<div class=\"drag-item-wrappper\">\n  <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n  <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n</div>\n<div class=\"left-button-container\" align=\"left\">\n  <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n    <button\n      lx-button\n      *ngFor=\"let act of actions; trackBy: trackByAction\"\n      (click)=\"action.emit({ actionId: act.id, item: item })\"\n      [title]=\"act.label\"\n      [square]=\"true\"\n      mode=\"ghost\"\n      size=\"small\"\n      class=\"action-button\"\n      [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n    >\n      <i class=\"far {{ act.icon }} actionIcon\"></i>\n    </button>\n  </div>\n\n  <lx-cdk-options-dropdown *ngIf=\"draggable\">\n    <button lx-button [square]=\"true\" mode=\"ghost\" size=\"small\" lxKeyboardActionSource class=\"moreButton far fa-ellipsis-v\"></button>\n    <lx-option-group>\n      <lx-option [hasSelectedState]=\"false\" (select)=\"moveToTop.emit()\">\n        <i class=\"far fa-fw fa-arrow-to-top\"></i>{{ NAME + '.moveToTop' | translate }}\n      </lx-option>\n      <lx-option [hasSelectedState]=\"false\" (select)=\"moveUp.emit()\">\n        <i class=\"far fa-fw fa-arrow-up\"></i>{{ NAME + '.moveUp' | translate }}\n      </lx-option>\n      <lx-option [hasSelectedState]=\"false\" (select)=\"moveDown.emit()\">\n        <i class=\"far fa-fw fa-arrow-down\"></i>{{ NAME + '.moveDown' | translate }}\n      </lx-option>\n      <lx-option [hasSelectedState]=\"false\" (select)=\"moveToBottom.emit()\">\n        <i class=\"far fa-fw fa-arrow-down\"></i>{{ NAME + '.moveToBottom' | translate }}\n      </lx-option>\n    </lx-option-group>\n  </lx-cdk-options-dropdown>\n</div>\n", styles: [":host{padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host.draggingDisabled{background:#eaedf1}:host:hover .show-on-hover-button{opacity:1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.action-buttons-wrapper,.left-button-container{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }], pipes: { "translate": i1__namespace$2.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    DragAndDropListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DragAndDropListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\"></ng-container>\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n      >\n        <i class=\"far {{ act.icon }} actionIcon\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.action-buttons-wrapper,.left-button-container{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3523,7 +3543,7 @@
                         styleUrls: ['drag-and-drop-list-item.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], propDecorators: { item: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { item: [{
                     type: i0.Input
                 }], draggable: [{
                     type: i0.Input
@@ -3531,27 +3551,194 @@
                     type: i0.Input
                 }], action: [{
                     type: i0.Output
-                }], moveToTop: [{
-                    type: i0.Output
-                }], moveUp: [{
+                }], draggingDisabled: [{
+                    type: i0.HostBinding,
+                    args: ['class.draggingDisabled']
+                }], hasCustomTemplate: [{
+                    type: i0.HostBinding,
+                    args: ['class.customTemplate']
+                }], customTemplateRef: [{
+                    type: i0.ContentChild,
+                    args: ['customTemplate']
+                }] } });
+
+    /**
+     * Used in the DragAndDropListComponent and KeyboardSortableListDirective
+     */
+    var DRAG_AND_DROP_LIST_TRANSLATION_NAME = 'DragAndDropListComponent';
+
+    var KeyboardSortableItemDirective = /** @class */ (function () {
+        function KeyboardSortableItemDirective(draggableItem, overlayPositionBuilder, element, overlay) {
+            this.draggableItem = draggableItem;
+            this.overlayPositionBuilder = overlayPositionBuilder;
+            this.element = element;
+            this.overlay = overlay;
+            this.isSortingByKeyboardChange = new i0.EventEmitter();
+            this.itemBeingSortedChange = new i0.EventEmitter();
+            this.sortItemsWithKeyboard = new i0.EventEmitter();
+            this.tooltipDirective = new TooltipDirective(this.overlayPositionBuilder, this.element, this.overlay);
+            this.isBeingSorted = false;
+            this.preventBlur = false;
+            this.focusWithKeyboardReplaySubject$ = new i6.ReplaySubject(1);
+            /**
+             * Using a ReplaySubject here so that the KeyboardSortableListDirective will also know
+             * about a focusWithKeyboard event when its copy of the KeyboardSortableItemDirective ContentChildren
+             * was just initialised after the event fired.
+             */
+            this.focusWithKeyboard = this.focusWithKeyboardReplaySubject$.asObservable();
+        }
+        Object.defineProperty(KeyboardSortableItemDirective.prototype, "isSortable", {
+            get: function () {
+                return !this.draggableItem.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        KeyboardSortableItemDirective.prototype.ngOnChanges = function () {
+            this.isBeingSorted = this.itemData === this.itemBeingSorted;
+            if (this.isBeingSorted) {
+                // focus always the pressed element
+                this.element.nativeElement.focus();
+            }
+        };
+        KeyboardSortableItemDirective.prototype.focusViaKeyboard = function () {
+            this.focusWithKeyboardReplaySubject$.next(this);
+        };
+        KeyboardSortableItemDirective.prototype.enterSortingModeEnabledByKeyboard = function ($event) {
+            if ($event.target === this.element.nativeElement) {
+                if ($event.code === 'Enter' || $event.code === 'Space') {
+                    $event.preventDefault();
+                    this.tooltipDirective.hide();
+                    this.itemBeingSortedChange.emit(!this.isSortingByKeyboard ? this.itemData : undefined);
+                    this.isSortingByKeyboardChange.emit(!this.isSortingByKeyboard);
+                }
+            }
+        };
+        KeyboardSortableItemDirective.prototype.leaveSortingModeEnabledByKeyboard = function ($event) {
+            if ($event.target === this.element.nativeElement) {
+                this.tooltipDirective.hide();
+                if (!this.preventBlur) {
+                    this.isSortingByKeyboardChange.emit(false);
+                    this.itemBeingSortedChange.emit(undefined);
+                }
+            }
+        };
+        KeyboardSortableItemDirective.prototype.sort = function ($event) {
+            var _this = this;
+            if ($event.target === this.element.nativeElement) {
+                this.tooltipDirective.hide();
+                if (this.isSortingByKeyboard) {
+                    $event.preventDefault();
+                    var previousIndex = this.allItemsData.findIndex(function (item) { return item === _this.itemData; });
+                    var currentIndex = $event.code === 'ArrowUp' ? previousIndex - 1 : previousIndex + 1;
+                    if (currentIndex >= 0 && currentIndex <= this.allItemsData.length - 1) {
+                        this.sortItemsWithKeyboard.emit({ previousIndex: previousIndex, currentIndex: currentIndex });
+                        // When triggering a keyboard event, the DOM would "removeChildren" on the HTML element
+                        // which specially for "ArrowUp" events would trigger a "blur" event since the element
+                        // has been moved aboved the DOM tree and loses the focus state.
+                        this.preventBlur = true;
+                        setTimeout(function () { return (_this.preventBlur = false); }, 0);
+                    }
+                }
+            }
+        };
+        return KeyboardSortableItemDirective;
+    }());
+    KeyboardSortableItemDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardSortableItemDirective, deps: [{ token: i1__namespace$4.CdkDrag }, { token: i1__namespace.OverlayPositionBuilder }, { token: i0__namespace.ElementRef }, { token: i1__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    KeyboardSortableItemDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardSortableItemDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[lxKeyboardSortableItem]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$4.CdkDrag }, { type: i1__namespace.OverlayPositionBuilder }, { type: i0__namespace.ElementRef }, { type: i1__namespace.Overlay }]; }, propDecorators: { allItemsData: [{
+                    type: i0.Input,
+                    args: ['lxKeyboardSortableItem']
+                }], itemData: [{
+                    type: i0.Input,
+                    args: ['lxKeyboardItemData']
+                }], isSortingByKeyboard: [{
+                    type: i0.Input
+                }], itemBeingSorted: [{
+                    type: i0.Input,
+                    args: ['lxKeyboardItemBeingSorted']
+                }], isSortingByKeyboardChange: [{
                     type: i0.Output
-                }], moveToBottom: [{
+                }], itemBeingSortedChange: [{
+                    type: i0.Output,
+                    args: ['lxKeyboardItemBeingSortedChange']
+                }], sortItemsWithKeyboard: [{
                     type: i0.Output
-                }], moveDown: [{
+                }], focusWithKeyboard: [{
                     type: i0.Output
-                }], draggingDisabled: [{
+                }], tooltipDirective: [{
                     type: i0.HostBinding,
-                    args: ['class.draggingDisabled']
+                    args: ['attr.lxTooltip']
+                }], isBeingSorted: [{
+                    type: i0.HostBinding,
+                    args: ['class.isBeingSortedByKeyboard']
+                }], focusViaKeyboard: [{
+                    type: i0.HostListener,
+                    args: ['keyup.tab']
+                }], enterSortingModeEnabledByKeyboard: [{
+                    type: i0.HostListener,
+                    args: ['keydown.enter', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.space', ['$event']]
+                }], leaveSortingModeEnabledByKeyboard: [{
+                    type: i0.HostListener,
+                    args: ['blur', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.esc', ['$event']]
+                }], sort: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowUp', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowDown', ['$event']]
+                }] } });
+
+    var KeyboardSortableListDirective = /** @class */ (function () {
+        function KeyboardSortableListDirective(translateService) {
+            this.translateService = translateService;
+        }
+        KeyboardSortableListDirective.prototype.ngAfterViewInit = function () {
+            this.setupControlsTooltipToBeShownOnFirstFocusedItem();
+        };
+        KeyboardSortableListDirective.prototype.setupControlsTooltipToBeShownOnFirstFocusedItem = function () {
+            var _this = this;
+            var firstFocusEventOnADraggableItem$ = this.keyboardSortableItems$.pipe(operators.filter(function (items) { return items && items.length > 0; }), operators.switchMap(function (items) { return i6.merge.apply(void 0, __spreadArray([], __read(items.filter(function (item) { return item.isSortable; }).map(function (item) { return item.focusWithKeyboard; })))); }), operators.take(1));
+            firstFocusEventOnADraggableItem$.subscribe(function (item) {
+                item.tooltipDirective.content = _this.translateService.instant(DRAG_AND_DROP_LIST_TRANSLATION_NAME + ".helpTooltip");
+                item.tooltipDirective.show();
+            });
+        };
+        return KeyboardSortableListDirective;
+    }());
+    KeyboardSortableListDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardSortableListDirective, deps: [{ token: i1__namespace$2.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    KeyboardSortableListDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0__namespace });
+    __decorate([
+        Observe('keyboardSortableItems')
+    ], KeyboardSortableListDirective.prototype, "keyboardSortableItems$", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardSortableListDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[lxKeyboardSortableList]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.TranslateService }]; }, propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
+                    type: i0.Input
                 }] } });
 
     var DragAndDropListComponent = /** @class */ (function () {
         function DragAndDropListComponent() {
-            this.NAME = 'DragAndDropListComponent';
+            this.NAME = DRAG_AND_DROP_LIST_TRANSLATION_NAME;
             /**
              * Override the global label font weight of 700
              */
             this.labelFontWeight = 700;
-            this.color = 'default';
+            this.color = 'light';
             this.fontSize = 'normal';
             /**
              * Use the moveToIndex Output in favor of moveItem,
@@ -3559,15 +3746,19 @@
              */
             this.moveToIndex = new i0.EventEmitter();
             this.moveItem = new i0.EventEmitter();
-            this.itemTemplateRef = null;
+            /**
+             * TODO: extract state about keyboard sorting into KeyboardSortableListDirective
+             */
+            this.isSortingByKeyboard = false;
+            this.keyboardItemBeingSorted = undefined;
+            this.allItemsData = [];
         }
-        DragAndDropListComponent.prototype.ngOnInit = function () {
-            if (this.items && !this.itemIdProperty) {
-                throw new Error('Cannot pass drag and drop items without defining the id property');
-            }
-        };
         DragAndDropListComponent.prototype.ngAfterContentInit = function () {
             this.items$ = this._items.changes.pipe(operators.startWith(this._items), operators.map(function (items) { return items.toArray(); }));
+            this.allItemsData$ = this.items$.pipe(operators.map(function (itemComponents) { return itemComponents.map(function (itemComponent) { return itemComponent.item; }); }));
+        };
+        DragAndDropListComponent.prototype.ngAfterViewInit = function () {
+            this.keyboardSortableItems$ = this._keyboardSortableItems.changes.pipe(operators.startWith(this._keyboardSortableItems), operators.map(function (items) { return items.toArray(); }));
         };
         DragAndDropListComponent.prototype.emitContentChildAction = function (action) {
             var _a;
@@ -3583,22 +3774,25 @@
          * You're supposed to update the data in the parent and pass the new items as input.
          */
         DragAndDropListComponent.prototype.drop = function (event) {
-            i3$3.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            this.moveToIndex.emit(event.currentIndex);
-            this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
+            this.sortItems(event.container.data, event.item.data, event.previousIndex, event.currentIndex);
+        };
+        DragAndDropListComponent.prototype.dropToIndexAfterArrowKey = function (item, previousIndex, currentIndex) {
+            if (this.isSortingByKeyboard) {
+                this.sortItems(this._items, item, previousIndex, currentIndex);
+            }
         };
-        DragAndDropListComponent.prototype.dropToIndex = function (item, previousIndex, currentIndex) {
-            i3$3.moveItemInArray(this._items.toArray(), previousIndex, currentIndex);
-            this.moveToIndex.emit(currentIndex);
+        DragAndDropListComponent.prototype.sortItems = function (items, item, previousIndex, currentIndex) {
+            i1$4.moveItemInArray(items, previousIndex, currentIndex);
+            this.moveToIndex.emit({ index: currentIndex, previous: previousIndex });
             this.moveItem.emit({ item: item, index: currentIndex });
         };
-        DragAndDropListComponent.prototype.trackById = function (_index, item) {
-            return item[this.itemIdProperty];
+        DragAndDropListComponent.prototype.trackByItem = function (_index, item) {
+            return item.item;
         };
         return DragAndDropListComponent;
     }());
     DragAndDropListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DragAndDropListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", items: "items", itemIdProperty: "itemIdProperty", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0__namespace, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngIf=\"items; else contentChildList\">\n    <li\n      *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"item[itemIdProperty!]\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n    </li>\n  </ng-container>\n  <ng-template #contentChildList>\n    <li\n      *ngFor=\"let itemComponent of items$ | async; let i = index; let length = count\"\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"itemComponent.item\"\n      [cdkDragDisabled]=\"!itemComponent.draggable\"\n      [class.gray]=\"color === 'gray'\"\n      [class.big]=\"fontSize === 'big'\"\n    >\n      <lx-drag-and-drop-list-item\n        class=\"dragAndDropItem\"\n        [item]=\"itemComponent.item\"\n        [draggable]=\"itemComponent.draggable\"\n        [actions]=\"itemComponent.actions\"\n        (action)=\"emitContentChildAction($event)\"\n        (moveToTop)=\"dropToIndex(itemComponent.item, i, 0)\"\n        (moveUp)=\"dropToIndex(itemComponent.item, i, i - 1)\"\n        (moveDown)=\"dropToIndex(itemComponent.item, i, i + 1)\"\n        (moveToBottom)=\"dropToIndex(itemComponent.item, i, length)\"\n      ></lx-drag-and-drop-list-item>\n    </li>\n  </ng-template>\n</ul>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border:1px solid #99a5bb;margin-bottom:4px;border-radius:3px}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px hsla(0,0%,45%,.3)}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating,.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=gray] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=gray] .item,:host[color=gray] .list{border:0}:host[color=gray] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.gray{border:0!important}.cdk-drag-preview.gray lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}"], components: [{ type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action", "moveToTop", "moveUp", "moveToBottom", "moveDown"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe } });
+    DragAndDropListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0__namespace, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\"></ng-container>\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:1px solid #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #1666ee}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px hsla(0,0%,45%,.3)}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating,.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .item,:host[color=dark] .list{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px 0 #b2bccc;z-index:1}"], components: [{ type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1__namespace$2.TranslatePipe, "async": i2__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3610,10 +3804,6 @@
                     type: i0.Input
                 }], labelFontWeight: [{
                     type: i0.Input
-                }], items: [{
-                    type: i0.Input
-                }], itemIdProperty: [{
-                    type: i0.Input
                 }], color: [{
                     type: i0.Input
                 }, {
@@ -3631,11 +3821,28 @@
                 }], _items: [{
                     type: i0.ContentChildren,
                     args: [DragAndDropListItemComponent]
-                }], itemTemplateRef: [{
-                    type: i0.ContentChild,
-                    args: ['itemTemplate']
+                }], _keyboardSortableItems: [{
+                    type: i0.ViewChildren,
+                    args: [KeyboardSortableItemDirective]
                 }] } });
 
+    var LxDragAndDropListModule = /** @class */ (function () {
+        function LxDragAndDropListModule() {
+        }
+        return LxDragAndDropListModule;
+    }());
+    LxDragAndDropListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxDragAndDropListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    LxDragAndDropListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxDragAndDropListModule, declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent], imports: [i2.CommonModule, i1$4.DragDropModule, LxCoreUiModule, i1__namespace$2.TranslateModule], exports: [DragAndDropListComponent, DragAndDropListItemComponent] });
+    LxDragAndDropListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxDragAndDropListModule, imports: [[i2.CommonModule, i1$4.DragDropModule, LxCoreUiModule, i1$2.TranslateModule.forChild()]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxDragAndDropListModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent],
+                        imports: [i2.CommonModule, i1$4.DragDropModule, LxCoreUiModule, i1$2.TranslateModule.forChild()],
+                        exports: [DragAndDropListComponent, DragAndDropListItemComponent]
+                    }]
+            }] });
+
     var ErrorMessageComponent = /** @class */ (function () {
         function ErrorMessageComponent(cd) {
             this.cd = cd;
@@ -5088,7 +5295,7 @@
         PickerComponent.prototype.onTouched = function () { };
         return PickerComponent;
     }());
-    PickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PickerComponent, deps: [{ token: i1__namespace$4.Directionality }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PickerComponent, deps: [{ token: i1__namespace$5.Directionality }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     PickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: PickerComponent, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
             {
                 provide: i3$2.NG_VALUE_ACCESSOR,
@@ -5111,7 +5318,7 @@
                         ],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$4.Directionality }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { listBoxAriaLabel: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$5.Directionality }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { listBoxAriaLabel: [{
                     type: i0.Input
                 }], listBoxAriaLabelledBy: [{
                     type: i0.Input
@@ -5966,8 +6173,6 @@
             CurrencyInputComponent,
             CurrencySymbolComponent,
             DateInputComponent,
-            DragAndDropListComponent,
-            DragAndDropListItemComponent,
             FilterSelectionPipe,
             FilterTermPipe,
             FormErrorComponent,
@@ -6000,18 +6205,16 @@
             FormErrorDirective,
             ErrorMessageComponent,
             FormSubmitDirective], imports: [i2.CommonModule,
-            i3$3.DragDropModule,
             i3$2.FormsModule,
             i3$2.ReactiveFormsModule, i1__namespace$2.TranslateModule, i1$3.DatepickerModule,
             i3$1.InfiniteScrollModule,
             i1.OverlayModule,
-            LxCoreUiModule], exports: [BasicDropdownComponent,
+            LxCoreUiModule,
+            LxDragAndDropListModule], exports: [BasicDropdownComponent,
             BasicDropdownItemComponent,
             CurrencyInputComponent,
             CurrencySymbolComponent,
             DateInputComponent,
-            DragAndDropListComponent,
-            DragAndDropListItemComponent,
             FilterSelectionPipe,
             FilterTermPipe,
             FormErrorComponent,
@@ -6042,18 +6245,19 @@
             FormatNumberPipe,
             FormErrorDirective,
             FormSubmitDirective,
-            ErrorMessageComponent] });
+            ErrorMessageComponent,
+            LxDragAndDropListModule] });
     LxFormsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxFormsModule, imports: [[
                 i2.CommonModule,
-                i3$3.DragDropModule,
                 i3$2.FormsModule,
                 i3$2.ReactiveFormsModule,
                 i1$2.TranslateModule.forChild(),
                 i1$3.DatepickerModule,
                 i3$1.InfiniteScrollModule,
                 i1.OverlayModule,
-                LxCoreUiModule
-            ]] });
+                LxCoreUiModule,
+                LxDragAndDropListModule
+            ], LxDragAndDropListModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxFormsModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -6063,8 +6267,6 @@
                             CurrencyInputComponent,
                             CurrencySymbolComponent,
                             DateInputComponent,
-                            DragAndDropListComponent,
-                            DragAndDropListItemComponent,
                             FilterSelectionPipe,
                             FilterTermPipe,
                             FormErrorComponent,
@@ -6100,14 +6302,14 @@
                         ],
                         imports: [
                             i2.CommonModule,
-                            i3$3.DragDropModule,
                             i3$2.FormsModule,
                             i3$2.ReactiveFormsModule,
                             i1$2.TranslateModule.forChild(),
                             i1$3.DatepickerModule,
                             i3$1.InfiniteScrollModule,
                             i1.OverlayModule,
-                            LxCoreUiModule
+                            LxCoreUiModule,
+                            LxDragAndDropListModule
                         ],
                         exports: [
                             BasicDropdownComponent,
@@ -6115,8 +6317,6 @@
                             CurrencyInputComponent,
                             CurrencySymbolComponent,
                             DateInputComponent,
-                            DragAndDropListComponent,
-                            DragAndDropListItemComponent,
                             FilterSelectionPipe,
                             FilterTermPipe,
                             FormErrorComponent,
@@ -6147,7 +6347,8 @@
                             FormatNumberPipe,
                             FormErrorDirective,
                             FormSubmitDirective,
-                            ErrorMessageComponent
+                            ErrorMessageComponent,
+                            LxDragAndDropListModule
                         ]
                     }]
             }] });
@@ -6398,7 +6599,7 @@
         return ModalComponent;
     }());
     ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ModalComponent, deps: [{ token: i1__namespace.Overlay }, { token: i0__namespace.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2__namespace$1.ConfigurableFocusTrapFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ModalComponent, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: i3.CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template cdkPortal>\n  <div\n    *ngIf=\"open\"\n    role=\"dialog\"\n    class=\"lxmodal\"\n    [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n    [class.lxmodal--dialog]=\"size === 'dialog'\"\n    [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n    [class.lxmodal--withFooter]=\"!!footer\"\n    [class.lxmodal--verticalScroll]=\"verticalScroll\"\n    @modal\n  >\n    <div\n      *ngIf=\"size === 'fullscreen' && showBackButton\"\n      (click)=\"emitBack()\"\n      (keyup.enter)=\"emitBack()\"\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"fal fa-long-arrow-left\"\n    ></div>\n    <button\n      *ngIf=\"showCloseButton\"\n      (click)=\"closeModal()\"\n      [attr.aria-label]=\"NAME + '.close' | translate\"\n      class=\"fal fa-times closeButton\"\n    ></button>\n    <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n    <div class=\"modalContentContainer\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n  </div>\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:.6s;transition-timing-function:ease;border-radius:50%;color:#b2bccc;width:48px;height:48px;font-size:24px;line-height:48px;right:36px;top:16px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:focus,.lxmodal--fullscreen .closeButton:hover{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:.6s;transition-timing-function:ease;border-radius:50%;color:#b2bccc;width:48px;height:48px;font-size:24px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:focus,.lxmodal--fullscreen .fa-long-arrow-left:hover{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px 0 rgba(0,0,0,.24)}.lxmodal--dialog-large .modalContentContainer,.lxmodal--dialog .modalContentContainer{padding:16px;position:relative}.lxmodal--dialog-large .closeButton,.lxmodal--dialog .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:.6s;transition-timing-function:ease;border-radius:50%;color:#8594ad;height:32px;width:32px;font-size:16px;z-index:999;right:10px;top:10px}.lxmodal--dialog-large .closeButton:before,.lxmodal--dialog .closeButton:before{cursor:pointer}.lxmodal--dialog-large .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog .closeButton:hover{color:#526179;background-color:#eaedf1}.lxmodal--dialog-large .closeButton:focus,.lxmodal--dialog .closeButton:focus{outline:0}.lxmodal--dialog-large .modalContentContainer{height:calc(100% - 48px - 64px)}.modalContentContainer{flex:1}"], directives: [{ type: i3__namespace$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1__namespace$2.TranslatePipe }, animations: [
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ModalComponent, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: i3.CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template cdkPortal>\n  <div\n    *ngIf=\"open\"\n    role=\"dialog\"\n    class=\"lxmodal\"\n    [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n    [class.lxmodal--dialog]=\"size === 'dialog'\"\n    [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n    [class.lxmodal--withFooter]=\"!!footer\"\n    [class.lxmodal--verticalScroll]=\"verticalScroll\"\n    @modal\n  >\n    <div\n      *ngIf=\"size === 'fullscreen' && showBackButton\"\n      (click)=\"emitBack()\"\n      (keyup.enter)=\"emitBack()\"\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"fal fa-long-arrow-left\"\n    ></div>\n    <button\n      *ngIf=\"showCloseButton\"\n      (click)=\"closeModal()\"\n      [attr.aria-label]=\"NAME + '.close' | translate\"\n      class=\"fal fa-times closeButton\"\n    ></button>\n    <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n    <div class=\"modalContentContainer\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n  </div>\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:.6s;transition-timing-function:ease;border-radius:50%;color:#b2bccc;width:48px;height:48px;font-size:24px;line-height:48px;right:36px;top:16px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:focus,.lxmodal--fullscreen .closeButton:hover{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:.6s;transition-timing-function:ease;border-radius:50%;color:#b2bccc;width:48px;height:48px;font-size:24px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:focus,.lxmodal--fullscreen .fa-long-arrow-left:hover{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px 0 rgba(0,0,0,.24)}.lxmodal--dialog-large .modalContentContainer,.lxmodal--dialog .modalContentContainer{padding:16px;position:relative}.lxmodal--dialog-large .closeButton,.lxmodal--dialog .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:.6s;transition-timing-function:ease;border-radius:50%;color:#8594ad;height:32px;width:32px;font-size:16px;z-index:999;right:10px;top:10px}.lxmodal--dialog-large .closeButton:before,.lxmodal--dialog .closeButton:before{cursor:pointer}.lxmodal--dialog-large .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog .closeButton:hover{color:#526179;background-color:#eaedf1}.lxmodal--dialog-large .closeButton:focus,.lxmodal--dialog .closeButton:focus{outline:0}.lxmodal--dialog-large .modalContentContainer{height:calc(100% - 48px - 64px)}.modalContentContainer{flex:1}"], directives: [{ type: i3__namespace$2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1__namespace$2.TranslatePipe }, animations: [
             animations.trigger('modal', [
                 animations.transition(':enter', [animations.style({ opacity: 0 }), animations.animate('0.15s', animations.style({ opacity: 1 }))]),
                 animations.transition(':leave', animations.animate('0.15s', animations.style({ opacity: 0 })))
@@ -6667,7 +6868,7 @@
         return PopoverComponent;
     }());
     PopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: PopoverComponent, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: i1$5.SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"false\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"false\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-animation:subtleScaleUpKeyFrames .2s ease;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}"], components: [{ type: i1__namespace$5.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    PopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: PopoverComponent, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: i1$6.SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"false\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"false\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-animation:subtleScaleUpKeyFrames .2s ease;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}"], components: [{ type: i1__namespace$6.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6693,7 +6894,7 @@
                     type: i0.Output
                 }], satPopover: [{
                     type: i0.ViewChild,
-                    args: [i1$5.SatPopover, { static: true }]
+                    args: [i1$6.SatPopover, { static: true }]
                 }], implicitContent: [{
                     type: i0.ViewChild,
                     args: ['implicitContent', { static: true }]
@@ -6730,7 +6931,7 @@
         };
         return PopoverClickDirective;
     }());
-    PopoverClickDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverClickDirective, deps: [{ token: i1__namespace$5.SatPopoverAnchor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    PopoverClickDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverClickDirective, deps: [{ token: i1__namespace$6.SatPopoverAnchor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     PopoverClickDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: PopoverClickDirective, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0__namespace });
     __decorate([
         Observe('lxPopoverPinned')
@@ -6741,7 +6942,7 @@
                         exportAs: 'clickAnchor',
                         selector: '[lxPopoverClick]'
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$5.SatPopoverAnchor }]; }, propDecorators: { lxPopoverPinned: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$6.SatPopoverAnchor }]; }, propDecorators: { lxPopoverPinned: [{
                     type: i0.Input
                 }], pinned$: [], closePopover: [{
                     type: i0.HostListener,
@@ -6823,7 +7024,7 @@
         };
         return PopoverHoverDirective;
     }());
-    PopoverHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverHoverDirective, deps: [{ token: i1__namespace$5.SatPopoverAnchor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    PopoverHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverHoverDirective, deps: [{ token: i1__namespace$6.SatPopoverAnchor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     PopoverHoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: PopoverHoverDirective, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: PopoverHoverDirective, decorators: [{
                 type: i0.Directive,
@@ -6831,7 +7032,7 @@
                         exportAs: 'hoverAnchor',
                         selector: '[lxPopoverHover]'
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$5.SatPopoverAnchor }]; }, propDecorators: { lxPopoverHover: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$6.SatPopoverAnchor }]; }, propDecorators: { lxPopoverHover: [{
                     type: i0.Input
                 }], skipCloseDelay: [{
                     type: i0.Input
@@ -6849,14 +7050,14 @@
         return LxPopoverUiModule;
     }());
     LxPopoverUiModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxPopoverUiModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    LxPopoverUiModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxPopoverUiModule, declarations: [PopoverHoverDirective, PopoverClickDirective, PopoverComponent, PopoverContentDirective], imports: [i2.CommonModule, i1$5.SatPopoverModule], exports: [i1$5.SatPopoverModule, PopoverClickDirective, PopoverHoverDirective, PopoverComponent, PopoverContentDirective] });
-    LxPopoverUiModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxPopoverUiModule, imports: [[i2.CommonModule, i1$5.SatPopoverModule], i1$5.SatPopoverModule] });
+    LxPopoverUiModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxPopoverUiModule, declarations: [PopoverHoverDirective, PopoverClickDirective, PopoverComponent, PopoverContentDirective], imports: [i2.CommonModule, i1$6.SatPopoverModule], exports: [i1$6.SatPopoverModule, PopoverClickDirective, PopoverHoverDirective, PopoverComponent, PopoverContentDirective] });
+    LxPopoverUiModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxPopoverUiModule, imports: [[i2.CommonModule, i1$6.SatPopoverModule], i1$6.SatPopoverModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxPopoverUiModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [PopoverHoverDirective, PopoverClickDirective, PopoverComponent, PopoverContentDirective],
-                        imports: [i2.CommonModule, i1$5.SatPopoverModule],
-                        exports: [i1$5.SatPopoverModule, PopoverClickDirective, PopoverHoverDirective, PopoverComponent, PopoverContentDirective]
+                        imports: [i2.CommonModule, i1$6.SatPopoverModule],
+                        exports: [i1$6.SatPopoverModule, PopoverClickDirective, PopoverHoverDirective, PopoverComponent, PopoverContentDirective]
                     }]
             }] });
 
@@ -6891,7 +7092,7 @@
         return TabComponent;
     }());
     TabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TabComponent, selector: "lx-tab", inputs: { icon: "icon", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: i3$4.RouterLinkActive, descendants: true }], ngImport: i0__namespace, template: "<li\n  class=\"tab\"\n  [attr.tabindex]=\"isActive || disabled || tabLink ? '-1' : '0'\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.aria-controls]=\"tabPanelId\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  role=\"tab\"\n  (keyup.enter)=\"switch.emit()\"\n  (click)=\"switch.emit()\"\n>\n  <a *ngIf=\"tabLink; else portalTab\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n    <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n  </a>\n\n  <ng-template #portalTab>\n    <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n    <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n    <lx-badge\n      *ngIf=\"counter\"\n      [size]=\"counterBadgeSize\"\n      class=\"lx-margin-left\"\n      [content]=\"counter\"\n      [color]=\"isActive ? 'darkgray' : 'gray'\"\n    ></lx-badge>\n  </ng-template>\n\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{display:inline-block;margin:0 8px;text-align:center;border-bottom:2px solid transparent;transition:border-bottom .5s;cursor:pointer}.tab.active,.tab:hover{border-bottom:2px solid #2a303d;transition:border-bottom .1s;outline:0}.tab.active,.tab.disabled{cursor:default}.tab.disabled{opacity:.3}.tab.active .tabLabel,.tab:hover .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#677a9a;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i3__namespace$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TabComponent, selector: "lx-tab", inputs: { icon: "icon", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: i3$3.RouterLinkActive, descendants: true }], ngImport: i0__namespace, template: "<li\n  class=\"tab\"\n  [attr.tabindex]=\"isActive || disabled || tabLink ? '-1' : '0'\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.aria-controls]=\"tabPanelId\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  role=\"tab\"\n  (keyup.enter)=\"switch.emit()\"\n  (click)=\"switch.emit()\"\n>\n  <a *ngIf=\"tabLink; else portalTab\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n    <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n  </a>\n\n  <ng-template #portalTab>\n    <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n    <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n    <lx-badge\n      *ngIf=\"counter\"\n      [size]=\"counterBadgeSize\"\n      class=\"lx-margin-left\"\n      [content]=\"counter\"\n      [color]=\"isActive ? 'darkgray' : 'gray'\"\n    ></lx-badge>\n  </ng-template>\n\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{display:inline-block;margin:0 8px;text-align:center;border-bottom:2px solid transparent;transition:border-bottom .5s;cursor:pointer}.tab.active,.tab:hover{border-bottom:2px solid #2a303d;transition:border-bottom .1s;outline:0}.tab.active,.tab.disabled{cursor:default}.tab.disabled{opacity:.3}.tab.active .tabLabel,.tab:hover .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#677a9a;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i3__namespace$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TabComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6929,7 +7130,7 @@
                     args: ['contentTemplate', { static: true }]
                 }], routerLinkActive: [{
                     type: i0.ViewChild,
-                    args: [i3$4.RouterLinkActive]
+                    args: [i3$3.RouterLinkActive]
                 }] } });
 
     var TabGroupComponent = /** @class */ (function () {
@@ -6995,7 +7196,7 @@
         return TabGroupComponent;
     }());
     TabGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TabGroupComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TabGroupComponent, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<ul class=\"tabs\" role=\"tablist\" [class.centered]=\"isCentered\">\n  <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:1px solid #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}"], directives: [{ type: i3__namespace$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TabGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TabGroupComponent, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<ul class=\"tabs\" role=\"tablist\" [class.centered]=\"isCentered\">\n  <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:1px solid #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}"], directives: [{ type: i3__namespace$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TabGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7021,13 +7222,13 @@
         return LxTabUiModule;
     }());
     LxTabUiModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxTabUiModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    LxTabUiModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxTabUiModule, declarations: [TabGroupComponent, TabComponent], imports: [i3.PortalModule, i2.CommonModule, LxCoreUiModule, i3$4.RouterModule], exports: [TabGroupComponent, TabComponent] });
-    LxTabUiModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxTabUiModule, imports: [[i3.PortalModule, i2.CommonModule, LxCoreUiModule, i3$4.RouterModule]] });
+    LxTabUiModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxTabUiModule, declarations: [TabGroupComponent, TabComponent], imports: [i3.PortalModule, i2.CommonModule, LxCoreUiModule, i3$3.RouterModule], exports: [TabGroupComponent, TabComponent] });
+    LxTabUiModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxTabUiModule, imports: [[i3.PortalModule, i2.CommonModule, LxCoreUiModule, i3$3.RouterModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxTabUiModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TabGroupComponent, TabComponent],
-                        imports: [i3.PortalModule, i2.CommonModule, LxCoreUiModule, i3$4.RouterModule],
+                        imports: [i3.PortalModule, i2.CommonModule, LxCoreUiModule, i3$3.RouterModule],
                         exports: [TabGroupComponent, TabComponent]
                     }]
             }] });
@@ -7090,6 +7291,7 @@
     exports.KeyboardSelectDirective = KeyboardSelectDirective;
     exports.LOCALE_FN = LOCALE_FN;
     exports.LxCoreUiModule = LxCoreUiModule;
+    exports.LxDragAndDropListModule = LxDragAndDropListModule;
     exports.LxFormsModule = LxFormsModule;
     exports.LxIsUuidPipe = LxIsUuidPipe;
     exports.LxModalModule = LxModalModule;