@leanix/components 0.4.549 → 0.4.551

package/fesm2022/leanix-components.mjs

@@ -6194,25 +6194,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{ selector: 'lx-error-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span #contentWrapper hidden>\n  <ng-content />\n</span>\n\n@if (computedErrorMessage()) {\n  <div class=\"error\">\n    {{ computedErrorMessage() }}\n  </div>\n}\n", styles: [".error{color:#f96464;padding:4px}\n"] }]
         }] });
 
-class ExpandedDropdownComponent extends KeyboardSelectDirective {
-    constructor() {
-        super(...arguments);
-        this.NAME = 'BasicDropdownComponent';
-        this.options = [];
-        this.onChooseItem = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExpandedDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ExpandedDropdownComponent, isStandalone: true, selector: "lx-expanded-dropdown", inputs: { options: "options" }, outputs: { onChooseItem: "onChooseItem" }, usesInheritance: true, ngImport: i0, template: "<ul role=\"listbox\" class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  @for (option of options; track option.id; let index = $index) {\n    <li\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"onChooseItem.emit(option.id)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      role=\"option\"\n      [attr.aria-selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\" />\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span [title]=\"option.name\">\n          {{ option.name }}\n        </span>\n      </ng-template>\n      <div class=\"iconContainer\">\n        <svg\n          width=\"32px\"\n          height=\"32px\"\n          viewBox=\"0 0 32 32\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        >\n          <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n              <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n                <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                  <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#0070f2\">\n                    <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\" />\n                  </g>\n                  <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                    <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                      <path\n                        d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                        id=\"Path\"\n                      />\n                    </g>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n      </div>\n    </li>\n  } @empty {\n    <li tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n      {{ NAME + '.noResults' | translate }}\n    </li>\n  }\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:var(--lxFontLargeSize, 16px);height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExpandedDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-expanded-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SelectableItemDirective, NgTemplateOutlet, AsyncPipe, TranslateModule], template: "<ul role=\"listbox\" class=\"options lxThinScrollbar\" #keyboardSelectContainer>\n  @for (option of options; track option.id; let index = $index) {\n    <li\n      tabindex=\"-1\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      class=\"option keyboardSelectable\"\n      (click)=\"onChooseItem.emit(option.id)\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      role=\"option\"\n      [attr.aria-selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"simpleStringDisplay; context: { $implicit: option, index: index }\" />\n      </ng-container>\n      <ng-template #simpleStringDisplay>\n        <span [title]=\"option.name\">\n          {{ option.name }}\n        </span>\n      </ng-template>\n      <div class=\"iconContainer\">\n        <svg\n          width=\"32px\"\n          height=\"32px\"\n          viewBox=\"0 0 32 32\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        >\n          <g id=\"choose-workspace-D\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"choose-a-workspace-D\" transform=\"translate(-911.000000, -429.000000)\">\n              <g id=\"Group-3\" transform=\"translate(471.000000, 249.000000)\">\n                <g id=\"Button/Text/Primary/Medium\" transform=\"translate(440.000000, 180.000000)\">\n                  <g id=\"UI/Shape/Rectangle-rounded-2px\" fill=\"#0070f2\">\n                    <circle id=\"\uD83C\uDFA8-Style\" cx=\"16\" cy=\"16\" r=\"16\" />\n                  </g>\n                  <g id=\"Icons/basic/refresh\" transform=\"translate(7.000000, 11.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n                    <g id=\"arrow-right\" transform=\"translate(3.772240, 0.000000)\">\n                      <path\n                        d=\"M5.41769476,0.0873198725 L4.92588162,0.579133017 C4.80947996,0.695534673 4.80947996,0.88427129 4.92588162,1.00069779 L8.77935771,4.85414904 L0.298083627,4.85414904 C0.133466944,4.85414904 0,4.98761598 0,5.15223266 L0,5.84776113 C0,6.01237781 0.133466944,6.14584475 0.298083627,6.14584475 L8.77935771,6.14584475 L4.92588162,9.99932084 C4.80947996,10.1157225 4.80947996,10.3044591 4.92588162,10.4208856 L5.41769476,10.9126988 C5.53409642,11.0291004 5.72283304,11.0291004 5.83925953,10.9126988 L11.0411666,5.7107917 C11.1575682,5.59439004 11.1575682,5.40565343 11.0411666,5.28922693 L5.83923469,0.0873198725 C5.72283304,-0.0291066242 5.53409642,-0.0291066242 5.41769476,0.0873198725 Z\"\n                        id=\"Path\"\n                      />\n                    </g>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n      </div>\n    </li>\n  } @empty {\n    <li tabindex=\"-1\" id=\"noOption\" class=\"option noOptionsAvailable\">\n      {{ NAME + '.noResults' | translate }}\n    </li>\n  }\n</ul>\n", styles: [".options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px}.options:hover .selected{background-color:#fff}.optionSearch{padding:2px}.option{display:flex;justify-content:space-between;font-size:var(--lxFontLargeSize, 16px);height:40px;align-items:center;padding:4px 12px;border-bottom:1px solid #e1e5eb}.option:hover{background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iconContainer{display:none}.option:hover .iconContainer{display:flex}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], onChooseItem: [{
-                type: Output
-            }] } });
-
 class FormErrorComponent {
     constructor() {
         /** @internal */
@@ -7881,6 +7862,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: [PillItemComponent, { emitDistinctChangesOnly: true }]
             }] } });
 
+/**
+ * This directive is supposed to be used in combination with a single-select in
+ * order to mark a ng-template as the template to be rendered within the select to
+ * display the currently selected option.
+ *
+ * Example:
+ *
+ * ```
+ * <lx-single-select>
+ *   <ng-template lxSelectedOption>{{ someValue }}</ng-template>
+ * </lx-single-select>
+ * ```
+ */
+class SelectedOptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectedOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: SelectedOptionDirective, isStandalone: true, selector: "[lxSelectedOption]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectedOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxSelectedOption]'
+                }]
+        }] });
+
 function getKeyboardNavigationEvents(sourceElement, destroyed$) {
     const inputKeyboardEvents$ = fromEvent(sourceElement, 'keydown').pipe(takeUntil(destroyed$));
     const verticalNavigation$ = inputKeyboardEvents$.pipe(filter((event) => includes(event.keyCode, [ARROW_UP, ARROW_DOWN])));
@@ -7914,196 +7919,6 @@ function stopKeyboardEventPropagation(evt) {
     evt.stopImmediatePropagation();
 }
 
-class SelectListComponent extends BaseSelectDirective {
-    constructor() {
-        super(...arguments);
-        this.searchPlaceholder = 'Search';
-        this.options = [];
-        this.selectionChange = new EventEmitter();
-        this.onChooseItem = new EventEmitter();
-        /** @internal */
-        this.highlightedIndex = 0;
-        /** @internal */
-        this.destroyed$ = new Subject();
-    }
-    /** @internal */
-    get dropdownTmpl() {
-        return this.explicitDropdown || this.implicitDropdown;
-    }
-    /** @internal */
-    resetInput() {
-        this.queryControl.reset('', { emitEvent: false });
-    }
-    /** @internal */
-    focus() {
-        this.searchInput.nativeElement.focus();
-    }
-    /** @internal */
-    focusAndOpen() {
-        this.focus();
-        this.open.next(true);
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.destroyed$.next();
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.open
-            .pipe(distinctUntilChanged(), filter(() => !!this.dropdownComponent), map(() => this.selection), takeUntil(this.destroyed$))
-            .subscribe((selection) => {
-            if (selection) {
-                const index = this.determineHighlightIndex(this.dropdownComponent.options, selection);
-                if (index > -1) {
-                    this.dropdownComponent.select(index);
-                }
-                else {
-                    this.dropdownComponent.select(0);
-                }
-            }
-            else {
-                this.dropdownComponent.select(0);
-            }
-        });
-        // keyboard event handling
-        const sourceElement = this.searchInput.nativeElement;
-        const keyboardEvents = getKeyboardNavigationEvents(sourceElement, this.destroyed$);
-        keyboardEvents.verticalNavigation$.subscribe((event) => {
-            event.preventDefault();
-            const currentIndex = this.determineHighlightIndex(this.options, this.selection);
-            // keyboard selection while not searching
-            if (this.searchInput.nativeElement.value === '') {
-                if (event.key === 'ArrowDown') {
-                    if (currentIndex !== this.options.length - 1) {
-                        this.selectOption(currentIndex + 1);
-                    }
-                    else {
-                        this.selectOption(0);
-                    }
-                }
-                else {
-                    if (currentIndex !== 0) {
-                        this.selectOption(currentIndex - 1);
-                    }
-                    else {
-                        this.selectOption(this.options.length - 1);
-                    }
-                }
-            }
-            else {
-                if (event.key === 'ArrowDown') {
-                    if (this.highlightedIndex !== this.dropdownComponent.options.length - 1) {
-                        this.highlightedIndex = this.highlightedIndex + 1;
-                    }
-                    else {
-                        this.highlightedIndex = 0;
-                    }
-                }
-                else {
-                    if (this.highlightedIndex !== 0) {
-                        this.highlightedIndex = this.highlightedIndex - 1;
-                    }
-                    else {
-                        this.highlightedIndex = this.dropdownComponent.options.length - 1;
-                    }
-                }
-                this.dropdownComponent.select(this.highlightedIndex);
-            }
-        });
-        keyboardEvents.enter$.subscribe(() => {
-            if (this.searchInput.nativeElement.value === '') {
-                this.onChooseItem.emit(this.selection.id);
-            }
-            else if (this.dropdownComponent.options.length) {
-                this.onChooseItem.emit(this.dropdownComponent.options[this.highlightedIndex]?.id);
-            }
-        });
-        this.focusAndOpen();
-    }
-    /** @internal */
-    selectOption(index) {
-        if (this.determineHighlightIndex(this.options, this.selection) === index) {
-            this.onChooseItem.emit(this.selection.id);
-        }
-        else if (index !== -1) {
-            this.selection = this.options[index];
-            this.selectionChange.emit(this.selection);
-            this.open.next(false);
-            this.focusAndOpen();
-            this.dropdownComponent?.select(index);
-        }
-    }
-    /** @internal */
-    searchKeyChanged(event) {
-        if (event.target.value === '' && !['ArrowUp', 'ArrowDown'].includes(event.key)) {
-            this.highlightedIndex = this.determineHighlightIndex(this.dropdownComponent.options, this.selection);
-            this.dropdownComponent.select(this.highlightedIndex);
-        }
-        else if (event.key.length === 1 || ['Backspace', 'Delete'].includes(event.key)) {
-            this.highlightedIndex = 0;
-            this.dropdownComponent.select(0);
-        }
-    }
-    determineHighlightIndex(options, selection) {
-        return options.findIndex((option) => isEqual$1(selection, option));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:var(--lxFontLargeSize, 16px)}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-select-list', 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\" />\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:var(--lxFontLargeSize, 16px)}.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: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], onChooseItem: [{
-                type: Output
-            }], explicitDropdown: [{
-                type: ContentChild,
-                args: [SelectDropdownDirective, { read: TemplateRef, static: true }]
-            }], dropdownComponent: [{
-                type: ContentChild,
-                args: [ExpandedDropdownComponent, { static: false }]
-            }], implicitSelectedOption: [{
-                type: ViewChild,
-                args: ['selectedOption', { static: true }]
-            }], implicitDropdown: [{
-                type: ViewChild,
-                args: ['dropdown', { static: true }]
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput', { static: true }]
-            }] } });
-
-/**
- * This directive is supposed to be used in combination with a single-select in
- * order to mark a ng-template as the template to be rendered within the select to
- * display the currently selected option.
- *
- * Example:
- *
- * ```
- * <lx-single-select>
- *   <ng-template lxSelectedOption>{{ someValue }}</ng-template>
- * </lx-single-select>
- * ```
- */
-class SelectedOptionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectedOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: SelectedOptionDirective, isStandalone: true, selector: "[lxSelectedOption]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectedOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lxSelectedOption]'
-                }]
-        }] });
-
 class SingleSelectComponent extends BaseSelectDirective {
     /** @internal */
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition, keyCode) {
@@ -8910,7 +8725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 const FORMS_MODULE_EXPORTS = [
     BasicDropdownComponent,
-    ExpandedDropdownComponent,
     BasicDropdownItemComponent,
     BreadcrumbComponent,
     CurrencyInputComponent,
@@ -8939,7 +8753,6 @@ const FORMS_MODULE_EXPORTS = [
     SelectableItemDirective,
     SelectDropdownDirective,
     SelectedOptionDirective,
-    SelectListComponent,
     SingleSelectComponent,
     SwitchComponent,
     SortingDropdownComponent,
@@ -8961,7 +8774,6 @@ class LxFormsModule {
             OverlayModule,
             LxDragAndDropListModule,
             BasicDropdownComponent,
-            ExpandedDropdownComponent,
             BasicDropdownItemComponent,
             BreadcrumbComponent,
             CurrencyInputComponent,
@@ -8991,7 +8803,6 @@ class LxFormsModule {
             SelectedOptionDirective,
             SelectDropdownDirective,
             SingleSelectComponent,
-            SelectListComponent,
             SwitchComponent,
             SortingDropdownComponent,
             SortingDropdownTriggerComponent,
@@ -9001,7 +8812,6 @@ class LxFormsModule {
             ErrorMessageComponent,
             FormSubmitDirective,
             ContenteditableDirective], exports: [BasicDropdownComponent,
-            ExpandedDropdownComponent,
             BasicDropdownItemComponent,
             BreadcrumbComponent,
             CurrencyInputComponent,
@@ -9030,7 +8840,6 @@ class LxFormsModule {
             SelectableItemDirective,
             SelectDropdownDirective,
             SelectedOptionDirective,
-            SelectListComponent,
             SingleSelectComponent,
             SwitchComponent,
             SortingDropdownComponent,
@@ -9052,7 +8861,6 @@ class LxFormsModule {
             OverlayModule,
             LxDragAndDropListModule,
             BasicDropdownComponent,
-            ExpandedDropdownComponent,
             CurrencyInputComponent,
             DateInputComponent,
             FormErrorComponent,
@@ -9060,7 +8868,6 @@ class LxFormsModule {
             OptionGroupDropdownComponent,
             ResponsiveInputComponent,
             SingleSelectComponent,
-            SelectListComponent,
             SortingDropdownComponent,
             SortingDropdownTriggerComponent,
             InputComponent, LxDragAndDropListModule] }); }
@@ -9079,7 +8886,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         OverlayModule,
                         LxDragAndDropListModule,
                         BasicDropdownComponent,
-                        ExpandedDropdownComponent,
                         BasicDropdownItemComponent,
                         BreadcrumbComponent,
                         CurrencyInputComponent,
@@ -9109,7 +8915,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         SelectedOptionDirective,
                         SelectDropdownDirective,
                         SingleSelectComponent,
-                        SelectListComponent,
                         SwitchComponent,
                         SortingDropdownComponent,
                         SortingDropdownTriggerComponent,
@@ -10299,5 +10104,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, ICON_MAP, IMAGE_READER, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_BUTTON_USE_SAP_ICONS, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MODAL_MODULE_EXPORTS, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, ICON_MAP, IMAGE_READER, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_BUTTON_USE_SAP_ICONS, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MODAL_MODULE_EXPORTS, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
 //# sourceMappingURL=leanix-components.mjs.map