@leanix/components 0.4.543 → 0.4.544

package/fesm2022/leanix-components.mjs

@@ -2,8 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import * as i1$6 from '@angular/common';
-import { NgTemplateOutlet, NgClass, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgSwitch, NgSwitchCase, CommonModule, DecimalPipe, formatDate } from '@angular/common';
+import { NgTemplateOutlet, NgClass, AsyncPipe, NgIf, UpperCasePipe, DecimalPipe, CommonModule, NgFor, formatDate } from '@angular/common';
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
 import * as i5 from 'rxjs';
@@ -11,7 +10,7 @@ import { BehaviorSubject, of, timer, Observable, Subject, combineLatest, merge,
 import { __decorate } from 'tslib';
 import { escape, trimEnd, sortBy, get, isEqual as isEqual$1, toLower, some, padCharsStart, toString, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
 import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
-import * as i1$9 from '@angular/router';
+import * as i1$8 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import * as i1$1 from '@angular/cdk/bidi';
@@ -34,9 +33,9 @@ import * as i1$5 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, Validators, FormControl } from '@angular/forms';
 import * as i1$4 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import * as i1$7 from '@angular/cdk/drag-drop';
+import * as i1$6 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$8 from '@angular/platform-browser';
+import * as i1$7 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
@@ -3381,8 +3380,8 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
     get isNewItem() {
         return BasicDropdownComponent.isNewItem(this.options, this.newOptionLabel, this.labelKey);
     }
-    trackByProp(prop) {
-        return (index, pill) => (prop ? pill[prop] : index);
+    trackByProp(index, pill) {
+        return this.itemKey ? pill[this.itemKey] : index;
     }
     onScroll() {
         this.triggerRequestForMoreEntries.emit();
@@ -3397,12 +3396,11 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.createNewOptionSelected.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", 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 disabledItem description\"\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}.option.disabledItem:not(.description){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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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: "@if (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} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\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    @if (newOptionLabel && isNewItem) {\n      <li\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    }\n    @if (showCreateNewOption) {\n      <li\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          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\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    }\n    @if (placeholder) {\n      <li\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    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\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        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\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}.option.disabledItem:not(.description){opacity:.5}\n"], dependencies: [{ 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: "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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-basic-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
                         NgTemplateOutlet,
                         CdkOverlayOrigin,
                         CdkConnectedOverlay,
@@ -3410,12 +3408,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         InfiniteScrollModule,
                         SelectableItemDirective,
                         CounterComponent,
-                        NgFor,
                         SpinnerComponent,
                         AsyncPipe,
                         UpperCasePipe,
                         TranslateModule
-                    ], 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 disabledItem description\"\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}.option.disabledItem:not(.description){opacity:.5}\n"] }]
+                    ], template: "@if (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} @else {\n  <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\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    @if (newOptionLabel && isNewItem) {\n      <li\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    }\n    @if (showCreateNewOption) {\n      <li\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          @if (createNewOptionTemplateRef) {\n            <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n          } @else {\n            <span>\n              {{ NAME + '.new' | translate }}\n            </span>\n          }\n        </span>\n      </li>\n    }\n    @if (descriptionTemplateRef) {\n      <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n        <span class=\"descriptionContent\">\n          <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n        </span>\n      </li>\n    }\n    @if (options?.length === 0 && !newOptionLabel && !loading) {\n      <li\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    }\n    @if (placeholder) {\n      <li\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    }\n    @for (option of options; track trackByProp(index, option); let index = $index) {\n      <li\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        @if (optionTemplateRef) {\n          <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n        } @else {\n          <span>\n            {{ labelKey ? option[labelKey] : option }}\n          </span>\n        }\n      </li>\n    }\n    @if (loading) {\n      <lx-spinner [fadeBackground]=\"true\" />\n    }\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}.option.disabledItem:not(.description){opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], initiallySelectedIndex: [{
@@ -3547,11 +3544,11 @@ class OptionGroupComponent {
         this.select.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: OptionGroupComponent, isStandalone: true, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: OptionGroupComponent, isStandalone: true, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  @if (label) {\n    <span class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  }\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"] }]
+            args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<li>\n  @if (label) {\n    <span class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  }\n  <ul>\n    <ng-content />\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"] }]
         }], propDecorators: { hasSelectedState: [{
                 type: Input
             }], label: [{
@@ -3615,11 +3612,11 @@ class OptionComponent {
         this.keyDownAction.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content />\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{font-size:.9em;line-height:23px;position:absolute;top:calc(50% - 11.5px)}.option i.fa-check{left:8px}.option i.fa-circle{left:6px;font-size:var(--lxFontLargeSize, 16px);width:16px;text-align:center}.option i.fas.fa-circle{font-size:8px;color:inherit}.option i.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <i class=\"far fa-check\"></i>\n        }\n      }\n      @case ('circle') {\n        <i class=\"fal fa-circle\"></i>\n        @if (selected) {\n          <i class=\"fas fa-circle\"></i>\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <i class=\"far fa-chevron-right\"></i>\n  }\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{font-size:.9em;line-height:23px;position:absolute;top:calc(50% - 11.5px)}.option i.fa-check{left:8px}.option i.fa-circle{left:6px;font-size:var(--lxFontLargeSize, 16px);width:16px;text-align:center}.option i.fas.fa-circle{font-size:8px;color:inherit}.option i.fa-chevron-right{right:8px;font-size:8px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option', standalone: true, imports: [NgIf, NgSwitch, NgSwitchCase], template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content />\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{font-size:.9em;line-height:23px;position:absolute;top:calc(50% - 11.5px)}.option i.fa-check{left:8px}.option i.fa-circle{left:6px;font-size:var(--lxFontLargeSize, 16px);width:16px;text-align:center}.option i.fas.fa-circle{font-size:8px;color:inherit}.option i.fa-chevron-right{right:8px;font-size:8px}\n"] }]
+            args: [{ selector: 'lx-option', standalone: true, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <i class=\"far fa-check\"></i>\n        }\n      }\n      @case ('circle') {\n        <i class=\"fal fa-circle\"></i>\n        @if (selected) {\n          <i class=\"fas fa-circle\"></i>\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <i class=\"far fa-chevron-right\"></i>\n  }\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{font-size:.9em;line-height:23px;position:absolute;top:calc(50% - 11.5px)}.option i.fa-check{left:8px}.option i.fa-circle{left:6px;font-size:var(--lxFontLargeSize, 16px);width:16px;text-align:center}.option i.fas.fa-circle{font-size:8px;color:inherit}.option i.fa-chevron-right{right:8px;font-size:8px}\n"] }]
         }], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
                     type: Optional
                 }, {
@@ -3899,11 +3896,11 @@ class BreadcrumbComponent {
         return !!breadcrumb.breadcrumbs;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:6px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}:host i{font-weight:var(--lxFontNormal, 400);color:#2a303d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:6px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}:host i{font-weight:var(--lxFontNormal, 400);color:#2a303d}\n"], dependencies: [{ kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-breadcrumb', standalone: true, imports: [CommonModule, CdkOptionsDropdownComponent, KeyboardActionSourceDirective, OptionComponent], template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:6px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}:host i{font-weight:var(--lxFontNormal, 400);color:#2a303d}\n"] }]
+            args: [{ selector: 'lx-breadcrumb', standalone: true, imports: [CdkOptionsDropdownComponent, KeyboardActionSourceDirective, OptionComponent], template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:6px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}:host i{font-weight:var(--lxFontNormal, 400);color:#2a303d}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }] } });
@@ -4286,13 +4283,13 @@ class CurrencyInputComponent {
         return value.indexOf(',') > -1 || value.indexOf('.') > -1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CurrencyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CurrencyInputComponent, isStandalone: true, selector: "lx-currency-input", inputs: { code: "code", decimalSeparator: "decimalSeparator", placeholder: "placeholder", data: "data", inputId: "inputId", disabled: "disabled", mode: "mode", fieldDefinitionType: "fieldDefinitionType", iconPosition: "iconPosition", format: "format", markInvalid: "markInvalid" }, outputs: { onFocusLost: "onFocusLost", onChange: "onChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: CurrencyInputComponent, isStandalone: true, selector: "lx-currency-input", inputs: { code: "code", decimalSeparator: "decimalSeparator", placeholder: "placeholder", data: "data", inputId: "inputId", disabled: "disabled", mode: "mode", fieldDefinitionType: "fieldDefinitionType", iconPosition: "iconPosition", format: "format", markInvalid: "markInvalid" }, outputs: { onFocusLost: "onFocusLost", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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: "@if (mode === 'edit') {\n  <div class=\"container input-group\">\n    @if (iconPosition === 'first') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n    @if (!showCurrencyInput) {\n      <input\n        [attr.disabled]=\"disabled ? true : null\"\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    }\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    @if (iconPosition === 'end') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n  </div>\n} @else if (mode === 'view') {\n  <span [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    @if (iconPosition === 'first') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n    {{ (dataValue$ | async | number: format) || placeholder }}\n    @if (iconPosition === 'end') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n  </span>\n}\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: "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 }); }
 }
 __decorate([
     Observe('data')
@@ -4305,7 +4302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                             useExisting: forwardRef(() => CurrencyInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, CurrencySymbolComponent, MarkInvalidDirective, FormsModule, AsyncPipe, DecimalPipe], 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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CurrencySymbolComponent, MarkInvalidDirective, FormsModule, AsyncPipe, DecimalPipe], template: "@if (mode === 'edit') {\n  <div class=\"container input-group\">\n    @if (iconPosition === 'first') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n    @if (!showCurrencyInput) {\n      <input\n        [attr.disabled]=\"disabled ? true : null\"\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    }\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    @if (iconPosition === 'end') {\n      <div class=\"labelContainer input-group-addon\">\n        <lx-currency-symbol [code]=\"code\" />\n      </div>\n    }\n  </div>\n} @else if (mode === 'view') {\n  <span [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    @if (iconPosition === 'first') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n    {{ (dataValue$ | async | number: format) || placeholder }}\n    @if (iconPosition === 'end') {\n      <lx-currency-symbol [code]=\"code\" />\n    }\n  </span>\n}\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
                 type: Input
             }], decimalSeparator: [{
@@ -4609,12 +4606,14 @@ class DatePickerInnerComponent {
         return (isDateDisabled || (this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DatePickerInnerComponent, isStandalone: true, selector: "datepicker-inner", inputs: { locale: "locale", datepickerMode: "datepickerMode", startingDay: "startingDay", yearRange: "yearRange", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", initDate: "initDate", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", update: "update", activeDateChange: "activeDateChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DatePickerInnerComponent, isStandalone: true, selector: "datepicker-inner", inputs: { locale: "locale", datepickerMode: "datepickerMode", startingDay: "startingDay", yearRange: "yearRange", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", initDate: "initDate", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", update: "update", activeDateChange: "activeDateChange" }, usesOnChanges: true, ngImport: i0, template: `
     <!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
-    <div *ngIf="datepickerMode" class="well well-sm bg-faded p-a card" role="application">
-      <ng-content />
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    @if (datepickerMode) {
+      <div class="well well-sm bg-faded p-a card" role="application">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerInnerComponent, decorators: [{
             type: Component,
@@ -4623,12 +4622,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     selector: 'datepicker-inner',
                     template: `
     <!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
-    <div *ngIf="datepickerMode" class="well well-sm bg-faded p-a card" role="application">
-      <ng-content />
-    </div>
+    @if (datepickerMode) {
+      <div class="well well-sm bg-faded p-a card" role="application">
+        <ng-content />
+      </div>
+    }
   `,
-                    standalone: true,
-                    imports: [NgIf]
+                    standalone: true
                 }]
         }], propDecorators: { locale: [{
                 type: Input
@@ -4773,231 +4773,207 @@ class DayPickerComponent {
         return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DayPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DayPickerComponent, isStandalone: true, selector: "daypicker", ngImport: i0, template: `
-    <table
-      *ngIf="datePicker.datepickerMode === 'day'"
-      role="grid"
-      [attr.aria-labelledby]="datePicker.uniqueId + '-title'"
-      aria-activedescendant="activeDateId"
-    >
-      <thead>
-        <tr>
-          <th>
-            <button
-              *ngIf="!isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-left float-left"
-              (click)="datePicker.move(-1)"
-              tabindex="-1"
-            >
-              ‹
-            </button>
-            <button
-              *ngIf="isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-left float-left"
-              (click)="datePicker.move(-1)"
-              tabindex="-1"
-            >
-              &lt;
-            </button>
-          </th>
-          <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
-            <button
-              [id]="datePicker.uniqueId + '-title'"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm"
-              (click)="datePicker.toggleMode(0)"
-              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
-              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
-              tabindex="-1"
-              style="width:100%;"
-            >
-              <strong>{{ title }}</strong>
-            </button>
-          </th>
-          <th>
-            <button
-              *ngIf="!isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-right float-right"
-              (click)="datePicker.move(1)"
-              tabindex="-1"
-            >
-              ›
-            </button>
-            <button
-              *ngIf="isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-right float-right"
-              (click)="datePicker.move(1)"
-              tabindex="-1"
-            >
-              &gt;
-            </button>
-          </th>
-        </tr>
-        <tr>
-          <th *ngIf="datePicker.showWeeks"></th>
-          <th *ngFor="let labelz of labels" class="text-center">
-            <small [attr.aria-label]="labelz.full"
-              ><b>{{ labelz.abbr }}</b></small
-            >
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <ng-template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
-          <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
-            <td *ngIf="datePicker.showWeeks" class="h6" class="text-center">
-              <em>{{ weekNumbers[index] }}</em>
-            </td>
-            <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DayPickerComponent, isStandalone: true, selector: "daypicker", ngImport: i0, template: `
+    @if (datePicker.datepickerMode === 'day') {
+      <table role="grid" [attr.aria-labelledby]="datePicker.uniqueId + '-title'" aria-activedescendant="activeDateId">
+        <thead>
+          <tr>
+            <th>
               <button
                 type="button"
-                style="min-width:100%;"
-                class="btn btn-sm {{ dtz.customClass }}"
-                *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
-                [ngClass]="{
-                  'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
-                  'btn-info': dtz.selected,
-                  disabled: dtz.disabled,
-                  active: !isBs4 && datePicker.isActive(dtz),
-                  'btn-default': !isBs4
-                }"
-                [disabled]="dtz.disabled"
-                (click)="datePicker.select(dtz.date)"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
+                (click)="datePicker.move(-1)"
                 tabindex="-1"
               >
-                <span
-                  [ngClass]="{
-                    'text-muted': dtz.secondary,
-                    'text-info': !isBs4 && dtz.current
-                  }"
-                >
-                  {{ dtz.label }}</span
-                >
+                {{ isBs4 ? '&lt;' : '‹' }}
+              </button>
+            </th>
+            <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
+              <button
+                [id]="datePicker.uniqueId + '-title'"
+                type="button"
+                class="btn btn-default btn-secondary btn-sm"
+                (click)="datePicker.toggleMode(0)"
+                [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+                [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+                tabindex="-1"
+                style="width:100%;"
+              >
+                <strong>{{ title }}</strong>
+              </button>
+            </th>
+            <th>
+              <button
+                type="button"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
+                (click)="datePicker.move(1)"
+                tabindex="-1"
+              >
+                {{ isBs4 ? '&gt;' : '›' }}
               </button>
-            </td>
+            </th>
+          </tr>
+          <tr>
+            @if (datePicker.showWeeks) {
+              <th></th>
+            }
+            @for (labelItem of labels; track $index) {
+              <th class="text-center">
+                <small [attr.aria-label]="labelItem.full"
+                  ><b>{{ labelItem.abbr }}</b></small
+                >
+              </th>
+            }
           </tr>
-        </ng-template>
-      </tbody>
-    </table>
-  `, isInline: true, styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+        </thead>
+        <tbody>
+          @for (row of rows; track index; let index = $index) {
+            @if (!(datePicker.onlyCurrentMonth && row[0].secondary && row[6].secondary)) {
+              <tr>
+                @if (datePicker.showWeeks) {
+                  <td class="h6" class="text-center">
+                    <em>{{ weekNumbers[index] }}</em>
+                  </td>
+                }
+                @for (dateUnit of row; track dateUnit.uid) {
+                  <td class="text-center" role="gridcell" [id]="dateUnit.uid">
+                    @if (!(datePicker.onlyCurrentMonth && dateUnit.secondary)) {
+                      <button
+                        type="button"
+                        style="min-width:100%;"
+                        class="btn btn-sm {{ dateUnit.customClass }}"
+                        [ngClass]="{
+                          'btn-secondary': isBs4 && !dateUnit.selected && !datePicker.isActive(dateUnit),
+                          'btn-info': dateUnit.selected,
+                          disabled: dateUnit.disabled,
+                          active: !isBs4 && datePicker.isActive(dateUnit),
+                          'btn-default': !isBs4
+                        }"
+                        [disabled]="dateUnit.disabled"
+                        (click)="datePicker.select(dateUnit.date)"
+                        tabindex="-1"
+                      >
+                        <span
+                          [ngClass]="{
+                            'text-muted': dateUnit.secondary,
+                            'text-info': !isBs4 && dateUnit.current
+                          }"
+                        >
+                          {{ dateUnit.label }}</span
+                        >
+                      </button>
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    }
+  `, isInline: true, styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DayPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daypicker', template: `
-    <table
-      *ngIf="datePicker.datepickerMode === 'day'"
-      role="grid"
-      [attr.aria-labelledby]="datePicker.uniqueId + '-title'"
-      aria-activedescendant="activeDateId"
-    >
-      <thead>
-        <tr>
-          <th>
-            <button
-              *ngIf="!isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-left float-left"
-              (click)="datePicker.move(-1)"
-              tabindex="-1"
-            >
-              ‹
-            </button>
-            <button
-              *ngIf="isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-left float-left"
-              (click)="datePicker.move(-1)"
-              tabindex="-1"
-            >
-              &lt;
-            </button>
-          </th>
-          <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
-            <button
-              [id]="datePicker.uniqueId + '-title'"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm"
-              (click)="datePicker.toggleMode(0)"
-              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
-              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
-              tabindex="-1"
-              style="width:100%;"
-            >
-              <strong>{{ title }}</strong>
-            </button>
-          </th>
-          <th>
-            <button
-              *ngIf="!isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-right float-right"
-              (click)="datePicker.move(1)"
-              tabindex="-1"
-            >
-              ›
-            </button>
-            <button
-              *ngIf="isBs4"
-              type="button"
-              class="btn btn-default btn-secondary btn-sm pull-right float-right"
-              (click)="datePicker.move(1)"
-              tabindex="-1"
-            >
-              &gt;
-            </button>
-          </th>
-        </tr>
-        <tr>
-          <th *ngIf="datePicker.showWeeks"></th>
-          <th *ngFor="let labelz of labels" class="text-center">
-            <small [attr.aria-label]="labelz.full"
-              ><b>{{ labelz.abbr }}</b></small
-            >
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <ng-template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
-          <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
-            <td *ngIf="datePicker.showWeeks" class="h6" class="text-center">
-              <em>{{ weekNumbers[index] }}</em>
-            </td>
-            <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
+    @if (datePicker.datepickerMode === 'day') {
+      <table role="grid" [attr.aria-labelledby]="datePicker.uniqueId + '-title'" aria-activedescendant="activeDateId">
+        <thead>
+          <tr>
+            <th>
               <button
                 type="button"
-                style="min-width:100%;"
-                class="btn btn-sm {{ dtz.customClass }}"
-                *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
-                [ngClass]="{
-                  'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
-                  'btn-info': dtz.selected,
-                  disabled: dtz.disabled,
-                  active: !isBs4 && datePicker.isActive(dtz),
-                  'btn-default': !isBs4
-                }"
-                [disabled]="dtz.disabled"
-                (click)="datePicker.select(dtz.date)"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
+                (click)="datePicker.move(-1)"
                 tabindex="-1"
               >
-                <span
-                  [ngClass]="{
-                    'text-muted': dtz.secondary,
-                    'text-info': !isBs4 && dtz.current
-                  }"
-                >
-                  {{ dtz.label }}</span
-                >
+                {{ isBs4 ? '&lt;' : '‹' }}
+              </button>
+            </th>
+            <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
+              <button
+                [id]="datePicker.uniqueId + '-title'"
+                type="button"
+                class="btn btn-default btn-secondary btn-sm"
+                (click)="datePicker.toggleMode(0)"
+                [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+                [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+                tabindex="-1"
+                style="width:100%;"
+              >
+                <strong>{{ title }}</strong>
               </button>
-            </td>
+            </th>
+            <th>
+              <button
+                type="button"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
+                (click)="datePicker.move(1)"
+                tabindex="-1"
+              >
+                {{ isBs4 ? '&gt;' : '›' }}
+              </button>
+            </th>
           </tr>
-        </ng-template>
-      </tbody>
-    </table>
-  `, standalone: true, imports: [NgIf, NgClass, NgFor], styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
+          <tr>
+            @if (datePicker.showWeeks) {
+              <th></th>
+            }
+            @for (labelItem of labels; track $index) {
+              <th class="text-center">
+                <small [attr.aria-label]="labelItem.full"
+                  ><b>{{ labelItem.abbr }}</b></small
+                >
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows; track index; let index = $index) {
+            @if (!(datePicker.onlyCurrentMonth && row[0].secondary && row[6].secondary)) {
+              <tr>
+                @if (datePicker.showWeeks) {
+                  <td class="h6" class="text-center">
+                    <em>{{ weekNumbers[index] }}</em>
+                  </td>
+                }
+                @for (dateUnit of row; track dateUnit.uid) {
+                  <td class="text-center" role="gridcell" [id]="dateUnit.uid">
+                    @if (!(datePicker.onlyCurrentMonth && dateUnit.secondary)) {
+                      <button
+                        type="button"
+                        style="min-width:100%;"
+                        class="btn btn-sm {{ dateUnit.customClass }}"
+                        [ngClass]="{
+                          'btn-secondary': isBs4 && !dateUnit.selected && !datePicker.isActive(dateUnit),
+                          'btn-info': dateUnit.selected,
+                          disabled: dateUnit.disabled,
+                          active: !isBs4 && datePicker.isActive(dateUnit),
+                          'btn-default': !isBs4
+                        }"
+                        [disabled]="dateUnit.disabled"
+                        (click)="datePicker.select(dateUnit.date)"
+                        tabindex="-1"
+                      >
+                        <span
+                          [ngClass]="{
+                            'text-muted': dateUnit.secondary,
+                            'text-info': !isBs4 && dateUnit.current
+                          }"
+                        >
+                          {{ dateUnit.label }}</span
+                        >
+                      </button>
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    }
+  `, standalone: true, imports: [NgClass], styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
 class MonthPickerComponent {
@@ -5033,113 +5009,133 @@ class MonthPickerComponent {
         this.datePicker.refreshView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MonthPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MonthPickerComponent, isStandalone: true, selector: "monthpicker", ngImport: i0, template: `
-    <table *ngIf="datePicker.datepickerMode === 'month'" role="grid">
-      <thead>
-        <tr>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
-          </th>
-          <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
-            <button
-              [id]="datePicker.uniqueId + '-title'"
-              type="button"
-              class="btn btn-default btn-sm"
-              (click)="datePicker.toggleMode(0)"
-              [disabled]="datePicker.datepickerMode === maxMode"
-              [ngClass]="{ disabled: datePicker.datepickerMode === maxMode }"
-              tabindex="-1"
-              style="width:100%;"
-            >
-              <strong>{{ title }}</strong>
-            </button>
-          </th>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-              ›
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let rowz of rows">
-          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
-            <button
-              type="button"
-              style="min-width:100%;"
-              class="btn btn-default"
-              [ngClass]="{
-                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
-                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
-                disabled: dtz.disabled,
-                active: !isBs4 && datePicker.isActive(dtz)
-              }"
-              [disabled]="dtz.disabled"
-              (click)="datePicker.select(dtz.date)"
-              tabindex="-1"
-            >
-              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MonthPickerComponent, isStandalone: true, selector: "monthpicker", ngImport: i0, template: `
+    @if (datePicker.datepickerMode === 'month') {
+      <table role="grid">
+        <thead>
+          <tr>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
+                ‹
+              </button>
+            </th>
+            <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
+              <button
+                [id]="datePicker.uniqueId + '-title'"
+                type="button"
+                class="btn btn-default btn-sm"
+                (click)="datePicker.toggleMode(0)"
+                [disabled]="datePicker.datepickerMode === maxMode"
+                [ngClass]="{ disabled: datePicker.datepickerMode === maxMode }"
+                tabindex="-1"
+                style="width:100%;"
+              >
+                <strong>{{ title }}</strong>
+              </button>
+            </th>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+                ›
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (rowItem of rows; track $index) {
+            <tr>
+              @for (dateUnit of rowItem; track dateUnit.uid) {
+                <td class="text-center" role="gridcell" [attr.id]="dateUnit.uid" [ngClass]="dateUnit.customClass">
+                  <button
+                    type="button"
+                    style="min-width:100%;"
+                    class="btn btn-default"
+                    [ngClass]="{
+                      'btn-link': isBs4 && !dateUnit.selected && !datePicker.isActive(dateUnit),
+                      'btn-info': dateUnit.selected || (isBs4 && !dateUnit.selected && datePicker.isActive(dateUnit)),
+                      disabled: dateUnit.disabled,
+                      active: !isBs4 && datePicker.isActive(dateUnit)
+                    }"
+                    [disabled]="dateUnit.disabled"
+                    (click)="datePicker.select(dateUnit.date)"
+                    tabindex="-1"
+                  >
+                    <span [ngClass]="{ 'text-success': isBs4 && dateUnit.current, 'text-info': !isBs4 && dateUnit.current }">{{
+                      dateUnit.label
+                    }}</span>
+                  </button>
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monthpicker', template: `
-    <table *ngIf="datePicker.datepickerMode === 'month'" role="grid">
-      <thead>
-        <tr>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
-          </th>
-          <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
-            <button
-              [id]="datePicker.uniqueId + '-title'"
-              type="button"
-              class="btn btn-default btn-sm"
-              (click)="datePicker.toggleMode(0)"
-              [disabled]="datePicker.datepickerMode === maxMode"
-              [ngClass]="{ disabled: datePicker.datepickerMode === maxMode }"
-              tabindex="-1"
-              style="width:100%;"
-            >
-              <strong>{{ title }}</strong>
-            </button>
-          </th>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-              ›
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let rowz of rows">
-          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
-            <button
-              type="button"
-              style="min-width:100%;"
-              class="btn btn-default"
-              [ngClass]="{
-                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
-                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
-                disabled: dtz.disabled,
-                active: !isBs4 && datePicker.isActive(dtz)
-              }"
-              [disabled]="dtz.disabled"
-              (click)="datePicker.select(dtz.date)"
-              tabindex="-1"
-            >
-              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `, standalone: true, imports: [NgIf, NgClass, NgFor], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+    @if (datePicker.datepickerMode === 'month') {
+      <table role="grid">
+        <thead>
+          <tr>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
+                ‹
+              </button>
+            </th>
+            <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
+              <button
+                [id]="datePicker.uniqueId + '-title'"
+                type="button"
+                class="btn btn-default btn-sm"
+                (click)="datePicker.toggleMode(0)"
+                [disabled]="datePicker.datepickerMode === maxMode"
+                [ngClass]="{ disabled: datePicker.datepickerMode === maxMode }"
+                tabindex="-1"
+                style="width:100%;"
+              >
+                <strong>{{ title }}</strong>
+              </button>
+            </th>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+                ›
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (rowItem of rows; track $index) {
+            <tr>
+              @for (dateUnit of rowItem; track dateUnit.uid) {
+                <td class="text-center" role="gridcell" [attr.id]="dateUnit.uid" [ngClass]="dateUnit.customClass">
+                  <button
+                    type="button"
+                    style="min-width:100%;"
+                    class="btn btn-default"
+                    [ngClass]="{
+                      'btn-link': isBs4 && !dateUnit.selected && !datePicker.isActive(dateUnit),
+                      'btn-info': dateUnit.selected || (isBs4 && !dateUnit.selected && datePicker.isActive(dateUnit)),
+                      disabled: dateUnit.disabled,
+                      active: !isBs4 && datePicker.isActive(dateUnit)
+                    }"
+                    [disabled]="dateUnit.disabled"
+                    (click)="datePicker.select(dateUnit.date)"
+                    tabindex="-1"
+                  >
+                    <span [ngClass]="{ 'text-success': isBs4 && dateUnit.current, 'text-info': !isBs4 && dateUnit.current }">{{
+                      dateUnit.label
+                    }}</span>
+                  </button>
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  `, standalone: true, imports: [NgClass], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
 // @deprecated
@@ -5179,113 +5175,133 @@ class YearPickerComponent {
         return ((year - 1) / this.datePicker.yearRange) * this.datePicker.yearRange + 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: YearPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: YearPickerComponent, isStandalone: true, selector: "yearpicker", ngImport: i0, template: `
-    <table *ngIf="datePicker.datepickerMode === 'year'" role="grid">
-      <thead>
-        <tr>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
-          </th>
-          <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
-            <button
-              [id]="datePicker.uniqueId + '-title'"
-              type="button"
-              class="btn btn-default btn-sm"
-              (click)="datePicker.toggleMode(0)"
-              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
-              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
-              tabindex="-1"
-              style="width:100%;"
-            >
-              <strong>{{ title }}</strong>
-            </button>
-          </th>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-              ›
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let rowz of rows">
-          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
-            <button
-              type="button"
-              style="min-width:100%;"
-              class="btn btn-default"
-              [ngClass]="{
-                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
-                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
-                disabled: dtz.disabled,
-                active: !isBs4 && datePicker.isActive(dtz)
-              }"
-              [disabled]="dtz.disabled"
-              (click)="datePicker.select(dtz.date)"
-              tabindex="-1"
-            >
-              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: YearPickerComponent, isStandalone: true, selector: "yearpicker", ngImport: i0, template: `
+    @if (datePicker.datepickerMode === 'year') {
+      <table role="grid">
+        <thead>
+          <tr>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
+                ‹
+              </button>
+            </th>
+            <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
+              <button
+                [id]="datePicker.uniqueId + '-title'"
+                type="button"
+                class="btn btn-default btn-sm"
+                (click)="datePicker.toggleMode(0)"
+                [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+                [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+                tabindex="-1"
+                style="width:100%;"
+              >
+                <strong>{{ title }}</strong>
+              </button>
+            </th>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+                ›
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (rowItem of rows; track $index) {
+            <tr>
+              @for (dateUnit of rowItem; track dateUnit.uid) {
+                <td class="text-center" role="gridcell" [attr.id]="dateUnit.uid">
+                  <button
+                    type="button"
+                    style="min-width:100%;"
+                    class="btn btn-default"
+                    [ngClass]="{
+                      'btn-link': isBs4 && !dateUnit.selected && !datePicker.isActive(dateUnit),
+                      'btn-info': dateUnit.selected || (isBs4 && !dateUnit.selected && datePicker.isActive(dateUnit)),
+                      disabled: dateUnit.disabled,
+                      active: !isBs4 && datePicker.isActive(dateUnit)
+                    }"
+                    [disabled]="dateUnit.disabled"
+                    (click)="datePicker.select(dateUnit.date)"
+                    tabindex="-1"
+                  >
+                    <span [ngClass]="{ 'text-success': isBs4 && dateUnit.current, 'text-info': !isBs4 && dateUnit.current }">{{
+                      dateUnit.label
+                    }}</span>
+                  </button>
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: YearPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yearpicker', template: `
-    <table *ngIf="datePicker.datepickerMode === 'year'" role="grid">
-      <thead>
-        <tr>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
-          </th>
-          <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
-            <button
-              [id]="datePicker.uniqueId + '-title'"
-              type="button"
-              class="btn btn-default btn-sm"
-              (click)="datePicker.toggleMode(0)"
-              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
-              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
-              tabindex="-1"
-              style="width:100%;"
-            >
-              <strong>{{ title }}</strong>
-            </button>
-          </th>
-          <th>
-            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
-              ›
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let rowz of rows">
-          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
-            <button
-              type="button"
-              style="min-width:100%;"
-              class="btn btn-default"
-              [ngClass]="{
-                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
-                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
-                disabled: dtz.disabled,
-                active: !isBs4 && datePicker.isActive(dtz)
-              }"
-              [disabled]="dtz.disabled"
-              (click)="datePicker.select(dtz.date)"
-              tabindex="-1"
-            >
-              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `, standalone: true, imports: [NgIf, NgClass, NgFor], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+    @if (datePicker.datepickerMode === 'year') {
+      <table role="grid">
+        <thead>
+          <tr>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">
+                ‹
+              </button>
+            </th>
+            <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
+              <button
+                [id]="datePicker.uniqueId + '-title'"
+                type="button"
+                class="btn btn-default btn-sm"
+                (click)="datePicker.toggleMode(0)"
+                [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+                [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+                tabindex="-1"
+                style="width:100%;"
+              >
+                <strong>{{ title }}</strong>
+              </button>
+            </th>
+            <th>
+              <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+                ›
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (rowItem of rows; track $index) {
+            <tr>
+              @for (dateUnit of rowItem; track dateUnit.uid) {
+                <td class="text-center" role="gridcell" [attr.id]="dateUnit.uid">
+                  <button
+                    type="button"
+                    style="min-width:100%;"
+                    class="btn btn-default"
+                    [ngClass]="{
+                      'btn-link': isBs4 && !dateUnit.selected && !datePicker.isActive(dateUnit),
+                      'btn-info': dateUnit.selected || (isBs4 && !dateUnit.selected && datePicker.isActive(dateUnit)),
+                      disabled: dateUnit.disabled,
+                      active: !isBs4 && datePicker.isActive(dateUnit)
+                    }"
+                    [disabled]="dateUnit.disabled"
+                    (click)="datePicker.select(dateUnit.date)"
+                    tabindex="-1"
+                  >
+                    <span [ngClass]="{ 'text-success': isBs4 && dateUnit.current, 'text-info': !isBs4 && dateUnit.current }">{{
+                      dateUnit.label
+                    }}</span>
+                  </button>
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  `, standalone: true, imports: [NgClass], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
 class DatepickerConfig {
@@ -5738,7 +5754,7 @@ class DateInputComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.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", "icon", "endIcon", "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: "@if (cdk) {\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\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\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    <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} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\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        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\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          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: 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", "icon", "endIcon", "showSpinner"] }] }); }
 }
 __decorate([
     Observe('initDateString')
@@ -5749,8 +5765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
                     ], standalone: true, imports: [
-                        CommonModule,
-                        NgIf,
+                        NgTemplateOutlet,
                         CdkOverlayOrigin,
                         FormsModule,
                         AutofocusDirective,
@@ -5759,7 +5774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         CustomDatePipe,
                         MarkInvalidDirective,
                         ButtonComponent
-                    ], 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\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"] }]
+                    ], template: "@if (cdk) {\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\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\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    <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} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\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        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\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          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontBlack, 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:var(--lxFontSize, 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:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_FORMATS]
@@ -5870,18 +5885,15 @@ class DragAndDropListItemComponent {
         this.action = new EventEmitter();
         this.customTemplateRef = null;
     }
-    trackByAction(_index, action) {
-        return action.id;
-    }
     focus() {
         this.element.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DragAndDropListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DragAndDropListItemComponent, isStandalone: true, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n        [icon]=\"act.icon\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}\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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DragAndDropListItemComponent, isStandalone: true, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: "@if (customTemplateRef) {\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n} @else {\n  <div class=\"drag-item-wrappper\">\n    @if (draggable) {\n      <i class=\"far fa-bars drag-handle\"></i>\n    }\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    @if (!!actions) {\n      <div class=\"action-buttons-wrapper\">\n        @for (act of actions; track act.id) {\n          <button\n            lx-button\n            (click)=\"action.emit({ actionId: act.id, item: item })\"\n            [title]=\"act.label\"\n            [square]=\"true\"\n            mode=\"ghost\"\n            size=\"small\"\n            class=\"action-button\"\n            [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n            [icon]=\"act.icon\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-drag-and-drop-list-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, NgFor, ButtonComponent], template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n        [icon]=\"act.icon\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}\n"] }]
+            args: [{ selector: 'lx-drag-and-drop-list-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, ButtonComponent], template: "@if (customTemplateRef) {\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n} @else {\n  <div class=\"drag-item-wrappper\">\n    @if (draggable) {\n      <i class=\"far fa-bars drag-handle\"></i>\n    }\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    @if (!!actions) {\n      <div class=\"action-buttons-wrapper\">\n        @for (act of actions; track act.id) {\n          <button\n            lx-button\n            (click)=\"action.emit({ actionId: act.id, item: item })\"\n            [title]=\"act.label\"\n            [square]=\"true\"\n            mode=\"ghost\"\n            size=\"small\"\n            class=\"action-button\"\n            [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n            [icon]=\"act.icon\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { item: [{
                 type: Input
             }], draggable: [{
@@ -5978,7 +5990,7 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
@@ -5987,7 +5999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     selector: '[lxKeyboardSortableItem]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$7.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$6.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -6127,20 +6139,14 @@ class DragAndDropListComponent {
         this.moveToIndex.emit({ index: currentIndex, previous: previousIndex });
         this.moveItem.emit({ item, index: currentIndex });
     }
-    /** @internal */
-    trackByItem(_index, item) {
-        return item.item;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DragAndDropListComponent, isStandalone: true, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  [attr.aria-label]=\"label\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\" />\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #0070f2}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DragAndDropListComponent, isStandalone: true, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0, template: "@if (label) {\n  <label [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n}\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  [attr.aria-label]=\"label\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  @for (itemComponent of items$ | async; track itemComponent.item) {\n    <li\n      #listItemParent\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"itemComponent.item\"\n      [cdkDragDisabled]=\"!itemComponent.draggable\"\n      [class.dark]=\"color === 'dark'\"\n      [class.big]=\"fontSize === 'big'\"\n      [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n      [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n      [lxKeyboardItemData]=\"itemComponent.item\"\n      [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n      [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n      (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n    >\n      <lx-drag-and-drop-list-item\n        class=\"dragAndDropItem\"\n        [item]=\"itemComponent.item\"\n        [draggable]=\"itemComponent.draggable\"\n        [actions]=\"itemComponent.actions\"\n        (action)=\"emitContentChildAction($event)\"\n      >\n        @if (itemComponent.customTemplateRef) {\n          <ng-template #customTemplate>\n            <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\" />\n          </ng-template>\n        }\n      </lx-drag-and-drop-list-item>\n    </li>\n  }\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #0070f2}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DragAndDropListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-drag-and-drop-list', standalone: true, imports: [
-                        NgIf,
                         CdkDropList,
                         KeyboardSortableListDirective,
-                        NgFor,
                         CdkDrag,
                         KeyboardSortableItemDirective,
                         DragAndDropListItemComponent,
@@ -6148,7 +6154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         AsyncPipe,
                         TranslateModule,
                         DragDropModule
-                    ], template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  [attr.aria-label]=\"label\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\" />\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #0070f2}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"] }]
+                    ], template: "@if (label) {\n  <label [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n}\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  [attr.aria-label]=\"label\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  @for (itemComponent of items$ | async; track itemComponent.item) {\n    <li\n      #listItemParent\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"itemComponent.item\"\n      [cdkDragDisabled]=\"!itemComponent.draggable\"\n      [class.dark]=\"color === 'dark'\"\n      [class.big]=\"fontSize === 'big'\"\n      [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n      [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n      [lxKeyboardItemData]=\"itemComponent.item\"\n      [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n      [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n      (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n    >\n      <lx-drag-and-drop-list-item\n        class=\"dragAndDropItem\"\n        [item]=\"itemComponent.item\"\n        [draggable]=\"itemComponent.draggable\"\n        [actions]=\"itemComponent.actions\"\n        (action)=\"emitContentChildAction($event)\"\n      >\n        @if (itemComponent.customTemplateRef) {\n          <ng-template #customTemplate>\n            <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\" />\n          </ng-template>\n        }\n      </lx-drag-and-drop-list-item>\n    </li>\n  }\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #0070f2}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], labelFontWeight: [{
@@ -6226,11 +6232,11 @@ class ExpandedDropdownComponent extends KeyboardSelectDirective {
         this.onChooseItem = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExpandedDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ExpandedDropdownComponent, isStandalone: true, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul role=\"listbox\" class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    role=\"option\"\n    [attr.aria-selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\" />\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#0070f2\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\" />\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    />\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:var(--lxFontLargeSize, 16px);height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ExpandedDropdownComponent, isStandalone: true, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul role=\"listbox\" class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  @for (option of options; track option.id; let index = $index) {\n    <li\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"onChooseItem.emit(option.id)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      role=\"option\"\n      [attr.aria-selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\" />\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span [title]=\"option.name\">\n          {{ option.name }}\n        </span>\n      </ng-template>\n      <div class=\"iconContainer\">\n        <svg\n          width=\"32px\"\n          height=\"32px\"\n          viewBox=\"0 0 32 32\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        >\n          <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n              <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n                <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                  <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#0070f2\">\n                    <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\" />\n                  </g>\n                  <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                    <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                      <path\n                        d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                        id=\"Path\"\n                      />\n                    </g>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n      </div>\n    </li>\n  } @empty {\n    <li tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n      {{ NAME + '.noResults' | translate }}\n    </li>\n  }\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:var(--lxFontLargeSize, 16px);height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExpandedDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-expanded-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgFor, SelectableItemDirective, NgTemplateOutlet, AsyncPipe, TranslateModule], template: "<ul role=\"listbox\" class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    role=\"option\"\n    [attr.aria-selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\" />\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#0070f2\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\" />\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    />\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:var(--lxFontLargeSize, 16px);height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"] }]
+            args: [{ selector: 'lx-expanded-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SelectableItemDirective, NgTemplateOutlet, AsyncPipe, TranslateModule], template: "<ul role=\"listbox\" class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  @for (option of options; track option.id; let index = $index) {\n    <li\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"onChooseItem.emit(option.id)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      role=\"option\"\n      [attr.aria-selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\" />\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span [title]=\"option.name\">\n          {{ option.name }}\n        </span>\n      </ng-template>\n      <div class=\"iconContainer\">\n        <svg\n          width=\"32px\"\n          height=\"32px\"\n          viewBox=\"0 0 32 32\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        >\n          <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n              <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n                <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                  <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#0070f2\">\n                    <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\" />\n                  </g>\n                  <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                    <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                      <path\n                        d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                        id=\"Path\"\n                      />\n                    </g>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n      </div>\n    </li>\n  } @empty {\n    <li tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n      {{ NAME + '.noResults' | translate }}\n    </li>\n  }\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:var(--lxFontLargeSize, 16px);height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], onChooseItem: [{
@@ -6263,11 +6269,11 @@ class FormErrorComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "@for (key of translationKeys; track $index) {\n  <div class=\"error\">\n    {{ key | translate }}\n  </div>\n}\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-form-error', standalone: true, imports: [NgFor, TranslateModule], template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}\n"] }]
+            args: [{ selector: 'lx-form-error', standalone: true, imports: [TranslateModule], template: "@for (key of translationKeys; track $index) {\n  <div class=\"error\">\n    {{ key | translate }}\n  </div>\n}\n", styles: [".error{color:#f96464;padding:4px}\n"] }]
         }], propDecorators: { namespace: [{
                 type: Input
             }], form: [{
@@ -6937,7 +6943,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\" #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: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\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    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\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\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -6948,7 +6954,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                             multi: true
                         }
                     ], standalone: true, imports: [
-                        NgIf,
                         MarkInvalidDirective,
                         MultiSelectSelectionComponent,
                         ResponsiveInputComponent,
@@ -6956,7 +6961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         ReactiveFormsModule,
                         NgTemplateOutlet,
                         AsyncPipe
-                    ], 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\" #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"] }]
+                    ], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\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    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\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\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
                 type: Input
             }], selection: [{
@@ -7340,11 +7345,11 @@ class OptionsDropdownComponent {
         this.lxButton?.dispatchEvent(newEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning", dropdownClass: "dropdownClass", isFlexEnabledTriggerContainer: "isFlexEnabledTriggerContainer" }, outputs: { opened: "opened", closed: "closed", closedWithoutSelection: "closedWithoutSelection" }, host: { properties: { "style.display": "this.displayStyle" } }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class]=\"dropdownClass\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning", dropdownClass: "dropdownClass", isFlexEnabledTriggerContainer: "isFlexEnabledTriggerContainer" }, outputs: { opened: "opened", closed: "closed", closedWithoutSelection: "closedWithoutSelection" }, host: { properties: { "style.display": "this.displayStyle" } }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n} @else {\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n}\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  @if (open) {\n    <ul\n      [id]=\"listboxId\"\n      [class]=\"dropdownClass\"\n      [class.left]=\"align === 'left'\"\n      [class.showScrollbar]=\"maxHeight !== 'none'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-owns]=\"optionIds.join(' ')\"\n    >\n      <ng-content />\n    </ul>\n  }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, NgClass, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class]=\"dropdownClass\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"] }]
+            args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, NgClass, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n} @else {\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n}\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  @if (open) {\n    <ul\n      [id]=\"listboxId\"\n      [class]=\"dropdownClass\"\n      [class.left]=\"align === 'left'\"\n      [class.showScrollbar]=\"maxHeight !== 'none'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-owns]=\"optionIds.join(' ')\"\n    >\n      <ng-content />\n    </ul>\n  }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
                 type: Input
             }], closeOnScroll: [{
@@ -7532,11 +7537,11 @@ class PickerOptionComponent {
         this.select.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\" />\n<ng-content *ngIf=\"!isClearOption\" />\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "@if (isClearOption) {\n  <lx-icon name=\"slash\" color=\"#d8d8d8\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, IconComponent], template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\" />\n<ng-content *ngIf=\"!isClearOption\" />\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
+            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent], template: "@if (isClearOption) {\n  <lx-icon name=\"slash\" color=\"#d8d8d8\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -7794,13 +7799,13 @@ class PickerComponent {
     propagateChange(_value) { }
     onTouched() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PickerComponent, deps: [{ token: i1$1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => PickerComponent)
             }
-        ], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\" />\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\" />\n  @if (open) {\n    <ul\n      class=\"pickerOptions\"\n      lxAutoclose\n      (autoclose)=\"closePicker()\"\n      role=\"listbox\"\n      [style.margin-left]=\"leftOffset\"\n      [attr.aria-activedescendant]=\"activeDescendantsId\"\n      [attr.aria-label]=\"listBoxAriaLabel\"\n      [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n    >\n      <ng-content />\n    </ul>\n  }\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"], dependencies: [{ kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PickerComponent, decorators: [{
             type: Component,
@@ -7810,7 +7815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => PickerComponent)
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AutocloseDirective], template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\" />\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AutocloseDirective], template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\" />\n  @if (open) {\n    <ul\n      class=\"pickerOptions\"\n      lxAutoclose\n      (autoclose)=\"closePicker()\"\n      role=\"listbox\"\n      [style.margin-left]=\"leftOffset\"\n      [attr.aria-activedescendant]=\"activeDescendantsId\"\n      [attr.aria-label]=\"listBoxAriaLabel\"\n      [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n    >\n      <ng-content />\n    </ul>\n  }\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
@@ -7840,11 +7845,11 @@ class PillItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <span data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PillItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-item', standalone: true, imports: [NgIf], template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'lx-pill-item', standalone: true, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <span data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], label: [{
@@ -7878,15 +7883,15 @@ class PillListComponent extends KeyboardSelectDirective {
     removePillViaKeyboard(pill) {
         this.remove.emit({ item: pill, isMouse: false });
     }
-    trackByProp(prop) {
-        return (index, pill) => (prop ? pill[prop] : index);
+    trackByProp(index, pill) {
+        return this.itemKey ? pill[this.itemKey] : index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PillListComponent, isStandalone: true, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  <li\n    *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (select)=\"removePillViaKeyboard(pill)\"\n    class=\"pill\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n      <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n    </ng-template>\n  </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PillListComponent, isStandalone: true, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PillListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, SelectableItemDirective, NgIf, NgTemplateOutlet, PillItemComponent, AsyncPipe], template: "<ul class=\"pills\" #keyboardSelectContainer>\n  <li\n    *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (select)=\"removePillViaKeyboard(pill)\"\n    class=\"pill\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n      <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n    </ng-template>\n  </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"] }]
+            args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SelectableItemDirective, NgTemplateOutlet, PillItemComponent, AsyncPipe], template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"] }]
         }], propDecorators: { pills: [{
                 type: Input
             }], labelKey: [{
@@ -8042,7 +8047,7 @@ class SelectListComponent extends BaseSelectDirective {
                 this.onChooseItem.emit(this.selection.id);
             }
             else if (this.dropdownComponent.options.length) {
-                this.onChooseItem.emit(this.dropdownComponent.options[this.highlightedIndex].id);
+                this.onChooseItem.emit(this.dropdownComponent.options[this.highlightedIndex]?.id);
             }
         });
         this.focusAndOpen();
@@ -8346,13 +8351,13 @@ class SingleSelectComponent extends BaseSelectDirective {
             : options.findIndex((option) => isEqual$1(selection, option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.6", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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\" #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: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\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      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\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      }\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      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <i class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      }\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -8362,7 +8367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SingleSelectComponent)
                         }
-                    ], standalone: true, imports: [NgIf, MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe], 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\" #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"] }]
+                    ], standalone: true, imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\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      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\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      }\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      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <i class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      }\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
                 type: Input
             }], selectionBackground: [{
@@ -8461,20 +8466,18 @@ class SortingDropdownComponent {
         return `sorting.${key}.label`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  />\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ option?.key ? (getSortLabel(option.key) | translate) : '' }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "@if (currentSorting) {\n  <lx-options-dropdown>\n    <lx-sorting-dropdown-trigger\n      lxKeyboardActionSource\n      [label]=\"NAME + '.sortBy' | translate\"\n      [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n    />\n    <lx-option-group (select)=\"applySortingMode($event)\">\n      @for (option of sortingOptions; track option.key) {\n        <lx-option [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n          {{ option?.key ? (getSortLabel(option.key) | translate) : '' }}\n        </lx-option>\n      }\n    </lx-option-group>\n    @if (showDirectionOptions) {\n      <lx-option-group (select)=\"applySortingDirection($event)\">\n        @for (sortDirection of sortingDirections; track sortDirection) {\n          <lx-option [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n            {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n          </lx-option>\n        }\n      </lx-option-group>\n    }\n  </lx-options-dropdown>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SortingDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-sorting-dropdown', standalone: true, imports: [
-                        NgIf,
                         OptionsDropdownComponent,
                         SortingDropdownTriggerComponent,
                         KeyboardActionSourceDirective,
                         OptionGroupComponent,
-                        NgFor,
                         OptionComponent,
                         TranslateModule
-                    ], template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  />\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ option?.key ? (getSortLabel(option.key) | translate) : '' }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n" }]
+                    ], template: "@if (currentSorting) {\n  <lx-options-dropdown>\n    <lx-sorting-dropdown-trigger\n      lxKeyboardActionSource\n      [label]=\"NAME + '.sortBy' | translate\"\n      [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n    />\n    <lx-option-group (select)=\"applySortingMode($event)\">\n      @for (option of sortingOptions; track option.key) {\n        <lx-option [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n          {{ option?.key ? (getSortLabel(option.key) | translate) : '' }}\n        </lx-option>\n      }\n    </lx-option-group>\n    @if (showDirectionOptions) {\n      <lx-option-group (select)=\"applySortingDirection($event)\">\n        @for (sortDirection of sortingDirections; track sortDirection) {\n          <lx-option [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n            {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n          </lx-option>\n        }\n      </lx-option-group>\n    }\n  </lx-options-dropdown>\n}\n" }]
         }], propDecorators: { currentSorting: [{
                 type: Input
             }], sortingOptions: [{
@@ -8512,11 +8515,11 @@ class SwitchComponent {
         setTimeout(() => checkbox.focus(), 150);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SwitchComponent, isStandalone: true, selector: "lx-switch", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--lxFontSize, 14px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SwitchComponent, isStandalone: true, selector: "lx-switch", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  @if (label) {\n    <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  }\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--lxFontSize, 14px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-switch', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--lxFontSize, 14px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"] }]
+            args: [{ selector: 'lx-switch', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  @if (label) {\n    <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  }\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:var(--lxFontSize, 14px)}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], size: [{
@@ -8657,7 +8660,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: "19.2.6", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: ContenteditableDirective, decorators: [{
@@ -8666,7 +8669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     selector: '[lxContenteditableModel]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$8.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$7.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
                 type: Input
             }], lxContenteditableModelChange: [{
                 type: Output
@@ -9089,7 +9092,6 @@ class LxFormsModule {
             LxDragAndDropListModule,
             BasicDropdownComponent,
             ExpandedDropdownComponent,
-            BreadcrumbComponent,
             CurrencyInputComponent,
             DateInputComponent,
             FormErrorComponent,
@@ -10137,7 +10139,7 @@ class TabComponent {
             this.select();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$9.Router }, { token: i1$9.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$8.Router }, { token: i1$8.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <i class=\"icon {{ icon }}\"></i>\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:var(--lxFontLargeSize, 16px);opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
@@ -10146,7 +10148,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet], template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <i class=\"icon {{ icon }}\"></i>\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:var(--lxFontLargeSize, 16px);opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$9.Router }, { type: i1$9.ActivatedRoute }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$8.Router }, { type: i1$8.ActivatedRoute }], propDecorators: { icon: [{
                 type: Input
             }], label: [{
                 type: Input