@leanix/components 0.4.164 → 0.4.166

package/fesm2022/leanix-components.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Input, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Directive, Injectable, ElementRef, Inject, ViewChild, input, ContentChildren, Pipe, Optional, NgModule, ContentChild, ViewChildren, forwardRef, TemplateRef, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
-import * as i1$1 from '@ngx-translate/core';
+import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Directive, Injectable, ElementRef, Inject, ViewChild, input, ContentChildren, Pipe, Optional, NgModule, ContentChild, ViewChildren, forwardRef, TemplateRef, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
+import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-import * as i1$2 from '@angular/common';
-import { NgClass, NgIf, AsyncPipe, CommonModule, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, formatDate } from '@angular/common';
+import * as i1 from '@angular/common';
+import { NgClass, CommonModule, NgIf, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, formatDate } from '@angular/common';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
-import * as i1 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { __decorate } from 'tslib';
 import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toString, padCharsStart, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
@@ -19,17 +19,17 @@ import DOMPurify from 'dompurify';
 import { isArray, isEqual, split, uniqueId, isString, pick, intersection, isNil, curry } from 'lodash-es';
 import { Renderer, marked } from 'marked';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
-import * as i1$4 from '@angular/cdk/clipboard';
+import * as i1$3 from '@angular/cdk/bidi';
+import * as i1$5 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i1$5 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i1$3 from 'ngx-infinite-scroll';
+import * as i1$6 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import * as i1$4 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import * as i1$6 from '@angular/cdk/drag-drop';
+import * as i1$7 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/cdk/a11y';
 import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
-import * as i1$7 from '@angular/cdk/bidi';
 import * as i1$8 from '@angular/platform-browser';
 import { style, animate, transition, trigger } from '@angular/animations';
 import * as i1$9 from '@ncstate/sat-popover';
@@ -72,24 +72,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                 type: Input
             }] } });
 
+const BANNER_TYPE = {
+    SUCCESS: 'success',
+    INFO: 'info',
+    WARNING: 'warning',
+    DANGER: 'danger'
+};
+const BANNER_SIZE = {
+    BIG: 'big',
+    SMALL: 'small'
+};
+
 class BannerComponent {
     constructor() {
-        this.type = 'warning';
+        this._type = signal(BANNER_TYPE.WARNING);
+        this._size = signal(BANNER_SIZE.BIG);
+        this.showIcon = signal(false);
+        this.iconClass = signal('');
+    }
+    set type(type) {
+        this._type.set(type);
+        this.iconClass.set(this.getIconClass(type));
+    }
+    get type() {
+        return this._type();
     }
-    get bannerTypeClass() {
-        return `banner-${this.type}`;
+    set size(size) {
+        this._size.set(size);
+        this.showIcon.set(size === BANNER_SIZE.BIG);
+    }
+    get size() {
+        return this._size();
+    }
+    ngOnInit() {
+        this.showIcon.set(this.size === BANNER_SIZE.BIG);
+    }
+    getIconClass(type) {
+        switch (type) {
+            case BANNER_TYPE.SUCCESS:
+                return 'fa-check';
+            case BANNER_TYPE.INFO:
+                return 'fa-info';
+            case BANNER_TYPE.WARNING:
+                return 'fa-exclamation';
+            case BANNER_TYPE.DANGER:
+                return 'fa-times';
+            default:
+                return 'fa-info';
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: "type" }, host: { properties: { "class": "this.bannerTypeClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:15px;margin-bottom:20px}:host h4{margin-top:0;color:inherit}:host .alert-link{font-weight:700}:host>p,:host>ul{margin-bottom:0}:host>p+p{margin-top:5px}:host(.banner-success){border-left:2px solid #33cc58;background-color:color-mix(in srgb,#33cc58 20%,white)}:host(.banner-info){border-left:2px solid #166bff;background-color:color-mix(in srgb,#166bff 20%,white)}:host(.banner-warning){border-left:2px solid #ffb62a;background-color:color-mix(in srgb,#ffb62a 20%,white)}:host(.banner-danger){border-left:2px solid #f96464;background-color:color-mix(in srgb,#f96464 20%,white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: "type", size: "size" }, host: { properties: { "attr.type": "type", "attr.size": "size" } }, ngImport: i0, template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <div class=\"banner-icon-box\" aria-hidden=\"true\">\n      <i class=\"fas tw-text-p3\" [ngClass]=\"iconClass()\"></i>\n    </div>\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}:host([size=big]){padding:12px;margin-bottom:12px}:host([size=small]){padding:8px;margin-bottom:6px}:host([type=success]){border-left:2px solid #33cc58;background-color:color-mix(in srgb,#33cc58 10%,white)}:host([type=success]) .banner-wrapper{display:flex;flex-direction:row}:host([type=success]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#33cc58;padding:6px;border-radius:100%;flex-shrink:0}:host([type=success]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=success]) i{font-size:12px;color:#fff}:host([type=info]){border-left:2px solid #2889ff;background-color:color-mix(in srgb,#2889ff 10%,white)}:host([type=info]) .banner-wrapper{display:flex;flex-direction:row}:host([type=info]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#2889ff;padding:6px;border-radius:100%;flex-shrink:0}:host([type=info]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=info]) i{font-size:12px;color:#fff}:host([type=warning]){border-left:2px solid #ffb62a;background-color:color-mix(in srgb,#ffb62a 10%,white)}:host([type=warning]) .banner-wrapper{display:flex;flex-direction:row}:host([type=warning]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#ffb62a;padding:6px;border-radius:100%;flex-shrink:0}:host([type=warning]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=warning]) i{font-size:12px;color:#fff}:host([type=danger]){border-left:2px solid #f96464;background-color:color-mix(in srgb,#f96464 10%,white)}:host([type=danger]) .banner-wrapper{display:flex;flex-direction:row}:host([type=danger]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#f96464;padding:6px;border-radius:100%;flex-shrink:0}:host([type=danger]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=danger]) i{font-size:12px;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-banner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:15px;margin-bottom:20px}:host h4{margin-top:0;color:inherit}:host .alert-link{font-weight:700}:host>p,:host>ul{margin-bottom:0}:host>p+p{margin-top:5px}:host(.banner-success){border-left:2px solid #33cc58;background-color:color-mix(in srgb,#33cc58 20%,white)}:host(.banner-info){border-left:2px solid #166bff;background-color:color-mix(in srgb,#166bff 20%,white)}:host(.banner-warning){border-left:2px solid #ffb62a;background-color:color-mix(in srgb,#ffb62a 20%,white)}:host(.banner-danger){border-left:2px solid #f96464;background-color:color-mix(in srgb,#f96464 20%,white)}\n"] }]
+            args: [{ selector: 'lx-banner', host: {
+                        '[attr.type]': 'type',
+                        '[attr.size]': 'size'
+                    }, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <div class=\"banner-icon-box\" aria-hidden=\"true\">\n      <i class=\"fas tw-text-p3\" [ngClass]=\"iconClass()\"></i>\n    </div>\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}:host([size=big]){padding:12px;margin-bottom:12px}:host([size=small]){padding:8px;margin-bottom:6px}:host([type=success]){border-left:2px solid #33cc58;background-color:color-mix(in srgb,#33cc58 10%,white)}:host([type=success]) .banner-wrapper{display:flex;flex-direction:row}:host([type=success]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#33cc58;padding:6px;border-radius:100%;flex-shrink:0}:host([type=success]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=success]) i{font-size:12px;color:#fff}:host([type=info]){border-left:2px solid #2889ff;background-color:color-mix(in srgb,#2889ff 10%,white)}:host([type=info]) .banner-wrapper{display:flex;flex-direction:row}:host([type=info]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#2889ff;padding:6px;border-radius:100%;flex-shrink:0}:host([type=info]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=info]) i{font-size:12px;color:#fff}:host([type=warning]){border-left:2px solid #ffb62a;background-color:color-mix(in srgb,#ffb62a 10%,white)}:host([type=warning]) .banner-wrapper{display:flex;flex-direction:row}:host([type=warning]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#ffb62a;padding:6px;border-radius:100%;flex-shrink:0}:host([type=warning]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=warning]) i{font-size:12px;color:#fff}:host([type=danger]){border-left:2px solid #f96464;background-color:color-mix(in srgb,#f96464 10%,white)}:host([type=danger]) .banner-wrapper{display:flex;flex-direction:row}:host([type=danger]) .banner-icon-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;background-color:#f96464;padding:6px;border-radius:100%;flex-shrink:0}:host([type=danger]) .banner-content{display:flex;width:100%;flex-direction:column;justify-content:center}:host([type=danger]) i{font-size:12px;color:#fff}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
-            }], bannerTypeClass: [{
-                type: HostBinding,
-                args: ['class']
+            }], size: [{
+                type: Input
             }] } });
 
 class ButtonGroupComponent {
@@ -429,7 +473,7 @@ class TooltipDirective {
         this.mouseOrFocusOnHost = false;
         this.overlayRef?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: TooltipDirective, isStandalone: true, selector: "[lxTooltip]", inputs: { content: ["lxTooltip", "content"], lxTooltipPosition: "lxTooltipPosition", lxTooltipDelay: "lxTooltipDelay", lxTooltipIsHtmlContent: "lxTooltipIsHtmlContent" }, host: { listeners: { "mouseenter": "show()", "focus": "show()", "mouseleave": "hide()", "click": "hide()", "blur": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipDirective, decorators: [{
@@ -438,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     selector: '[lxTooltip]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }], propDecorators: { content: [{
+        }], ctorParameters: () => [{ type: i1$1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$1.Overlay }], propDecorators: { content: [{
                 type: Input,
                 args: ['lxTooltip']
             }], lxTooltipPosition: [{
@@ -723,7 +767,7 @@ class EllipsisComponent {
         const offsetWidth = contentSpanElRef.nativeElement.clientWidth;
         return offsetWidth < scrollWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: EllipsisComponent, isStandalone: true, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
@@ -741,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LX_ELLIPSIS_DEBOUNCE_ON_RESIZE]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1$1.TranslateService }], propDecorators: { content: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1$2.TranslateService }], propDecorators: { content: [{
                 type: Input
             }], escapeHtmlInContent: [{
                 type: Input
@@ -807,7 +851,7 @@ class FileDownloadButtonComponent {
         return newTab;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FileDownloadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FileDownloadButtonComponent, isStandalone: true, selector: "lx-file-download-button", inputs: { downloadRequest: "downloadRequest", initialDownloadLink: "initialDownloadLink", refreshKeyUrl: "refreshKeyUrl", downloadLabel: "downloadLabel" }, outputs: { downloadFinish: "downloadFinish", downloadStarted: "downloadStarted" }, ngImport: i0, template: "<a class=\"btn btn-primary\" *ngIf=\"!downloaded && !!downloadLink\" [href]=\"downloadLink\" (click)=\"download($event)\">{{\n  downloadLabel ? downloadLabel : ('buttons.download' | translate)\n}}</a>\n<button lx-button color=\"light\" size=\"large\" *ngIf=\"(downloaded && refreshKeyUrl) || !downloadLink\" (click)=\"requestDownload()\">\n  {{ NAME + '.newDownload' | translate }}\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FileDownloadButtonComponent, isStandalone: true, selector: "lx-file-download-button", inputs: { downloadRequest: "downloadRequest", initialDownloadLink: "initialDownloadLink", refreshKeyUrl: "refreshKeyUrl", downloadLabel: "downloadLabel" }, outputs: { downloadFinish: "downloadFinish", downloadStarted: "downloadStarted" }, ngImport: i0, template: "<a class=\"btn btn-primary\" *ngIf=\"!downloaded && !!downloadLink\" [href]=\"downloadLink\" (click)=\"download($event)\">{{\n  downloadLabel ? downloadLabel : ('buttons.download' | translate)\n}}</a>\n<button lx-button color=\"light\" size=\"large\" *ngIf=\"(downloaded && refreshKeyUrl) || !downloadLink\" (click)=\"requestDownload()\">\n  {{ NAME + '.newDownload' | translate }}\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FileDownloadButtonComponent, decorators: [{
             type: Component,
@@ -1578,7 +1622,7 @@ class LxTranslatePipe {
         }
         return this.translatePipe.transform(query, this.lastArgsExtended);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxTranslatePipe, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: GLOBAL_TRANSLATION_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxTranslatePipe, deps: [{ token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: GLOBAL_TRANSLATION_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxTranslatePipe, isStandalone: true, name: "lxTranslate", pure: false }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxTranslatePipe, providedIn: 'root' }); }
 }
@@ -1592,7 +1636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     pure: false,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1733,7 +1777,7 @@ class TranslationBeforePipe {
     transform(translationKey, cutMarkAndParams) {
         return getTranslationParts(this.translateService, translationKey, cutMarkAndParams)[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationBeforePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationBeforePipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: TranslationBeforePipe, isStandalone: true, name: "lxTranslationBefore" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationBeforePipe, decorators: [{
@@ -1742,7 +1786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     name: 'lxTranslationBefore',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 /**
  * Translates the given i18n-key (instantly) and returns the part of the translation
@@ -1758,7 +1802,7 @@ class TranslationAfterPipe {
     transform(translationKey, cutMarkAndParams) {
         return getTranslationParts(this.translateService, translationKey, cutMarkAndParams)[1] || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationAfterPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationAfterPipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: TranslationAfterPipe, isStandalone: true, name: "lxTranslationAfter" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationAfterPipe, decorators: [{
@@ -1767,7 +1811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     name: 'lxTranslationAfter',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 function getTranslationBetween(translateService, translationKey, cutMarksAndParams) {
     translationKey = isArray(translationKey) ? translationKey.join('.') : translationKey;
@@ -1822,7 +1866,7 @@ class TranslationBetweenPipe {
     transform(translationKey, cutMarksAndParams) {
         return getTranslationBetween(this.translateService, translationKey, cutMarksAndParams);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationBetweenPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationBetweenPipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: TranslationBetweenPipe, isStandalone: true, name: "lxTranslationBetween" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TranslationBetweenPipe, decorators: [{
@@ -1831,7 +1875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     name: 'lxTranslationBetween',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 class UnescapeCurlyBracesPipe {
     transform(input) {
@@ -1878,7 +1922,7 @@ class BadgeComponent {
         this.textColor = `hsl(${hash % 360}, 100%, 28%)`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color", calculateColorsDynamically: "calculateColorsDynamically" }, ngImport: i0, template: "@if (calculateColorsDynamically) {\n  <div class=\"badge\" [style.background-color]=\"backGroundColor\" [style.color]=\"textColor\">\n    <span>{{ content }}</span>\n  </div>\n} @else {\n  <div class=\"badge\" [ngClass]=\"colorClass\">\n    <span>{{ content }}</span>\n  </div>\n}\n", styles: [".badge{border-radius:.3rem;padding:.3rem;max-width:max-content;font-weight:400}.gray{background-color:#61779d1a;color:#61779d}.blue{background-color:#1666ee1a;color:#1666ee}.green{background-color:#33cc581a;color:#33cc58}.red{background-color:#f964641a;color:#f96464}.yellow{background-color:#ffb62a1a;color:#ffb62a}.purple{background-color:#774fcc1a;color:#774fcc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color", calculateColorsDynamically: "calculateColorsDynamically" }, ngImport: i0, template: "@if (calculateColorsDynamically) {\n  <div class=\"badge\" [style.background-color]=\"backGroundColor\" [style.color]=\"textColor\">\n    <span>{{ content }}</span>\n  </div>\n} @else {\n  <div class=\"badge\" [ngClass]=\"colorClass\">\n    <span>{{ content }}</span>\n  </div>\n}\n", styles: [".badge{border-radius:.3rem;padding:.3rem;max-width:max-content;font-weight:400}.gray{background-color:#61779d1a;color:#61779d}.blue{background-color:#1666ee1a;color:#1666ee}.green{background-color:#33cc581a;color:#33cc58}.red{background-color:#f964641a;color:#f96464}.yellow{background-color:#ffb62a1a;color:#ffb62a}.purple{background-color:#774fcc1a;color:#774fcc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -1893,8 +1937,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 class StepperComponent extends CdkStepper {
-    constructor() {
-        super(...arguments);
+    // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
+    // Storybook smoke tests for stepper component are failing without this constructor
+    constructor(_dir, _changeDetectorRef, _elementRef) {
+        super(_dir, _changeDetectorRef, _elementRef);
         this.size = 'normal';
     }
     get isSmallVariant() {
@@ -1906,17 +1952,17 @@ class StepperComponent extends CdkStepper {
     isActiveStep(index) {
         return index === this.selectedIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: StepperComponent, isStandalone: true, selector: "lx-stepper", providers: [{ provide: CdkStepper, useExisting: StepperComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <i [class]=\"'far fa-check check-icon'\" [ngClass]=\"{ 'small-icon': isSmallVariant }\"></i>\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\"></ng-container>\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:15.5px;font-style:normal;font-weight:400;line-height:20px;width:100%;height:100%;padding-top:8px;text-align:center}.step-container-small .step-number{padding-top:0}.step-title{width:max-content;top:50px;position:absolute}.check-icon{font-size:20px;color:#1666ee}.small-icon{position:relative;font-size:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#1666ee;border-color:#1666ee}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#1666ee}.step-container.step-container-completed{border-color:#1666ee}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CdkStepperModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, deps: [{ token: i1$3.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: StepperComponent, isStandalone: true, selector: "lx-stepper", providers: [{ provide: CdkStepper, useExisting: StepperComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <i [class]=\"'far fa-check check-icon'\" [ngClass]=\"{ 'small-icon': isSmallVariant }\"></i>\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\"></ng-container>\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:15.5px;font-style:normal;font-weight:400;line-height:20px;width:100%;height:100%;padding-top:8px;text-align:center}.step-container-small .step-number{padding-top:0}.step-title{width:max-content;top:50px;position:absolute}.check-icon{font-size:20px;color:#1666ee}.small-icon{position:relative;font-size:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#1666ee;border-color:#1666ee}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#1666ee}.step-container.step-container-completed{border-color:#1666ee}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CdkStepperModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-stepper', standalone: true, imports: [CommonModule, CdkStepperModule], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <i [class]=\"'far fa-check check-icon'\" [ngClass]=\"{ 'small-icon': isSmallVariant }\"></i>\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\"></ng-container>\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:15.5px;font-style:normal;font-weight:400;line-height:20px;width:100%;height:100%;padding-top:8px;text-align:center}.step-container-small .step-number{padding-top:0}.step-title{width:max-content;top:50px;position:absolute}.check-icon{font-size:20px;color:#1666ee}.small-icon{position:relative;font-size:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#1666ee;border-color:#1666ee}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#1666ee}.step-container.step-container-completed{border-color:#1666ee}\n"] }]
-        }] });
+        }], ctorParameters: () => [{ type: i1$3.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
 
 class LxCoreUiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, imports: [i1$1.TranslateModule, AfterViewInitDirective,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, imports: [i1$2.TranslateModule, AfterViewInitDirective,
             AutocloseDirective,
             AutofocusDirective,
             CounterComponent,
@@ -1993,6 +2039,7 @@ class LxCoreUiModule {
             EmptyStateComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, providers: [LxTimeAgo], imports: [TranslateModule.forChild(),
             BadgeComponent,
+            BannerComponent,
             StepperComponent,
             FileDownloadButtonComponent,
             EmptyStateComponent] }); }
@@ -2458,7 +2505,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.createNewOptionSelected.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    <li\n      *ngIf=\"newOptionLabel && isNewItem\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onNewItemSelected()\"\n      (select)=\"onNewItemSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable onTheFlyOption\"\n      [attr.aria-label]=\"newOptionLabel\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-counter>\n    </li>\n    <li\n      *ngIf=\"showCreateNewOption\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOptionSelected()\"\n      (select)=\"onCreateNewOptionSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable newEntryOption\"\n    >\n      <span class=\"newEntryContent\">\n        <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n          <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-template #defaultNewOption>\n          <span>\n            {{ NAME + '.new' | translate }}\n          </span>\n        </ng-template>\n      </span>\n    </li>\n    <li\n      *ngIf=\"descriptionTemplateRef\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option description disabledItem\"\n    >\n      <span class=\"descriptionContent\">\n        <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n      </span>\n    </li>\n    <li\n      *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable noOptionsAvailable\"\n      [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n    >\n      {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n    </li>\n    <li\n      *ngIf=\"placeholder\"\n      tabindex=\"-1\"\n      class=\"option keyboardSelectable clearSelection\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"selectOption(null)\"\n      (select)=\"selectOption(null)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [attr.aria-label]=\"placeholder\"\n    >\n      {{ placeholder }}\n    </li>\n    <li\n      *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"selectOption(option)\"\n      (select)=\"selectOption(option)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [class.initiallySelected]=\"index === initiallySelectedIndex\"\n      [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n      [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n    >\n      <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n        <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span>\n          {{ labelKey ? option[labelKey] : option }}\n        </span>\n      </ng-template>\n    </li>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    <li\n      *ngIf=\"newOptionLabel && isNewItem\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onNewItemSelected()\"\n      (select)=\"onNewItemSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable onTheFlyOption\"\n      [attr.aria-label]=\"newOptionLabel\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-counter>\n    </li>\n    <li\n      *ngIf=\"showCreateNewOption\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOptionSelected()\"\n      (select)=\"onCreateNewOptionSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable newEntryOption\"\n    >\n      <span class=\"newEntryContent\">\n        <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n          <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-template #defaultNewOption>\n          <span>\n            {{ NAME + '.new' | translate }}\n          </span>\n        </ng-template>\n      </span>\n    </li>\n    <li\n      *ngIf=\"descriptionTemplateRef\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option description disabledItem\"\n    >\n      <span class=\"descriptionContent\">\n        <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n      </span>\n    </li>\n    <li\n      *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable noOptionsAvailable\"\n      [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n    >\n      {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n    </li>\n    <li\n      *ngIf=\"placeholder\"\n      tabindex=\"-1\"\n      class=\"option keyboardSelectable clearSelection\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"selectOption(null)\"\n      (select)=\"selectOption(null)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [attr.aria-label]=\"placeholder\"\n    >\n      {{ placeholder }}\n    </li>\n    <li\n      *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"selectOption(option)\"\n      (select)=\"selectOption(option)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [class.initiallySelected]=\"index === initiallySelectedIndex\"\n      [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n      [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n    >\n      <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n        <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span>\n          {{ labelKey ? option[labelKey] : option }}\n        </span>\n      </ng-template>\n    </li>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
@@ -3118,13 +3165,13 @@ class CopyButtonComponent {
     getStringData() {
         return isString(this.data) ? this.data : JSON.stringify(this.data, null, '\t');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CopyButtonComponent, deps: [{ token: i1$4.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CopyButtonComponent, isStandalone: true, selector: "lx-copy-button", inputs: { data: "data", dataDescription: "dataDescription", btn: "btn" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CopyButtonComponent, deps: [{ token: i1$5.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CopyButtonComponent, isStandalone: true, selector: "lx-copy-button", inputs: { data: "data", dataDescription: "dataDescription", btn: "btn" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CopyButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-copy-button', standalone: true, imports: [TranslateModule], template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.Clipboard }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i1$5.Clipboard }], propDecorators: { data: [{
                 type: Input
             }], dataDescription: [{
                 type: Input
@@ -3381,7 +3428,7 @@ class CurrencyInputComponent {
                 useExisting: forwardRef(() => CurrencyInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    [attr.id]=\"inputId\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    [attr.id]=\"inputId\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Observe('data')
@@ -4761,7 +4808,7 @@ class DateInputComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      [lxMarkInvalid]=\"markInvalid\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [lxMarkInvalid]=\"markInvalid\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }] }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      [lxMarkInvalid]=\"markInvalid\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [lxMarkInvalid]=\"markInvalid\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }] }); }
 }
 __decorate([
     Observe('initDateString')
@@ -4995,7 +5042,7 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$6.CdkDrag }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$7.CdkDrag }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: KeyboardSortableItemDirective, isStandalone: true, 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: "17.1.0", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
@@ -5004,7 +5051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     selector: '[lxKeyboardSortableItem]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$6.CdkDrag }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$7.CdkDrag }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$1.Overlay }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -5067,7 +5114,7 @@ class KeyboardSortableListDirective {
             item.tooltipDirective.show();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: KeyboardSortableListDirective, isStandalone: true, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0 }); }
 }
 __decorate([
@@ -5079,7 +5126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     selector: '[lxKeyboardSortableList]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
                 type: Input
             }] } });
 
@@ -5141,7 +5188,7 @@ class DragAndDropListComponent {
         return item.item;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DragAndDropListComponent, isStandalone: true, 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  [attr.aria-label]=\"label\"\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: ["@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:solid 1px #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:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.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] .list,:host[color=dark] .item{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 #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DragAndDropListComponent, isStandalone: true, 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  [attr.aria-label]=\"label\"\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: ["@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:solid 1px #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:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.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] .list,:host[color=dark] .item{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 #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DragAndDropListComponent, decorators: [{
             type: Component,
@@ -5187,7 +5234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
 class LxDragAndDropListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxDragAndDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule,
-            DragDropModule, i1$1.TranslateModule, KeyboardSortableItemDirective,
+            DragDropModule, i1$2.TranslateModule, KeyboardSortableItemDirective,
             KeyboardSortableListDirective,
             DragAndDropListComponent,
             DragAndDropListItemComponent], exports: [DragAndDropListComponent, DragAndDropListItemComponent] }); }
@@ -5223,7 +5270,7 @@ class ErrorMessageComponent {
         this.cd = cd;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ErrorMessageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ErrorMessageComponent, isStandalone: true, selector: "lx-error-message", inputs: { key: "key" }, ngImport: i0, template: `<div class="error" *ngIf="_key">{{ _key | translate }}</div>`, isInline: true, styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ErrorMessageComponent, isStandalone: true, selector: "lx-error-message", inputs: { key: "key" }, ngImport: i0, template: `<div class="error" *ngIf="_key">{{ _key | translate }}</div>`, isInline: true, styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ErrorMessageComponent, decorators: [{
             type: Component,
@@ -5240,7 +5287,7 @@ class ExpandedDropdownComponent extends KeyboardSelectDirective {
         this.onChooseItem = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ExpandedDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ExpandedDropdownComponent, isStandalone: true, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <title>Button/Text/Primary/Medium</title>\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#1666EE\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\"></circle>\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    ></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:15.5px;height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ExpandedDropdownComponent, isStandalone: true, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <title>Button/Text/Primary/Medium</title>\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#1666EE\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\"></circle>\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    ></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:15.5px;height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ExpandedDropdownComponent, decorators: [{
             type: Component,
@@ -5274,7 +5321,7 @@ class FormErrorComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
@@ -5337,24 +5384,27 @@ class InputComponent {
         this.destroyed$ = new Subject();
     }
     ngOnInit() {
-        if (this.ngControl) {
-            this.ngControl.statusChanges?.pipe(startWith(null), takeUntil(this.destroyed$)).subscribe(() => this.updateStatus());
-        }
+        if (!this.ngControl)
+            return;
+        this.ngControl.statusChanges?.pipe(startWith(null), takeUntil(this.destroyed$)).subscribe(() => this.updateStatus());
     }
     updateStatus() {
-        this.error = !!this.ngControl?.errors;
+        const isInvalid = this.ngControl?.invalid;
+        const isTouched = this.ngControl?.touched;
+        const isDirty = this.ngControl?.dirty;
+        this.error = !!(isInvalid && (isTouched || isDirty));
         this.disabled = !!this.ngControl?.disabled;
     }
     ngOnDestroy() {
         this.destroyed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputComponent, deps: [{ token: i1$5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: InputComponent, isStandalone: true, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputComponent, deps: [{ token: i1$6.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: InputComponent, isStandalone: true, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input[lx-input]', template: ``, standalone: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.NgControl, decorators: [{
+            args: [{ selector: 'input[lx-input]', template: ``, standalone: true, imports: [ReactiveFormsModule], styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
+        }], ctorParameters: () => [{ type: i1$6.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { error: [{
                 type: Input
@@ -5629,7 +5679,7 @@ class ResponsiveInputComponent {
                 multi: true,
                 useExisting: forwardRef(() => ResponsiveInputComponent)
             }
-        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
@@ -5871,7 +5921,7 @@ class MultiSelectComponent extends BaseSelectDirective {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\n      [formControl]=\"queryControl\"\n      [inputId]=\"inputId\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\n      [formControl]=\"queryControl\"\n      [inputId]=\"inputId\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -5966,7 +6016,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      <li\n        *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOption()\"\n        (select)=\"onCreateNewOption()\"\n        [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-counter>\n      </li>\n      <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n        <li>\n          <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n            <span>{{ optionGroup.label | uppercase }}</span>\n          </div>\n          <ul>\n            <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n              <li class=\"noResult\">\n                <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                  <ng-container\n                    *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultText>\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                </ng-template>\n              </li>\n            </ng-container>\n            <ng-template #options>\n              <li\n                *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n                lxSelectableItem\n                [scrollInContainer]=\"keyboardSelectContainer\"\n                #item\n                class=\"option\"\n                (click)=\"selectOption(option)\"\n                (select)=\"selectOption(option)\"\n                [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n              >\n                <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item\n                    [label]=\"option.label\"\n                    labelFontWeight=\"normal\"\n                    [highlightTerm]=\"highlightTerm\"\n                  ></lx-basic-dropdown-item>\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      <li\n        *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOption()\"\n        (select)=\"onCreateNewOption()\"\n        [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-counter>\n      </li>\n      <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n        <li>\n          <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n            <span>{{ optionGroup.label | uppercase }}</span>\n          </div>\n          <ul>\n            <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n              <li class=\"noResult\">\n                <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                  <ng-container\n                    *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultText>\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                </ng-template>\n              </li>\n            </ng-container>\n            <ng-template #options>\n              <li\n                *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n                lxSelectableItem\n                [scrollInContainer]=\"keyboardSelectContainer\"\n                #item\n                class=\"option\"\n                (click)=\"selectOption(option)\"\n                (select)=\"selectOption(option)\"\n                [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n              >\n                <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item\n                    [label]=\"option.label\"\n                    labelFontWeight=\"normal\"\n                    [highlightTerm]=\"highlightTerm\"\n                  ></lx-basic-dropdown-item>\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -6234,13 +6284,13 @@ class OptionsDropdownComponent {
         const newEvent = new KeyboardEvent(event.type, newEventOptions);
         this.lxButton?.dispatchEvent(newEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" (click)=\"open = !open\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" (click)=\"open = !open\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
                 type: Input
             }], closeOnScroll: [{
                 type: Input
@@ -6410,13 +6460,13 @@ class PickerOptionComponent {
     selectOption() {
         this.select.emit(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, IconComponent], template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { role: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.TranslateService }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaSelected: [{
@@ -6655,7 +6705,7 @@ class PickerComponent {
     }
     propagateChange(_value) { }
     onTouched() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerComponent, deps: [{ token: i1$7.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerComponent, deps: [{ token: i1$3.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -6673,7 +6723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useExisting: forwardRef(() => PickerComponent)
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AutocloseDirective], template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$7.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
+        }], ctorParameters: () => [{ type: i1$3.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
                 type: Input
@@ -6929,7 +6979,7 @@ class SelectListComponent extends BaseSelectDirective {
         return options.findIndex((option) => isEqual$1(selection, option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:15.5px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:15.5px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectListComponent, decorators: [{
             type: Component,
@@ -7199,7 +7249,7 @@ class SingleSelectComponent extends BaseSelectDirective {
                 multi: true,
                 useExisting: forwardRef(() => SingleSelectComponent)
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -7349,7 +7399,7 @@ class SortingDropdownComponent {
         return key ? `sorting.${key}.label` : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SortingDropdownComponent, decorators: [{
             type: Component,
@@ -7622,7 +7672,7 @@ class FormErrorDirective {
             this.subscritpion.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$5.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$6.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorDirective, decorators: [{
@@ -7631,7 +7681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     selector: '[lxFormError]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$6.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -7779,7 +7829,7 @@ class LxFormsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
             FormsModule,
-            ReactiveFormsModule, i1$1.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
+            ReactiveFormsModule, i1$2.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
             ClipboardModule,
             OverlayModule,
             LxDragAndDropListModule,
@@ -7888,6 +7938,7 @@ class LxFormsModule {
             SingleSelectComponent,
             SelectListComponent,
             SortingDropdownComponent,
+            InputComponent,
             ErrorMessageComponent, LxDragAndDropListModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxFormsModule, decorators: [{
@@ -8251,8 +8302,8 @@ class ModalComponent {
     trapFocusInModal(hostElement) {
         this.focusTrap.create(hostElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", 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(closeLocation.CloseButton)\"\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\" [class.lxThinScrollbar]=\"verticalScroll\">\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: ["@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;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{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:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{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 #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", 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(closeLocation.CloseButton)\"\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\" [class.lxThinScrollbar]=\"verticalScroll\">\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: ["@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;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{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:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{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 #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [
             trigger('modal', [
                 transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
                 transition(':leave', animate('0.15s', style({ opacity: 0 })))
@@ -8267,7 +8318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             transition(':leave', animate('0.15s', style({ opacity: 0 })))
                         ])
                     ], standalone: true, imports: [PortalModule, NgIf, NgTemplateOutlet, TranslateModule], 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(closeLocation.CloseButton)\"\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\" [class.lxThinScrollbar]=\"verticalScroll\">\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: ["@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;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{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:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{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 #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -8317,7 +8368,7 @@ class LxModalModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxModalModule, imports: [CommonModule,
             PortalModule,
             OverlayModule,
-            A11yModule, i1$1.TranslateModule, ModalComponent,
+            A11yModule, i1$2.TranslateModule, ModalComponent,
             ModalHeaderComponent,
             ModalFooterComponent,
             ModalContentDirective], exports: [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalContentDirective] }); }