@leanix/components 0.4.408 → 0.4.409

package/fesm2022/leanix-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Injectable, ElementRef, Inject, ViewChild, input, computed, Directive, ContentChildren, Pipe, Optional, NgModule, effect, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, inject, DestroyRef, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
+import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Injectable, ElementRef, Inject, ViewChild, input, computed, Directive, ContentChildren, Pipe, Optional, NgModule, effect, inject, DestroyRef, ChangeDetectorRef, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@angular/common';
@@ -25,17 +25,17 @@ import DOMPurify from 'dompurify';
 import { isArray, isEqual, split, uniqueId, pick, intersection, isNil, curry } from 'lodash-es';
 import { Renderer, marked } from 'marked';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$4 from '@ncstate/sat-popover';
+import { SatPopoverComponent, SatPopoverModule } from '@ncstate/sat-popover';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i1$5 from '@angular/forms';
+import * as i1$6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, Validators, FormControl } from '@angular/forms';
-import * as i1$4 from 'ngx-infinite-scroll';
+import * as i1$5 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 i1$7 from '@angular/platform-browser';
+import * as i1$8 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i1$8 from '@ncstate/sat-popover';
-import { SatPopoverComponent, SatPopoverModule } from '@ncstate/sat-popover';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
 const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
@@ -2574,11 +2574,11 @@ class TokenizerComponent {
         this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerComponent, deps: [{ token: i0.ElementRef }, { token: i0.DestroyRef }, { token: i0.ChangeDetectorRef }, { token: ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TokenizerComponent, isStandalone: true, selector: "lx-tokenizer", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowPlaceholderClick: "overflowPlaceholderClick" }, queries: [{ propertyName: "items", predicate: TokenComponent }], viewQueries: [{ propertyName: "counter", first: true, predicate: ["counter"], descendants: true, read: ElementRef }, { propertyName: "tokensContainer", first: true, predicate: ["tokensContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #tokensContainer class=\"tokensContainer\">\n  <ng-content select=\"lx-token\" />\n  @if (showCounter()) {\n    <button\n      lx-button\n      class=\"counterButton\"\n      mode=\"ghost\"\n      (click)=\"onCounterClicked()\"\n      [attr.aria-label]=\"\n        NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n      \"\n    >\n      <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px}.tokensContainer{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TokenizerComponent, isStandalone: true, selector: "lx-tokenizer", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowPlaceholderClick: "overflowPlaceholderClick" }, queries: [{ propertyName: "items", predicate: TokenComponent }], viewQueries: [{ propertyName: "counter", first: true, predicate: ["counter"], descendants: true, read: ElementRef }, { propertyName: "tokensContainer", first: true, predicate: ["tokensContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #tokensContainer class=\"tokensContainer\">\n  <ng-content select=\"lx-token\" />\n  @if (showCounter()) {\n    <button\n      lx-button\n      class=\"counterButton\"\n      mode=\"ghost\"\n      (click)=\"onCounterClicked()\"\n      [attr.aria-label]=\"\n        NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n      \"\n    >\n      <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-tokenizer', standalone: true, imports: [NgIf, CounterComponent, ButtonComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tokensContainer class=\"tokensContainer\">\n  <ng-content select=\"lx-token\" />\n  @if (showCounter()) {\n    <button\n      lx-button\n      class=\"counterButton\"\n      mode=\"ghost\"\n      (click)=\"onCounterClicked()\"\n      [attr.aria-label]=\"\n        NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n      \"\n    >\n      <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px}.tokensContainer{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'lx-tokenizer', standalone: true, imports: [NgIf, CounterComponent, ButtonComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tokensContainer class=\"tokensContainer\">\n  <ng-content select=\"lx-token\" />\n  @if (showCounter()) {\n    <button\n      lx-button\n      class=\"counterButton\"\n      mode=\"ghost\"\n      (click)=\"onCounterClicked()\"\n      [attr.aria-label]=\"\n        NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n      \"\n    >\n      <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: ResizeObserverService }], propDecorators: { overflowPlaceholderClick: [{
                 type: Output
             }], items: [{
@@ -2592,6 +2592,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['tokensContainer', { read: ElementRef }]
             }] } });
 
+class TokenizerOverflowPopoverComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.startIndex = signal(0);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.tokenizer = input.required();
+        this.horizontalAlign = input('after');
+        this.verticalAlign = input('start');
+        effect(() => {
+            this.overflowClickSubscription?.unsubscribe();
+            this.overflowClickSubscription = this.tokenizer()
+                .overflowPlaceholderClick.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(({ startIndex, counterElement }) => {
+                this.startIndex.set(startIndex);
+                this.popover.anchor = counterElement;
+                this.popover.open();
+            });
+        });
+    }
+    closePopover() {
+        this.popover.close();
+        this.changeDetectorRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerOverflowPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TokenizerOverflowPopoverComponent, isStandalone: true, selector: "lx-tokenizer-overflow-popover", inputs: { tokenizer: { classPropertyName: "tokenizer", publicName: "tokenizer", isSignal: true, isRequired: true, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: SatPopoverComponent, descendants: true }], ngImport: i0, template: "<sat-popover\n  (backdropClicked)=\"closePopover()\"\n  [hasBackdrop]=\"true\"\n  [horizontalAlign]=\"horizontalAlign()\"\n  [verticalAlign]=\"verticalAlign()\"\n  openTransition=\"100ms\"\n  closeTransition=\"100ms\"\n>\n  @if (popoverTemplate) {\n    <div\n      class=\"tokenizerPopoverContentWrapper\"\n      [class.before]=\"horizontalAlign() === 'before'\"\n      [class.after]=\"horizontalAlign() === 'after'\"\n    >\n      <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n    </div>\n  }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$4.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerOverflowPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-tokenizer-overflow-popover', standalone: true, imports: [TokenizerComponent, SatPopoverModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sat-popover\n  (backdropClicked)=\"closePopover()\"\n  [hasBackdrop]=\"true\"\n  [horizontalAlign]=\"horizontalAlign()\"\n  [verticalAlign]=\"verticalAlign()\"\n  openTransition=\"100ms\"\n  closeTransition=\"100ms\"\n>\n  @if (popoverTemplate) {\n    <div\n      class=\"tokenizerPopoverContentWrapper\"\n      [class.before]=\"horizontalAlign() === 'before'\"\n      [class.after]=\"horizontalAlign() === 'after'\"\n    >\n      <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n    </div>\n  }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { popoverTemplate: [{
+                type: ContentChild,
+                args: ['popoverTemplate']
+            }], popover: [{
+                type: ViewChild,
+                args: [SatPopoverComponent]
+            }] } });
+
 const defaultElement = 'span';
 const defaultClassName = 'highlight';
 /**
@@ -2934,7 +2971,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.createNewOptionSelected.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\" />\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\" />\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\" />\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\" />\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\" />\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 }\" />\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\" />\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$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\" />\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\" />\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\" />\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\" />\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\" />\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 }\" />\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\" />\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$5.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
@@ -3825,7 +3862,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\" />\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\" />\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\" />\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\" />\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\" />\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\" />\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\" />\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\" />\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')
@@ -5279,7 +5316,7 @@ class DateInputComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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: { closeDateInput: "closeDateInput", dateStringChange: "dateStringChange", dateChange: "dateChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-        ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: 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    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n          <i class=\"far fa-angle-down lx-margin-left\"></i>\n        </button>\n      }\n      @case ('INPUT') {\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        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\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        </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        </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}.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}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:14px}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:12px}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:12px}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
+        ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: 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    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n          <i class=\"far fa-angle-down lx-margin-left\"></i>\n        </button>\n      }\n      @case ('INPUT') {\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        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\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        </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        </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}.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}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:14px}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:12px}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:12px}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
 }
 __decorate([
     Observe('initDateString')
@@ -5519,7 +5556,7 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$6.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$7.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
@@ -5528,7 +5565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxKeyboardSortableItem]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$6.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$7.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -5869,13 +5906,13 @@ class InputComponent {
     ngOnDestroy() {
         this.destroyed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, deps: [{ token: i1$5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", 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:#99c6fa}:host.error{border-color:#f96464}:host.lx-max-length-counter-input.error{color:#f96464}:host.lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host.lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--sapFontSize, 13.5px);float:right;margin-left:auto;margin-top:2px}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             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:#99c6fa}:host.error{border-color:#f96464}:host.lx-max-length-counter-input.error{color:#f96464}:host.lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host.lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--sapFontSize, 13.5px);float:right;margin-left:auto;margin-top:2px}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1$6.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { error: [{
                 type: Input
@@ -6149,7 +6186,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: "18.2.8", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
@@ -6440,7 +6477,7 @@ class MultiSelectComponent extends BaseSelectDirective {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }], 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.tokenized]=\"tokenize\"\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    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\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:#fff}.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 #99c6fa}.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 .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;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: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { 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 }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }], 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.tokenized]=\"tokenize\"\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    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\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:#fff}.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 #99c6fa}.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 .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;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: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { 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: "18.2.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -6550,7 +6587,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\" />\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\" />\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 *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\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                  />\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\" />\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:#61779d;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$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\" />\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\" />\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 *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\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                  />\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\" />\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:#61779d;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$5.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -7545,7 +7582,7 @@ class SelectListComponent extends BaseSelectDirective {
         return options.findIndex((option) => isEqual$1(selection, option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\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: "18.2.8", 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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\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: "18.2.8", ngImport: i0, type: SelectListComponent, decorators: [{
             type: Component,
@@ -7815,7 +7852,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\" />\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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\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 #99c6fa}.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\" />\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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\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 #99c6fa}.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: "18.2.8", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -8130,7 +8167,7 @@ class ContenteditableDirective {
     sanitize(content) {
         return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ContenteditableDirective, decorators: [{
@@ -8139,7 +8176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxContenteditableModel]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$7.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$8.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
                 type: Input
             }], lxContenteditableModelChange: [{
                 type: Output
@@ -8264,7 +8301,7 @@ class FormErrorDirective {
             this.ref.instance.dynamicErrorMessage.set('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { 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: "18.2.8", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { 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: "18.2.8", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormErrorDirective, decorators: [{
@@ -8273,7 +8310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxFormError]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$6.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -8740,7 +8777,7 @@ class MaxLengthCounterDirective {
             this.ngControl.control?.updateValueAndValidity({ onlySelf: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$6.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: MaxLengthCounterDirective, isStandalone: true, selector: "[lxMaxLengthCounter]", inputs: { lxMaxLengthCounter: "lxMaxLengthCounter", lxMaxLengthCounterRef: "lxMaxLengthCounterRef" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MaxLengthCounterDirective, decorators: [{
@@ -8749,7 +8786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxMaxLengthCounter]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$6.NgControl, decorators: [{
                     type: Self
                 }] }], propDecorators: { lxMaxLengthCounter: [{
                 type: Input
@@ -9362,7 +9399,7 @@ class PopoverComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopoverComponent, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"restoreFocus\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n    (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$8.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopoverComponent, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"restoreFocus\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n    (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$4.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
@@ -9423,7 +9460,7 @@ class PopoverClickDirective {
     closePopover() {
         this.onMouseLeave.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$8.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$4.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: PopoverClickDirective, isStandalone: true, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 }); }
 }
 __decorate([
@@ -9436,7 +9473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxPopoverClick]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchorDirective }], propDecorators: { lxPopoverPinned: [{
+        }], ctorParameters: () => [{ type: i1$4.SatPopoverAnchorDirective }], propDecorators: { lxPopoverPinned: [{
                 type: Input
             }], pinned$: [], closePopover: [{
                 type: HostListener,
@@ -9503,7 +9540,7 @@ class PopoverHoverDirective {
     closePopover(skipDelay = this.skipCloseDelay) {
         this.onMouseLeave.next({ skipDelay });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$8.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$4.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: PopoverHoverDirective, isStandalone: true, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverHoverDirective, decorators: [{
@@ -9513,7 +9550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxPopoverHover]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchorDirective }], propDecorators: { lxPopoverHover: [{
+        }], ctorParameters: () => [{ type: i1$4.SatPopoverAnchorDirective }], propDecorators: { lxPopoverHover: [{
                 type: Input
             }], skipCloseDelay: [{
                 type: Input
@@ -9806,5 +9843,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContentPanelComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, InputComponent, IntegrationLinkCardComponent, IntegrationLinkCardGroupComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContentPanelComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, InputComponent, IntegrationLinkCardComponent, IntegrationLinkCardGroupComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.mjs.map