@leanix/components 0.4.68 → 0.4.69

package/fesm2022/leanix-components.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Component, Input, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Directive, Injectable, ElementRef, Inject, ViewChild, ContentChildren, Pipe, Optional, NgModule, ViewChildren, forwardRef, ContentChild, TemplateRef, SecurityContext, Self, Host } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-import * as i1$2 from '@angular/common';
-import { NgClass, NgIf, AsyncPipe, NgFor, NgStyle, CommonModule, formatDate, NgTemplateOutlet } from '@angular/common';
-import * as i1$7 from '@angular/cdk/portal';
+import * as i3 from '@angular/common';
+import { NgClass, NgIf, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, CommonModule, formatDate } from '@angular/common';
+import * as i1$8 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { __decorate } from 'tslib';
 import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toString, padCharsStart, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
 import * as i6 from 'rxjs';
@@ -20,18 +20,18 @@ import { isArray, isEqual, split, isString, intersection, isNil, curry } from 'l
 import { Renderer, marked } from 'marked';
 import * as i1$3 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from 'ngx-infinite-scroll';
+import * as i1$4 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i1$2 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import * as i1$4 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2$2 from '@angular/cdk/a11y';
+import * as i1$5 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/cdk/a11y';
 import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
-import * as i1$5 from '@angular/cdk/bidi';
-import * as i1$6 from '@angular/platform-browser';
+import * as i1$6 from '@angular/cdk/bidi';
+import * as i1$7 from '@angular/platform-browser';
 import { style, animate, transition, trigger } from '@angular/animations';
-import * as i1$8 from '@ncstate/sat-popover';
+import * as i1$9 from '@ncstate/sat-popover';
 import { SatPopover, SatPopoverModule } from '@ncstate/sat-popover';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { RouterLinkActive, RouterLink, RouterModule } from '@angular/router';
@@ -2021,11 +2021,11 @@ class BasicDropdownItemComponent {
         return !!this.description;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BasicDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: { label: "label", description: "description", highlightTerm: "highlightTerm", labelFontWeight: "labelFontWeight", descriptionFontStyle: "descriptionFontStyle", descriptionStyleOptions: "descriptionStyleOptions" }, host: { properties: { "class.hasDescription": "this.hasDescription" } }, ngImport: i0, template: "<div [class.boldLabel]=\"labelFontWeight === 'bold'\" [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n<div\n  class=\"optionDescription\"\n  [style.font-style]=\"descriptionFontStyle\"\n  [ngClass]=\"{ maxTextLines: descriptionStyleOptions?.maxLines }\"\n  [style.-webkit-line-clamp]=\"descriptionStyleOptions?.maxLines || 'inherit'\"\n>\n  {{ description }}\n</div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#61779d;font-size:11px}.optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HighlightTermPipe, name: "lxHighlightTerm" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BasicDropdownItemComponent, isStandalone: true, selector: "lx-basic-dropdown-item", inputs: { label: "label", description: "description", highlightTerm: "highlightTerm", labelFontWeight: "labelFontWeight", descriptionFontStyle: "descriptionFontStyle", descriptionStyleOptions: "descriptionStyleOptions" }, host: { properties: { "class.hasDescription": "this.hasDescription" } }, ngImport: i0, template: "<div [class.boldLabel]=\"labelFontWeight === 'bold'\" [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n<div\n  class=\"optionDescription\"\n  [style.font-style]=\"descriptionFontStyle\"\n  [ngClass]=\"{ maxTextLines: descriptionStyleOptions?.maxLines }\"\n  [style.-webkit-line-clamp]=\"descriptionStyleOptions?.maxLines || 'inherit'\"\n>\n  {{ description }}\n</div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#61779d;font-size:11px}.optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HighlightTermPipe, name: "lxHighlightTerm" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BasicDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-basic-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.boldLabel]=\"labelFontWeight === 'bold'\" [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n<div\n  class=\"optionDescription\"\n  [style.font-style]=\"descriptionFontStyle\"\n  [ngClass]=\"{ maxTextLines: descriptionStyleOptions?.maxLines }\"\n  [style.-webkit-line-clamp]=\"descriptionStyleOptions?.maxLines || 'inherit'\"\n>\n  {{ description }}\n</div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#61779d;font-size:11px}.optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}\n"] }]
+            args: [{ selector: 'lx-basic-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, HighlightTermPipe], template: "<div [class.boldLabel]=\"labelFontWeight === 'bold'\" [innerHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n<div\n  class=\"optionDescription\"\n  [style.font-style]=\"descriptionFontStyle\"\n  [ngClass]=\"{ maxTextLines: descriptionStyleOptions?.maxLines }\"\n  [style.-webkit-line-clamp]=\"descriptionStyleOptions?.maxLines || 'inherit'\"\n>\n  {{ description }}\n</div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#61779d;font-size:11px}.optionDescription.maxTextLines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:inherit;-webkit-box-orient:vertical}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], description: [{
@@ -2082,12 +2082,13 @@ class SelectableItemDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectableItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: { scrollInContainer: "scrollInContainer", lxSelectableItem: "lxSelectableItem" }, outputs: { select: "select" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectableItemDirective, isStandalone: true, selector: "[lxSelectableItem]", inputs: { scrollInContainer: "scrollInContainer", lxSelectableItem: "lxSelectableItem" }, outputs: { select: "select" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectableItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxSelectableItem]'
+                    selector: '[lxSelectableItem]',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrollInContainer: [{
                 type: Input
@@ -2269,11 +2270,25 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
         this.createNewOptionSelected.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    <li\n      *ngIf=\"newOptionLabel && isNewItem\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onNewItemSelected()\"\n      (select)=\"onNewItemSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable onTheFlyOption\"\n      [attr.aria-label]=\"newOptionLabel\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n    </li>\n    <li\n      *ngIf=\"showCreateNewOption\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOptionSelected()\"\n      (select)=\"onCreateNewOptionSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable newEntryOption\"\n    >\n      <span class=\"newEntryContent\">\n        <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n          <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-template #defaultNewOption>\n          <span>\n            {{ NAME + '.new' | translate }}\n          </span>\n        </ng-template>\n      </span>\n    </li>\n    <li\n      *ngIf=\"descriptionTemplateRef\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option description disabledItem\"\n    >\n      <span class=\"descriptionContent\">\n        <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n      </span>\n    </li>\n    <li\n      *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable noOptionsAvailable\"\n      [attr.aria-label]=\"noResultsText ?? NAME + '.noResults' | translate\"\n    >\n      {{ noResultsText ?? NAME + '.noResults' | translate }}\n    </li>\n    <li\n      *ngIf=\"placeholder\"\n      tabindex=\"-1\"\n      class=\"option keyboardSelectable clearSelection\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"selectOption(null)\"\n      (select)=\"selectOption(null)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [attr.aria-label]=\"placeholder\"\n    >\n      {{ placeholder }}\n    </li>\n    <li\n      *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"selectOption(option)\"\n      (select)=\"selectOption(option)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [class.initiallySelected]=\"index === initiallySelectedIndex\"\n      [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n      [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n    >\n      <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n        <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span>\n          {{ labelKey ? option[labelKey] : option }}\n        </span>\n      </ng-template>\n    </li>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    <li\n      *ngIf=\"newOptionLabel && isNewItem\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onNewItemSelected()\"\n      (select)=\"onNewItemSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable onTheFlyOption\"\n      [attr.aria-label]=\"newOptionLabel\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n    </li>\n    <li\n      *ngIf=\"showCreateNewOption\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOptionSelected()\"\n      (select)=\"onCreateNewOptionSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable newEntryOption\"\n    >\n      <span class=\"newEntryContent\">\n        <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n          <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-template #defaultNewOption>\n          <span>\n            {{ NAME + '.new' | translate }}\n          </span>\n        </ng-template>\n      </span>\n    </li>\n    <li\n      *ngIf=\"descriptionTemplateRef\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option description disabledItem\"\n    >\n      <span class=\"descriptionContent\">\n        <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n      </span>\n    </li>\n    <li\n      *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable noOptionsAvailable\"\n      [attr.aria-label]=\"noResultsText ?? NAME + '.noResults' | translate\"\n    >\n      {{ noResultsText ?? NAME + '.noResults' | translate }}\n    </li>\n    <li\n      *ngIf=\"placeholder\"\n      tabindex=\"-1\"\n      class=\"option keyboardSelectable clearSelection\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"selectOption(null)\"\n      (select)=\"selectOption(null)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [attr.aria-label]=\"placeholder\"\n    >\n      {{ placeholder }}\n    </li>\n    <li\n      *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"selectOption(option)\"\n      (select)=\"selectOption(option)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [class.initiallySelected]=\"index === initiallySelectedIndex\"\n      [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n      [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n    >\n      <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n        <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span>\n          {{ labelKey ? option[labelKey] : option }}\n        </span>\n      </ng-template>\n    </li>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$2.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: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-basic-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    <li\n      *ngIf=\"newOptionLabel && isNewItem\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onNewItemSelected()\"\n      (select)=\"onNewItemSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable onTheFlyOption\"\n      [attr.aria-label]=\"newOptionLabel\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n    </li>\n    <li\n      *ngIf=\"showCreateNewOption\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOptionSelected()\"\n      (select)=\"onCreateNewOptionSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable newEntryOption\"\n    >\n      <span class=\"newEntryContent\">\n        <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n          <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-template #defaultNewOption>\n          <span>\n            {{ NAME + '.new' | translate }}\n          </span>\n        </ng-template>\n      </span>\n    </li>\n    <li\n      *ngIf=\"descriptionTemplateRef\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option description disabledItem\"\n    >\n      <span class=\"descriptionContent\">\n        <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n      </span>\n    </li>\n    <li\n      *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable noOptionsAvailable\"\n      [attr.aria-label]=\"noResultsText ?? NAME + '.noResults' | translate\"\n    >\n      {{ noResultsText ?? NAME + '.noResults' | translate }}\n    </li>\n    <li\n      *ngIf=\"placeholder\"\n      tabindex=\"-1\"\n      class=\"option keyboardSelectable clearSelection\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"selectOption(null)\"\n      (select)=\"selectOption(null)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [attr.aria-label]=\"placeholder\"\n    >\n      {{ placeholder }}\n    </li>\n    <li\n      *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"selectOption(option)\"\n      (select)=\"selectOption(option)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [class.initiallySelected]=\"index === initiallySelectedIndex\"\n      [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n      [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n    >\n      <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n        <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span>\n          {{ labelKey ? option[labelKey] : option }}\n        </span>\n      </ng-template>\n    </li>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"] }]
+            args: [{ selector: 'lx-basic-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        NgClass,
+                        InfiniteScrollModule,
+                        SelectableItemDirective,
+                        BadgeComponent,
+                        NgFor,
+                        SpinnerComponent,
+                        AsyncPipe,
+                        UpperCasePipe,
+                        TranslateModule
+                    ], template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <ul\n    class=\"options {{ padding }}Padding lxThinScrollbar\"\n    #keyboardSelectContainer\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    [ngClass]=\"{ truncateOptions: truncateOptions }\"\n    (scrolled)=\"onScroll()\"\n  >\n    <li\n      *ngIf=\"newOptionLabel && isNewItem\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onNewItemSelected()\"\n      (select)=\"onNewItemSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable onTheFlyOption\"\n      [attr.aria-label]=\"newOptionLabel\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n    </li>\n    <li\n      *ngIf=\"showCreateNewOption\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOptionSelected()\"\n      (select)=\"onCreateNewOptionSelected()\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable newEntryOption\"\n    >\n      <span class=\"newEntryContent\">\n        <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n          <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-template #defaultNewOption>\n          <span>\n            {{ NAME + '.new' | translate }}\n          </span>\n        </ng-template>\n      </span>\n    </li>\n    <li\n      *ngIf=\"descriptionTemplateRef\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option description disabledItem\"\n    >\n      <span class=\"descriptionContent\">\n        <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n      </span>\n    </li>\n    <li\n      *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option keyboardSelectable noOptionsAvailable\"\n      [attr.aria-label]=\"noResultsText ?? NAME + '.noResults' | translate\"\n    >\n      {{ noResultsText ?? NAME + '.noResults' | translate }}\n    </li>\n    <li\n      *ngIf=\"placeholder\"\n      tabindex=\"-1\"\n      class=\"option keyboardSelectable clearSelection\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"selectOption(null)\"\n      (select)=\"selectOption(null)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [attr.aria-label]=\"placeholder\"\n    >\n      {{ placeholder }}\n    </li>\n    <li\n      *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"selectOption(option)\"\n      (select)=\"selectOption(option)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      [class.initiallySelected]=\"index === initiallySelectedIndex\"\n      [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n      [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n    >\n      <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n        <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span>\n          {{ labelKey ? option[labelKey] : option }}\n        </span>\n      </ng-template>\n    </li>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], initiallySelectedIndex: [{
@@ -2370,13 +2385,14 @@ class KeyboardActionSourceDirective {
         this.destroyed$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardActionSourceDirective, isStandalone: true, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'keyboardActionSource',
-                    selector: '[lxKeyboardActionSource]'
+                    selector: '[lxKeyboardActionSource]',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
@@ -2393,11 +2409,11 @@ class OptionGroupComponent {
         this.select.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionGroupComponent, 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></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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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></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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></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, imports: [NgIf], template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></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: [{
@@ -2452,11 +2468,11 @@ class OptionComponent {
         this.highlight.emit(this.isHighlighted);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", 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: "17.0.2", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\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></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{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\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></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{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option', template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\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></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{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
+            args: [{ selector: 'lx-option', standalone: true, imports: [NgIf, NgSwitch, NgSwitchCase], template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\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></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{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
         }], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
                     type: Optional
                 }, {
@@ -2661,11 +2677,11 @@ class CdkOptionsDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CdkOptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }, { propertyName: "tooltips", predicate: TooltipDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CdkOptionsDropdownComponent, isStandalone: true, selector: "lx-cdk-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }, { propertyName: "tooltips", predicate: TooltipDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CdkOptionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-cdk-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
+            args: [{ selector: 'lx-cdk-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CdkOverlayOrigin, CdkConnectedOverlay], template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open\"\n  (overlayOutsideClick)=\"closeDropdown()\"\n>\n  <ul\n    #dropdown\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdown']
@@ -2723,11 +2739,11 @@ class BreadcrumbComponent {
         return !!breadcrumb.breadcrumbs;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BreadcrumbComponent, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n    <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n      <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n        <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n        <lx-option\n          *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n          [hasSelectedState]=\"false\"\n          (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n        >\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      </lx-cdk-options-dropdown>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n    <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n      <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n    <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n      <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n        <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n        <lx-option\n          *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n          [hasSelectedState]=\"false\"\n          (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n        >\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      </lx-cdk-options-dropdown>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n    <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n      <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-breadcrumb', template: "<div class=\"breadcrumbs\">\n  <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n    <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n      <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n        <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n        <lx-option\n          *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n          [hasSelectedState]=\"false\"\n          (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n        >\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      </lx-cdk-options-dropdown>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n    <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n      <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"] }]
+            args: [{ selector: 'lx-breadcrumb', standalone: true, imports: [NgFor, NgIf, CdkOptionsDropdownComponent, KeyboardActionSourceDirective, OptionComponent], template: "<div class=\"breadcrumbs\">\n  <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n    <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n      <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n        <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n        <lx-option\n          *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n          [hasSelectedState]=\"false\"\n          (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n        >\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      </lx-cdk-options-dropdown>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n    <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n      <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }] } });
@@ -2839,11 +2855,11 @@ class CdkOptionsSubDropdownComponent {
         this.mouseInside$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CdkOptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CdkOptionsSubDropdownComponent, selector: "lx-cdk-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CdkOptionsSubDropdownComponent, isStandalone: true, selector: "lx-cdk-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}\n"], dependencies: [{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CdkOptionsSubDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-cdk-options-sub-dropdown', template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}\n"] }]
+            args: [{ selector: 'lx-cdk-options-sub-dropdown', standalone: true, imports: [CdkConnectedOverlay, AutocloseDirective], template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger.elementRef\" [cdkConnectedOverlayOpen]=\"open\">\n  <ul\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    class=\"sub-dropdown\"\n    [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    #dropdown\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none;max-height:50vh;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: Input
             }], align: [{
@@ -2890,11 +2906,11 @@ class CopyButtonComponent {
         return isString(this.data) ? this.data : JSON.stringify(this.data, null, '\t');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CopyButtonComponent, deps: [{ token: i1$3.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CopyButtonComponent, selector: "lx-copy-button", inputs: { data: "data", dataDescription: "dataDescription", btn: "btn" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CopyButtonComponent, isStandalone: true, selector: "lx-copy-button", inputs: { data: "data", dataDescription: "dataDescription", btn: "btn" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CopyButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-copy-button', template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n" }]
+            args: [{ selector: 'lx-copy-button', standalone: true, imports: [TranslateModule], template: "<button (click)=\"copy()\" class=\"btn btn-{{ btn }} btnCopyJson\">\n  <i class=\"far fa-copy\"></i>\n  <span>\n    {{ 'buttons.copy' | translate }}\n  </span>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1$3.Clipboard }], propDecorators: { data: [{
                 type: Input
             }], dataDescription: [{
@@ -2907,6 +2923,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                 type: Output
             }] } });
 
+class MarkInvalidDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.lxMarkInvalid = false;
+        this.destroyed$ = new Subject();
+    }
+    ngOnInit() {
+        this.lxMarkInvalid$.pipe(takeUntil(this.destroyed$)).subscribe((invalid) => {
+            const border = invalid ? `1px solid ${getCssVariable('--lx-color-danger')}` : '';
+            this.renderer.setStyle(this.element.nativeElement, 'border', border);
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MarkInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: MarkInvalidDirective, isStandalone: true, selector: "[lxMarkInvalid]", inputs: { lxMarkInvalid: "lxMarkInvalid" }, ngImport: i0 }); }
+}
+__decorate([
+    Observe('lxMarkInvalid')
+], MarkInvalidDirective.prototype, "lxMarkInvalid$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MarkInvalidDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxMarkInvalid]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { lxMarkInvalid: [{
+                type: Input
+            }], lxMarkInvalid$: [] } });
+
 // Currency symbol map extracted from: http://symbologic.info/currency.htm
 // Using custom symbology since Angular 2 currency pipe does not support all currency symbols:
 // https://github.com/angular/angular/issues/6724
@@ -3017,49 +3065,18 @@ class CurrencySymbolComponent {
         this.currency$ = this.code$.pipe(map((code) => CURRENCY_SYMBOL_MAP[code] || code));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CurrencySymbolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: { code: "code" }, ngImport: i0, template: "<span [innerHtml]=\"currency$ | async\"></span>\n", dependencies: [{ kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CurrencySymbolComponent, isStandalone: true, selector: "lx-currency-symbol", inputs: { code: "code" }, ngImport: i0, template: "<span [innerHtml]=\"currency$ | async\"></span>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     Observe('code')
 ], CurrencySymbolComponent.prototype, "code$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CurrencySymbolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-currency-symbol', template: "<span [innerHtml]=\"currency$ | async\"></span>\n" }]
+            args: [{ selector: 'lx-currency-symbol', standalone: true, imports: [AsyncPipe], template: "<span [innerHtml]=\"currency$ | async\"></span>\n" }]
         }], propDecorators: { code: [{
                 type: Input
             }], code$: [] } });
 
-class MarkInvalidDirective {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.lxMarkInvalid = false;
-        this.destroyed$ = new Subject();
-    }
-    ngOnInit() {
-        this.lxMarkInvalid$.pipe(takeUntil(this.destroyed$)).subscribe((invalid) => {
-            const border = invalid ? `1px solid ${getCssVariable('--lx-color-danger')}` : '';
-            this.renderer.setStyle(this.element.nativeElement, 'border', border);
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MarkInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: { lxMarkInvalid: "lxMarkInvalid" }, ngImport: i0 }); }
-}
-__decorate([
-    Observe('lxMarkInvalid')
-], MarkInvalidDirective.prototype, "lxMarkInvalid$", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MarkInvalidDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lxMarkInvalid]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { lxMarkInvalid: [{
-                type: Input
-            }], lxMarkInvalid$: [] } });
-
 class CurrencyInputComponent {
     get allowedCharacters() {
         return this.fieldDefinitionType === 'DOUBLE' ? new RegExp(`[0-9\e\\${this.decimalSeparator}\]`) : /[0-9\e\\]/;
@@ -3145,13 +3162,13 @@ class CurrencyInputComponent {
         return value.indexOf(',') > -1 || value.indexOf('.') > -1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: CurrencyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CurrencyInputComponent, selector: "lx-currency-input", inputs: { code: "code", decimalSeparator: "decimalSeparator", placeholder: "placeholder", data: "data", disabled: "disabled", mode: "mode", fieldDefinitionType: "fieldDefinitionType", iconPosition: "iconPosition", format: "format", markInvalid: "markInvalid" }, outputs: { onFocusLost: "onFocusLost", onChange: "onChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: CurrencyInputComponent, isStandalone: true, selector: "lx-currency-input", inputs: { code: "code", decimalSeparator: "decimalSeparator", placeholder: "placeholder", data: "data", 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\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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')
@@ -3164,7 +3181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             useExisting: forwardRef(() => CurrencyInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"] }]
+                    ], 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\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
                 type: Input
             }], decimalSeparator: [{
@@ -3466,12 +3483,12 @@ 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: "17.0.2", ngImport: i0, type: DatePickerInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DatePickerInnerComponent, 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: "14.0.0", version: "17.0.2", 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></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatePickerInnerComponent, decorators: [{
             type: Component,
@@ -3483,7 +3500,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
     <div *ngIf="datepickerMode" class="well well-sm bg-faded p-a card" role="application">
       <ng-content></ng-content>
     </div>
-  `
+  `,
+                    standalone: true,
+                    imports: [NgIf]
                 }]
         }], propDecorators: { locale: [{
                 type: Input
@@ -3541,37 +3560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                 type: Input
             }] } });
 
-class DatepickerConfig {
-    constructor() {
-        this.locale = 'en';
-        this.datepickerMode = 'day';
-        this.startingDay = 0;
-        this.yearRange = 20;
-        this.minMode = 'day';
-        this.maxMode = 'year';
-        this.showWeeks = true;
-        this.formatDay = 'DD';
-        this.formatMonth = 'MMMM';
-        this.formatYear = 'YYYY';
-        this.formatDayHeader = 'dd';
-        this.formatDayTitle = 'MMMM YYYY';
-        this.formatMonthTitle = 'YYYY';
-        this.onlyCurrentMonth = false;
-        this.monthColLimit = 3;
-        this.yearColLimit = 5;
-        this.shortcutPropagation = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerConfig }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerConfig, decorators: [{
-            type: Injectable
-        }] });
-
 const isBs3 = () => true;
 
-// @deprecated
-// tslint:disable
 class DayPickerComponent {
     constructor(datePicker) {
         this.labels = [];
@@ -3657,7 +3647,7 @@ class DayPickerComponent {
         return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DayPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DayPickerComponent, selector: "daypicker", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DayPickerComponent, isStandalone: true, selector: "daypicker", ngImport: i0, template: `
     <table
       *ngIf="datePicker.datepickerMode === 'day'"
       role="grid"
@@ -3760,7 +3750,7 @@ class DayPickerComponent {
         </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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DayPickerComponent, decorators: [{
             type: Component,
@@ -3867,11 +3857,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
         </ng-template>
       </tbody>
     </table>
-  `, styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
-// @deprecated
-// tslint:disable
 class MonthPickerComponent {
     constructor(datePicker) {
         this.rows = [];
@@ -3905,7 +3893,7 @@ class MonthPickerComponent {
         this.datePicker.refreshView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MonthPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: MonthPickerComponent, selector: "monthpicker", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: MonthPickerComponent, isStandalone: true, selector: "monthpicker", ngImport: i0, template: `
     <table *ngIf="datePicker.datepickerMode === 'month'" role="grid">
       <thead>
         <tr>
@@ -3956,7 +3944,7 @@ class MonthPickerComponent {
         </tr>
       </tbody>
     </table>
-  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
@@ -4011,7 +3999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
         </tr>
       </tbody>
     </table>
-  `, styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+  `, standalone: true, imports: [NgIf, NgClass, NgFor], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
 // @deprecated
@@ -4051,7 +4039,7 @@ class YearPickerComponent {
         return ((year - 1) / this.datePicker.yearRange) * this.datePicker.yearRange + 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: YearPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: YearPickerComponent, selector: "yearpicker", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: YearPickerComponent, isStandalone: true, selector: "yearpicker", ngImport: i0, template: `
     <table *ngIf="datePicker.datepickerMode === 'year'" role="grid">
       <thead>
         <tr>
@@ -4103,7 +4091,7 @@ class YearPickerComponent {
         </tr>
       </tbody>
     </table>
-  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: YearPickerComponent, decorators: [{
             type: Component,
@@ -4159,9 +4147,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
         </tr>
       </tbody>
     </table>
-  `, styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+  `, standalone: true, imports: [NgIf, NgClass, NgFor], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
+class DatepickerConfig {
+    constructor() {
+        this.locale = 'en';
+        this.datepickerMode = 'day';
+        this.startingDay = 0;
+        this.yearRange = 20;
+        this.minMode = 'day';
+        this.maxMode = 'year';
+        this.showWeeks = true;
+        this.formatDay = 'DD';
+        this.formatMonth = 'MMMM';
+        this.formatYear = 'YYYY';
+        this.formatDayHeader = 'dd';
+        this.formatDayTitle = 'MMMM YYYY';
+        this.formatMonthTitle = 'YYYY';
+        this.onlyCurrentMonth = false;
+        this.monthColLimit = 3;
+        this.yearColLimit = 5;
+        this.shortcutPropagation = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerConfig }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerConfig, decorators: [{
+            type: Injectable
+        }] });
+
 const DATEPICKER_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DatePickerComponent),
@@ -4225,7 +4240,7 @@ class DatePickerComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatePickerComponent, deps: [{ token: DatepickerConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DatePickerComponent, selector: "datepicker", inputs: { datepickerMode: "datepickerMode", initDate: "initDate", 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", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", customClass: "customClass", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", activeDateChange: "activeDateChange" }, providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_datePicker", first: true, predicate: DatePickerInnerComponent, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DatePickerComponent, isStandalone: true, selector: "datepicker", inputs: { datepickerMode: "datepickerMode", initDate: "initDate", 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", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", customClass: "customClass", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", activeDateChange: "activeDateChange" }, providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_datePicker", first: true, predicate: DatePickerInnerComponent, descendants: true, static: true }], ngImport: i0, template: `
     <datepicker-inner
       [activeDate]="activeDate"
       (update)="onUpdate($event)"
@@ -4301,7 +4316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
       <yearpicker tabindex="0"></yearpicker>
     </datepicker-inner>
   `,
-                    providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR]
+                    providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR],
+                    standalone: true,
+                    imports: [DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent]
                 }]
         }], ctorParameters: () => [{ type: DatepickerConfig }], propDecorators: { datepickerMode: [{
                 type: Input
@@ -4525,10 +4542,10 @@ class DateInputComponent {
             : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DATE_FORMATS }, { token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DateInputComponent, 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" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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" }] }); }
 }
 __decorate([
     Observe('initDateString')
@@ -4538,7 +4555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             args: [{ selector: 'lx-date-input', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-                    ], template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"] }]
+                    ], standalone: true, imports: [NgIf, CdkOverlayOrigin, FormsModule, AutofocusDirective, CdkConnectedOverlay, DatePickerComponent, CustomDatePipe], template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_FORMATS]
@@ -4619,15 +4636,14 @@ class DatepickerUiModule {
         return { ngModule: DatepickerUiModule, providers: [DatepickerConfig] };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: DatepickerUiModule, declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent], imports: [CommonModule, FormsModule], exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerUiModule, imports: [CommonModule, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: DatepickerUiModule, imports: [DatePickerComponent], exports: [DatePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerUiModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DatepickerUiModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule],
-                    declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent],
-                    exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent]
+                    imports: [DatePickerComponent],
+                    exports: [DatePickerComponent]
                 }]
         }] });
 
@@ -4652,11 +4668,11 @@ class DragAndDropListItemComponent {
         this.element.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DragAndDropListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\"></ng-container>\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n      >\n        <i class=\"far {{ act.icon }} actionIcon\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.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: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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\"></ng-container>\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n      >\n        <i class=\"far {{ act.icon }} actionIcon\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.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", "showSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-drag-and-drop-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\"></ng-container>\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n      >\n        <i class=\"far {{ act.icon }} actionIcon\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.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: [NgIf, NgTemplateOutlet, NgFor, ButtonComponent], template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\"></ng-container>\n</ng-container>\n<ng-template #defaultTemplate>\n  <div class=\"drag-item-wrappper\">\n    <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n      <button\n        lx-button\n        *ngFor=\"let act of actions; trackBy: trackByAction\"\n        (click)=\"action.emit({ actionId: act.id, item: item })\"\n        [title]=\"act.label\"\n        [square]=\"true\"\n        mode=\"ghost\"\n        size=\"small\"\n        class=\"action-button\"\n        [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n      >\n        <i class=\"far {{ act.icon }} actionIcon\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.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: [{
@@ -4752,15 +4768,16 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$4.CdkDrag }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$5.CdkDrag }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardSortableItemDirective, isStandalone: true, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxKeyboardSortableItem]'
+                    selector: '[lxKeyboardSortableItem]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$4.CdkDrag }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$5.CdkDrag }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -4824,7 +4841,7 @@ class KeyboardSortableListDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardSortableListDirective, isStandalone: true, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0 }); }
 }
 __decorate([
     Observe('keyboardSortableItems')
@@ -4832,7 +4849,8 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardSortableListDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxKeyboardSortableList]'
+                    selector: '[lxKeyboardSortableList]',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
                 type: Input
@@ -4896,11 +4914,22 @@ class DragAndDropListComponent {
         return item.item;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\"></ng-container>\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #1666ee}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\"></ng-container>\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #1666ee}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DragAndDropListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-drag-and-drop-list', template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\"></ng-container>\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #1666ee}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"] }]
+            args: [{ selector: 'lx-drag-and-drop-list', standalone: true, imports: [
+                        NgIf,
+                        CdkDropList,
+                        KeyboardSortableListDirective,
+                        NgFor,
+                        CdkDrag,
+                        KeyboardSortableItemDirective,
+                        DragAndDropListItemComponent,
+                        NgTemplateOutlet,
+                        AsyncPipe,
+                        TranslateModule
+                    ], template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n  cdkDropList\n  class=\"list\"\n  role=\"listbox\"\n  lxKeyboardSortableList\n  [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n  [cdkDropListData]=\"items$ | async\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <li\n    *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n    #listItemParent\n    class=\"item\"\n    cdkDrag\n    cdkDragLockAxis=\"y\"\n    [cdkDragData]=\"itemComponent.item\"\n    [cdkDragDisabled]=\"!itemComponent.draggable\"\n    [class.dark]=\"color === 'dark'\"\n    [class.big]=\"fontSize === 'big'\"\n    [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n    [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n    [lxKeyboardItemData]=\"itemComponent.item\"\n    [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n    [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n    (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n  >\n    <lx-drag-and-drop-list-item\n      class=\"dragAndDropItem\"\n      [item]=\"itemComponent.item\"\n      [draggable]=\"itemComponent.draggable\"\n      [actions]=\"itemComponent.actions\"\n      (action)=\"emitContentChildAction($event)\"\n    >\n      <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n        <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\"></ng-container>\n      </ng-template>\n    </lx-drag-and-drop-list-item>\n  </li>\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #1666ee}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], labelFontWeight: [{
@@ -4929,14 +4958,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
 
 class LxDragAndDropListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxDragAndDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: LxDragAndDropListModule, declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent], imports: [CommonModule, DragDropModule, LxCoreUiModule, i1$1.TranslateModule], exports: [DragAndDropListComponent, DragAndDropListItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule, DragDropModule, LxCoreUiModule, TranslateModule.forChild()] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule,
+            DragDropModule,
+            LxCoreUiModule, i1$1.TranslateModule, KeyboardSortableItemDirective,
+            KeyboardSortableListDirective,
+            DragAndDropListComponent,
+            DragAndDropListItemComponent], exports: [DragAndDropListComponent, DragAndDropListItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule,
+            DragDropModule,
+            LxCoreUiModule,
+            TranslateModule.forChild(),
+            DragAndDropListComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxDragAndDropListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent],
-                    imports: [CommonModule, DragDropModule, LxCoreUiModule, TranslateModule.forChild()],
+                    imports: [
+                        CommonModule,
+                        DragDropModule,
+                        LxCoreUiModule,
+                        TranslateModule.forChild(),
+                        KeyboardSortableItemDirective,
+                        KeyboardSortableListDirective,
+                        DragAndDropListComponent,
+                        DragAndDropListItemComponent
+                    ],
                     exports: [DragAndDropListComponent, DragAndDropListItemComponent]
                 }]
         }] });
@@ -4952,11 +4998,11 @@ class ErrorMessageComponent {
         this.cd = cd;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ErrorMessageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ErrorMessageComponent, selector: "lx-error-message", inputs: { key: "key" }, ngImport: i0, template: `<div class="error" *ngIf="_key">{{ _key | translate }}</div>`, isInline: true, styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ErrorMessageComponent, isStandalone: true, selector: "lx-error-message", inputs: { key: "key" }, ngImport: i0, template: `<div class="error" *ngIf="_key">{{ _key | translate }}</div>`, isInline: true, styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ErrorMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-error-message', template: `<div class="error" *ngIf="_key">{{ _key | translate }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".error{color:#f96464;padding:4px}\n"] }]
+            args: [{ selector: 'lx-error-message', template: `<div class="error" *ngIf="_key">{{ _key | translate }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, TranslateModule], styles: [".error{color:#f96464;padding:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { key: [{
                 type: Input
             }] } });
@@ -4969,11 +5015,11 @@ class ExpandedDropdownComponent extends KeyboardSelectDirective {
         this.onChooseItem = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ExpandedDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ExpandedDropdownComponent, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <title>Button/Text/Primary/Medium</title>\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#1666EE\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\"></circle>\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    ></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:14px;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: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ExpandedDropdownComponent, isStandalone: true, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <title>Button/Text/Primary/Medium</title>\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#1666EE\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\"></circle>\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    ></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:14px;height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ExpandedDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-expanded-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <title>Button/Text/Primary/Medium</title>\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#1666EE\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\"></circle>\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    ></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:14px;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: [NgIf, NgFor, SelectableItemDirective, NgTemplateOutlet, AsyncPipe, TranslateModule], template: "<ul class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  <li *ngIf=\"options?.length === 0\" tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index\"\n    tabindex=\"-1\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"onChooseItem.emit(option.id)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span [title]=\"option.name\">\n        {{ option.name }}\n      </span>\n    </ng-template>\n    <div class=\"iconContainer\">\n      <svg\n        width=\"32px\"\n        height=\"32px\"\n        viewBox=\"0 0 32 32\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <title>Button/Text/Primary/Medium</title>\n        <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n            <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n              <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#1666EE\">\n                  <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\"></circle>\n                </g>\n                <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                  <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                    <path\n                      d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                      id=\"Path\"\n                    ></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </li>\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:14px;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: [{
@@ -5003,11 +5049,11 @@ class FormErrorComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: FormErrorComponent, 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: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-form-error', 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: [NgFor, TranslateModule], template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}\n"] }]
         }], propDecorators: { namespace: [{
                 type: Input
             }], form: [{
@@ -5038,11 +5084,11 @@ class IconComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: IconComponent, selector: "lx-icon", inputs: { name: "name", color: "color", fontAwsomeStyle: "fontAwsomeStyle", size: "size", title: "title" }, host: { properties: { "style.height": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: IconComponent, isStandalone: true, selector: "lx-icon", inputs: { name: "name", color: "color", fontAwsomeStyle: "fontAwsomeStyle", size: "size", title: "title" }, host: { properties: { "style.height": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'lx-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], color: [{
@@ -5077,13 +5123,13 @@ class InputComponent {
     ngOnDestroy() {
         this.destroyed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: InputComponent, deps: [{ token: i2$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: InputComponent, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: InputComponent, deps: [{ token: i1$4.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: InputComponent, isStandalone: true, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input[lx-input]', template: ``, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
+            args: [{ selector: 'input[lx-input]', template: ``, standalone: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { error: [{
                 type: Input
@@ -5117,12 +5163,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
  */
 class SelectDropdownDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectDropdownDirective, selector: "[lxSelectDropdown]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectDropdownDirective, isStandalone: true, selector: "[lxSelectDropdown]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectDropdownDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxSelectDropdown]'
+                    selector: '[lxSelectDropdown]',
+                    standalone: true
                 }]
         }] });
 
@@ -5351,13 +5398,13 @@ class ResponsiveInputComponent {
     }
     registerOnTouched(_fn) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ResponsiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ResponsiveInputComponent, isStandalone: true, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ResponsiveInputComponent)
             }
-        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
@@ -5367,7 +5414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ResponsiveInputComponent)
                         }
-                    ], template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"] }]
+                    ], standalone: true, imports: [FormsModule, ReactiveFormsModule, AsyncPipe], template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"] }]
         }], propDecorators: { focus: [{
                 type: Output
             }], focusViaTab: [{
@@ -5582,13 +5629,13 @@ class MultiSelectComponent extends BaseSelectDirective {
         this.isInputFocusedViaTab = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: MultiSelectComponent, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", dropdownWidthScale: "dropdownWidthScale" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: MultiSelectComponent, isStandalone: true, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", dropdownWidthScale: "dropdownWidthScale" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\n      [formControl]=\"queryControl\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "focusViaTab", "blur"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\n      [formControl]=\"queryControl\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -5598,7 +5645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\n      [formControl]=\"queryControl\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
+                    ], standalone: true, imports: [NgIf, MarkInvalidDirective, ResponsiveInputComponent, FormsModule, 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.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\n      [formControl]=\"queryControl\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
                 type: Input
             }], selection: [{
@@ -5681,11 +5728,26 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      <li\n        *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOption()\"\n        (select)=\"onCreateNewOption()\"\n        [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n      </li>\n      <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n        <li>\n          <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n            <span>{{ optionGroup.label | uppercase }}</span>\n          </div>\n          <ul>\n            <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n              <li class=\"noResult\">\n                <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                  <ng-container\n                    *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultText>\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                </ng-template>\n              </li>\n            </ng-container>\n            <ng-template #options>\n              <li\n                *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n                lxSelectableItem\n                [scrollInContainer]=\"keyboardSelectContainer\"\n                #item\n                class=\"option\"\n                (click)=\"selectOption(option)\"\n                (select)=\"selectOption(option)\"\n                [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n              >\n                <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item\n                    [label]=\"option.label\"\n                    labelFontWeight=\"normal\"\n                    [highlightTerm]=\"highlightTerm\"\n                  ></lx-basic-dropdown-item>\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      <li\n        *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOption()\"\n        (select)=\"onCreateNewOption()\"\n        [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n      </li>\n      <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n        <li>\n          <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n            <span>{{ optionGroup.label | uppercase }}</span>\n          </div>\n          <ul>\n            <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n              <li class=\"noResult\">\n                <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                  <ng-container\n                    *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultText>\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                </ng-template>\n              </li>\n            </ng-container>\n            <ng-template #options>\n              <li\n                *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n                lxSelectableItem\n                [scrollInContainer]=\"keyboardSelectContainer\"\n                #item\n                class=\"option\"\n                (click)=\"selectOption(option)\"\n                (select)=\"selectOption(option)\"\n                [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n              >\n                <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item\n                    [label]=\"option.label\"\n                    labelFontWeight=\"normal\"\n                    [highlightTerm]=\"highlightTerm\"\n                  ></lx-basic-dropdown-item>\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$2.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: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option-group-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      <li\n        *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOption()\"\n        (select)=\"onCreateNewOption()\"\n        [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n      </li>\n      <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n        <li>\n          <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n            <span>{{ optionGroup.label | uppercase }}</span>\n          </div>\n          <ul>\n            <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n              <li class=\"noResult\">\n                <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                  <ng-container\n                    *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultText>\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                </ng-template>\n              </li>\n            </ng-container>\n            <ng-template #options>\n              <li\n                *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n                lxSelectableItem\n                [scrollInContainer]=\"keyboardSelectContainer\"\n                #item\n                class=\"option\"\n                (click)=\"selectOption(option)\"\n                (select)=\"selectOption(option)\"\n                [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n              >\n                <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item\n                    [label]=\"option.label\"\n                    labelFontWeight=\"normal\"\n                    [highlightTerm]=\"highlightTerm\"\n                  ></lx-basic-dropdown-item>\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
+            args: [{ selector: 'lx-option-group-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        NgClass,
+                        NgTemplateOutlet,
+                        InfiniteScrollModule,
+                        SelectableItemDirective,
+                        BadgeComponent,
+                        NgFor,
+                        BasicDropdownItemComponent,
+                        SpinnerComponent,
+                        AsyncPipe,
+                        UpperCasePipe,
+                        TranslateModule
+                    ], template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      <li\n        *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n        lxSelectableItem\n        [scrollInContainer]=\"keyboardSelectContainer\"\n        #item\n        (click)=\"onCreateNewOption()\"\n        (select)=\"onCreateNewOption()\"\n        [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n        class=\"option\"\n      >\n        <span class=\"newEntryContent\">\n          {{ newOptionLabel }}\n        </span>\n        <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n      </li>\n      <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n        <li>\n          <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n            <span>{{ optionGroup.label | uppercase }}</span>\n          </div>\n          <ul>\n            <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n              <li class=\"noResult\">\n                <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                  <ng-container\n                    *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultText>\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                </ng-template>\n              </li>\n            </ng-container>\n            <ng-template #options>\n              <li\n                *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n                lxSelectableItem\n                [scrollInContainer]=\"keyboardSelectContainer\"\n                #item\n                class=\"option\"\n                (click)=\"selectOption(option)\"\n                (select)=\"selectOption(option)\"\n                [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n              >\n                <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #basicDropdownOption>\n                  <lx-basic-dropdown-item\n                    [label]=\"option.label\"\n                    labelFontWeight=\"normal\"\n                    [highlightTerm]=\"highlightTerm\"\n                  ></lx-basic-dropdown-item>\n                </ng-template>\n              </li>\n            </ng-template>\n          </ul>\n        </li>\n      </ng-container>\n      <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
         }], propDecorators: { optionGroups: [{
                 type: Input
             }], newOptionLabel: [{
@@ -5871,11 +5933,11 @@ class OptionsDropdownComponent {
         return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
+            args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }], propDecorators: { align: [{
                 type: Input
             }], closeOnScroll: [{
@@ -5957,11 +6019,11 @@ class OptionsSubDropdownComponent {
         this.hidden = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsSubDropdownComponent, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsSubDropdownComponent, isStandalone: true, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-options-sub-dropdown', template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"] }]
+            args: [{ selector: 'lx-options-sub-dropdown', standalone: true, imports: [AutocloseDirective, AsyncPipe], template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: Input
             }], align: [{
@@ -6047,11 +6109,11 @@ class PickerOptionComponent {
         this.select.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PickerOptionComponent, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "14.0.0", version: "17.0.2", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
+            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, IconComponent], template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -6126,12 +6188,13 @@ class PickerTriggerDirective {
         this.destroyed$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PickerTriggerDirective, selector: "[lxPickerTrigger]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PickerTriggerDirective, isStandalone: true, selector: "[lxPickerTrigger]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerTriggerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxPickerTrigger]'
+                    selector: '[lxPickerTrigger]',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
@@ -6290,14 +6353,14 @@ class PickerComponent {
     }
     propagateChange(_value) { }
     onTouched() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerComponent, deps: [{ token: i1$5.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PickerComponent, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerComponent, deps: [{ token: i1$6.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"], dependencies: [{ kind: "directive", type: i1$2.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]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerComponent, decorators: [{
             type: Component,
@@ -6307,8 +6370,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => PickerComponent)
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AutocloseDirective], template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$6.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
                 type: Input
@@ -6337,11 +6400,11 @@ class PillItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PillItemComponent, 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 #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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 #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-item', 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 #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"] }]
+            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 #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], label: [{
@@ -6379,11 +6442,11 @@ class PillListComponent extends KeyboardSelectDirective {
         return (index, pill) => (prop ? pill[prop] : index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PillListComponent, 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 }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\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: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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 }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, 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 }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\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: [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 }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\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"] }]
         }], propDecorators: { pills: [{
                 type: Input
             }], labelKey: [{
@@ -6564,11 +6627,11 @@ class SelectListComponent extends BaseSelectDirective {
         return options.findIndex((option) => isEqual$1(selection, option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SelectListComponent, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-select-list', template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"] }]
+            args: [{ selector: 'lx-select-list', standalone: true, imports: [FormsModule, ReactiveFormsModule, NgTemplateOutlet], template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"] }]
         }], propDecorators: { searchPlaceholder: [{
                 type: Input
             }], options: [{
@@ -6611,12 +6674,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
  */
 class SelectedOptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectedOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectedOptionDirective, selector: "[lxSelectedOption]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectedOptionDirective, isStandalone: true, selector: "[lxSelectedOption]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectedOptionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxSelectedOption]'
+                    selector: '[lxSelectedOption]',
+                    standalone: true
                 }]
         }] });
 
@@ -6826,13 +6890,13 @@ class SingleSelectComponent extends BaseSelectDirective {
             : options.findIndex((option) => isEqual$1(selection, option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SingleSelectComponent, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", dropdownWidthScale: "dropdownWidthScale", padding: "padding", allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", dropdownWidthScale: "dropdownWidthScale", padding: "padding", 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\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -6842,7 +6906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SingleSelectComponent)
                         }
-                    ], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
+                    ], 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\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
                 type: Input
             }], selectionBackground: [{
@@ -6901,11 +6965,11 @@ class SliderToggleComponent {
         setTimeout(() => checkbox.focus(), 150);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SliderToggleComponent, selector: "lx-slider-toggle", 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:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.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:12px}.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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SliderToggleComponent, isStandalone: true, selector: "lx-slider-toggle", 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:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.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:12px}.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SliderToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-slider-toggle', changeDetection: ChangeDetectionStrategy.OnPush, 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:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.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:12px}.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-slider-toggle', 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:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.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:12px}.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: [{
@@ -6927,11 +6991,11 @@ class SortingDropdownTriggerComponent {
         this.disabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: { label: "label", currentSortingLabel: "currentSortingLabel", disabled: "disabled" }, ngImport: i0, template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownTriggerComponent, isStandalone: true, selector: "lx-sorting-dropdown-trigger", inputs: { label: "label", currentSortingLabel: "currentSortingLabel", disabled: "disabled" }, ngImport: i0, template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownTriggerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-sorting-dropdown-trigger', template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n" }]
+            args: [{ selector: 'lx-sorting-dropdown-trigger', standalone: true, imports: [ButtonComponent], template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], currentSortingLabel: [{
@@ -6977,11 +7041,20 @@ class SortingDropdownComponent {
         return key ? `sorting.${key}.label` : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-sorting-dropdown', template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n" }]
+            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-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n" }]
         }], propDecorators: { currentSorting: [{
                 type: Input
             }], sortingOptions: [{
@@ -7116,15 +7189,16 @@ class ContenteditableDirective {
     sanitize(content) {
         return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: ContenteditableDirective, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", 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: "17.0.2", 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: "17.0.2", ngImport: i0, type: ContenteditableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxContenteditableModel]'
+                    selector: '[lxContenteditableModel]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$6.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$7.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
                 type: Input
             }], lxContenteditableModelChange: [{
                 type: Output
@@ -7163,13 +7237,14 @@ class FormSubmitDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormSubmitDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: FormSubmitDirective, selector: "form", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: FormSubmitDirective, isStandalone: true, selector: "form", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'form'
+                    selector: 'form',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
@@ -7239,15 +7314,16 @@ class FormErrorDirective {
             this.subscritpion.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i2$1.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: FormErrorDirective, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$4.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxFormError]'
+                    selector: '[lxFormError]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i2$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -7294,11 +7370,14 @@ class FilterSelectionPipe {
         }, items);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FilterSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: FilterSelectionPipe, name: "lxFilterBySelection" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: FilterSelectionPipe, isStandalone: true, name: "lxFilterBySelection" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FilterSelectionPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'lxFilterBySelection' }]
+            args: [{
+                    name: 'lxFilterBySelection',
+                    standalone: true
+                }]
         }] });
 
 class FilterTermPipe {
@@ -7317,11 +7396,14 @@ class FilterTermPipe {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FilterTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: FilterTermPipe, name: "lxFilterByTerm" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: FilterTermPipe, isStandalone: true, name: "lxFilterByTerm" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FilterTermPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'lxFilterByTerm' }]
+            args: [{
+                    name: 'lxFilterByTerm',
+                    standalone: true
+                }]
         }] });
 
 /**
@@ -7372,12 +7454,13 @@ class FormatNumberPipe {
         return formatedNumberWitCurrency;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormatNumberPipe, deps: [{ token: LOCALE_FN }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: FormatNumberPipe, name: "lxFormatNumber" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "lxFormatNumber" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormatNumberPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'lxFormatNumber'
+                    name: 'lxFormatNumber',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: Function, decorators: [{
                     type: Inject,
@@ -7386,7 +7469,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
 
 class LxFormsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: LxFormsModule, declarations: [BasicDropdownComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule, i1$1.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
+            ClipboardModule,
+            OverlayModule,
+            LxCoreUiModule,
+            LxDragAndDropListModule,
+            BasicDropdownComponent,
             ExpandedDropdownComponent,
             BasicDropdownItemComponent,
             BreadcrumbComponent,
@@ -7427,13 +7517,7 @@ class LxFormsModule {
             FormErrorDirective,
             ErrorMessageComponent,
             FormSubmitDirective,
-            ContenteditableDirective], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule, i1$1.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
-            ClipboardModule,
-            OverlayModule,
-            LxCoreUiModule,
-            LxDragAndDropListModule], exports: [BasicDropdownComponent,
+            ContenteditableDirective], exports: [BasicDropdownComponent,
             ExpandedDropdownComponent,
             BasicDropdownItemComponent,
             BreadcrumbComponent,
@@ -7484,12 +7568,35 @@ class LxFormsModule {
             ClipboardModule,
             OverlayModule,
             LxCoreUiModule,
-            LxDragAndDropListModule, LxDragAndDropListModule] }); }
+            LxDragAndDropListModule,
+            BasicDropdownComponent,
+            ExpandedDropdownComponent,
+            CopyButtonComponent,
+            CurrencyInputComponent,
+            DateInputComponent,
+            FormErrorComponent,
+            MultiSelectComponent,
+            OptionGroupDropdownComponent,
+            ResponsiveInputComponent,
+            SingleSelectComponent,
+            SelectListComponent,
+            SortingDropdownComponent,
+            ErrorMessageComponent, LxDragAndDropListModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxFormsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TranslateModule.forChild(),
+                        DatepickerUiModule.forRoot(),
+                        InfiniteScrollModule,
+                        ClipboardModule,
+                        OverlayModule,
+                        LxCoreUiModule,
+                        LxDragAndDropListModule,
                         BasicDropdownComponent,
                         ExpandedDropdownComponent,
                         BasicDropdownItemComponent,
@@ -7533,18 +7640,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                         FormSubmitDirective,
                         ContenteditableDirective
                     ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TranslateModule.forChild(),
-                        DatepickerUiModule.forRoot(),
-                        InfiniteScrollModule,
-                        ClipboardModule,
-                        OverlayModule,
-                        LxCoreUiModule,
-                        LxDragAndDropListModule
-                    ],
                     exports: [
                         BasicDropdownComponent,
                         ExpandedDropdownComponent,
@@ -7690,7 +7785,7 @@ class ModalHeaderComponent {
         this.bottomBorder = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: { title: "title", bottomBorder: "bottomBorder" }, ngImport: i0, template: "<div class=\"headerContainer\" [class.bottomBorder]=\"bottomBorder\">\n  <ng-content></ng-content>\n  <h1 *ngIf=\"title.length > 0\">{{ title }}</h1>\n</div>\n", styles: [":host{display:block}:host.lxModalHeaderOneLine h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--lx-modal-header-max-width)}:host-context(.fullscreen) .headerContainer{padding:24px 90px;border-bottom:none}:host-context(.fullscreen) .headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}:host-context(.dialog) .headerContainer,:host-context(.dialog-large) .headerContainer{padding:24px 16px;border-radius:6px 6px 0 0}:host-context(.dialog) .headerContainer h1,:host-context(.dialog-large) .headerContainer h1{word-break:break-word}h1{margin:0 auto;padding:0;font-size:21px;color:#2a303d;font-weight:700;text-align:center}.headerContainer{display:flex}.headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: { title: "title", bottomBorder: "bottomBorder" }, ngImport: i0, template: "<div class=\"headerContainer\" [class.bottomBorder]=\"bottomBorder\">\n  <ng-content></ng-content>\n  <h1 *ngIf=\"title.length > 0\">{{ title }}</h1>\n</div>\n", styles: [":host{display:block}:host.lxModalHeaderOneLine h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--lx-modal-header-max-width)}:host-context(.fullscreen) .headerContainer{padding:24px 90px;border-bottom:none}:host-context(.fullscreen) .headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}:host-context(.dialog) .headerContainer,:host-context(.dialog-large) .headerContainer{padding:24px 16px;border-radius:6px 6px 0 0}:host-context(.dialog) .headerContainer h1,:host-context(.dialog-large) .headerContainer h1{word-break:break-word}h1{margin:0 auto;padding:0;font-size:21px;color:#2a303d;font-weight:700;text-align:center}.headerContainer{display:flex}.headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
@@ -7848,8 +7943,8 @@ class ModalComponent {
     trapFocusInModal(hostElement) {
         this.focusTrap.create(hostElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2$2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalComponent, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    *ngIf=\"open\"\n    role=\"dialog\"\n    class=\"lxmodal\"\n    [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n    [class.lxmodal--dialog]=\"size === 'dialog'\"\n    [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n    [class.lxmodal--withFooter]=\"!!footer\"\n    [class.lxmodal--verticalScroll]=\"verticalScroll\"\n    @modal\n  >\n    <div\n      *ngIf=\"size === 'fullscreen' && showBackButton\"\n      (click)=\"emitBack()\"\n      (keyup.enter)=\"emitBack()\"\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"fal fa-long-arrow-left\"\n    ></div>\n    <button\n      *ngIf=\"showCloseButton\"\n      (click)=\"closeModal(closeLocation.CloseButton)\"\n      [attr.aria-label]=\"NAME + '.close' | translate\"\n      class=\"fal fa-times closeButton\"\n    ></button>\n    <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n    <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n  </div>\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$7.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalComponent, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    *ngIf=\"open\"\n    role=\"dialog\"\n    class=\"lxmodal\"\n    [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n    [class.lxmodal--dialog]=\"size === 'dialog'\"\n    [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n    [class.lxmodal--withFooter]=\"!!footer\"\n    [class.lxmodal--verticalScroll]=\"verticalScroll\"\n    @modal\n  >\n    <div\n      *ngIf=\"size === 'fullscreen' && showBackButton\"\n      (click)=\"emitBack()\"\n      (keyup.enter)=\"emitBack()\"\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"fal fa-long-arrow-left\"\n    ></div>\n    <button\n      *ngIf=\"showCloseButton\"\n      (click)=\"closeModal(closeLocation.CloseButton)\"\n      [attr.aria-label]=\"NAME + '.close' | translate\"\n      class=\"fal fa-times closeButton\"\n    ></button>\n    <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n    <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n  </div>\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$8.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
             trigger('modal', [
                 transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
                 transition(':leave', animate('0.15s', style({ opacity: 0 })))
@@ -7869,7 +7964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                 }, {
                     type: Inject,
                     args: [MODAL_CLOSE]
-                }] }, { type: i2$2.ConfigurableFocusTrapFactory }], propDecorators: { open: [{
+                }] }, { type: i2.ConfigurableFocusTrapFactory }], propDecorators: { open: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input
@@ -8101,7 +8196,7 @@ class PopoverComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"restoreFocus\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n    (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$8.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"restoreFocus\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n    (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$9.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
@@ -8162,7 +8257,7 @@ class PopoverClickDirective {
     closePopover() {
         this.onMouseLeave.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$8.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$9.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PopoverClickDirective, isStandalone: true, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 }); }
 }
 __decorate([
@@ -8175,7 +8270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                     selector: '[lxPopoverClick]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchor }], propDecorators: { lxPopoverPinned: [{
+        }], ctorParameters: () => [{ type: i1$9.SatPopoverAnchor }], propDecorators: { lxPopoverPinned: [{
                 type: Input
             }], pinned$: [], closePopover: [{
                 type: HostListener,
@@ -8242,7 +8337,7 @@ class PopoverHoverDirective {
     closePopover(skipDelay = this.skipCloseDelay) {
         this.onMouseLeave.next({ skipDelay });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$8.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$9.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PopoverHoverDirective, isStandalone: true, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, decorators: [{
@@ -8252,7 +8347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                     selector: '[lxPopoverHover]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchor }], propDecorators: { lxPopoverHover: [{
+        }], ctorParameters: () => [{ type: i1$9.SatPopoverAnchor }], propDecorators: { lxPopoverHover: [{
                 type: Input
             }], skipCloseDelay: [{
                 type: Input
@@ -8302,7 +8397,7 @@ class TabComponent {
         this.tabPanelId = uniqueId('panelId');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n  class=\"tab\"\n  [attr.tabindex]=\"isActive || disabled || tabLink ? '-1' : '0'\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.aria-controls]=\"tabPanelId\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  role=\"tab\"\n  (keyup.enter)=\"switch.emit()\"\n  (click)=\"switch.emit()\"\n>\n  <a *ngIf=\"tabLink; else portalTab\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n    <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n  </a>\n\n  <ng-template #portalTab>\n    <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n    <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n    <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n  </ng-template>\n\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{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:#1666ee;outline:0}.tab:hover,.tab.active{outline:0}.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.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$7.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n  class=\"tab\"\n  [attr.tabindex]=\"isActive || disabled || tabLink ? '-1' : '0'\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.aria-controls]=\"tabPanelId\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  role=\"tab\"\n  (keyup.enter)=\"switch.emit()\"\n  (click)=\"switch.emit()\"\n>\n  <a *ngIf=\"tabLink; else portalTab\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n    <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n  </a>\n\n  <ng-template #portalTab>\n    <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n    <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n    <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n  </ng-template>\n\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{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:#1666ee;outline:0}.tab:hover,.tab.active{outline:0}.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.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$8.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
@@ -8388,7 +8483,7 @@ class TabGroupComponent {
         this.cd.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"tabs\" role=\"tablist\" [class.centered]=\"isCentered\">\n  <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$7.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"tabs\" role=\"tablist\" [class.centered]=\"isCentered\">\n  <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$8.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,