@leanix/components 0.2.226 → 0.2.229

package/fesm2015/leanix-components.js

@@ -2,7 +2,7 @@ import * as i2 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, Input, HostBinding, ChangeDetectionStrategy, EventEmitter, Output, HostListener, Directive, Pipe, SecurityContext, ContentChildren, Injectable, InjectionToken, Optional, Inject, NgModule, ViewChildren, ViewChild, ContentChild, forwardRef, TemplateRef, Self, Host } from '@angular/core';
-import * as i3$3 from '@angular/cdk/portal';
+import * as i3$2 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -12,14 +12,12 @@ import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/platform-browser';
 import * as i6 from 'rxjs';
 import { merge, Subject, fromEvent, Observable, BehaviorSubject, combineLatest, ReplaySubject, of, timer } from 'rxjs';
-import { takeUntil, first, startWith, filter, withLatestFrom, delay, map, distinctUntilChanged, switchMap, debounceTime, mapTo, skipWhile, tap, take } from 'rxjs/operators';
+import { takeUntil, first, startWith, filter, withLatestFrom, delay, map, distinctUntilChanged, switchMap, debounceTime, mapTo, skipWhile, take, tap } from 'rxjs/operators';
 import * as Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
 import * as _ from 'lodash';
 import { curry } from 'lodash';
 import { Renderer, marked } from 'marked';
-import * as i3$2 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$3 from 'ngx-bootstrap/datepicker';
@@ -27,14 +25,16 @@ import { DatePickerComponent, DateFormatter, DatepickerModule } from 'ngx-bootst
 import * as i3 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { __decorate, __awaiter } from 'tslib';
+import * as i1$4 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@angular/cdk/a11y';
 import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
-import * as i1$4 from '@angular/cdk/bidi';
+import * as i1$5 from '@angular/cdk/bidi';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i1$5 from '@ncstate/sat-popover';
+import * as i1$6 from '@ncstate/sat-popover';
 import { SatPopover, SatPopoverModule } from '@ncstate/sat-popover';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i3$4 from '@angular/router';
+import * as i3$3 from '@angular/router';
 import { RouterLinkActive, RouterModule } from '@angular/router';
 
 class BadgeComponent {
@@ -928,12 +928,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                 type: 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) {
-    const color = Color(colorHex || '#000');
-    // Check http://codepen.io/WebSeed/pen/pvgqEq
-    const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
-    const d = a < 0.4 ? 0 : 255;
-    return Color({ r: d, g: d, b: d }).hex();
+    try {
+        const color = Color(colorHex || '#000');
+        // Check http://codepen.io/WebSeed/pen/pvgqEq
+        const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
+        const d = a < 0.4 ? 0 : 255;
+        return Color({ r: d, g: d, b: d }).hex();
+    }
+    catch (_a) {
+        return '#FFFFFF';
+    }
 }
 function shorthandHexHandle(hex) {
     const shorthandRegex = /^(#)([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -2977,24 +2989,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
             }] } });
 
 class DragAndDropListItemComponent {
-    constructor() {
+    constructor(element) {
+        this.element = element;
         this.NAME = 'DragAndDropListItemComponent';
         this.draggable = true;
         this.action = new EventEmitter();
-        this.moveToTop = new EventEmitter();
-        this.moveUp = new EventEmitter();
-        this.moveToBottom = new EventEmitter();
-        this.moveDown = new EventEmitter();
+        this.customTemplateRef = null;
     }
     get draggingDisabled() {
         return !this.draggable;
     }
+    get hasCustomTemplate() {
+        return !!this.customTemplateRef;
+    }
     trackByAction(_index, action) {
         return action.id;
     }
+    focus() {
+        this.element.nativeElement.focus();
+    }
 }
-DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DragAndDropListItemComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }], pipes: { "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DragAndDropListItemComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -3003,7 +3019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                     styleUrls: ['drag-and-drop-list-item.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
                 type: Input
             }], draggable: [{
                 type: Input
@@ -3011,27 +3027,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                 type: Input
             }], action: [{
                 type: Output
-            }], moveToTop: [{
-                type: Output
-            }], moveUp: [{
+            }], draggingDisabled: [{
+                type: HostBinding,
+                args: ['class.draggingDisabled']
+            }], hasCustomTemplate: [{
+                type: HostBinding,
+                args: ['class.customTemplate']
+            }], customTemplateRef: [{
+                type: ContentChild,
+                args: ['customTemplate']
+            }] } });
+
+/**
+ * Used in the DragAndDropListComponent and KeyboardSortableListDirective
+ */
+const DRAG_AND_DROP_LIST_TRANSLATION_NAME = 'DragAndDropListComponent';
+
+class KeyboardSortableItemDirective {
+    constructor(draggableItem, overlayPositionBuilder, element, overlay) {
+        this.draggableItem = draggableItem;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.element = element;
+        this.overlay = overlay;
+        this.isSortingByKeyboardChange = new EventEmitter();
+        this.itemBeingSortedChange = new EventEmitter();
+        this.sortItemsWithKeyboard = new EventEmitter();
+        this.tooltipDirective = new TooltipDirective(this.overlayPositionBuilder, this.element, this.overlay);
+        this.isBeingSorted = false;
+        this.preventBlur = false;
+        this.focusWithKeyboardReplaySubject$ = new 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();
+    }
+    get isSortable() {
+        return !this.draggableItem.disabled;
+    }
+    ngOnChanges() {
+        this.isBeingSorted = this.itemData === this.itemBeingSorted;
+        if (this.isBeingSorted) {
+            // focus always the pressed element
+            this.element.nativeElement.focus();
+        }
+    }
+    focusViaKeyboard() {
+        this.focusWithKeyboardReplaySubject$.next(this);
+    }
+    enterSortingModeEnabledByKeyboard($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);
+            }
+        }
+    }
+    leaveSortingModeEnabledByKeyboard($event) {
+        if ($event.target === this.element.nativeElement) {
+            this.tooltipDirective.hide();
+            if (!this.preventBlur) {
+                this.isSortingByKeyboardChange.emit(false);
+                this.itemBeingSortedChange.emit(undefined);
+            }
+        }
+    }
+    sort($event) {
+        if ($event.target === this.element.nativeElement) {
+            this.tooltipDirective.hide();
+            if (this.isSortingByKeyboard) {
+                $event.preventDefault();
+                const previousIndex = this.allItemsData.findIndex((item) => item === this.itemData);
+                const currentIndex = $event.code === 'ArrowUp' ? previousIndex - 1 : previousIndex + 1;
+                if (currentIndex >= 0 && currentIndex <= this.allItemsData.length - 1) {
+                    this.sortItemsWithKeyboard.emit({ previousIndex, 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(() => (this.preventBlur = false), 0);
+                }
+            }
+        }
+    }
+}
+KeyboardSortableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$4.CdkDrag }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+KeyboardSortableItemDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxKeyboardSortableItem]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.CdkDrag }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }]; }, propDecorators: { allItemsData: [{
+                type: Input,
+                args: ['lxKeyboardSortableItem']
+            }], itemData: [{
+                type: Input,
+                args: ['lxKeyboardItemData']
+            }], isSortingByKeyboard: [{
+                type: Input
+            }], itemBeingSorted: [{
+                type: Input,
+                args: ['lxKeyboardItemBeingSorted']
+            }], isSortingByKeyboardChange: [{
                 type: Output
-            }], moveToBottom: [{
+            }], itemBeingSortedChange: [{
+                type: Output,
+                args: ['lxKeyboardItemBeingSortedChange']
+            }], sortItemsWithKeyboard: [{
                 type: Output
-            }], moveDown: [{
+            }], focusWithKeyboard: [{
                 type: Output
-            }], draggingDisabled: [{
+            }], tooltipDirective: [{
                 type: HostBinding,
-                args: ['class.draggingDisabled']
+                args: ['attr.lxTooltip']
+            }], isBeingSorted: [{
+                type: HostBinding,
+                args: ['class.isBeingSortedByKeyboard']
+            }], focusViaKeyboard: [{
+                type: HostListener,
+                args: ['keyup.tab']
+            }], enterSortingModeEnabledByKeyboard: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }], leaveSortingModeEnabledByKeyboard: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.esc', ['$event']]
+            }], sort: [{
+                type: HostListener,
+                args: ['keydown.arrowUp', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowDown', ['$event']]
+            }] } });
+
+class KeyboardSortableListDirective {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    ngAfterViewInit() {
+        this.setupControlsTooltipToBeShownOnFirstFocusedItem();
+    }
+    setupControlsTooltipToBeShownOnFirstFocusedItem() {
+        const firstFocusEventOnADraggableItem$ = this.keyboardSortableItems$.pipe(filter((items) => items && items.length > 0), switchMap((items) => merge(...items.filter((item) => item.isSortable).map((item) => item.focusWithKeyboard))), take(1));
+        firstFocusEventOnADraggableItem$.subscribe((item) => {
+            item.tooltipDirective.content = this.translateService.instant(`${DRAG_AND_DROP_LIST_TRANSLATION_NAME}.helpTooltip`);
+            item.tooltipDirective.show();
+        });
+    }
+}
+KeyboardSortableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+KeyboardSortableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0 });
+__decorate([
+    Observe('keyboardSortableItems')
+], KeyboardSortableListDirective.prototype, "keyboardSortableItems$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxKeyboardSortableList]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
+                type: Input
             }] } });
 
 class DragAndDropListComponent {
     constructor() {
-        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,
@@ -3039,15 +3214,19 @@ class DragAndDropListComponent {
          */
         this.moveToIndex = new EventEmitter();
         this.moveItem = new EventEmitter();
-        this.itemTemplateRef = null;
-    }
-    ngOnInit() {
-        if (this.items && !this.itemIdProperty) {
-            throw new Error('Cannot pass drag and drop items without defining the id property');
-        }
+        /**
+         * TODO: extract state about keyboard sorting into KeyboardSortableListDirective
+         */
+        this.isSortingByKeyboard = false;
+        this.keyboardItemBeingSorted = undefined;
+        this.allItemsData = [];
     }
     ngAfterContentInit() {
         this.items$ = this._items.changes.pipe(startWith(this._items), map((items) => items.toArray()));
+        this.allItemsData$ = this.items$.pipe(map((itemComponents) => itemComponents.map((itemComponent) => itemComponent.item)));
+    }
+    ngAfterViewInit() {
+        this.keyboardSortableItems$ = this._keyboardSortableItems.changes.pipe(startWith(this._keyboardSortableItems), map((items) => items.toArray()));
     }
     emitContentChildAction(action) {
         var _a;
@@ -3063,21 +3242,24 @@ class DragAndDropListComponent {
      * You're supposed to update the data in the parent and pass the new items as input.
      */
     drop(event) {
-        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);
+    }
+    dropToIndexAfterArrowKey(item, previousIndex, currentIndex) {
+        if (this.isSortingByKeyboard) {
+            this.sortItems(this._items, item, previousIndex, currentIndex);
+        }
     }
-    dropToIndex(item, previousIndex, currentIndex) {
-        moveItemInArray(this._items.toArray(), previousIndex, currentIndex);
-        this.moveToIndex.emit(currentIndex);
+    sortItems(items, item, previousIndex, currentIndex) {
+        moveItemInArray(items, previousIndex, currentIndex);
+        this.moveToIndex.emit({ index: currentIndex, previous: previousIndex });
         this.moveItem.emit({ item, index: currentIndex });
     }
-    trackById(_index, item) {
-        return item[this.itemIdProperty];
+    trackByItem(_index, item) {
+        return item.item;
     }
 }
 DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DragAndDropListComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
+DragAndDropListComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
             type: Component,
             args: [{
@@ -3089,10 +3271,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                 type: Input
             }], labelFontWeight: [{
                 type: Input
-            }], items: [{
-                type: Input
-            }], itemIdProperty: [{
-                type: Input
             }], color: [{
                 type: Input
             }, {
@@ -3110,11 +3288,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
             }], _items: [{
                 type: ContentChildren,
                 args: [DragAndDropListItemComponent]
-            }], itemTemplateRef: [{
-                type: ContentChild,
-                args: ['itemTemplate']
+            }], _keyboardSortableItems: [{
+                type: ViewChildren,
+                args: [KeyboardSortableItemDirective]
             }] } });
 
+class LxDragAndDropListModule {
+}
+LxDragAndDropListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LxDragAndDropListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent], imports: [CommonModule, DragDropModule, LxCoreUiModule, i1$2.TranslateModule], exports: [DragAndDropListComponent, DragAndDropListItemComponent] });
+LxDragAndDropListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, imports: [[CommonModule, DragDropModule, LxCoreUiModule, TranslateModule.forChild()]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent],
+                    imports: [CommonModule, DragDropModule, LxCoreUiModule, TranslateModule.forChild()],
+                    exports: [DragAndDropListComponent, DragAndDropListItemComponent]
+                }]
+        }] });
+
 class ErrorMessageComponent {
     constructor(cd) {
         this.cd = cd;
@@ -4466,7 +4658,7 @@ class PickerComponent {
     propagateChange(_value) { }
     onTouched() { }
 }
-PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PickerComponent, deps: [{ token: i1$4.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PickerComponent, deps: [{ token: i1$5.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PickerComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
@@ -4489,7 +4681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.Directionality }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listBoxAriaLabel: [{
+        }], ctorParameters: function () { return [{ type: i1$5.Directionality }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
                 type: Input
@@ -5273,8 +5465,6 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CurrencyInputComponent,
         CurrencySymbolComponent,
         DateInputComponent,
-        DragAndDropListComponent,
-        DragAndDropListItemComponent,
         FilterSelectionPipe,
         FilterTermPipe,
         FormErrorComponent,
@@ -5307,18 +5497,16 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FormErrorDirective,
         ErrorMessageComponent,
         FormSubmitDirective], imports: [CommonModule,
-        DragDropModule,
         FormsModule,
         ReactiveFormsModule, i1$2.TranslateModule, DatepickerModule,
         InfiniteScrollModule,
         OverlayModule,
-        LxCoreUiModule], exports: [BasicDropdownComponent,
+        LxCoreUiModule,
+        LxDragAndDropListModule], exports: [BasicDropdownComponent,
         BasicDropdownItemComponent,
         CurrencyInputComponent,
         CurrencySymbolComponent,
         DateInputComponent,
-        DragAndDropListComponent,
-        DragAndDropListItemComponent,
         FilterSelectionPipe,
         FilterTermPipe,
         FormErrorComponent,
@@ -5349,18 +5537,19 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FormatNumberPipe,
         FormErrorDirective,
         FormSubmitDirective,
-        ErrorMessageComponent] });
+        ErrorMessageComponent,
+        LxDragAndDropListModule] });
 LxFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxFormsModule, imports: [[
             CommonModule,
-            DragDropModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule.forChild(),
             DatepickerModule,
             InfiniteScrollModule,
             OverlayModule,
-            LxCoreUiModule
-        ]] });
+            LxCoreUiModule,
+            LxDragAndDropListModule
+        ], LxDragAndDropListModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxFormsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -5370,8 +5559,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                         CurrencyInputComponent,
                         CurrencySymbolComponent,
                         DateInputComponent,
-                        DragAndDropListComponent,
-                        DragAndDropListItemComponent,
                         FilterSelectionPipe,
                         FilterTermPipe,
                         FormErrorComponent,
@@ -5407,14 +5594,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        DragDropModule,
                         FormsModule,
                         ReactiveFormsModule,
                         TranslateModule.forChild(),
                         DatepickerModule,
                         InfiniteScrollModule,
                         OverlayModule,
-                        LxCoreUiModule
+                        LxCoreUiModule,
+                        LxDragAndDropListModule
                     ],
                     exports: [
                         BasicDropdownComponent,
@@ -5422,8 +5609,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                         CurrencyInputComponent,
                         CurrencySymbolComponent,
                         DateInputComponent,
-                        DragAndDropListComponent,
-                        DragAndDropListItemComponent,
                         FilterSelectionPipe,
                         FilterTermPipe,
                         FormErrorComponent,
@@ -5454,7 +5639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                         FormatNumberPipe,
                         FormErrorDirective,
                         FormSubmitDirective,
-                        ErrorMessageComponent
+                        ErrorMessageComponent,
+                        LxDragAndDropListModule
                     ]
                 }]
         }] });
@@ -5676,7 +5862,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe }, animations: [
+ModalComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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$2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe }, animations: [
         trigger('modal', [
             transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
             transition(':leave', animate('0.15s', style({ opacity: 0 })))
@@ -5928,7 +6114,7 @@ class PopoverComponent {
     }
 }
 PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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$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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+PopoverComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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$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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{
@@ -5989,7 +6175,7 @@ class PopoverClickDirective {
         this.onMouseLeave.next();
     }
 }
-PopoverClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$5.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$6.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive });
 PopoverClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: PopoverClickDirective, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 });
 __decorate([
     Observe('lxPopoverPinned')
@@ -6000,7 +6186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                     exportAs: 'clickAnchor',
                     selector: '[lxPopoverClick]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.SatPopoverAnchor }]; }, propDecorators: { lxPopoverPinned: [{
+        }], ctorParameters: function () { return [{ type: i1$6.SatPopoverAnchor }]; }, propDecorators: { lxPopoverPinned: [{
                 type: Input
             }], pinned$: [], closePopover: [{
                 type: HostListener,
@@ -6068,7 +6254,7 @@ class PopoverHoverDirective {
         this.onMouseLeave.next({ skipDelay });
     }
 }
-PopoverHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$5.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$6.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive });
 PopoverHoverDirective.ɵdir = i0.ɵɵ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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PopoverHoverDirective, decorators: [{
             type: Directive,
@@ -6076,7 +6262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
                     exportAs: 'hoverAnchor',
                     selector: '[lxPopoverHover]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.SatPopoverAnchor }]; }, propDecorators: { lxPopoverHover: [{
+        }], ctorParameters: function () { return [{ type: i1$6.SatPopoverAnchor }]; }, propDecorators: { lxPopoverHover: [{
                 type: Input
             }], skipCloseDelay: [{
                 type: Input
@@ -6128,7 +6314,7 @@ class TabComponent {
     }
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵ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: RouterLinkActive, descendants: true }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i3$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TabComponent.ɵcmp = i0.ɵɵ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: RouterLinkActive, descendants: true }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i3$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
@@ -6221,7 +6407,7 @@ class TabGroupComponent {
     }
 }
 TabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabGroupComponent.ɵcmp = i0.ɵɵ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, 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$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TabGroupComponent.ɵcmp = i0.ɵɵ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, 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$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -6261,5 +6447,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LxCoreUiModule, LxFormsModule, LxIsUuidPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.js.map