@leanix/components 0.4.923 → 0.4.925

package/fesm2022/leanix-components.mjs

@@ -7758,17 +7758,17 @@ class ResponsiveInputComponent {
                 multi: true,
                 useExisting: forwardRef(() => ResponsiveInputComponent)
             }
-        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  autocomplete=\"off\"\n  aria-autocomplete=\"list\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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 }); }
+        ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  autocomplete=\"off\"\n  aria-autocomplete=\"list\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}:host(.lxFioriReskin){height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .responsiveInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);background:transparent}:host(.lxFioriReskin) .responsiveInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}\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: "20.3.18", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-responsive-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'lx-responsive-input', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => ResponsiveInputComponent)
                         }
-                    ], imports: [FormsModule, ReactiveFormsModule, AsyncPipe], template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  autocomplete=\"off\"\n  aria-autocomplete=\"list\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"] }]
+                    ], imports: [FormsModule, ReactiveFormsModule, AsyncPipe], template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  autocomplete=\"off\"\n  aria-autocomplete=\"list\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  [attr.id]=\"inputId\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}:host(.lxFioriReskin){height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .responsiveInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);background:transparent}:host(.lxFioriReskin) .responsiveInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}\n"] }]
         }], propDecorators: { inputId: [{
                 type: Input
             }], focus: [{
@@ -8174,7 +8174,7 @@ class MultiSelectComponent extends BaseSelectDirective {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"markInvalid\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .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%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -8193,7 +8193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         NgTemplateOutlet,
                         AsyncPipe,
                         IconComponent
-                    ], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
+                    ], hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"markInvalid\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .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%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .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}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
                 type: Input
             }], selection: [{
@@ -9279,11 +9279,11 @@ class PillItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host:where(:not(.lxFioriReskin)){margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:where(:not(.lxFioriReskin)):hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected):where(:not(.lxFioriReskin)){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}:host(.lxFioriReskin){display:inline-flex;align-items:center;box-sizing:border-box;height:1.25rem;margin:0 .25rem 0 0;padding:0 0 0 .25rem;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:.375rem;background-color:var(--sapButton_TokenBackground);color:var(--sapButton_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);line-height:1}:host(.lxFioriReskin):hover:not(.disabled){background-color:var(--sapButton_Hover_Background)}:host(.lxFioriReskin).disabled{background-color:var(--sapButton_TokenBackground);border-color:var(--sapField_ReadOnly_BorderColor);padding:0 .25rem}:host(.lxFioriReskin) .pillLabel{margin:0;padding:0;color:var(--sapTextColor)}:host(.lxFioriReskin) .remove{box-sizing:content-box;width:.75rem;height:.75rem;padding:0 .375rem;margin:0;color:var(--sapTextColor)}:host(.lxFioriReskin) .remove:hover{cursor:pointer}:host(.lxFioriReskin):host-context(.selected){background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}:host(.lxFioriReskin):host-context(.selected) .pillLabel{color:var(--sapButton_Selected_TextColor)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PillItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-item', imports: [IconComponent], template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'lx-pill-item', imports: [IconComponent], hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host:where(:not(.lxFioriReskin)){margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:where(:not(.lxFioriReskin)):hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected):where(:not(.lxFioriReskin)){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}:host(.lxFioriReskin){display:inline-flex;align-items:center;box-sizing:border-box;height:1.25rem;margin:0 .25rem 0 0;padding:0 0 0 .25rem;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:.375rem;background-color:var(--sapButton_TokenBackground);color:var(--sapButton_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);line-height:1}:host(.lxFioriReskin):hover:not(.disabled){background-color:var(--sapButton_Hover_Background)}:host(.lxFioriReskin).disabled{background-color:var(--sapButton_TokenBackground);border-color:var(--sapField_ReadOnly_BorderColor);padding:0 .25rem}:host(.lxFioriReskin) .pillLabel{margin:0;padding:0;color:var(--sapTextColor)}:host(.lxFioriReskin) .remove{box-sizing:content-box;width:.75rem;height:.75rem;padding:0 .375rem;margin:0;color:var(--sapTextColor)}:host(.lxFioriReskin) .remove:hover{cursor:pointer}:host(.lxFioriReskin):host-context(.selected){background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}:host(.lxFioriReskin):host-context(.selected) .pillLabel{color:var(--sapButton_Selected_TextColor)}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], label: [{
@@ -9374,11 +9374,11 @@ class PillListComponent extends KeyboardSelectDirective {
         return this.itemKey ? pill[this.itemKey] : index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PillListComponent, isStandalone: true, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host:where(:not(.lxFioriReskin)) .pill{display:inline}:host:where(:not(.lxFioriReskin)).disabled{cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .pills{display:inline;margin:0!important;padding:0!important}:host(.lxFioriReskin) .pill{display:inline}:host(.lxFioriReskin).disabled{cursor:not-allowed}:host(.lxFioriReskin) .pills{display:inline-flex;flex-wrap:wrap;row-gap:.125rem;margin:0;padding:.125rem 0}\n"], dependencies: [{ kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PillListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SelectableItemDirective, NgTemplateOutlet, PillItemComponent, AsyncPipe], template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"] }]
+            args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [SelectableItemDirective, NgTemplateOutlet, PillItemComponent, AsyncPipe], template: "<ul class=\"pills\" #keyboardSelectContainer>\n  @for (pill of pills; track trackByProp(index, pill); let index = $index) {\n    <li\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (select)=\"removePillViaKeyboard(pill)\"\n      class=\"pill\"\n      [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    >\n      @if (pillTemplate) {\n        <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\" />\n      } @else {\n        <lx-pill-item [item]=\"pill\" [label]=\"labelKey ? pill[labelKey] : pill\" [disabled]=\"disabled\" (remove)=\"removePill($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host:where(:not(.lxFioriReskin)) .pill{display:inline}:host:where(:not(.lxFioriReskin)).disabled{cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .pills{display:inline;margin:0!important;padding:0!important}:host(.lxFioriReskin) .pill{display:inline}:host(.lxFioriReskin).disabled{cursor:not-allowed}:host(.lxFioriReskin) .pills{display:inline-flex;flex-wrap:wrap;row-gap:.125rem;margin:0;padding:.125rem 0}\n"] }]
         }], propDecorators: { pills: [{
                 type: Input
             }], labelKey: [{