@leanix/components 0.4.567 → 0.4.568

package/fesm2022/leanix-components.mjs

@@ -6998,7 +6998,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\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      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel; let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue; let index = $index) {\n                <li\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                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\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      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\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                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -7015,7 +7015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         AsyncPipe,
                         UpperCasePipe,
                         TranslateModule
-                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\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      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel; let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue; let index = $index) {\n                <li\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                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
+                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\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      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\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                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
         }], propDecorators: { optionGroups: [{
                 type: Input
             }], newOptionLabel: [{