@fundamental-ngx/platform 0.47.0-rc.2 → 0.47.0-rc.21

package/fesm2022/fundamental-ngx-platform-form.mjs

@@ -1,74 +1,67 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ContentChild, InjectionToken, Directive, Injectable, Inject, forwardRef, EventEmitter, TemplateRef, ElementRef, Optional, Self, SkipSelf, Output, ViewChild, ContentChildren, ViewChildren, Host, NgModule, Attribute, HostListener, Injector, Pipe, inject, isDevMode, LOCALE_ID } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ContentChild, InjectionToken, Directive, Injectable, Inject, forwardRef, EventEmitter, TemplateRef, ElementRef, Optional, Self, SkipSelf, Output, ViewChild, ContentChildren, ViewChildren, Host, Attribute, NgModule, HostListener, Injector, Pipe, inject, isDevMode, LOCALE_ID } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule, NgForm, NgControl, FormGroupDirective } from '@angular/forms';
 import { FD_FORM_FIELD, FD_FORM_FIELD_CONTROL } from '@fundamental-ngx/cdk/forms';
 import { uniqBy, merge as merge$1, cloneDeep } from 'lodash-es';
-import * as i2$2 from 'rxjs';
+import * as i2$1 from 'rxjs';
 import { Subject, BehaviorSubject, tap, combineLatest, filter, Subscription, merge, fromEvent, isObservable, of, timer, interval } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil, switchMap, startWith, debounceTime, filter as filter$1, take, skip } from 'rxjs/operators';
 import { NgTemplateOutlet, NgIf, NgFor, AsyncPipe, NgClass, KeyValuePipe, formatNumber } from '@angular/common';
 import { FormInputMessageGroupComponent, FormItemComponent, FormMessageComponent, FormLabelComponent, FormControlComponent, FormGroupComponent as FormGroupComponent$1 } from '@fundamental-ngx/core/form';
-import * as i3 from '@fundamental-ngx/core/icon';
-import { IconModule } from '@fundamental-ngx/core/icon';
-import * as i4 from '@fundamental-ngx/core/inline-help';
-import { InlineHelpModule } from '@fundamental-ngx/core/inline-help';
+import { IconComponent } from '@fundamental-ngx/core/icon';
+import { InlineHelpDirective } from '@fundamental-ngx/core/inline-help';
 import { LinkComponent } from '@fundamental-ngx/core/link';
 import * as i1 from '@fundamental-ngx/platform/shared';
 import { ColumnLayoutGridClass, ResponsiveBreakPointConfig, RESPONSIVE_BREAKPOINTS_CONFIG, FormFieldGroup, BaseInput, InLineLayoutCollectionBaseInput, coerceArraySafe, CollectionBaseInput, isOptionItem, isJsObject, isString, MatchingStrategy, isFunction, isDataSource, ArrayMultiInputDataSource, ObservableMultiInputDataSource, MultiInputDataSource, DATA_PROVIDERS, FormGroupContainer, ArrayComboBoxDataSource, ObservableComboBoxDataSource, ComboBoxDataSource, FDP_DO_CHECK, ArrayMultiComboBoxDataSource, ObservableMultiComboBoxDataSource, isSelectableOptionItem, MultiComboBoxDataSource } from '@fundamental-ngx/platform/shared';
 import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
 import { GRID_COLUMNS_NUMBER } from '@fundamental-ngx/core/layout-grid';
-import * as i3$1 from '@fundamental-ngx/cdk/utils';
+import * as i3 from '@fundamental-ngx/cdk/utils';
 import { RangeSelector, KeyUtil, warnOnce, TemplateDirective, DynamicComponentService, InitialFocusDirective, DisplayFnPipe, isFunction as isFunction$1, selectStrategy, resizeObservable, SearchHighlightPipe, OnlyDigitsDirective } from '@fundamental-ngx/cdk/utils';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CheckboxComponent as CheckboxComponent$1 } from '@fundamental-ngx/core/checkbox';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, ENTER, ESCAPE, CONTROL, TAB, SHIFT, ALT, NUMPAD_ZERO, NUMPAD_ONE, NUMPAD_TWO, NUMPAD_THREE, NUMPAD_FOUR, NUMPAD_FIVE, NUMPAD_SIX, NUMPAD_SEVEN, NUMPAD_EIGHT, NUMPAD_NINE, A, SPACE, PAGE_UP, PAGE_DOWN } from '@angular/cdk/keycodes';
-import * as i2 from '@fundamental-ngx/core/radio';
-import { RadioButtonComponent as RadioButtonComponent$1, RadioModule } from '@fundamental-ngx/core/radio';
+import { RadioButtonComponent as RadioButtonComponent$1 } from '@fundamental-ngx/core/radio';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import * as i4 from '@fundamental-ngx/core/select';
+import { SelectModule, SelectComponent as SelectComponent$1 } from '@fundamental-ngx/core/select';
 import * as i6$1 from '@fundamental-ngx/core/list';
 import { ListComponent, ListSecondaryDirective, ListModule } from '@fundamental-ngx/core/list';
-import * as i4$1 from '@fundamental-ngx/core/select';
-import { SelectComponent as SelectComponent$1, SelectModule } from '@fundamental-ngx/core/select';
 import '@fundamental-ngx/core/calendar';
-import * as i2$1 from '@fundamental-ngx/core/datetime';
+import * as i2 from '@fundamental-ngx/core/datetime';
 import { DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';
 import { DatePickerComponent } from '@fundamental-ngx/core/date-picker';
-import * as i3$2 from '@fundamental-ngx/core/switch';
-import { SwitchModule } from '@fundamental-ngx/core/switch';
+import { SwitchComponent as SwitchComponent$1 } from '@fundamental-ngx/core/switch';
+import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
 import * as i1$2 from '@fundamental-ngx/core/dialog';
 import { DialogModule } from '@fundamental-ngx/core/dialog';
-import { TokenizerComponent, TokenComponent, TokenizerInputDirective } from '@fundamental-ngx/core/token';
+import { CdkScrollable } from '@angular/cdk/overlay';
+import * as i3$1 from '@fundamental-ngx/core/bar';
+import { BarModule } from '@fundamental-ngx/core/bar';
+import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
 import * as i7 from '@fundamental-ngx/platform/list';
-import { FdpListComponent, ListComponent as ListComponent$1, BaseListItem, PlatformListModule, StandardListItemModule } from '@fundamental-ngx/platform/list';
+import { FdpListComponent, ListComponent as ListComponent$1, BaseListItem, PlatformListModule, StandardListItemComponent } from '@fundamental-ngx/platform/list';
+import { TokenizerComponent, TokenComponent, TokenizerInputDirective } from '@fundamental-ngx/core/token';
 import * as i5 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, ContentDensityModule, CONTENT_DENSITY_DIRECTIVE, ContentDensityGlobalKeyword, ContentDensityDirective } from '@fundamental-ngx/core/content-density';
 import * as i6 from '@fundamental-ngx/core/input-group';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
 import { MultiAnnouncerDirective } from '@fundamental-ngx/core/multi-combobox';
 import equal from 'fast-deep-equal';
-import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
-import { CdkScrollable } from '@angular/cdk/overlay';
-import * as i3$3 from '@fundamental-ngx/core/bar';
-import { BarModule } from '@fundamental-ngx/core/bar';
-import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
 import { ObjectStatusComponent } from '@fundamental-ngx/platform/object-status';
-import * as i4$2 from '@fundamental-ngx/core/title';
+import * as i4$1 from '@fundamental-ngx/core/title';
 import { TitleComponent } from '@fundamental-ngx/core/title';
 import { DatetimePickerComponent } from '@fundamental-ngx/core/datetime-picker';
-import * as i10 from '@fundamental-ngx/core/skeleton';
-import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
-import * as i2$3 from '@fundamental-ngx/core/busy-indicator';
+import * as i2$2 from '@fundamental-ngx/core/busy-indicator';
 import { BusyIndicatorModule } from '@fundamental-ngx/core/busy-indicator';
+import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
 import { ButtonComponent } from '@fundamental-ngx/platform/button';
-import * as i5$1 from '@fundamental-ngx/core/button';
-import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i3$4 from '@fundamental-ngx/core/file-uploader';
+import { ButtonComponent as ButtonComponent$1 } from '@fundamental-ngx/core/button';
+import * as i3$2 from '@fundamental-ngx/core/file-uploader';
 import { FileUploaderModule } from '@fundamental-ngx/core/file-uploader';
-import * as i2$4 from '@fundamental-ngx/core/time-picker';
-import { TimePickerComponent, TimePickerModule } from '@fundamental-ngx/core/time-picker';
+import { TimePickerComponent } from '@fundamental-ngx/core/time-picker';
 
 /**
  * Returns form state based on priority.
@@ -943,7 +936,7 @@ class FormFieldComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupContainer, optional: true }, { token: i1.FormFieldGroup, optional: true }, { token: RESPONSIVE_BREAKPOINTS_CONFIG, optional: true }, { token: i1.ResponsiveBreakpointsService }, { token: FDP_FORM_FIELD_HINT_OPTIONS_DEFAULT }, { token: FDP_FORM_FIELD_HINT_LAYOUT_CONFIG }, { token: FormFieldLayoutService, self: true }, { token: FormFieldLayoutService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FormFieldComponent, isStandalone: true, selector: "fdp-form-field", inputs: { label: "label", id: "id", hint: "hint", noLabelLayout: "noLabelLayout", validators: "validators", rank: "rank", placeholder: "placeholder", column: "column", columnLayout: "columnLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", i18Strings: "i18Strings", required: "required", editable: "editable", columns: "columns", disabled: "disabled", colon: "colon", formGroupContainer: "formGroupContainer" }, outputs: { onChange: "onChange", onColumnChange: "onColumnChange" }, providers: [formFieldProvider$1, formGroupChildProvider$2, FormFieldLayoutService], queries: [{ propertyName: "formFieldExtras", first: true, predicate: FormFieldControlExtrasComponent, descendants: true, read: ElementRef }, { propertyName: "_errorDirectiveQuery", predicate: FormFieldErrorDirective }], viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true, static: true }, { propertyName: "labelCol", first: true, predicate: ["labelCol"], descendants: true }, { propertyName: "inputMessageGroup", first: true, predicate: InputMessageGroupWithTemplate, descendants: true, read: ElementRef }, { propertyName: "innerErrorRenderers", first: true, predicate: ["innerErrorRenderers"], descendants: true }, { propertyName: "_inputMessageGroupCmp", predicate: InputMessageGroupWithTemplate, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #renderer>\n    <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n        <div\n            class=\"fd-col\"\n            #labelCol\n            [class]=\"_labelColumnLayoutClass\"\n            *ngIf=\"!noLabelLayout\"\n            [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n        >\n            <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n        </div>\n        <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n    </div>\n    <span aria-hidden=\"true\" [style.display]=\"'none'\" [id]=\"'fdp-form-hint-' + id\">\n        <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n            {{ hintOptions.content }}\n        </ng-container>\n        <ng-template #hintTemplate>\n            <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n        </ng-template>\n    </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n    <fdp-input-message-group\n        class=\"fd-col\"\n        [class]=\"_fieldColumnLayoutClass\"\n        [attr.aria-labelledby]=\"'fdp-form-label-' + id\"\n    >\n        <ng-template #triggerItem>\n            <ng-content></ng-content>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n            <fd-form-message *ngFor=\"let error of groupedErrors\" [type]=\"error.directive.type\">\n                <ng-template\n                    [ngIf]=\"error.directive._headingTemplateRef\"\n                    [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n                >\n                </ng-template>\n                <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n                    <br />\n                </ng-container>\n                <ng-template\n                    [ngIf]=\"error.directive._descriptionTemplateRef\"\n                    [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n                >\n                </ng-template>\n            </fd-form-message>\n        </ng-container>\n\n        <fd-form-message *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\" type=\"error\">\n            <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n            </ng-container>\n        </fd-form-message>\n    </fdp-input-message-group>\n</ng-template>\n\n<ng-template #innerErrorRenderers>\n    <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n        <ng-container *ngFor=\"let error of groupedErrors\">\n            <ng-template\n                [ngIf]=\"error.directive._headingTemplateRef\"\n                [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n            >\n            </ng-template>\n            <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n                <br />\n            </ng-container>\n            <ng-template\n                [ngIf]=\"error.directive._descriptionTemplateRef\"\n                [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n            >\n            </ng-template>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\">\n        <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n    <ng-container *ngIf=\"hintTarget === 'label'; else withoutHint\">\n        <label\n            [id]=\"'fdp-form-label-' + id\"\n            [required]=\"editable && required\"\n            fd-form-label\n            [inlineHelpContent]=\"hintOptions.content\"\n            [inlineHelpBodyPlacement]=\"hintOptions.placement || 'top'\"\n            [inlineHelpPlacement]=\"hintOptions.position || 'after'\"\n            [inlineHelpGlyph]=\"hintOptions.glyph || ''\"\n            [inlineHelpTriggers]=\"hintOptions.trigger || []\"\n            [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n            [colon]=\"colon\"\n        >\n            <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n        </label>\n    </ng-container>\n    <ng-template #withoutHint>\n        <label\n            [id]=\"'fdp-form-label-' + id\"\n            [required]=\"editable && required\"\n            fd-form-label\n            [colon]=\"colon\"\n            [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n        >\n            <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n        </label>\n    </ng-template>\n</ng-template>\n\n<ng-template #gapTemplate>\n    <ng-container *ngIf=\"hintTarget === 'input' && hintOptions.content; else withoutHint\">\n        <div class=\"fd-col fd-form-field-inline-help-container\" [class]=\"_gapColumnLayoutClass\">\n            <span fd-link [undecorated]=\"true\">\n                <fd-icon\n                    [fd-inline-help]=\"hintOptions.content\"\n                    [glyph]=\"hintOptions.glyph\"\n                    [placement]=\"hintOptions.placement || null\"\n                    [triggers]=\"hintOptions.trigger || []\"\n                    tabindex=\"0\"\n                >\n                </fd-icon>\n            </span>\n        </div>\n    </ng-container>\n    <ng-template #withoutHint>\n        <div class=\"fd-col\" [class]=\"_gapColumnLayoutClass\"></div>\n    </ng-template>\n</ng-template>\n", styles: [".fd-form-label__wrapper{display:flex;width:100%;white-space:nowrap}.fd-form-field-inline-help-container{overflow:visible!important}.fd-form-field-inline-help-container [class*=sap-icon]{margin:0}\n"], dependencies: [{ kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputMessageGroupWithTemplate, selector: "fdp-input-message-group", inputs: ["triggers"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: InlineHelpModule }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FormFieldComponent, isStandalone: true, selector: "fdp-form-field", inputs: { label: "label", id: "id", hint: "hint", noLabelLayout: "noLabelLayout", validators: "validators", rank: "rank", placeholder: "placeholder", column: "column", columnLayout: "columnLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", i18Strings: "i18Strings", required: "required", editable: "editable", columns: "columns", disabled: "disabled", colon: "colon", formGroupContainer: "formGroupContainer" }, outputs: { onChange: "onChange", onColumnChange: "onColumnChange" }, providers: [formFieldProvider$1, formGroupChildProvider$2, FormFieldLayoutService], queries: [{ propertyName: "formFieldExtras", first: true, predicate: FormFieldControlExtrasComponent, descendants: true, read: ElementRef }, { propertyName: "_errorDirectiveQuery", predicate: FormFieldErrorDirective }], viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true, static: true }, { propertyName: "labelCol", first: true, predicate: ["labelCol"], descendants: true }, { propertyName: "inputMessageGroup", first: true, predicate: InputMessageGroupWithTemplate, descendants: true, read: ElementRef }, { propertyName: "innerErrorRenderers", first: true, predicate: ["innerErrorRenderers"], descendants: true }, { propertyName: "_inputMessageGroupCmp", predicate: InputMessageGroupWithTemplate, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #renderer>\n    <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n        <div\n            class=\"fd-col\"\n            #labelCol\n            [class]=\"_labelColumnLayoutClass\"\n            *ngIf=\"!noLabelLayout\"\n            [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n        >\n            <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n        </div>\n        <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n    </div>\n    <span aria-hidden=\"true\" [style.display]=\"'none'\" [id]=\"'fdp-form-hint-' + id\">\n        <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n            {{ hintOptions.content }}\n        </ng-container>\n        <ng-template #hintTemplate>\n            <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n        </ng-template>\n    </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n    <fdp-input-message-group\n        class=\"fd-col\"\n        [class]=\"_fieldColumnLayoutClass\"\n        [attr.aria-labelledby]=\"'fdp-form-label-' + id\"\n    >\n        <ng-template #triggerItem>\n            <ng-content></ng-content>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n            <fd-form-message *ngFor=\"let error of groupedErrors\" [type]=\"error.directive.type\">\n                <ng-template\n                    [ngIf]=\"error.directive._headingTemplateRef\"\n                    [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n                >\n                </ng-template>\n                <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n                    <br />\n                </ng-container>\n                <ng-template\n                    [ngIf]=\"error.directive._descriptionTemplateRef\"\n                    [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n                >\n                </ng-template>\n            </fd-form-message>\n        </ng-container>\n\n        <fd-form-message *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\" type=\"error\">\n            <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n            </ng-container>\n        </fd-form-message>\n    </fdp-input-message-group>\n</ng-template>\n\n<ng-template #innerErrorRenderers>\n    <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n        <ng-container *ngFor=\"let error of groupedErrors\">\n            <ng-template\n                [ngIf]=\"error.directive._headingTemplateRef\"\n                [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n            >\n            </ng-template>\n            <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n                <br />\n            </ng-container>\n            <ng-template\n                [ngIf]=\"error.directive._descriptionTemplateRef\"\n                [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n            >\n            </ng-template>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\">\n        <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n    <ng-container *ngIf=\"hintTarget === 'label'; else withoutHint\">\n        <label\n            [id]=\"'fdp-form-label-' + id\"\n            [required]=\"editable && required\"\n            fd-form-label\n            [inlineHelpContent]=\"hintOptions.content\"\n            [inlineHelpBodyPlacement]=\"hintOptions.placement || 'top'\"\n            [inlineHelpPlacement]=\"hintOptions.position || 'after'\"\n            [inlineHelpGlyph]=\"hintOptions.glyph || ''\"\n            [inlineHelpTriggers]=\"hintOptions.trigger || []\"\n            [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n            [colon]=\"colon\"\n        >\n            <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n        </label>\n    </ng-container>\n    <ng-template #withoutHint>\n        <label\n            [id]=\"'fdp-form-label-' + id\"\n            [required]=\"editable && required\"\n            fd-form-label\n            [colon]=\"colon\"\n            [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n        >\n            <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n        </label>\n    </ng-template>\n</ng-template>\n\n<ng-template #gapTemplate>\n    <ng-container *ngIf=\"hintTarget === 'input' && hintOptions.content; else withoutHint\">\n        <div class=\"fd-col fd-form-field-inline-help-container\" [class]=\"_gapColumnLayoutClass\">\n            <span fd-link [undecorated]=\"true\">\n                <fd-icon\n                    [fd-inline-help]=\"hintOptions.content\"\n                    [glyph]=\"hintOptions.glyph\"\n                    [placement]=\"hintOptions.placement || null\"\n                    [triggers]=\"hintOptions.trigger || []\"\n                    tabindex=\"0\"\n                >\n                </fd-icon>\n            </span>\n        </div>\n    </ng-container>\n    <ng-template #withoutHint>\n        <div class=\"fd-col\" [class]=\"_gapColumnLayoutClass\"></div>\n    </ng-template>\n</ng-template>\n", styles: [".fd-form-label__wrapper{display:flex;width:100%;white-space:nowrap}.fd-form-field-inline-help-container{overflow:visible!important}.fd-form-field-inline-help-container [class*=sap-icon]{margin:0}\n"], dependencies: [{ kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputMessageGroupWithTemplate, selector: "fdp-input-message-group", inputs: ["triggers"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -956,8 +949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         FormMessageComponent,
                         FormLabelComponent,
                         LinkComponent,
-                        IconModule,
-                        InlineHelpModule,
+                        IconComponent,
+                        InlineHelpDirective,
                         AsyncPipe
                     ], template: "<ng-template #renderer>\n    <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n        <div\n            class=\"fd-col\"\n            #labelCol\n            [class]=\"_labelColumnLayoutClass\"\n            *ngIf=\"!noLabelLayout\"\n            [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n        >\n            <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n        </div>\n        <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n    </div>\n    <span aria-hidden=\"true\" [style.display]=\"'none'\" [id]=\"'fdp-form-hint-' + id\">\n        <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n            {{ hintOptions.content }}\n        </ng-container>\n        <ng-template #hintTemplate>\n            <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n        </ng-template>\n    </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n    <fdp-input-message-group\n        class=\"fd-col\"\n        [class]=\"_fieldColumnLayoutClass\"\n        [attr.aria-labelledby]=\"'fdp-form-label-' + id\"\n    >\n        <ng-template #triggerItem>\n            <ng-content></ng-content>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n            <fd-form-message *ngFor=\"let error of groupedErrors\" [type]=\"error.directive.type\">\n                <ng-template\n                    [ngIf]=\"error.directive._headingTemplateRef\"\n                    [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n                >\n                </ng-template>\n                <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n                    <br />\n                </ng-container>\n                <ng-template\n                    [ngIf]=\"error.directive._descriptionTemplateRef\"\n                    [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n                >\n                </ng-template>\n            </fd-form-message>\n        </ng-container>\n\n        <fd-form-message *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\" type=\"error\">\n            <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n            </ng-container>\n        </fd-form-message>\n    </fdp-input-message-group>\n</ng-template>\n\n<ng-template #innerErrorRenderers>\n    <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n        <ng-container *ngFor=\"let error of groupedErrors\">\n            <ng-template\n                [ngIf]=\"error.directive._headingTemplateRef\"\n                [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n            >\n            </ng-template>\n            <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n                <br />\n            </ng-container>\n            <ng-template\n                [ngIf]=\"error.directive._descriptionTemplateRef\"\n                [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n            >\n            </ng-template>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\">\n        <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n    <ng-container *ngIf=\"hintTarget === 'label'; else withoutHint\">\n        <label\n            [id]=\"'fdp-form-label-' + id\"\n            [required]=\"editable && required\"\n            fd-form-label\n            [inlineHelpContent]=\"hintOptions.content\"\n            [inlineHelpBodyPlacement]=\"hintOptions.placement || 'top'\"\n            [inlineHelpPlacement]=\"hintOptions.position || 'after'\"\n            [inlineHelpGlyph]=\"hintOptions.glyph || ''\"\n            [inlineHelpTriggers]=\"hintOptions.trigger || []\"\n            [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n            [colon]=\"colon\"\n        >\n            <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n        </label>\n    </ng-container>\n    <ng-template #withoutHint>\n        <label\n            [id]=\"'fdp-form-label-' + id\"\n            [required]=\"editable && required\"\n            fd-form-label\n            [colon]=\"colon\"\n            [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n        >\n            <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n        </label>\n    </ng-template>\n</ng-template>\n\n<ng-template #gapTemplate>\n    <ng-container *ngIf=\"hintTarget === 'input' && hintOptions.content; else withoutHint\">\n        <div class=\"fd-col fd-form-field-inline-help-container\" [class]=\"_gapColumnLayoutClass\">\n            <span fd-link [undecorated]=\"true\">\n                <fd-icon\n                    [fd-inline-help]=\"hintOptions.content\"\n                    [glyph]=\"hintOptions.glyph\"\n                    [placement]=\"hintOptions.placement || null\"\n                    [triggers]=\"hintOptions.trigger || []\"\n                    tabindex=\"0\"\n                >\n                </fd-icon>\n            </span>\n        </div>\n    </ng-container>\n    <ng-template #withoutHint>\n        <div class=\"fd-col\" [class]=\"_gapColumnLayoutClass\"></div>\n    </ng-template>\n</ng-template>\n", styles: [".fd-form-label__wrapper{display:flex;width:100%;white-space:nowrap}.fd-form-field-inline-help-container{overflow:visible!important}.fd-form-field-inline-help-container [class*=sap-icon]{margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.FormGroupContainer, decorators: [{
@@ -1189,74 +1182,6 @@ class DynamicFormControl extends FormControl {
     }
 }
 
-const dynamicFormFieldProvider = {
-    provide: FD_FORM_FIELD,
-    useExisting: forwardRef(() => FormFieldComponent)
-};
-const dynamicFormGroupChildProvider = {
-    provide: FORM_GROUP_CHILD_FIELD_TOKEN,
-    useExisting: forwardRef(() => FormFieldComponent)
-};
-const FORM_GENERATOR_ITEM_CONFIG = new InjectionToken('FormGeneratorItemConfig');
-const FORM_GENERATOR_CONFIG = new InjectionToken('FormGeneratorConfig');
-const defaultFormGeneratorConfig = {
-    controlNameSeparator: '|',
-    ungroupedControlsName: 'ungrouped'
-};
-const defaultFormGeneratorConfigProvider = {
-    provide: FORM_GENERATOR_CONFIG,
-    useValue: defaultFormGeneratorConfig
-};
-const defaultFormGeneratorItemConfig = {
-    useMessageAsPlaceholder: true,
-    required: false,
-    validators: [Validators.nullValidator]
-};
-const defaultFormGeneratorItemConfigProvider = {
-    provide: FORM_GENERATOR_ITEM_CONFIG,
-    useValue: defaultFormGeneratorItemConfig
-};
-
-/**
- * Abstract class that used as a base for the Dynamic Form Generator components.
- */
-class BaseDynamicFormGeneratorControl {
-    /** @description Returns form item choices. */
-    get choices() {
-        return this.formItem.choices ?? [];
-    }
-    /** @description Returns form item placeholder. */
-    get placeholder() {
-        if (!this.formItem) {
-            return '';
-        }
-        if (this.formItem?.placeholder) {
-            return this.formItem?.placeholder;
-        }
-        return (this.formItem?.useMessageAsPlaceholder && this.formItem?.message) || '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BaseDynamicFormGeneratorControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: BaseDynamicFormGeneratorControl, inputs: { formItem: "formItem", id: "id", name: "name", form: "form", formField: "formField", formGroupName: "formGroupName" }, providers: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BaseDynamicFormGeneratorControl, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [dynamicFormFieldProvider, dynamicFormGroupChildProvider]
-                }]
-        }], propDecorators: { formItem: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], formField: [{
-                type: Input
-            }], formGroupName: [{
-                type: Input
-            }] } });
-
 /**
  * @license
  * F. Kolar
@@ -1366,18 +1291,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Output
             }] } });
 
-class PlatformInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, imports: [InputComponent], exports: [InputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, imports: [InputComponent] }); }
+const dynamicFormFieldProvider = {
+    provide: FD_FORM_FIELD,
+    useExisting: forwardRef(() => FormFieldComponent)
+};
+const dynamicFormGroupChildProvider = {
+    provide: FORM_GROUP_CHILD_FIELD_TOKEN,
+    useExisting: forwardRef(() => FormFieldComponent)
+};
+const FORM_GENERATOR_ITEM_CONFIG = new InjectionToken('FormGeneratorItemConfig');
+const FORM_GENERATOR_CONFIG = new InjectionToken('FormGeneratorConfig');
+const defaultFormGeneratorConfig = {
+    controlNameSeparator: '|',
+    ungroupedControlsName: 'ungrouped'
+};
+const defaultFormGeneratorConfigProvider = {
+    provide: FORM_GENERATOR_CONFIG,
+    useValue: defaultFormGeneratorConfig
+};
+const defaultFormGeneratorItemConfig = {
+    useMessageAsPlaceholder: true,
+    required: false,
+    validators: [Validators.nullValidator]
+};
+const defaultFormGeneratorItemConfigProvider = {
+    provide: FORM_GENERATOR_ITEM_CONFIG,
+    useValue: defaultFormGeneratorItemConfig
+};
+
+/**
+ * Abstract class that used as a base for the Dynamic Form Generator components.
+ */
+class BaseDynamicFormGeneratorControl {
+    /** @description Returns form item choices. */
+    get choices() {
+        return this.formItem.choices ?? [];
+    }
+    /** @description Returns form item placeholder. */
+    get placeholder() {
+        if (!this.formItem) {
+            return '';
+        }
+        if (this.formItem?.placeholder) {
+            return this.formItem?.placeholder;
+        }
+        return (this.formItem?.useMessageAsPlaceholder && this.formItem?.message) || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BaseDynamicFormGeneratorControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: BaseDynamicFormGeneratorControl, inputs: { formItem: "formItem", id: "id", name: "name", form: "form", formField: "formField", formGroupName: "formGroupName" }, providers: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BaseDynamicFormGeneratorControl, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [InputComponent],
-                    exports: [InputComponent]
+                    providers: [dynamicFormFieldProvider, dynamicFormGroupChildProvider]
                 }]
-        }] });
+        }], propDecorators: { formItem: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }], formGroupName: [{
+                type: Input
+            }] } });
 
 class DynamicFormGeneratorInputComponent extends BaseDynamicFormGeneratorControl {
     /** @hidden */
@@ -1385,11 +1365,11 @@ class DynamicFormGeneratorInputComponent extends BaseDynamicFormGeneratorControl
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorInputComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-input", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\" *ngIf=\"formField\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-input\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [type]=\"formItem.controlType || 'text'\"\n            [formControlName]=\"name\"\n        ></fdp-input>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: PlatformInputModule }, { kind: "component", type: InputComponent, selector: "fdp-input", inputs: ["type", "required", "value"], outputs: ["focusChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorInputComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-input", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\" *ngIf=\"formField\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-input\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [type]=\"formItem.controlType || 'text'\"\n            [formControlName]=\"name\"\n        ></fdp-input>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: InputComponent, selector: "fdp-input", inputs: ["type", "required", "value"], outputs: ["focusChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-dynamic-form-generator-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [NgIf, FormsModule, ReactiveFormsModule, PlatformInputModule], template: "<ng-container [formGroup]=\"form\" *ngIf=\"formField\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-input\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [type]=\"formItem.controlType || 'text'\"\n            [formControlName]=\"name\"\n        ></fdp-input>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-dynamic-form-generator-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [NgIf, FormsModule, ReactiveFormsModule, InputComponent], template: "<ng-container [formGroup]=\"form\" *ngIf=\"formField\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-input\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [type]=\"formItem.controlType || 'text'\"\n            [formControlName]=\"name\"\n        ></fdp-input>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
 
 /** Change event object emitted by Platform Checkbox. */
@@ -1783,11 +1763,11 @@ class RadioButtonComponent extends BaseInput {
         this._cd.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: RadioButtonComponent, isStandalone: true, selector: "fdp-radio-button", inputs: { title: "title", tabIndex: "tabIndex", value: "value", forceRender: "forceRender" }, outputs: { checked: "checked" }, viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true }, { propertyName: "coreRadioButton", first: true, predicate: RadioButtonComponent$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #renderer>\n    <fd-radio-button\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [tabIndex]=\"_isChecked ? 0 : tabIndex\"\n        [title]=\"title\"\n        [ariaLabel]=\"ariaLabel\"\n        [ariaLabelledBy]=\"ariaLabelledBy\"\n        [ariaDescribedBy]=\"ariaDescribedBy\"\n        [ngModel]=\"_currentValue\"\n        (ngModelChange)=\"_valueChange($event, true)\"\n    >\n        <ng-content></ng-content>\n    </fd-radio-button>\n</ng-template>\n\n<ng-container *ngIf=\"forceRender\">\n    <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: RadioModule }, { kind: "component", type: i2.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: RadioButtonComponent, isStandalone: true, selector: "fdp-radio-button", inputs: { title: "title", tabIndex: "tabIndex", value: "value", forceRender: "forceRender" }, outputs: { checked: "checked" }, viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true }, { propertyName: "coreRadioButton", first: true, predicate: RadioButtonComponent$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #renderer>\n    <fd-radio-button\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [tabIndex]=\"_isChecked ? 0 : tabIndex\"\n        [title]=\"title\"\n        [ariaLabel]=\"ariaLabel\"\n        [ariaLabelledBy]=\"ariaLabelledBy\"\n        [ariaDescribedBy]=\"ariaDescribedBy\"\n        [ngModel]=\"_currentValue\"\n        (ngModelChange)=\"_valueChange($event, true)\"\n    >\n        <ng-content></ng-content>\n    </fd-radio-button>\n</ng-template>\n\n<ng-container *ngIf=\"forceRender\">\n    <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n</ng-container>\n", dependencies: [{ kind: "component", type: RadioButtonComponent$1, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RadioModule, FormsModule, NgIf, NgTemplateOutlet], template: "<ng-template #renderer>\n    <fd-radio-button\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [tabIndex]=\"_isChecked ? 0 : tabIndex\"\n        [title]=\"title\"\n        [ariaLabel]=\"ariaLabel\"\n        [ariaLabelledBy]=\"ariaLabelledBy\"\n        [ariaDescribedBy]=\"ariaDescribedBy\"\n        [ngModel]=\"_currentValue\"\n        (ngModelChange)=\"_valueChange($event, true)\"\n    >\n        <ng-content></ng-content>\n    </fd-radio-button>\n</ng-template>\n\n<ng-container *ngIf=\"forceRender\">\n    <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RadioButtonComponent$1, FormsModule, NgIf, NgTemplateOutlet], template: "<ng-template #renderer>\n    <fd-radio-button\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [tabIndex]=\"_isChecked ? 0 : tabIndex\"\n        [title]=\"title\"\n        [ariaLabel]=\"ariaLabel\"\n        [ariaLabelledBy]=\"ariaLabelledBy\"\n        [ariaDescribedBy]=\"ariaDescribedBy\"\n        [ngModel]=\"_currentValue\"\n        (ngModelChange)=\"_valueChange($event, true)\"\n    >\n        <ng-content></ng-content>\n    </fd-radio-button>\n</ng-template>\n\n<ng-container *ngIf=\"forceRender\">\n    <ng-container *ngTemplateOutlet=\"renderer\"></ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2475,32 +2455,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['keyup', ['$event']]
             }] } });
 
-class PlatformTextAreaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, imports: [TextAreaComponent], exports: [TextAreaComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, imports: [TextAreaComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [TextAreaComponent],
-                    exports: [TextAreaComponent]
-                }]
-        }] });
-
 class DynamicFormGeneratorEditorComponent extends BaseDynamicFormGeneratorControl {
     /** @hidden */
     constructor() {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorEditorComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-editor", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-textarea [id]=\"id\" [placeholder]=\"placeholder\" [name]=\"name\" [formControlName]=\"name\"></fdp-textarea>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: PlatformTextAreaModule }, { kind: "component", type: TextAreaComponent, selector: "fdp-textarea", inputs: ["height", "growingMaxLines", "cols", "wrapType", "readonly", "maxLength", "showExceededText", "growing", "value"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorEditorComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-editor", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-textarea [id]=\"id\" [placeholder]=\"placeholder\" [name]=\"name\" [formControlName]=\"name\"></fdp-textarea>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: TextAreaComponent, selector: "fdp-textarea", inputs: ["height", "growingMaxLines", "cols", "wrapType", "readonly", "maxLength", "showExceededText", "growing", "value"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-dynamic-form-generator-editor', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformTextAreaModule], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-textarea [id]=\"id\" [placeholder]=\"placeholder\" [name]=\"name\" [formControlName]=\"name\"></fdp-textarea>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-dynamic-form-generator-editor', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, TextAreaComponent], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-textarea [id]=\"id\" [placeholder]=\"placeholder\" [name]=\"name\" [formControlName]=\"name\"></fdp-textarea>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
 
+// Increasing integer for generating unique ids for radio components.
+let nextUniqueId = 0;
+/**
+ * Used to represent an option of the select component.
+ */
+class OptionComponent {
+    constructor() {
+        /** Option id attribute */
+        this.id = `fdp-option-${nextUniqueId++}`;
+        /** Whether to disable this option specifically. */
+        this.disabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: OptionComponent, isStandalone: true, selector: "fdp-option", inputs: { id: "id", value: "value", disabled: "disabled" }, ngImport: i0, template: `<li fd-option [id]="id" [value]="value" [disabled]="disabled"><ng-content></ng-content></li>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-option',
+                    template: `<li fd-option [id]="id" [value]="value" [disabled]="disabled"><ng-content></ng-content></li>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [SelectModule]
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
 /**
  * Default options for Combobox
  */
@@ -2996,12 +2996,12 @@ class SelectComponent extends BaseSelect {
     _setOptionAttribute(element, proportion) {
         element.setAttribute('style', 'width: ' + proportion + '%; max-width: ' + proportion + '%');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i3$1.DynamicComponentService }, { token: SelectConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SelectComponent, isStandalone: true, selector: "fdp-select", inputs: { value: "value", inline: "inline" }, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent$1, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"value\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    <li fd-option *ngIf=\"noValueLabel\" [disabled]=\"false\" [value]=\"null\">\n        {{ noValueLabel }}\n    </li>\n    <li\n        fd-option\n        *ngFor=\"let item of _optionItems; index as index\"\n        [disabled]=\"!!item.disabled\"\n        [value]=\"item.value\"\n        [attr.aria-labelledby]=\"ariaLabel\"\n        [attr.aria-disabled]=\"disabled\"\n    >\n        <fd-icon *ngIf=\"item.icon\" [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n        <ng-container\n            [ngTemplateOutlet]=\"listItem\"\n            [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n        ></ng-container>\n        <ng-container\n            secondary\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: item }\"\n        ></ng-container>\n    </li>\n</fd-select>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate\"\n        [ngTemplateOutlet]=\"_selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!_optionItemTemplate\">\n        <span [innerHTML]=\"optionItem.label\"></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"_optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!_secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"_secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--fdSelect_Background, var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);min-width:var(--fdSelect_Min_Width, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--fdSelect_Hover_Background, var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--fdSelect_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;z-index:5}.fd-select__control .fd-select__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:first-child[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-hover,.fd-select__control .fd-select__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-hover[dir=rtl],.fd-select__control .fd-select__button:first-child:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-hover,[dir=rtl] .fd-select__control .fd-select__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-active,.fd-select__control .fd-select__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-active[dir=rtl],.fd-select__control .fd-select__button:first-child:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-active,[dir=rtl] .fd-select__control .fd-select__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child).is-hover,.fd-select__control .fd-select__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-hover[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-hover,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active,.fd-select__control .fd-select__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-active,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:first-child .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,.fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,.fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{-webkit-box-sizing:border-box;--fdSelect_Min_Width:2.5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSelect_Text_Content_Color, var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display, inline-block);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4$1.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i4$1.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i3.DynamicComponentService }, { token: SelectConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SelectComponent, isStandalone: true, selector: "fdp-select", inputs: { value: "value", inline: "inline" }, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent$1, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    <li fd-option *ngIf=\"noValueLabel\" [disabled]=\"false\" [value]=\"null\">\n        {{ noValueLabel }}\n    </li>\n    <li\n        fd-option\n        *ngFor=\"let item of _optionItems; index as index\"\n        [disabled]=\"!!item.disabled\"\n        [value]=\"item.value\"\n        [attr.aria-labelledby]=\"ariaLabel\"\n        [attr.aria-disabled]=\"disabled\"\n    >\n        <fd-icon *ngIf=\"item.icon\" [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n        <ng-container\n            [ngTemplateOutlet]=\"listItem\"\n            [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n        ></ng-container>\n        <ng-container\n            secondary\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: item }\"\n        ></ng-container>\n    </li>\n</fd-select>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate\"\n        [ngTemplateOutlet]=\"_selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!_optionItemTemplate\">\n        <span [innerHTML]=\"optionItem.label\"></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"_optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!_secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"_secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--fdSelect_Background, var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);min-width:var(--fdSelect_Min_Width, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--fdSelect_Hover_Background, var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--fdSelect_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;z-index:5}.fd-select__control .fd-select__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:first-child[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-hover,.fd-select__control .fd-select__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-hover[dir=rtl],.fd-select__control .fd-select__button:first-child:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-hover,[dir=rtl] .fd-select__control .fd-select__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-active,.fd-select__control .fd-select__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-active[dir=rtl],.fd-select__control .fd-select__button:first-child:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-active,[dir=rtl] .fd-select__control .fd-select__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child).is-hover,.fd-select__control .fd-select__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-hover[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-hover,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active,.fd-select__control .fd-select__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-active,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:first-child .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,.fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,.fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{-webkit-box-sizing:border-box;--fdSelect_Min_Width:2.5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSelect_Text_Content_Color, var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display, inline-block);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i4.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], standalone: true, imports: [SelectModule, FormsModule, NgIf, NgFor, IconModule, NgTemplateOutlet, NgClass, ListSecondaryDirective], template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"value\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    <li fd-option *ngIf=\"noValueLabel\" [disabled]=\"false\" [value]=\"null\">\n        {{ noValueLabel }}\n    </li>\n    <li\n        fd-option\n        *ngFor=\"let item of _optionItems; index as index\"\n        [disabled]=\"!!item.disabled\"\n        [value]=\"item.value\"\n        [attr.aria-labelledby]=\"ariaLabel\"\n        [attr.aria-disabled]=\"disabled\"\n    >\n        <fd-icon *ngIf=\"item.icon\" [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n        <ng-container\n            [ngTemplateOutlet]=\"listItem\"\n            [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n        ></ng-container>\n        <ng-container\n            secondary\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: item }\"\n        ></ng-container>\n    </li>\n</fd-select>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate\"\n        [ngTemplateOutlet]=\"_selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!_optionItemTemplate\">\n        <span [innerHTML]=\"optionItem.label\"></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"_optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!_secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"_secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--fdSelect_Background, var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);min-width:var(--fdSelect_Min_Width, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--fdSelect_Hover_Background, var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--fdSelect_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;z-index:5}.fd-select__control .fd-select__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:first-child[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-hover,.fd-select__control .fd-select__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-hover[dir=rtl],.fd-select__control .fd-select__button:first-child:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-hover,[dir=rtl] .fd-select__control .fd-select__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-active,.fd-select__control .fd-select__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-active[dir=rtl],.fd-select__control .fd-select__button:first-child:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-active,[dir=rtl] .fd-select__control .fd-select__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child).is-hover,.fd-select__control .fd-select__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-hover[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-hover,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active,.fd-select__control .fd-select__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-active,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:first-child .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,.fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,.fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{-webkit-box-sizing:border-box;--fdSelect_Min_Width:2.5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSelect_Text_Content_Color, var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display, inline-block);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"] }]
+            args: [{ selector: 'fdp-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], standalone: true, imports: [SelectModule, FormsModule, NgIf, NgFor, IconComponent, NgTemplateOutlet, NgClass, ListSecondaryDirective], template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    <li fd-option *ngIf=\"noValueLabel\" [disabled]=\"false\" [value]=\"null\">\n        {{ noValueLabel }}\n    </li>\n    <li\n        fd-option\n        *ngFor=\"let item of _optionItems; index as index\"\n        [disabled]=\"!!item.disabled\"\n        [value]=\"item.value\"\n        [attr.aria-labelledby]=\"ariaLabel\"\n        [attr.aria-disabled]=\"disabled\"\n    >\n        <fd-icon *ngIf=\"item.icon\" [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n        <ng-container\n            [ngTemplateOutlet]=\"listItem\"\n            [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n        ></ng-container>\n        <ng-container\n            secondary\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: item }\"\n        ></ng-container>\n    </li>\n</fd-select>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate\"\n        [ngTemplateOutlet]=\"_selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!_optionItemTemplate\">\n        <span [innerHTML]=\"optionItem.label\"></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"_optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!_secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"_secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--fdSelect_Background, var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);min-width:var(--fdSelect_Min_Width, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--fdSelect_Hover_Background, var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--fdSelect_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;z-index:5}.fd-select__control .fd-select__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:first-child[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-hover,.fd-select__control .fd-select__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-hover[dir=rtl],.fd-select__control .fd-select__button:first-child:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-hover,[dir=rtl] .fd-select__control .fd-select__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:first-child.is-active,.fd-select__control .fd-select__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-active[dir=rtl],.fd-select__control .fd-select__button:first-child:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-active,[dir=rtl] .fd-select__control .fd-select__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child).is-hover,.fd-select__control .fd-select__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-hover[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-hover,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active,.fd-select__control .fd-select__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-active,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:first-child .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,.fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,.fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{-webkit-box-sizing:border-box;--fdSelect_Min_Width:2.5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSelect_Text_Content_Color, var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display, inline-block);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3014,7 +3014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$1.DynamicComponentService }, { type: SelectConfig }, { type: i1.PlatformFormField, decorators: [{
+                }] }, { type: i3.DynamicComponentService }, { type: SelectConfig }, { type: i1.PlatformFormField, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -3041,63 +3041,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: [SelectComponent$1, { static: true }]
             }] } });
 
-// Increasing integer for generating unique ids for radio components.
-let nextUniqueId = 0;
-/**
- * Used to represent an option of the select component.
- */
-class OptionComponent {
-    constructor() {
-        /** Option id attribute */
-        this.id = `fdp-option-${nextUniqueId++}`;
-        /** Whether to disable this option specifically. */
-        this.disabled = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: OptionComponent, isStandalone: true, selector: "fdp-option", inputs: { id: "id", value: "value", disabled: "disabled" }, ngImport: i0, template: `<li fd-option [id]="id" [value]="value" [disabled]="disabled"><ng-content></ng-content></li>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4$1.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: OptionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fdp-option',
-                    template: `<li fd-option [id]="id" [value]="value" [disabled]="disabled"><ng-content></ng-content></li>`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                    imports: [SelectModule]
-                }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-class PlatformSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, imports: [SelectComponent, OptionComponent], exports: [SelectComponent, OptionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, imports: [SelectComponent, OptionComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [SelectComponent, OptionComponent],
-                    exports: [SelectComponent, OptionComponent]
-                }]
-        }] });
-
 class DynamicFormGeneratorSelectComponent extends BaseDynamicFormGeneratorControl {
     /** @hidden */
     constructor() {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorSelectComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-select", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-select\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [name]=\"name\"\n            [list]=\"formItem.choices\"\n            [formControlName]=\"name\"\n            [secondaryKey]=\"formItem.secondaryKey\"\n            [showSecondaryText]=\"formItem.showSecondaryText ? formItem.showSecondaryText : false\"\n            [secondaryTextAlignment]=\"formItem.secondaryTextAlignment ? formItem.secondaryTextAlignment : 'right'\"\n            [controlTemplate]=\"formItem.controlTemplate\"\n        ></fdp-select>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: PlatformSelectModule }, { kind: "component", type: SelectComponent, selector: "fdp-select", inputs: ["value", "inline"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorSelectComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-select", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-select\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [name]=\"name\"\n            [list]=\"formItem.choices\"\n            [formControlName]=\"name\"\n            [secondaryKey]=\"formItem.secondaryKey\"\n            [showSecondaryText]=\"formItem.showSecondaryText ? formItem.showSecondaryText : false\"\n            [secondaryTextAlignment]=\"formItem.secondaryTextAlignment ? formItem.secondaryTextAlignment : 'right'\"\n            [controlTemplate]=\"formItem.controlTemplate\"\n        ></fdp-select>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: SelectComponent, selector: "fdp-select", inputs: ["value", "inline"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-dynamic-form-generator-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformSelectModule], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-select\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [name]=\"name\"\n            [list]=\"formItem.choices\"\n            [formControlName]=\"name\"\n            [secondaryKey]=\"formItem.secondaryKey\"\n            [showSecondaryText]=\"formItem.showSecondaryText ? formItem.showSecondaryText : false\"\n            [secondaryTextAlignment]=\"formItem.secondaryTextAlignment ? formItem.secondaryTextAlignment : 'right'\"\n            [controlTemplate]=\"formItem.controlTemplate\"\n        ></fdp-select>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-dynamic-form-generator-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectComponent, OptionComponent], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-select\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [name]=\"name\"\n            [list]=\"formItem.choices\"\n            [formControlName]=\"name\"\n            [secondaryKey]=\"formItem.secondaryKey\"\n            [showSecondaryText]=\"formItem.showSecondaryText ? formItem.showSecondaryText : false\"\n            [secondaryTextAlignment]=\"formItem.secondaryTextAlignment ? formItem.secondaryTextAlignment : 'right'\"\n            [controlTemplate]=\"formItem.controlTemplate\"\n        ></fdp-select>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -3305,7 +3259,7 @@ class PlatformDatePickerComponent extends BaseInput {
         }
         this._changeDetectorRef.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i2$1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i2.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformDatePickerComponent, isStandalone: true, selector: "fdp-date-picker", inputs: { value: "value", type: "type", selectedDate: "selectedDate", selectedRangeDate: "selectedRangeDate", startingDayOfWeek: "startingDayOfWeek", rangeHoverEffect: "rangeHoverEffect", useValidation: "useValidation", showTodayButton: "showTodayButton", todayButtonLabel: "todayButtonLabel", allowNull: "allowNull", activeView: "activeView", placement: "placement", appendTo: "appendTo", closeOnDateChoose: "closeOnDateChoose", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", showWeekNumbers: "showWeekNumbers", isOpen: "isOpen", inline: "inline", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction", disableRangeStartFunction: "disableRangeStartFunction", disableRangeEndFunction: "disableRangeEndFunction" }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedRangeDateChange: "selectedRangeDateChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" } }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatePickerComponent, multi: true }], viewQueries: [{ propertyName: "fdDatePickerComponent", first: true, predicate: DatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-date-picker\n    [inputId]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [type]=\"type\"\n    [state]=\"state\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [selectedDate]=\"selectedDate\"\n    [showTodayButton]=\"showTodayButton\"\n    [todayButtonLabel]=\"todayButtonLabel\"\n    [selectedRangeDate]=\"selectedRangeDate\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [rangeHoverEffect]=\"rangeHoverEffect\"\n    [useValidation]=\"useValidation\"\n    [allowNull]=\"allowNull\"\n    [activeView]=\"activeView\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [disabled]=\"disabled\"\n    [closeOnDateChoose]=\"closeOnDateChoose\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [isOpen]=\"isOpen\"\n    [disableFunction]=\"disableFunction\"\n    [disableRangeStartFunction]=\"disableRangeStartFunction\"\n    [disableRangeEndFunction]=\"disableRangeEndFunction\"\n    [inline]=\"inline\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDateChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (selectedDateChange)=\"handleSelectedDateChange($event)\"\n    (selectedRangeDateChange)=\"handleSelectedRangeDateChange($event)\"\n>\n    <ng-content></ng-content>\n</fd-date-picker>\n", dependencies: [{ kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerComponent, decorators: [{
@@ -3343,7 +3297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }, {
                     type: Inject,
                     args: [FD_FORM_FIELD_CONTROL]
-                }] }, { type: i2$1.DatetimeAdapter, decorators: [{
+                }] }, { type: i2.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -3437,30 +3391,17 @@ function createMissingDateImplementationError$1(provider) {
         `custom implementation.`);
 }
 
-class PlatformDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, imports: [PlatformDatePickerComponent], exports: [PlatformDatePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, imports: [PlatformDatePickerComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [PlatformDatePickerComponent],
-                    exports: [PlatformDatePickerComponent]
-                }]
-        }] });
-
 class DynamicFormGeneratorDatepickerComponent extends BaseDynamicFormGeneratorControl {
     /** @hidden */
     constructor() {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorDatepickerComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-datepicker", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-date-picker\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [formControlName]=\"name\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [allowNull]=\"false\"\n        ></fdp-date-picker>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: PlatformDatePickerModule }, { kind: "component", type: PlatformDatePickerComponent, selector: "fdp-date-picker", inputs: ["value", "type", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "showTodayButton", "todayButtonLabel", "allowNull", "activeView", "placement", "appendTo", "closeOnDateChoose", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorDatepickerComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-datepicker", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-date-picker\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [formControlName]=\"name\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [allowNull]=\"false\"\n        ></fdp-date-picker>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: PlatformDatePickerComponent, selector: "fdp-date-picker", inputs: ["value", "type", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "showTodayButton", "todayButtonLabel", "allowNull", "activeView", "placement", "appendTo", "closeOnDateChoose", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-dynamic-form-generator-datepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformDatePickerModule], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-date-picker\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [formControlName]=\"name\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [allowNull]=\"false\"\n        ></fdp-date-picker>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-dynamic-form-generator-datepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformDatePickerComponent], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-date-picker\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [formControlName]=\"name\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [allowNull]=\"false\"\n        ></fdp-date-picker>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -3540,11 +3481,11 @@ class SwitchComponent extends BaseInput {
         this.switchChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: SwitchConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SwitchComponent, isStandalone: true, selector: "fdp-switch", inputs: { ariaLabelledby: "ariaLabelledby", semantic: "semantic" }, outputs: { switchChange: "switchChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: SwitchComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<fd-switch\n    [id]=\"id\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [semantic]=\"semantic\"\n    [ariaLabel]=\"ariaLabel || ('platformSwitch.ariaLabel' | fdTranslate)\"\n    [ariaLabelledBy]=\"ariaLabelledby\"\n    [checked]=\"switchCurrentValue\"\n    (checkedChange)=\"onValueChange($event)\"\n></fd-switch>\n", dependencies: [{ kind: "ngmodule", type: SwitchModule }, { kind: "component", type: i3$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "disabled", "id", "name", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SwitchComponent, isStandalone: true, selector: "fdp-switch", inputs: { ariaLabelledby: "ariaLabelledby", semantic: "semantic" }, outputs: { switchChange: "switchChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: SwitchComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<fd-switch\n    [id]=\"id\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [semantic]=\"semantic\"\n    [ariaLabel]=\"ariaLabel || ('platformSwitch.ariaLabel' | fdTranslate)\"\n    [ariaLabelledBy]=\"ariaLabelledby\"\n    [checked]=\"switchCurrentValue\"\n    (checkedChange)=\"onValueChange($event)\"\n></fd-switch>\n", dependencies: [{ kind: "component", type: SwitchComponent$1, selector: "fd-switch", inputs: ["activeText", "inactiveText", "disabled", "id", "name", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: SwitchComponent, multi: true }], standalone: true, imports: [SwitchModule, FdTranslatePipe], template: "<fd-switch\n    [id]=\"id\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [semantic]=\"semantic\"\n    [ariaLabel]=\"ariaLabel || ('platformSwitch.ariaLabel' | fdTranslate)\"\n    [ariaLabelledBy]=\"ariaLabelledby\"\n    [checked]=\"switchCurrentValue\"\n    (checkedChange)=\"onValueChange($event)\"\n></fd-switch>\n" }]
+            args: [{ selector: 'fdp-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: SwitchComponent, multi: true }], standalone: true, imports: [SwitchComponent$1, FdTranslatePipe], template: "<fd-switch\n    [id]=\"id\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [semantic]=\"semantic\"\n    [ariaLabel]=\"ariaLabel || ('platformSwitch.ariaLabel' | fdTranslate)\"\n    [ariaLabelledBy]=\"ariaLabelledby\"\n    [checked]=\"switchCurrentValue\"\n    (checkedChange)=\"onValueChange($event)\"\n></fd-switch>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3583,163 +3524,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Output
             }] } });
 
-class PlatformSwitchModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, imports: [SwitchComponent], exports: [SwitchComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, imports: [SwitchComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [SwitchComponent],
-                    exports: [SwitchComponent]
-                }]
-        }] });
-
 class DynamicFormGeneratorSwitchComponent extends BaseDynamicFormGeneratorControl {
     /** @hidden */
     constructor() {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorSwitchComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-switch", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-switch\n            [id]=\"id\"\n            [name]=\"name\"\n            [semantic]=\"formItem.guiOptions?.additionalData?.semantic\"\n            [formControlName]=\"name\"\n        ></fdp-switch>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: PlatformSwitchModule }, { kind: "component", type: SwitchComponent, selector: "fdp-switch", inputs: ["ariaLabelledby", "semantic"], outputs: ["switchChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorSwitchComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-switch", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-switch\n            [id]=\"id\"\n            [name]=\"name\"\n            [semantic]=\"formItem.guiOptions?.additionalData?.semantic\"\n            [formControlName]=\"name\"\n        ></fdp-switch>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: SwitchComponent, selector: "fdp-switch", inputs: ["ariaLabelledby", "semantic"], outputs: ["switchChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-dynamic-form-generator-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformSwitchModule], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-switch\n            [id]=\"id\"\n            [name]=\"name\"\n            [semantic]=\"formItem.guiOptions?.additionalData?.semantic\"\n            [formControlName]=\"name\"\n        ></fdp-switch>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-dynamic-form-generator-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, SwitchComponent], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-switch\n            [id]=\"id\"\n            [name]=\"name\"\n            [semantic]=\"formItem.guiOptions?.additionalData?.semantic\"\n            [formControlName]=\"name\"\n        ></fdp-switch>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
 
-class AutoCompleteDirective {
-    /** @hidden */
-    get _element() {
-        return this._elementRef.nativeElement;
-    }
-    /** @hidden */
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        /** Event thrown, when the auto ahead text is accepted */
-        this.onComplete = new EventEmitter();
-        /** @hidden */
-        this._completeKeys = [ENTER];
-        /** @hidden */
-        this._fillKeys = [LEFT_ARROW, RIGHT_ARROW];
-        /** @hidden */
-        this._stopKeys = [BACKSPACE, DELETE, ESCAPE];
-    }
-    /** @hidden */
-    handleBlur() {
-        if (Boolean(this.inputText) && !this.mobile) {
-            this._element.value = this.inputText;
-        }
-    }
+const MULTIINPUT_COMPONENT = new InjectionToken('PlatformMultiInputInterface');
+
+class PlatformMultiInputMobileComponent extends MobileModeBase {
     /** @hidden */
-    handleKeyboardEvent(event) {
-        if (KeyUtil.isKeyCode(event, this._stopKeys)) {
-            this._element.value = this.inputText;
-        }
-        else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
-            this._sendCompleteEvent(true);
-        }
-        else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
-            this._sendCompleteEvent(false);
-        }
-        else if (!this._isControlKey(event) && this.inputText) {
-            /** Prevention from triggering typeahead, when having crtl/cmd + keys */
-            if (!this._triggerTypeAhead()) {
-                return;
-            }
-            this._oldValue = this.inputText;
-            const item = this._searchByStrategy();
-            if (item) {
-                this._typeahead(item.label);
-            }
-        }
-        this._lastKeyUpEvent = event;
+    constructor(elementRef, dialogService, multiInputComponent, mobileModes) {
+        super(elementRef, dialogService, multiInputComponent, MobileModeControl.MULTI_INPUT, mobileModes);
+        /** @hidden
+         * For internal usage
+         * Control element, which will be rendered inside dialog.
+         * List element, which will be rendered inside dialog.
+         */
+        this.childContent = null;
     }
     /** @hidden */
-    _typeahead(displayedValue) {
-        const selectionStartIndex = this.inputText.length;
-        this._element.value = displayedValue;
-        this._setSelectionRange(selectionStartIndex, displayedValue.length);
+    ngOnInit() {
+        this._listenOnMultiInputOpenChange();
     }
     /** @hidden */
-    _setSelectionRange(selectionStart, selectionEnd) {
-        const direction = this._element.selectionDirection;
-        this._element.setSelectionRange(selectionStart, selectionEnd, direction ?? undefined);
+    ngOnDestroy() {
+        super.onDestroy();
     }
     /** @hidden */
-    _isControlKey(event) {
-        return KeyUtil.isKeyCode(event, CONTROL) || event.ctrlKey;
+    _handleApprove() {
+        this.dialogRef.close();
+        this._component._dialogApprove();
     }
     /** @hidden */
-    _triggerTypeAhead() {
-        return !(this._lastKeyUpEvent &&
-            KeyUtil.isKeyCode(this._lastKeyUpEvent, CONTROL) &&
-            this.inputText === this._oldValue);
+    _handleDismiss() {
+        this.dialogRef.dismiss();
+        this._component._dialogDismiss(this._selectedBackup);
     }
     /** @hidden */
-    _sendCompleteEvent(forceClose) {
-        this.onComplete.emit({
-            term: this._element.value,
-            forceClose
-        });
-        if (this.inputText !== this._oldValue) {
-            const inputTextLength = this.inputText.length;
-            this._element.setSelectionRange(inputTextLength, inputTextLength);
-        }
+    _listenOnMultiInputOpenChange() {
+        this._component.openChange
+            .pipe(distinctUntilChanged(), takeUntil(this._onDestroy$))
+            .subscribe((isOpen) => this._toggleDialog(isOpen));
     }
     /** @hidden */
-    _searchByStrategy() {
-        const [firstItem] = this.options;
-        if (!firstItem) {
+    _toggleDialog(open) {
+        if (!open) {
+            this._handleApprove();
             return;
         }
-        if (firstItem.isGroup) {
-            let matchedSelectItem;
-            for (const option of this.options) {
-                if (!option.children) {
-                    continue;
-                }
-                matchedSelectItem = this._findByStrategyStartsWith(option.children, this.inputText);
-                if (matchedSelectItem) {
-                    break;
-                }
-            }
-            if (matchedSelectItem) {
-                return matchedSelectItem;
-            }
+        this._selectedBackup = [...this._component._selected];
+        if (!this._dialogService.hasOpenDialogs()) {
+            this._open();
         }
-        return this._findByStrategyStartsWith(this.options, this.inputText);
     }
     /** @hidden */
-    _findByStrategyStartsWith(options, inputText) {
-        return options.find((option) => option.label.toLocaleLowerCase().startsWith(inputText.toLocaleLowerCase()));
+    _open() {
+        this.dialogRef = this._dialogService.open(this.dialogTemplate, {
+            mobile: true,
+            disablePaddings: true,
+            ...this.dialogConfig,
+            backdropClickCloseable: false,
+            escKeyCloseable: false,
+            container: this._elementRef.nativeElement
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AutoCompleteDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: AutoCompleteDirective, isStandalone: true, selector: "[fdp-auto-complete]", inputs: { options: "options", inputText: "inputText", mobile: "mobile" }, outputs: { onComplete: "onComplete" }, host: { listeners: { "blur": "handleBlur()", "keyup": "handleKeyboardEvent($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DialogService }, { token: MULTIINPUT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformMultiInputMobileComponent, isStandalone: true, selector: "fdp-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-dialog-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"_handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\" class=\"fdp-multi-dialog-input\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".fdp-multi-dialog-input{display:inline!important}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i1$2.DialogTitleDirective, selector: "[fd-dialog-title]", inputs: ["id"] }, { kind: "directive", type: i1$2.DialogTemplateDirective, selector: "[fdDialogTemplate]", inputs: ["fdDialogTemplateConfig"] }, { kind: "directive", type: i3.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BarModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AutoCompleteDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-multi-input-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [DialogModule, NgIf, TemplateDirective, BarModule, NgTemplateOutlet, CdkScrollable, ScrollbarDirective], template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-dialog-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"_handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\" class=\"fdp-multi-dialog-input\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".fdp-multi-dialog-input{display:inline!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DialogService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MULTIINPUT_COMPONENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MOBILE_MODE_CONFIG]
+                }] }]; }, propDecorators: { dialogTemplate: [{
+                type: ViewChild,
+                args: ['dialogTemplate']
+            }] } });
+
+class PlatformMultiInputMobileModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, imports: [PlatformMultiInputMobileComponent], exports: [PlatformMultiInputMobileComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, imports: [PlatformMultiInputMobileComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, decorators: [{
+            type: NgModule,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[fdp-auto-complete]',
-                    standalone: true
+                    imports: [PlatformMultiInputMobileComponent],
+                    exports: [PlatformMultiInputMobileComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
-                type: Input
-            }], inputText: [{
-                type: Input
-            }], mobile: [{
-                type: Input
-            }], onComplete: [{
-                type: Output
-            }], handleBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
+        }] });
 
 /**
  * Default options for Multi-Input
@@ -4342,82 +4229,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['searchInputElement', { read: ElementRef }]
             }] } });
 
-const MULTIINPUT_COMPONENT = new InjectionToken('PlatformMultiInputInterface');
-
-class PlatformMultiInputMobileComponent extends MobileModeBase {
+class AutoCompleteDirective {
     /** @hidden */
-    constructor(elementRef, dialogService, multiInputComponent, mobileModes) {
-        super(elementRef, dialogService, multiInputComponent, MobileModeControl.MULTI_INPUT, mobileModes);
-        /** @hidden
-         * For internal usage
-         * Control element, which will be rendered inside dialog.
-         * List element, which will be rendered inside dialog.
-         */
-        this.childContent = null;
+    get _element() {
+        return this._elementRef.nativeElement;
+    }
+    /** @hidden */
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        /** Event thrown, when the auto ahead text is accepted */
+        this.onComplete = new EventEmitter();
+        /** @hidden */
+        this._completeKeys = [ENTER];
+        /** @hidden */
+        this._fillKeys = [LEFT_ARROW, RIGHT_ARROW];
+        /** @hidden */
+        this._stopKeys = [BACKSPACE, DELETE, ESCAPE];
+    }
+    /** @hidden */
+    handleBlur() {
+        if (Boolean(this.inputText) && !this.mobile) {
+            this._element.value = this.inputText;
+        }
+    }
+    /** @hidden */
+    handleKeyboardEvent(event) {
+        if (KeyUtil.isKeyCode(event, this._stopKeys)) {
+            this._element.value = this.inputText;
+        }
+        else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
+            this._sendCompleteEvent(true);
+        }
+        else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
+            this._sendCompleteEvent(false);
+        }
+        else if (!this._isControlKey(event) && this.inputText) {
+            /** Prevention from triggering typeahead, when having crtl/cmd + keys */
+            if (!this._triggerTypeAhead()) {
+                return;
+            }
+            this._oldValue = this.inputText;
+            const item = this._searchByStrategy();
+            if (item) {
+                this._typeahead(item.label);
+            }
+        }
+        this._lastKeyUpEvent = event;
     }
     /** @hidden */
-    ngOnInit() {
-        this._listenOnMultiInputOpenChange();
+    _typeahead(displayedValue) {
+        const selectionStartIndex = this.inputText.length;
+        this._element.value = displayedValue;
+        this._setSelectionRange(selectionStartIndex, displayedValue.length);
     }
     /** @hidden */
-    ngOnDestroy() {
-        super.onDestroy();
+    _setSelectionRange(selectionStart, selectionEnd) {
+        const direction = this._element.selectionDirection;
+        this._element.setSelectionRange(selectionStart, selectionEnd, direction ?? undefined);
     }
     /** @hidden */
-    _handleApprove() {
-        this.dialogRef.close();
-        this._component._dialogApprove();
+    _isControlKey(event) {
+        return KeyUtil.isKeyCode(event, CONTROL) || event.ctrlKey;
     }
     /** @hidden */
-    _handleDismiss() {
-        this.dialogRef.dismiss();
-        this._component._dialogDismiss(this._selectedBackup);
+    _triggerTypeAhead() {
+        return !(this._lastKeyUpEvent &&
+            KeyUtil.isKeyCode(this._lastKeyUpEvent, CONTROL) &&
+            this.inputText === this._oldValue);
     }
     /** @hidden */
-    _listenOnMultiInputOpenChange() {
-        this._component.openChange
-            .pipe(distinctUntilChanged(), takeUntil(this._onDestroy$))
-            .subscribe((isOpen) => this._toggleDialog(isOpen));
+    _sendCompleteEvent(forceClose) {
+        this.onComplete.emit({
+            term: this._element.value,
+            forceClose
+        });
+        if (this.inputText !== this._oldValue) {
+            const inputTextLength = this.inputText.length;
+            this._element.setSelectionRange(inputTextLength, inputTextLength);
+        }
     }
     /** @hidden */
-    _toggleDialog(open) {
-        if (!open) {
-            this._handleApprove();
+    _searchByStrategy() {
+        const [firstItem] = this.options;
+        if (!firstItem) {
             return;
         }
-        this._selectedBackup = [...this._component._selected];
-        if (!this._dialogService.hasOpenDialogs()) {
-            this._open();
+        if (firstItem.isGroup) {
+            let matchedSelectItem;
+            for (const option of this.options) {
+                if (!option.children) {
+                    continue;
+                }
+                matchedSelectItem = this._findByStrategyStartsWith(option.children, this.inputText);
+                if (matchedSelectItem) {
+                    break;
+                }
+            }
+            if (matchedSelectItem) {
+                return matchedSelectItem;
+            }
         }
+        return this._findByStrategyStartsWith(this.options, this.inputText);
     }
     /** @hidden */
-    _open() {
-        this.dialogRef = this._dialogService.open(this.dialogTemplate, {
-            mobile: true,
-            disablePaddings: true,
-            ...this.dialogConfig,
-            backdropClickCloseable: false,
-            escKeyCloseable: false,
-            container: this._elementRef.nativeElement
-        });
+    _findByStrategyStartsWith(options, inputText) {
+        return options.find((option) => option.label.toLocaleLowerCase().startsWith(inputText.toLocaleLowerCase()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DialogService }, { token: MULTIINPUT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformMultiInputMobileComponent, isStandalone: true, selector: "fdp-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-dialog-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"_handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\" class=\"fdp-multi-dialog-input\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".fdp-multi-dialog-input{display:inline!important}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i1$2.DialogTitleDirective, selector: "[fd-dialog-title]", inputs: ["id"] }, { kind: "directive", type: i1$2.DialogTemplateDirective, selector: "[fdDialogTemplate]", inputs: ["fdDialogTemplateConfig"] }, { kind: "directive", type: i3$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i3$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BarModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AutoCompleteDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: AutoCompleteDirective, isStandalone: true, selector: "[fdp-auto-complete]", inputs: { options: "options", inputText: "inputText", mobile: "mobile" }, outputs: { onComplete: "onComplete" }, host: { listeners: { "blur": "handleBlur()", "keyup": "handleKeyboardEvent($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-multi-input-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [DialogModule, NgIf, TemplateDirective, BarModule, NgTemplateOutlet, CdkScrollable, ScrollbarDirective], template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-dialog-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"_handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\" class=\"fdp-multi-dialog-input\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".fdp-multi-dialog-input{display:inline!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DialogService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MULTIINPUT_COMPONENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MOBILE_MODE_CONFIG]
-                }] }]; }, propDecorators: { dialogTemplate: [{
-                type: ViewChild,
-                args: ['dialogTemplate']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AutoCompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fdp-auto-complete]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input
+            }], inputText: [{
+                type: Input
+            }], mobile: [{
+                type: Input
+            }], onComplete: [{
+                type: Output
+            }], handleBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
             }] } });
 
 /* eslint-disable @typescript-eslint/member-ordering */
@@ -4744,7 +4685,7 @@ class PlatformMultiInputComponent extends BaseMultiInput {
             containerRef: this._viewContainerRef
         }, { injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i1$2.DialogConfig, optional: true }, { token: i3$1.DynamicComponentService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: DATA_PROVIDERS, optional: true }, { token: MultiInputConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i1$2.DialogConfig, optional: true }, { token: i3.DynamicComponentService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: DATA_PROVIDERS, optional: true }, { token: MultiInputConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformMultiInputComponent, isStandalone: true, selector: "fdp-multi-input", inputs: { tokenHiddenId: "tokenHiddenId", type: "type", autofocus: "autofocus", glyphAriaLabel: "glyphAriaLabel", selected: "selected", selectionMode: "selectionMode", hasByLine: "hasByLine", disabled: "disabled", fillControlMode: "fillControlMode", triggers: "triggers", closeOnOutsideClick: "closeOnOutsideClick", addOnButtonClickFn: "addOnButtonClickFn", displayFn: "displayFn" }, outputs: { selectionChange: "selectionChange" }, providers: [
             {
                 provide: FD_FORM_FIELD_CONTROL,
@@ -4752,7 +4693,7 @@ class PlatformMultiInputComponent extends BaseMultiInput {
                 multi: true
             },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "listTemplateDD", first: true, predicate: ListComponent$1, descendants: true }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_listItems", predicate: BaseListItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-multi-input\">\n    <ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        <fd-tokenizer\n            *ngIf=\"selected\"\n            [tokenizerFocusable]=\"false\"\n            [compactCollapse]=\"true\"\n            #tokenizer\n            class=\"fd-multi-input-tokenizer-custom\"\n            (moreClickedEvent)=\"moreClicked()\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n        >\n            <fd-token\n                [readOnly]=\"disabled\"\n                (onCloseClick)=\"removeToken(token)\"\n                *ngFor=\"let token of selected; let i = index\"\n                [attr.aria-posinset]=\"i\"\n                [attr.aria-setsize]=\"selected.length\"\n            >\n                <span>{{ token.label | displayFnPipe : displayFn }}</span>\n            </fd-token>\n\n            <input\n                #searchInputElement\n                type=\"text\"\n                class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                fdp-auto-complete\n                autocomplete=\"off\"\n                (onComplete)=\"_onAutoComplete($event)\"\n                (keydown.enter)=\"_onKeydownEnter($event)\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [inputText]=\"inputText\"\n                [options]=\"_suggestions\"\n                fd-input-group-input\n                fd-form-control\n                [attr.id]=\"id\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                (blur)=\"tokenizer._hideTokens()\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-readonly]=\"readonly\"\n                [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                [ariaLabelledBy]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"tokenHiddenId\"\n                aria-roledescription=\"Multi Value Input\"\n                fdkInitialFocus\n                [enabled]=\"autofocus\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            />\n        </fd-tokenizer>\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <fdp-list\n        [noBorder]=\"true\"\n        #listTemplateDD\n        [hasByLine]=\"hasByLine\"\n        [selectionMode]=\"selectionMode\"\n        *ngIf=\"_suggestions && _suggestions.length\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [interceptTabKey]=\"false\"\n        (keydown.tab)=\"close()\"\n    >\n        <ng-container *ngIf=\"!isGroup\">\n            <fdp-standard-list-item\n                *ngFor=\"let listItem of _suggestions\"\n                [title]=\"listItem.label\"\n                [description]=\"listItem.description || ''\"\n                [avatar]=\"listItem.avatarSrc\"\n                [value]=\"listItem.value\"\n                (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                (buttonClicked)=\"deleteToken(listItem)\"\n                role=\"option\"\n            >\n            </fdp-standard-list-item>\n        </ng-container>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <fdp-standard-list-item\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    [title]=\"optionItem.label\"\n                    [value]=\"optionItem.value\"\n                    (itemSelected)=\"addToArray(optionItem, true)\"\n                    (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                    (buttonClicked)=\"deleteToken(optionItem)\"\n                    role=\"option\"\n                >\n                </fdp-standard-list-item>\n            </ng-container>\n        </ng-container>\n    </fdp-list>\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "ngmodule", type: PlatformListModule }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.ListGroupHeaderComponent, selector: "fdp-list-group-header", inputs: ["groupHeaderTitle"] }, { kind: "component", type: i7.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "ngmodule", type: StandardListItemModule }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "listTemplateDD", first: true, predicate: ListComponent$1, descendants: true }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_listItems", predicate: BaseListItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-multi-input\">\n    <ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        <fd-tokenizer\n            *ngIf=\"selected\"\n            [tokenizerFocusable]=\"false\"\n            [compactCollapse]=\"true\"\n            #tokenizer\n            class=\"fd-multi-input-tokenizer-custom\"\n            (moreClickedEvent)=\"moreClicked()\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n            fdMultiAnnouncer\n            [multiAnnouncerOptions]=\"isOpen ? _suggestions : []\"\n        >\n            <fd-token\n                [readOnly]=\"disabled\"\n                (onCloseClick)=\"removeToken(token)\"\n                *ngFor=\"let token of selected; let i = index\"\n                [attr.aria-posinset]=\"i\"\n                [attr.aria-setsize]=\"selected.length\"\n            >\n                <span>{{ token.label | displayFnPipe : displayFn }}</span>\n            </fd-token>\n\n            <input\n                #searchInputElement\n                type=\"text\"\n                class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                fdp-auto-complete\n                autocomplete=\"off\"\n                (onComplete)=\"_onAutoComplete($event)\"\n                (keydown.enter)=\"_onKeydownEnter($event)\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [inputText]=\"inputText\"\n                [options]=\"_suggestions\"\n                fd-input-group-input\n                fd-form-control\n                [attr.id]=\"id\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                (blur)=\"tokenizer._hideTokens()\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-readonly]=\"readonly\"\n                [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                [ariaLabelledBy]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"tokenHiddenId\"\n                aria-roledescription=\"Multi Value Input\"\n                fdkInitialFocus\n                [enabled]=\"autofocus\"\n            />\n        </fd-tokenizer>\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <fdp-list\n        [noBorder]=\"true\"\n        #listTemplateDD\n        [hasByLine]=\"hasByLine\"\n        [selectionMode]=\"selectionMode\"\n        *ngIf=\"_suggestions && _suggestions.length\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [interceptTabKey]=\"false\"\n        (keydown.tab)=\"close()\"\n    >\n        <ng-container *ngIf=\"!isGroup\">\n            <fdp-standard-list-item\n                *ngFor=\"let listItem of _suggestions\"\n                [title]=\"listItem.label\"\n                [description]=\"listItem.description || ''\"\n                [avatar]=\"listItem.avatarSrc\"\n                [value]=\"listItem.value\"\n                (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                (buttonClicked)=\"deleteToken(listItem)\"\n                role=\"option\"\n            >\n            </fdp-standard-list-item>\n        </ng-container>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <fdp-standard-list-item\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    [title]=\"optionItem.label\"\n                    [value]=\"optionItem.value\"\n                    (itemSelected)=\"addToArray(optionItem, true)\"\n                    (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                    (buttonClicked)=\"deleteToken(optionItem)\"\n                    role=\"option\"\n                >\n                </fdp-standard-list-item>\n            </ng-container>\n        </ng-container>\n    </fdp-list>\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "ngmodule", type: PlatformListModule }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.ListGroupHeaderComponent, selector: "fdp-list-group-header", inputs: ["groupHeaderTitle"] }, { kind: "component", type: i7.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputComponent, decorators: [{
             type: Component,
@@ -4779,12 +4720,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         AutoCompleteDirective,
                         InitialFocusDirective,
                         PlatformListModule,
-                        StandardListItemModule,
+                        StandardListItemComponent,
                         DisplayFnPipe,
                         ContentDensityModule,
                         FdTranslatePipe,
                         MultiAnnouncerDirective
-                    ], template: "<div class=\"fd-multi-input\">\n    <ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        <fd-tokenizer\n            *ngIf=\"selected\"\n            [tokenizerFocusable]=\"false\"\n            [compactCollapse]=\"true\"\n            #tokenizer\n            class=\"fd-multi-input-tokenizer-custom\"\n            (moreClickedEvent)=\"moreClicked()\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n        >\n            <fd-token\n                [readOnly]=\"disabled\"\n                (onCloseClick)=\"removeToken(token)\"\n                *ngFor=\"let token of selected; let i = index\"\n                [attr.aria-posinset]=\"i\"\n                [attr.aria-setsize]=\"selected.length\"\n            >\n                <span>{{ token.label | displayFnPipe : displayFn }}</span>\n            </fd-token>\n\n            <input\n                #searchInputElement\n                type=\"text\"\n                class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                fdp-auto-complete\n                autocomplete=\"off\"\n                (onComplete)=\"_onAutoComplete($event)\"\n                (keydown.enter)=\"_onKeydownEnter($event)\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [inputText]=\"inputText\"\n                [options]=\"_suggestions\"\n                fd-input-group-input\n                fd-form-control\n                [attr.id]=\"id\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                (blur)=\"tokenizer._hideTokens()\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-readonly]=\"readonly\"\n                [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                [ariaLabelledBy]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"tokenHiddenId\"\n                aria-roledescription=\"Multi Value Input\"\n                fdkInitialFocus\n                [enabled]=\"autofocus\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            />\n        </fd-tokenizer>\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <fdp-list\n        [noBorder]=\"true\"\n        #listTemplateDD\n        [hasByLine]=\"hasByLine\"\n        [selectionMode]=\"selectionMode\"\n        *ngIf=\"_suggestions && _suggestions.length\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [interceptTabKey]=\"false\"\n        (keydown.tab)=\"close()\"\n    >\n        <ng-container *ngIf=\"!isGroup\">\n            <fdp-standard-list-item\n                *ngFor=\"let listItem of _suggestions\"\n                [title]=\"listItem.label\"\n                [description]=\"listItem.description || ''\"\n                [avatar]=\"listItem.avatarSrc\"\n                [value]=\"listItem.value\"\n                (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                (buttonClicked)=\"deleteToken(listItem)\"\n                role=\"option\"\n            >\n            </fdp-standard-list-item>\n        </ng-container>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <fdp-standard-list-item\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    [title]=\"optionItem.label\"\n                    [value]=\"optionItem.value\"\n                    (itemSelected)=\"addToArray(optionItem, true)\"\n                    (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                    (buttonClicked)=\"deleteToken(optionItem)\"\n                    role=\"option\"\n                >\n                </fdp-standard-list-item>\n            </ng-container>\n        </ng-container>\n    </fdp-list>\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"] }]
+                    ], template: "<div class=\"fd-multi-input\">\n    <ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        <fd-tokenizer\n            *ngIf=\"selected\"\n            [tokenizerFocusable]=\"false\"\n            [compactCollapse]=\"true\"\n            #tokenizer\n            class=\"fd-multi-input-tokenizer-custom\"\n            (moreClickedEvent)=\"moreClicked()\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n            fdMultiAnnouncer\n            [multiAnnouncerOptions]=\"isOpen ? _suggestions : []\"\n        >\n            <fd-token\n                [readOnly]=\"disabled\"\n                (onCloseClick)=\"removeToken(token)\"\n                *ngFor=\"let token of selected; let i = index\"\n                [attr.aria-posinset]=\"i\"\n                [attr.aria-setsize]=\"selected.length\"\n            >\n                <span>{{ token.label | displayFnPipe : displayFn }}</span>\n            </fd-token>\n\n            <input\n                #searchInputElement\n                type=\"text\"\n                class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                fdp-auto-complete\n                autocomplete=\"off\"\n                (onComplete)=\"_onAutoComplete($event)\"\n                (keydown.enter)=\"_onKeydownEnter($event)\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [inputText]=\"inputText\"\n                [options]=\"_suggestions\"\n                fd-input-group-input\n                fd-form-control\n                [attr.id]=\"id\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                (blur)=\"tokenizer._hideTokens()\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-readonly]=\"readonly\"\n                [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                [ariaLabelledBy]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"tokenHiddenId\"\n                aria-roledescription=\"Multi Value Input\"\n                fdkInitialFocus\n                [enabled]=\"autofocus\"\n            />\n        </fd-tokenizer>\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <fdp-list\n        [noBorder]=\"true\"\n        #listTemplateDD\n        [hasByLine]=\"hasByLine\"\n        [selectionMode]=\"selectionMode\"\n        *ngIf=\"_suggestions && _suggestions.length\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [interceptTabKey]=\"false\"\n        (keydown.tab)=\"close()\"\n    >\n        <ng-container *ngIf=\"!isGroup\">\n            <fdp-standard-list-item\n                *ngFor=\"let listItem of _suggestions\"\n                [title]=\"listItem.label\"\n                [description]=\"listItem.description || ''\"\n                [avatar]=\"listItem.avatarSrc\"\n                [value]=\"listItem.value\"\n                (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                (buttonClicked)=\"deleteToken(listItem)\"\n                role=\"option\"\n            >\n            </fdp-standard-list-item>\n        </ng-container>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <fdp-standard-list-item\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    [title]=\"optionItem.label\"\n                    [value]=\"optionItem.value\"\n                    (itemSelected)=\"addToArray(optionItem, true)\"\n                    (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                    (buttonClicked)=\"deleteToken(optionItem)\"\n                    role=\"option\"\n                >\n                </fdp-standard-list-item>\n            </ng-container>\n        </ng-container>\n    </fdp-list>\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -4799,7 +4740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     type: Self
                 }] }, { type: i1$2.DialogConfig, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.DynamicComponentService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Map, decorators: [{
+                }] }, { type: i3.DynamicComponentService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Map, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -4886,11 +4827,11 @@ class DynamicFormGeneratorMultiInputComponent extends BaseDynamicFormGeneratorCo
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorMultiInputComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-multi-input", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-multi-input\n            [id]=\"id\"\n            [formControlName]=\"name\"\n            [placeholder]=\"placeholder\"\n            type=\"text\"\n            [name]=\"name\"\n            [dataSource]=\"choices\"\n            displayKey=\"label\"\n            lookupKey=\"label\"\n            [autofocus]=\"true\"\n        >\n        </fdp-multi-input>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: PlatformMultiInputModule }, { kind: "component", type: PlatformMultiInputComponent, selector: "fdp-multi-input", inputs: ["tokenHiddenId", "type", "autofocus", "glyphAriaLabel", "selected", "selectionMode", "hasByLine", "disabled", "fillControlMode", "triggers", "closeOnOutsideClick", "addOnButtonClickFn", "displayFn"], outputs: ["selectionChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DynamicFormGeneratorMultiInputComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-multi-input", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-multi-input\n            [id]=\"id\"\n            [formControlName]=\"name\"\n            [placeholder]=\"placeholder\"\n            type=\"text\"\n            [name]=\"name\"\n            [dataSource]=\"choices\"\n            displayKey=\"label\"\n            lookupKey=\"label\"\n            [autofocus]=\"true\"\n        >\n        </fdp-multi-input>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: PlatformMultiInputComponent, selector: "fdp-multi-input", inputs: ["tokenHiddenId", "type", "autofocus", "glyphAriaLabel", "selected", "selectionMode", "hasByLine", "disabled", "fillControlMode", "triggers", "closeOnOutsideClick", "addOnButtonClickFn", "displayFn"], outputs: ["selectionChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DynamicFormGeneratorMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-dynamic-form-generator-multi-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformMultiInputModule], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-multi-input\n            [id]=\"id\"\n            [formControlName]=\"name\"\n            [placeholder]=\"placeholder\"\n            type=\"text\"\n            [name]=\"name\"\n            [dataSource]=\"choices\"\n            displayKey=\"label\"\n            lookupKey=\"label\"\n            [autofocus]=\"true\"\n        >\n        </fdp-multi-input>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-dynamic-form-generator-multi-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [FormsModule, ReactiveFormsModule, PlatformMultiInputComponent], template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-multi-input\n            [id]=\"id\"\n            [formControlName]=\"name\"\n            [placeholder]=\"placeholder\"\n            type=\"text\"\n            [name]=\"name\"\n            [dataSource]=\"choices\"\n            displayKey=\"label\"\n            lookupKey=\"label\"\n            [autofocus]=\"true\"\n        >\n        </fdp-multi-input>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
 
 class DynamicFormGeneratorObjectStatusComponent extends BaseDynamicFormGeneratorControl {
@@ -5541,7 +5482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     selector: '[fdpDynamicFormControl]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: FormGeneratorService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i2$2.Observable, decorators: [{
+        }], ctorParameters: function () { return [{ type: FormGeneratorService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i2$1.Observable, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -5578,22 +5519,6 @@ class FieldGroup {
     }
 }
 
-class FieldGroupRowValuePipe {
-    /** @hidden */
-    transform(row) {
-        return row.value instanceof FieldGroup ? row.value.fields : row.value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FieldGroupRowValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: FieldGroupRowValuePipe, isStandalone: true, name: "fieldGroupRowValue" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FieldGroupRowValuePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'fieldGroupRowValue',
-                    standalone: true
-                }]
-        }] });
-
 class FormGroupHeaderComponent {
     /** Hint options */
     get hintOptions() {
@@ -5603,17 +5528,33 @@ class FormGroupHeaderComponent {
         return;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormGroupHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FormGroupHeaderComponent, isStandalone: true, selector: "[fdp-form-group-header]", inputs: { fieldGroup: "fieldGroup" }, host: { properties: { "class.fd-form-group__header": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'before'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<h6 class=\"fd-form-group__header-text\">\n    {{ fieldGroup?.label }}\n</h6>\n\n<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'after'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<ng-template #inlineHelpRef>\n    <span *ngIf=\"hintOptions\" fd-link [undecorated]=\"true\">\n        <fd-icon\n            [style.vertical-align]=\"'middle'\"\n            [fd-inline-help]=\"hintOptions.content\"\n            [glyph]=\"hintOptions.glyph\"\n            [placement]=\"hintOptions.placement || null\"\n            [triggers]=\"hintOptions.trigger || []\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: InlineHelpModule }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FormGroupHeaderComponent, isStandalone: true, selector: "[fdp-form-group-header]", inputs: { fieldGroup: "fieldGroup" }, host: { properties: { "class.fd-form-group__header": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'before'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<h6 class=\"fd-form-group__header-text\">\n    {{ fieldGroup?.label }}\n</h6>\n\n<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'after'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<ng-template #inlineHelpRef>\n    <span *ngIf=\"hintOptions\" fd-link [undecorated]=\"true\">\n        <fd-icon\n            [style.vertical-align]=\"'middle'\"\n            [fd-inline-help]=\"hintOptions.content\"\n            [glyph]=\"hintOptions.glyph\"\n            [placement]=\"hintOptions.placement || null\"\n            [triggers]=\"hintOptions.trigger || []\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormGroupHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fdp-form-group-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.fd-form-group__header]': 'true'
-                    }, standalone: true, imports: [NgIf, NgTemplateOutlet, LinkComponent, IconModule, InlineHelpModule], template: "<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'before'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<h6 class=\"fd-form-group__header-text\">\n    {{ fieldGroup?.label }}\n</h6>\n\n<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'after'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<ng-template #inlineHelpRef>\n    <span *ngIf=\"hintOptions\" fd-link [undecorated]=\"true\">\n        <fd-icon\n            [style.vertical-align]=\"'middle'\"\n            [fd-inline-help]=\"hintOptions.content\"\n            [glyph]=\"hintOptions.glyph\"\n            [placement]=\"hintOptions.placement || null\"\n            [triggers]=\"hintOptions.trigger || []\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n" }]
+                    }, standalone: true, imports: [NgIf, NgTemplateOutlet, LinkComponent, IconComponent, InlineHelpDirective], template: "<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'before'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<h6 class=\"fd-form-group__header-text\">\n    {{ fieldGroup?.label }}\n</h6>\n\n<ng-container *ngIf=\"fieldGroup && hintOptions?.position === 'after'\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<ng-template #inlineHelpRef>\n    <span *ngIf=\"hintOptions\" fd-link [undecorated]=\"true\">\n        <fd-icon\n            [style.vertical-align]=\"'middle'\"\n            [fd-inline-help]=\"hintOptions.content\"\n            [glyph]=\"hintOptions.glyph\"\n            [placement]=\"hintOptions.placement || null\"\n            [triggers]=\"hintOptions.trigger || []\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n" }]
         }], propDecorators: { fieldGroup: [{
                 type: Input
             }] } });
 
+class FieldGroupRowValuePipe {
+    /** @hidden */
+    transform(row) {
+        return row.value instanceof FieldGroup ? row.value.fields : row.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FieldGroupRowValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: FieldGroupRowValuePipe, isStandalone: true, name: "fieldGroupRowValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FieldGroupRowValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fieldGroupRowValue',
+                    standalone: true
+                }]
+        }] });
+
 /**
  * @license
  * F. Kolar
@@ -6059,7 +6000,7 @@ class FormGroupComponent {
             .subscribe(() => this._cd.markForCheck()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.ControlContainer, optional: true }, { token: i5.ContentDensityObserver }, { token: FDP_FORM_FIELD_HINT_OPTIONS_DEFAULT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FormGroupComponent, isStandalone: true, selector: "fdp-form-group", inputs: { id: "id", name: "name", editable: "editable", noLabelLayout: "noLabelLayout", class: "class", hint: "hint", inlineColumnLayout: "inlineColumnLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", formGroup: "formGroup", topTitle: "topTitle", mainTitle: "mainTitle", hideMainTItle: "hideMainTItle", object: "object", i18Strings: "i18Strings", useForm: "useForm", columnLayout: "columnLayout", unifiedLayout: "unifiedLayout" }, outputs: { onSubmit: "onSubmit" }, providers: [formGroupProvider, FormFieldLayoutService, contentDensityObserverProviders()], queries: [{ propertyName: "i18Template", first: true, predicate: ["i18n"], descendants: true, static: true }, { propertyName: "_errorDirectives", predicate: FormFieldErrorDirective }, { propertyName: "formGroupChildren", predicate: FORM_GROUP_CHILD_FIELD_TOKEN, descendants: true }], viewQueries: [{ propertyName: "nativeForm", first: true, predicate: ["nativeForm"], descendants: true, read: NgForm }], usesOnChanges: true, ngImport: i0, template: "<form #nativeForm (ngSubmit)=\"onSubmit.emit($event)\" *ngIf=\"useForm; else body\" [id]=\"id\" [name]=\"name\">\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n</form>\n\n<ng-template #body>\n    <!--  Render fields and field groups with assigned columns -->\n    <ng-container *ngTemplateOutlet=\"fields\"></ng-container>\n</ng-template>\n\n<ng-template #fields>\n    <div *ngIf=\"mainTitle && !hideMainTItle\" class=\"fd-form-header\">\n        <ng-template [ngTemplateOutlet]=\"mainTitleTemplate\"></ng-template>\n    </div>\n\n    <div\n        class=\"fd-container fd-form-layout-grid-container\"\n        [class.is-compact]=\"contentDensityObserver.isCompact$ | async\"\n    >\n        <div *ngFor=\"let column of formRows | keyvalue; trackBy: trackByFn\" class=\"fd-row\">\n            <div\n                *ngFor=\"let fields of column | fieldGroupRowValue | keyvalue; trackBy: trackByFn; let index = index\"\n                class=\"fd-col fd-form-group\"\n                [class]=\"xlCol\"\n            >\n                <div class=\"fd-row\" *ngIf=\"$fieldGroup(column.value) as value\">\n                    <div class=\"fd-col\">\n                        <div *ngIf=\"value.label\" fdp-form-group-header [fieldGroup]=\"index === 0 ? value : null\"></div>\n                    </div>\n                </div>\n\n                <div *ngFor=\"let field of fields.value; trackBy: trackByFieldName\" class=\"fd-row fd-form-item\">\n                    <div class=\"fd-col\" [class]=\"_inlineColumnLayoutClass\" [style.order]=\"field.rank\">\n                        <ng-container *ngTemplateOutlet=\"field?.renderer || null\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- For nested form-group -->\n<ng-content select=\"fdp-form-group\"></ng-content>\n\n<ng-template #mainTitleTemplate>\n    <ng-container *ngIf=\"_hintOptions?.content && _hintOptions.position === 'before'\">\n        <ng-template [ngTemplateOutlet]=\"hintTemplate\"></ng-template>\n    </ng-container>\n\n    <h5 class=\"fd-form-header__text\">\n        {{ mainTitle }}\n    </h5>\n\n    <ng-container *ngIf=\"_hintOptions?.content && _hintOptions.position === 'after'\">\n        <ng-template [ngTemplateOutlet]=\"hintTemplate\"></ng-template>\n    </ng-container>\n\n    <ng-template #hintTemplate>\n        <span fd-link [undecorated]=\"true\">\n            <fd-icon\n                [fd-inline-help]=\"_hintOptions.content\"\n                [glyph]=\"_hintOptions.glyph\"\n                [placement]=\"_hintOptions.placement || null\"\n                [triggers]=\"_hintOptions.trigger || []\"\n                tabindex=\"0\"\n            ></fd-icon>\n        </span>\n    </ng-template>\n</ng-template>\n", styles: [".fd-col,.fd-container,.fd-row{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-col:after,.fd-col:before,.fd-container:after,.fd-container:before,.fd-row:after,.fd-row:before{box-sizing:inherit;font-size:inherit}.fd-container{-ms-flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;display:flex;flex:0 0 100%;flex-wrap:wrap;padding:0 .25rem;position:relative}.fd-container .fd-row{margin-left:-.25rem;margin-right:-.25rem;min-width:calc(100% + .5rem)}.fd-container>.fd-row>.fd-col{padding-bottom:.25rem;padding-top:.25rem}.fd-container.fd-container--no-gap .fd-row,.fd-container.fd-container--no-horizontal-gap .fd-row{margin-left:0;margin-right:0}.fd-container.fd-container--no-gap .fd-row .fd-col,.fd-container.fd-container--no-horizontal-gap .fd-row .fd-col{padding-left:0;padding-right:0}.fd-container.fd-container--no-gap>.fd-row>.fd-col,.fd-container.fd-container--no-vertical-gap>.fd-row>.fd-col{padding-bottom:0;padding-top:0}.fd-container[dir=rtl],[dir=rtl] .fd-container{direction:rtl}.fd-row{-ms-flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;display:flex;flex:0 0 100%;flex-wrap:wrap;min-width:100%;position:relative}.fd-col{max-width:100%;min-width:100%;padding-left:.25rem;padding-right:.25rem}.fd-col--0{max-width:0;min-width:0%}.fd-col--offset-0{margin-left:0}.fd-col--offset-0[dir=rtl],[dir=rtl] .fd-col--offset-0{margin-left:0;margin-right:0}.fd-col--offset-after-0{margin-right:0}.fd-col--offset-after-0[dir=rtl],[dir=rtl] .fd-col--offset-after-0{margin-left:0;margin-right:0}.fd-col--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col--offset-1{margin-left:8.3333333333%}.fd-col--offset-1[dir=rtl],[dir=rtl] .fd-col--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col--offset-after-1{margin-right:8.3333333333%}.fd-col--offset-after-1[dir=rtl],[dir=rtl] .fd-col--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col--offset-2{margin-left:16.6666666667%}.fd-col--offset-2[dir=rtl],[dir=rtl] .fd-col--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col--offset-after-2{margin-right:16.6666666667%}.fd-col--offset-after-2[dir=rtl],[dir=rtl] .fd-col--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col--3{max-width:25%;min-width:25%}.fd-col--offset-3{margin-left:25%}.fd-col--offset-3[dir=rtl],[dir=rtl] .fd-col--offset-3{margin-left:0;margin-right:25%}.fd-col--offset-after-3{margin-right:25%}.fd-col--offset-after-3[dir=rtl],[dir=rtl] .fd-col--offset-after-3{margin-left:25%;margin-right:0}.fd-col--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col--offset-4{margin-left:33.3333333333%}.fd-col--offset-4[dir=rtl],[dir=rtl] .fd-col--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col--offset-after-4{margin-right:33.3333333333%}.fd-col--offset-after-4[dir=rtl],[dir=rtl] .fd-col--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col--offset-5{margin-left:41.6666666667%}.fd-col--offset-5[dir=rtl],[dir=rtl] .fd-col--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col--offset-after-5{margin-right:41.6666666667%}.fd-col--offset-after-5[dir=rtl],[dir=rtl] .fd-col--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col--6{max-width:50%;min-width:50%}.fd-col--offset-6{margin-left:50%}.fd-col--offset-6[dir=rtl],[dir=rtl] .fd-col--offset-6{margin-left:0;margin-right:50%}.fd-col--offset-after-6{margin-right:50%}.fd-col--offset-after-6[dir=rtl],[dir=rtl] .fd-col--offset-after-6{margin-left:50%;margin-right:0}.fd-col--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col--offset-7{margin-left:58.3333333333%}.fd-col--offset-7[dir=rtl],[dir=rtl] .fd-col--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col--offset-after-7{margin-right:58.3333333333%}.fd-col--offset-after-7[dir=rtl],[dir=rtl] .fd-col--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col--offset-8{margin-left:66.6666666667%}.fd-col--offset-8[dir=rtl],[dir=rtl] .fd-col--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col--offset-after-8{margin-right:66.6666666667%}.fd-col--offset-after-8[dir=rtl],[dir=rtl] .fd-col--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col--9{max-width:75%;min-width:75%}.fd-col--offset-9{margin-left:75%}.fd-col--offset-9[dir=rtl],[dir=rtl] .fd-col--offset-9{margin-left:0;margin-right:75%}.fd-col--offset-after-9{margin-right:75%}.fd-col--offset-after-9[dir=rtl],[dir=rtl] .fd-col--offset-after-9{margin-left:75%;margin-right:0}.fd-col--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col--offset-10{margin-left:83.3333333333%}.fd-col--offset-10[dir=rtl],[dir=rtl] .fd-col--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col--offset-after-10{margin-right:83.3333333333%}.fd-col--offset-after-10[dir=rtl],[dir=rtl] .fd-col--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col--offset-11{margin-left:91.6666666667%}.fd-col--offset-11[dir=rtl],[dir=rtl] .fd-col--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col--offset-after-11{margin-right:91.6666666667%}.fd-col--offset-after-11[dir=rtl],[dir=rtl] .fd-col--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col--12{max-width:100%;min-width:100%}.fd-col--offset-12{margin-left:100%}.fd-col--offset-12[dir=rtl],[dir=rtl] .fd-col--offset-12{margin-left:0;margin-right:100%}.fd-col--offset-after-12{margin-right:100%}.fd-col--offset-after-12[dir=rtl],[dir=rtl] .fd-col--offset-after-12{margin-left:100%;margin-right:0}.fd-col--full{flex:1;max-width:none;min-width:8.3333333333%}.fd-col--wrap{flex-wrap:wrap}@media (min-width: 600px){.fd-container{padding:0 .5rem}.fd-container .fd-row{margin-left:-.5rem;margin-right:-.5rem;min-width:calc(100% + 1rem)}.fd-container>.fd-row>.fd-col{padding-bottom:.5rem;padding-top:.5rem}.fd-col{padding-left:.5rem;padding-right:.5rem}.fd-col-md--0{max-width:0;min-width:0%}.fd-col-md--offset-0{margin-left:0}.fd-col-md--offset-0[dir=rtl],[dir=rtl] .fd-col-md--offset-0{margin-left:0;margin-right:0}.fd-col-md--offset-after-0{margin-right:0}.fd-col-md--offset-after-0[dir=rtl],[dir=rtl] .fd-col-md--offset-after-0{margin-left:0;margin-right:0}.fd-col-md--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-md--offset-1{margin-left:8.3333333333%}.fd-col-md--offset-1[dir=rtl],[dir=rtl] .fd-col-md--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col-md--offset-after-1{margin-right:8.3333333333%}.fd-col-md--offset-after-1[dir=rtl],[dir=rtl] .fd-col-md--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col-md--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-md--offset-2{margin-left:16.6666666667%}.fd-col-md--offset-2[dir=rtl],[dir=rtl] .fd-col-md--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col-md--offset-after-2{margin-right:16.6666666667%}.fd-col-md--offset-after-2[dir=rtl],[dir=rtl] .fd-col-md--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col-md--3{max-width:25%;min-width:25%}.fd-col-md--offset-3{margin-left:25%}.fd-col-md--offset-3[dir=rtl],[dir=rtl] .fd-col-md--offset-3{margin-left:0;margin-right:25%}.fd-col-md--offset-after-3{margin-right:25%}.fd-col-md--offset-after-3[dir=rtl],[dir=rtl] .fd-col-md--offset-after-3{margin-left:25%;margin-right:0}.fd-col-md--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-md--offset-4{margin-left:33.3333333333%}.fd-col-md--offset-4[dir=rtl],[dir=rtl] .fd-col-md--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col-md--offset-after-4{margin-right:33.3333333333%}.fd-col-md--offset-after-4[dir=rtl],[dir=rtl] .fd-col-md--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col-md--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-md--offset-5{margin-left:41.6666666667%}.fd-col-md--offset-5[dir=rtl],[dir=rtl] .fd-col-md--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col-md--offset-after-5{margin-right:41.6666666667%}.fd-col-md--offset-after-5[dir=rtl],[dir=rtl] .fd-col-md--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col-md--6{max-width:50%;min-width:50%}.fd-col-md--offset-6{margin-left:50%}.fd-col-md--offset-6[dir=rtl],[dir=rtl] .fd-col-md--offset-6{margin-left:0;margin-right:50%}.fd-col-md--offset-after-6{margin-right:50%}.fd-col-md--offset-after-6[dir=rtl],[dir=rtl] .fd-col-md--offset-after-6{margin-left:50%;margin-right:0}.fd-col-md--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-md--offset-7{margin-left:58.3333333333%}.fd-col-md--offset-7[dir=rtl],[dir=rtl] .fd-col-md--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col-md--offset-after-7{margin-right:58.3333333333%}.fd-col-md--offset-after-7[dir=rtl],[dir=rtl] .fd-col-md--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col-md--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-md--offset-8{margin-left:66.6666666667%}.fd-col-md--offset-8[dir=rtl],[dir=rtl] .fd-col-md--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col-md--offset-after-8{margin-right:66.6666666667%}.fd-col-md--offset-after-8[dir=rtl],[dir=rtl] .fd-col-md--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col-md--9{max-width:75%;min-width:75%}.fd-col-md--offset-9{margin-left:75%}.fd-col-md--offset-9[dir=rtl],[dir=rtl] .fd-col-md--offset-9{margin-left:0;margin-right:75%}.fd-col-md--offset-after-9{margin-right:75%}.fd-col-md--offset-after-9[dir=rtl],[dir=rtl] .fd-col-md--offset-after-9{margin-left:75%;margin-right:0}.fd-col-md--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-md--offset-10{margin-left:83.3333333333%}.fd-col-md--offset-10[dir=rtl],[dir=rtl] .fd-col-md--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col-md--offset-after-10{margin-right:83.3333333333%}.fd-col-md--offset-after-10[dir=rtl],[dir=rtl] .fd-col-md--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col-md--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-md--offset-11{margin-left:91.6666666667%}.fd-col-md--offset-11[dir=rtl],[dir=rtl] .fd-col-md--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col-md--offset-after-11{margin-right:91.6666666667%}.fd-col-md--offset-after-11[dir=rtl],[dir=rtl] .fd-col-md--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col-md--12{max-width:100%;min-width:100%}.fd-col-md--offset-12{margin-left:100%}.fd-col-md--offset-12[dir=rtl],[dir=rtl] .fd-col-md--offset-12{margin-left:0;margin-right:100%}.fd-col-md--offset-after-12{margin-right:100%}.fd-col-md--offset-after-12[dir=rtl],[dir=rtl] .fd-col-md--offset-after-12{margin-left:100%;margin-right:0}}@media (min-width: 1024px){.fd-col-lg--0{max-width:0;min-width:0%}.fd-col-lg--offset-0{margin-left:0}.fd-col-lg--offset-0[dir=rtl],[dir=rtl] .fd-col-lg--offset-0{margin-left:0;margin-right:0}.fd-col-lg--offset-after-0{margin-right:0}.fd-col-lg--offset-after-0[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-0{margin-left:0;margin-right:0}.fd-col-lg--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-lg--offset-1{margin-left:8.3333333333%}.fd-col-lg--offset-1[dir=rtl],[dir=rtl] .fd-col-lg--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col-lg--offset-after-1{margin-right:8.3333333333%}.fd-col-lg--offset-after-1[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col-lg--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-lg--offset-2{margin-left:16.6666666667%}.fd-col-lg--offset-2[dir=rtl],[dir=rtl] .fd-col-lg--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col-lg--offset-after-2{margin-right:16.6666666667%}.fd-col-lg--offset-after-2[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col-lg--3{max-width:25%;min-width:25%}.fd-col-lg--offset-3{margin-left:25%}.fd-col-lg--offset-3[dir=rtl],[dir=rtl] .fd-col-lg--offset-3{margin-left:0;margin-right:25%}.fd-col-lg--offset-after-3{margin-right:25%}.fd-col-lg--offset-after-3[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-3{margin-left:25%;margin-right:0}.fd-col-lg--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-lg--offset-4{margin-left:33.3333333333%}.fd-col-lg--offset-4[dir=rtl],[dir=rtl] .fd-col-lg--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col-lg--offset-after-4{margin-right:33.3333333333%}.fd-col-lg--offset-after-4[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col-lg--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-lg--offset-5{margin-left:41.6666666667%}.fd-col-lg--offset-5[dir=rtl],[dir=rtl] .fd-col-lg--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col-lg--offset-after-5{margin-right:41.6666666667%}.fd-col-lg--offset-after-5[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col-lg--6{max-width:50%;min-width:50%}.fd-col-lg--offset-6{margin-left:50%}.fd-col-lg--offset-6[dir=rtl],[dir=rtl] .fd-col-lg--offset-6{margin-left:0;margin-right:50%}.fd-col-lg--offset-after-6{margin-right:50%}.fd-col-lg--offset-after-6[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-6{margin-left:50%;margin-right:0}.fd-col-lg--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-lg--offset-7{margin-left:58.3333333333%}.fd-col-lg--offset-7[dir=rtl],[dir=rtl] .fd-col-lg--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col-lg--offset-after-7{margin-right:58.3333333333%}.fd-col-lg--offset-after-7[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col-lg--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-lg--offset-8{margin-left:66.6666666667%}.fd-col-lg--offset-8[dir=rtl],[dir=rtl] .fd-col-lg--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col-lg--offset-after-8{margin-right:66.6666666667%}.fd-col-lg--offset-after-8[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col-lg--9{max-width:75%;min-width:75%}.fd-col-lg--offset-9{margin-left:75%}.fd-col-lg--offset-9[dir=rtl],[dir=rtl] .fd-col-lg--offset-9{margin-left:0;margin-right:75%}.fd-col-lg--offset-after-9{margin-right:75%}.fd-col-lg--offset-after-9[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-9{margin-left:75%;margin-right:0}.fd-col-lg--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-lg--offset-10{margin-left:83.3333333333%}.fd-col-lg--offset-10[dir=rtl],[dir=rtl] .fd-col-lg--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col-lg--offset-after-10{margin-right:83.3333333333%}.fd-col-lg--offset-after-10[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col-lg--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-lg--offset-11{margin-left:91.6666666667%}.fd-col-lg--offset-11[dir=rtl],[dir=rtl] .fd-col-lg--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col-lg--offset-after-11{margin-right:91.6666666667%}.fd-col-lg--offset-after-11[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col-lg--12{max-width:100%;min-width:100%}.fd-col-lg--offset-12{margin-left:100%}.fd-col-lg--offset-12[dir=rtl],[dir=rtl] .fd-col-lg--offset-12{margin-left:0;margin-right:100%}.fd-col-lg--offset-after-12{margin-right:100%}.fd-col-lg--offset-after-12[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-12{margin-left:100%;margin-right:0}}@media (min-width: 1440px){.fd-col-xl--0{max-width:0;min-width:0%}.fd-col-xl--offset-0{margin-left:0}.fd-col-xl--offset-0[dir=rtl],[dir=rtl] .fd-col-xl--offset-0{margin-left:0;margin-right:0}.fd-col-xl--offset-after-0{margin-right:0}.fd-col-xl--offset-after-0[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-0{margin-left:0;margin-right:0}.fd-col-xl--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-xl--offset-1{margin-left:8.3333333333%}.fd-col-xl--offset-1[dir=rtl],[dir=rtl] .fd-col-xl--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col-xl--offset-after-1{margin-right:8.3333333333%}.fd-col-xl--offset-after-1[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col-xl--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-xl--offset-2{margin-left:16.6666666667%}.fd-col-xl--offset-2[dir=rtl],[dir=rtl] .fd-col-xl--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col-xl--offset-after-2{margin-right:16.6666666667%}.fd-col-xl--offset-after-2[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col-xl--3{max-width:25%;min-width:25%}.fd-col-xl--offset-3{margin-left:25%}.fd-col-xl--offset-3[dir=rtl],[dir=rtl] .fd-col-xl--offset-3{margin-left:0;margin-right:25%}.fd-col-xl--offset-after-3{margin-right:25%}.fd-col-xl--offset-after-3[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-3{margin-left:25%;margin-right:0}.fd-col-xl--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-xl--offset-4{margin-left:33.3333333333%}.fd-col-xl--offset-4[dir=rtl],[dir=rtl] .fd-col-xl--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col-xl--offset-after-4{margin-right:33.3333333333%}.fd-col-xl--offset-after-4[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col-xl--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-xl--offset-5{margin-left:41.6666666667%}.fd-col-xl--offset-5[dir=rtl],[dir=rtl] .fd-col-xl--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col-xl--offset-after-5{margin-right:41.6666666667%}.fd-col-xl--offset-after-5[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col-xl--6{max-width:50%;min-width:50%}.fd-col-xl--offset-6{margin-left:50%}.fd-col-xl--offset-6[dir=rtl],[dir=rtl] .fd-col-xl--offset-6{margin-left:0;margin-right:50%}.fd-col-xl--offset-after-6{margin-right:50%}.fd-col-xl--offset-after-6[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-6{margin-left:50%;margin-right:0}.fd-col-xl--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-xl--offset-7{margin-left:58.3333333333%}.fd-col-xl--offset-7[dir=rtl],[dir=rtl] .fd-col-xl--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col-xl--offset-after-7{margin-right:58.3333333333%}.fd-col-xl--offset-after-7[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col-xl--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-xl--offset-8{margin-left:66.6666666667%}.fd-col-xl--offset-8[dir=rtl],[dir=rtl] .fd-col-xl--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col-xl--offset-after-8{margin-right:66.6666666667%}.fd-col-xl--offset-after-8[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col-xl--9{max-width:75%;min-width:75%}.fd-col-xl--offset-9{margin-left:75%}.fd-col-xl--offset-9[dir=rtl],[dir=rtl] .fd-col-xl--offset-9{margin-left:0;margin-right:75%}.fd-col-xl--offset-after-9{margin-right:75%}.fd-col-xl--offset-after-9[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-9{margin-left:75%;margin-right:0}.fd-col-xl--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-xl--offset-10{margin-left:83.3333333333%}.fd-col-xl--offset-10[dir=rtl],[dir=rtl] .fd-col-xl--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col-xl--offset-after-10{margin-right:83.3333333333%}.fd-col-xl--offset-after-10[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col-xl--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-xl--offset-11{margin-left:91.6666666667%}.fd-col-xl--offset-11[dir=rtl],[dir=rtl] .fd-col-xl--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col-xl--offset-after-11{margin-right:91.6666666667%}.fd-col-xl--offset-after-11[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col-xl--12{max-width:100%;min-width:100%}.fd-col-xl--offset-12{margin-left:100%}.fd-col-xl--offset-12[dir=rtl],[dir=rtl] .fd-col-xl--offset-12{margin-left:0;margin-right:100%}.fd-col-xl--offset-after-12{margin-right:100%}.fd-col-xl--offset-after-12[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-12{margin-left:100%;margin-right:0}}.fd-container.fd-form-layout-grid-container .fd-form-group,.fd-container.fd-form-layout-grid-container.fd-form-group{padding:1rem!important}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-group,.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-group{padding:0!important}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label,.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label{margin-right:0;white-space:normal}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label{margin-left:0;margin-right:0}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required,.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required{padding-right:.5rem}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required[dir=rtl],.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required,[dir=rtl] .fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required{padding-left:.5rem;padding-right:0}.fd-container.fd-form-layout-grid-container .fd-row{flex-direction:row}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{overflow:hidden;padding-bottom:0;padding-top:0;text-overflow:ellipsis;white-space:nowrap}.fd-container.fd-form-layout-grid-container .fd-row .fd-col:not(.fd-form-group){align-self:center}@media (min-width: 0){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col>.fd-form-label{float:right;text-align:right}}@media (min-width: 0) and (max-width: 599px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container.fd-form-group .fd-form-item:first-of-type{margin-top:0}}@media (min-width: 600px){.fd-container.fd-form-layout-grid-container{padding:0 .25rem}.fd-container.fd-form-layout-grid-container .fd-row{margin:0 -.25rem;min-width:calc(100% + .5rem)}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{padding:0 .25rem}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md>.fd-form-label{float:right;text-align:right}}@media (min-width: 600px) and (max-width: 1023px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}}@media (min-width: 1024px){.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg>.fd-form-label{float:right;text-align:right}}@media (min-width: 1024px) and (max-width: 1443px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}}@media (min-width: 1440px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl>.fd-form-label{float:right;text-align:right}}.fd-section{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_Background);border:0;border-bottom:none;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem .5rem 1.5rem}.fd-section:after,.fd-section:before{box-sizing:inherit;font-size:inherit}.fd-section:after{clear:both;content:\"\";display:table}@media (min-width: 600px){.fd-section{padding-left:2rem;padding-right:2rem}}@media (min-width: 1440px){.fd-section{padding-left:3rem;padding-right:3rem}}.fd-section--no-border,.fd-section:last-child{border-bottom:0}.fd-section--bleed,.fd-section--full-bleed{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-section--bleed:after,.fd-section--bleed:before,.fd-section--full-bleed:after,.fd-section--full-bleed:before{box-sizing:inherit;font-size:inherit}.fd-section--bleed .fd-section__footer,.fd-section--bleed .fd-section__header,.fd-section--full-bleed .fd-section__footer,.fd-section--full-bleed .fd-section__header{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){.fd-section--bleed .fd-section__footer,.fd-section--bleed .fd-section__header,.fd-section--full-bleed .fd-section__footer,.fd-section--full-bleed .fd-section__header{padding-left:2rem;padding-right:2rem}}@media (min-width: 1440px){.fd-section--bleed .fd-section__footer,.fd-section--bleed .fd-section__header,.fd-section--full-bleed .fd-section__footer,.fd-section--full-bleed .fd-section__header{padding-left:3rem;padding-right:3rem}}.fd-section__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1.5rem;min-height:1.5rem;padding:0}.fd-section__header:after,.fd-section__header:before{box-sizing:inherit;font-size:inherit}.fd-section__title{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapTitleColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader2Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;padding:0}.fd-section__title:after,.fd-section__title:before{box-sizing:inherit;font-size:inherit}.fd-section__actions{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-section__actions:after,.fd-section__actions:before{box-sizing:inherit;font-size:inherit}.fd-section__footer{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-section__footer:after,.fd-section__footer:before{box-sizing:inherit;font-size:inherit}.fd-form-group{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-form-group:after,.fd-form-group:before{box-sizing:inherit;font-size:inherit}.fd-form-group--inline{-webkit-box-pack:start;-ms-flex-pack:start;-ms-flex-wrap:wrap;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.fd-form-group--inline,.fd-form-group__header{display:flex}.fd-form-group__header{-webkit-box-sizing:border-box;align-items:center;background-color:var(--sapGroup_TitleBackground);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-form-group__header:after,.fd-form-group__header:before{box-sizing:inherit;font-size:inherit}.fd-form-group__header[class*=-compact],.fd-form-group__header[class*=-condensed],[class*=-compact] .fd-form-group__header:not([class*=-cozy]),[class*=-condensed] .fd-form-group__header:not([class*=-cozy]){height:2rem}.fd-form-group__header-text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;font-weight:700;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-form-group__header-text:after,.fd-form-group__header-text:before{box-sizing:inherit;font-size:inherit}/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-form-header{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-shadow:0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor);align-items:center;background-color:var(--sapGroup_TitleBackground);border:0;box-shadow:0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-form-header:after,.fd-form-header:before{box-sizing:inherit;font-size:inherit}.fd-form-header__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader4Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-form-header__text:after,.fd-form-header__text:before{box-sizing:inherit;font-size:inherit}fdp-form-group{display:block}.fd-form-label{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormGroupHeaderComponent, selector: "[fdp-form-group-header]", inputs: ["fieldGroup"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: InlineHelpModule }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: FieldGroupRowValuePipe, name: "fieldGroupRowValue" }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FormGroupComponent, isStandalone: true, selector: "fdp-form-group", inputs: { id: "id", name: "name", editable: "editable", noLabelLayout: "noLabelLayout", class: "class", hint: "hint", inlineColumnLayout: "inlineColumnLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", formGroup: "formGroup", topTitle: "topTitle", mainTitle: "mainTitle", hideMainTItle: "hideMainTItle", object: "object", i18Strings: "i18Strings", useForm: "useForm", columnLayout: "columnLayout", unifiedLayout: "unifiedLayout" }, outputs: { onSubmit: "onSubmit" }, providers: [formGroupProvider, FormFieldLayoutService, contentDensityObserverProviders()], queries: [{ propertyName: "i18Template", first: true, predicate: ["i18n"], descendants: true, static: true }, { propertyName: "_errorDirectives", predicate: FormFieldErrorDirective }, { propertyName: "formGroupChildren", predicate: FORM_GROUP_CHILD_FIELD_TOKEN, descendants: true }], viewQueries: [{ propertyName: "nativeForm", first: true, predicate: ["nativeForm"], descendants: true, read: NgForm }], usesOnChanges: true, ngImport: i0, template: "<form #nativeForm (ngSubmit)=\"onSubmit.emit($event)\" *ngIf=\"useForm; else body\" [id]=\"id\" [name]=\"name\">\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n</form>\n\n<ng-template #body>\n    <!--  Render fields and field groups with assigned columns -->\n    <ng-container *ngTemplateOutlet=\"fields\"></ng-container>\n</ng-template>\n\n<ng-template #fields>\n    <div *ngIf=\"mainTitle && !hideMainTItle\" class=\"fd-form-header\">\n        <ng-template [ngTemplateOutlet]=\"mainTitleTemplate\"></ng-template>\n    </div>\n\n    <div\n        class=\"fd-container fd-form-layout-grid-container\"\n        [class.is-compact]=\"contentDensityObserver.isCompact$ | async\"\n    >\n        <div *ngFor=\"let column of formRows | keyvalue; trackBy: trackByFn\" class=\"fd-row\">\n            <div\n                *ngFor=\"let fields of column | fieldGroupRowValue | keyvalue; trackBy: trackByFn; let index = index\"\n                class=\"fd-col fd-form-group\"\n                [class]=\"xlCol\"\n            >\n                <div class=\"fd-row\" *ngIf=\"$fieldGroup(column.value) as value\">\n                    <div class=\"fd-col\">\n                        <div *ngIf=\"value.label\" fdp-form-group-header [fieldGroup]=\"index === 0 ? value : null\"></div>\n                    </div>\n                </div>\n\n                <div *ngFor=\"let field of fields.value; trackBy: trackByFieldName\" class=\"fd-row fd-form-item\">\n                    <div class=\"fd-col\" [class]=\"_inlineColumnLayoutClass\" [style.order]=\"field.rank\">\n                        <ng-container *ngTemplateOutlet=\"field?.renderer || null\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- For nested form-group -->\n<ng-content select=\"fdp-form-group\"></ng-content>\n\n<ng-template #mainTitleTemplate>\n    <ng-container *ngIf=\"_hintOptions?.content && _hintOptions.position === 'before'\">\n        <ng-template [ngTemplateOutlet]=\"hintTemplate\"></ng-template>\n    </ng-container>\n\n    <h5 class=\"fd-form-header__text\">\n        {{ mainTitle }}\n    </h5>\n\n    <ng-container *ngIf=\"_hintOptions?.content && _hintOptions.position === 'after'\">\n        <ng-template [ngTemplateOutlet]=\"hintTemplate\"></ng-template>\n    </ng-container>\n\n    <ng-template #hintTemplate>\n        <span fd-link [undecorated]=\"true\">\n            <fd-icon\n                [fd-inline-help]=\"_hintOptions.content\"\n                [glyph]=\"_hintOptions.glyph\"\n                [placement]=\"_hintOptions.placement || null\"\n                [triggers]=\"_hintOptions.trigger || []\"\n                tabindex=\"0\"\n            ></fd-icon>\n        </span>\n    </ng-template>\n</ng-template>\n", styles: [".fd-col,.fd-container,.fd-row{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-col:after,.fd-col:before,.fd-container:after,.fd-container:before,.fd-row:after,.fd-row:before{box-sizing:inherit;font-size:inherit}.fd-container{-ms-flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;display:flex;flex:0 0 100%;flex-wrap:wrap;padding:0 .25rem;position:relative}.fd-container .fd-row{margin-left:-.25rem;margin-right:-.25rem;min-width:calc(100% + .5rem)}.fd-container>.fd-row>.fd-col{padding-bottom:.25rem;padding-top:.25rem}.fd-container.fd-container--no-gap .fd-row,.fd-container.fd-container--no-horizontal-gap .fd-row{margin-left:0;margin-right:0}.fd-container.fd-container--no-gap .fd-row .fd-col,.fd-container.fd-container--no-horizontal-gap .fd-row .fd-col{padding-left:0;padding-right:0}.fd-container.fd-container--no-gap>.fd-row>.fd-col,.fd-container.fd-container--no-vertical-gap>.fd-row>.fd-col{padding-bottom:0;padding-top:0}.fd-container[dir=rtl],[dir=rtl] .fd-container{direction:rtl}.fd-row{-ms-flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;display:flex;flex:0 0 100%;flex-wrap:wrap;min-width:100%;position:relative}.fd-col{max-width:100%;min-width:100%;padding-left:.25rem;padding-right:.25rem}.fd-col--0{max-width:0;min-width:0%}.fd-col--offset-0{margin-left:0}.fd-col--offset-0[dir=rtl],[dir=rtl] .fd-col--offset-0{margin-left:0;margin-right:0}.fd-col--offset-after-0{margin-right:0}.fd-col--offset-after-0[dir=rtl],[dir=rtl] .fd-col--offset-after-0{margin-left:0;margin-right:0}.fd-col--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col--offset-1{margin-left:8.3333333333%}.fd-col--offset-1[dir=rtl],[dir=rtl] .fd-col--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col--offset-after-1{margin-right:8.3333333333%}.fd-col--offset-after-1[dir=rtl],[dir=rtl] .fd-col--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col--offset-2{margin-left:16.6666666667%}.fd-col--offset-2[dir=rtl],[dir=rtl] .fd-col--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col--offset-after-2{margin-right:16.6666666667%}.fd-col--offset-after-2[dir=rtl],[dir=rtl] .fd-col--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col--3{max-width:25%;min-width:25%}.fd-col--offset-3{margin-left:25%}.fd-col--offset-3[dir=rtl],[dir=rtl] .fd-col--offset-3{margin-left:0;margin-right:25%}.fd-col--offset-after-3{margin-right:25%}.fd-col--offset-after-3[dir=rtl],[dir=rtl] .fd-col--offset-after-3{margin-left:25%;margin-right:0}.fd-col--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col--offset-4{margin-left:33.3333333333%}.fd-col--offset-4[dir=rtl],[dir=rtl] .fd-col--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col--offset-after-4{margin-right:33.3333333333%}.fd-col--offset-after-4[dir=rtl],[dir=rtl] .fd-col--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col--offset-5{margin-left:41.6666666667%}.fd-col--offset-5[dir=rtl],[dir=rtl] .fd-col--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col--offset-after-5{margin-right:41.6666666667%}.fd-col--offset-after-5[dir=rtl],[dir=rtl] .fd-col--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col--6{max-width:50%;min-width:50%}.fd-col--offset-6{margin-left:50%}.fd-col--offset-6[dir=rtl],[dir=rtl] .fd-col--offset-6{margin-left:0;margin-right:50%}.fd-col--offset-after-6{margin-right:50%}.fd-col--offset-after-6[dir=rtl],[dir=rtl] .fd-col--offset-after-6{margin-left:50%;margin-right:0}.fd-col--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col--offset-7{margin-left:58.3333333333%}.fd-col--offset-7[dir=rtl],[dir=rtl] .fd-col--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col--offset-after-7{margin-right:58.3333333333%}.fd-col--offset-after-7[dir=rtl],[dir=rtl] .fd-col--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col--offset-8{margin-left:66.6666666667%}.fd-col--offset-8[dir=rtl],[dir=rtl] .fd-col--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col--offset-after-8{margin-right:66.6666666667%}.fd-col--offset-after-8[dir=rtl],[dir=rtl] .fd-col--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col--9{max-width:75%;min-width:75%}.fd-col--offset-9{margin-left:75%}.fd-col--offset-9[dir=rtl],[dir=rtl] .fd-col--offset-9{margin-left:0;margin-right:75%}.fd-col--offset-after-9{margin-right:75%}.fd-col--offset-after-9[dir=rtl],[dir=rtl] .fd-col--offset-after-9{margin-left:75%;margin-right:0}.fd-col--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col--offset-10{margin-left:83.3333333333%}.fd-col--offset-10[dir=rtl],[dir=rtl] .fd-col--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col--offset-after-10{margin-right:83.3333333333%}.fd-col--offset-after-10[dir=rtl],[dir=rtl] .fd-col--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col--offset-11{margin-left:91.6666666667%}.fd-col--offset-11[dir=rtl],[dir=rtl] .fd-col--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col--offset-after-11{margin-right:91.6666666667%}.fd-col--offset-after-11[dir=rtl],[dir=rtl] .fd-col--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col--12{max-width:100%;min-width:100%}.fd-col--offset-12{margin-left:100%}.fd-col--offset-12[dir=rtl],[dir=rtl] .fd-col--offset-12{margin-left:0;margin-right:100%}.fd-col--offset-after-12{margin-right:100%}.fd-col--offset-after-12[dir=rtl],[dir=rtl] .fd-col--offset-after-12{margin-left:100%;margin-right:0}.fd-col--full{flex:1;max-width:none;min-width:8.3333333333%}.fd-col--wrap{flex-wrap:wrap}@media (min-width: 600px){.fd-container{padding:0 .5rem}.fd-container .fd-row{margin-left:-.5rem;margin-right:-.5rem;min-width:calc(100% + 1rem)}.fd-container>.fd-row>.fd-col{padding-bottom:.5rem;padding-top:.5rem}.fd-col{padding-left:.5rem;padding-right:.5rem}.fd-col-md--0{max-width:0;min-width:0%}.fd-col-md--offset-0{margin-left:0}.fd-col-md--offset-0[dir=rtl],[dir=rtl] .fd-col-md--offset-0{margin-left:0;margin-right:0}.fd-col-md--offset-after-0{margin-right:0}.fd-col-md--offset-after-0[dir=rtl],[dir=rtl] .fd-col-md--offset-after-0{margin-left:0;margin-right:0}.fd-col-md--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-md--offset-1{margin-left:8.3333333333%}.fd-col-md--offset-1[dir=rtl],[dir=rtl] .fd-col-md--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col-md--offset-after-1{margin-right:8.3333333333%}.fd-col-md--offset-after-1[dir=rtl],[dir=rtl] .fd-col-md--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col-md--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-md--offset-2{margin-left:16.6666666667%}.fd-col-md--offset-2[dir=rtl],[dir=rtl] .fd-col-md--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col-md--offset-after-2{margin-right:16.6666666667%}.fd-col-md--offset-after-2[dir=rtl],[dir=rtl] .fd-col-md--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col-md--3{max-width:25%;min-width:25%}.fd-col-md--offset-3{margin-left:25%}.fd-col-md--offset-3[dir=rtl],[dir=rtl] .fd-col-md--offset-3{margin-left:0;margin-right:25%}.fd-col-md--offset-after-3{margin-right:25%}.fd-col-md--offset-after-3[dir=rtl],[dir=rtl] .fd-col-md--offset-after-3{margin-left:25%;margin-right:0}.fd-col-md--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-md--offset-4{margin-left:33.3333333333%}.fd-col-md--offset-4[dir=rtl],[dir=rtl] .fd-col-md--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col-md--offset-after-4{margin-right:33.3333333333%}.fd-col-md--offset-after-4[dir=rtl],[dir=rtl] .fd-col-md--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col-md--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-md--offset-5{margin-left:41.6666666667%}.fd-col-md--offset-5[dir=rtl],[dir=rtl] .fd-col-md--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col-md--offset-after-5{margin-right:41.6666666667%}.fd-col-md--offset-after-5[dir=rtl],[dir=rtl] .fd-col-md--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col-md--6{max-width:50%;min-width:50%}.fd-col-md--offset-6{margin-left:50%}.fd-col-md--offset-6[dir=rtl],[dir=rtl] .fd-col-md--offset-6{margin-left:0;margin-right:50%}.fd-col-md--offset-after-6{margin-right:50%}.fd-col-md--offset-after-6[dir=rtl],[dir=rtl] .fd-col-md--offset-after-6{margin-left:50%;margin-right:0}.fd-col-md--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-md--offset-7{margin-left:58.3333333333%}.fd-col-md--offset-7[dir=rtl],[dir=rtl] .fd-col-md--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col-md--offset-after-7{margin-right:58.3333333333%}.fd-col-md--offset-after-7[dir=rtl],[dir=rtl] .fd-col-md--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col-md--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-md--offset-8{margin-left:66.6666666667%}.fd-col-md--offset-8[dir=rtl],[dir=rtl] .fd-col-md--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col-md--offset-after-8{margin-right:66.6666666667%}.fd-col-md--offset-after-8[dir=rtl],[dir=rtl] .fd-col-md--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col-md--9{max-width:75%;min-width:75%}.fd-col-md--offset-9{margin-left:75%}.fd-col-md--offset-9[dir=rtl],[dir=rtl] .fd-col-md--offset-9{margin-left:0;margin-right:75%}.fd-col-md--offset-after-9{margin-right:75%}.fd-col-md--offset-after-9[dir=rtl],[dir=rtl] .fd-col-md--offset-after-9{margin-left:75%;margin-right:0}.fd-col-md--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-md--offset-10{margin-left:83.3333333333%}.fd-col-md--offset-10[dir=rtl],[dir=rtl] .fd-col-md--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col-md--offset-after-10{margin-right:83.3333333333%}.fd-col-md--offset-after-10[dir=rtl],[dir=rtl] .fd-col-md--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col-md--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-md--offset-11{margin-left:91.6666666667%}.fd-col-md--offset-11[dir=rtl],[dir=rtl] .fd-col-md--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col-md--offset-after-11{margin-right:91.6666666667%}.fd-col-md--offset-after-11[dir=rtl],[dir=rtl] .fd-col-md--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col-md--12{max-width:100%;min-width:100%}.fd-col-md--offset-12{margin-left:100%}.fd-col-md--offset-12[dir=rtl],[dir=rtl] .fd-col-md--offset-12{margin-left:0;margin-right:100%}.fd-col-md--offset-after-12{margin-right:100%}.fd-col-md--offset-after-12[dir=rtl],[dir=rtl] .fd-col-md--offset-after-12{margin-left:100%;margin-right:0}}@media (min-width: 1024px){.fd-col-lg--0{max-width:0;min-width:0%}.fd-col-lg--offset-0{margin-left:0}.fd-col-lg--offset-0[dir=rtl],[dir=rtl] .fd-col-lg--offset-0{margin-left:0;margin-right:0}.fd-col-lg--offset-after-0{margin-right:0}.fd-col-lg--offset-after-0[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-0{margin-left:0;margin-right:0}.fd-col-lg--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-lg--offset-1{margin-left:8.3333333333%}.fd-col-lg--offset-1[dir=rtl],[dir=rtl] .fd-col-lg--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col-lg--offset-after-1{margin-right:8.3333333333%}.fd-col-lg--offset-after-1[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col-lg--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-lg--offset-2{margin-left:16.6666666667%}.fd-col-lg--offset-2[dir=rtl],[dir=rtl] .fd-col-lg--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col-lg--offset-after-2{margin-right:16.6666666667%}.fd-col-lg--offset-after-2[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col-lg--3{max-width:25%;min-width:25%}.fd-col-lg--offset-3{margin-left:25%}.fd-col-lg--offset-3[dir=rtl],[dir=rtl] .fd-col-lg--offset-3{margin-left:0;margin-right:25%}.fd-col-lg--offset-after-3{margin-right:25%}.fd-col-lg--offset-after-3[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-3{margin-left:25%;margin-right:0}.fd-col-lg--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-lg--offset-4{margin-left:33.3333333333%}.fd-col-lg--offset-4[dir=rtl],[dir=rtl] .fd-col-lg--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col-lg--offset-after-4{margin-right:33.3333333333%}.fd-col-lg--offset-after-4[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col-lg--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-lg--offset-5{margin-left:41.6666666667%}.fd-col-lg--offset-5[dir=rtl],[dir=rtl] .fd-col-lg--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col-lg--offset-after-5{margin-right:41.6666666667%}.fd-col-lg--offset-after-5[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col-lg--6{max-width:50%;min-width:50%}.fd-col-lg--offset-6{margin-left:50%}.fd-col-lg--offset-6[dir=rtl],[dir=rtl] .fd-col-lg--offset-6{margin-left:0;margin-right:50%}.fd-col-lg--offset-after-6{margin-right:50%}.fd-col-lg--offset-after-6[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-6{margin-left:50%;margin-right:0}.fd-col-lg--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-lg--offset-7{margin-left:58.3333333333%}.fd-col-lg--offset-7[dir=rtl],[dir=rtl] .fd-col-lg--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col-lg--offset-after-7{margin-right:58.3333333333%}.fd-col-lg--offset-after-7[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col-lg--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-lg--offset-8{margin-left:66.6666666667%}.fd-col-lg--offset-8[dir=rtl],[dir=rtl] .fd-col-lg--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col-lg--offset-after-8{margin-right:66.6666666667%}.fd-col-lg--offset-after-8[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col-lg--9{max-width:75%;min-width:75%}.fd-col-lg--offset-9{margin-left:75%}.fd-col-lg--offset-9[dir=rtl],[dir=rtl] .fd-col-lg--offset-9{margin-left:0;margin-right:75%}.fd-col-lg--offset-after-9{margin-right:75%}.fd-col-lg--offset-after-9[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-9{margin-left:75%;margin-right:0}.fd-col-lg--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-lg--offset-10{margin-left:83.3333333333%}.fd-col-lg--offset-10[dir=rtl],[dir=rtl] .fd-col-lg--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col-lg--offset-after-10{margin-right:83.3333333333%}.fd-col-lg--offset-after-10[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col-lg--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-lg--offset-11{margin-left:91.6666666667%}.fd-col-lg--offset-11[dir=rtl],[dir=rtl] .fd-col-lg--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col-lg--offset-after-11{margin-right:91.6666666667%}.fd-col-lg--offset-after-11[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col-lg--12{max-width:100%;min-width:100%}.fd-col-lg--offset-12{margin-left:100%}.fd-col-lg--offset-12[dir=rtl],[dir=rtl] .fd-col-lg--offset-12{margin-left:0;margin-right:100%}.fd-col-lg--offset-after-12{margin-right:100%}.fd-col-lg--offset-after-12[dir=rtl],[dir=rtl] .fd-col-lg--offset-after-12{margin-left:100%;margin-right:0}}@media (min-width: 1440px){.fd-col-xl--0{max-width:0;min-width:0%}.fd-col-xl--offset-0{margin-left:0}.fd-col-xl--offset-0[dir=rtl],[dir=rtl] .fd-col-xl--offset-0{margin-left:0;margin-right:0}.fd-col-xl--offset-after-0{margin-right:0}.fd-col-xl--offset-after-0[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-0{margin-left:0;margin-right:0}.fd-col-xl--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-xl--offset-1{margin-left:8.3333333333%}.fd-col-xl--offset-1[dir=rtl],[dir=rtl] .fd-col-xl--offset-1{margin-left:0;margin-right:8.3333333333%}.fd-col-xl--offset-after-1{margin-right:8.3333333333%}.fd-col-xl--offset-after-1[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-1{margin-left:8.3333333333%;margin-right:0}.fd-col-xl--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-xl--offset-2{margin-left:16.6666666667%}.fd-col-xl--offset-2[dir=rtl],[dir=rtl] .fd-col-xl--offset-2{margin-left:0;margin-right:16.6666666667%}.fd-col-xl--offset-after-2{margin-right:16.6666666667%}.fd-col-xl--offset-after-2[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-2{margin-left:16.6666666667%;margin-right:0}.fd-col-xl--3{max-width:25%;min-width:25%}.fd-col-xl--offset-3{margin-left:25%}.fd-col-xl--offset-3[dir=rtl],[dir=rtl] .fd-col-xl--offset-3{margin-left:0;margin-right:25%}.fd-col-xl--offset-after-3{margin-right:25%}.fd-col-xl--offset-after-3[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-3{margin-left:25%;margin-right:0}.fd-col-xl--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-xl--offset-4{margin-left:33.3333333333%}.fd-col-xl--offset-4[dir=rtl],[dir=rtl] .fd-col-xl--offset-4{margin-left:0;margin-right:33.3333333333%}.fd-col-xl--offset-after-4{margin-right:33.3333333333%}.fd-col-xl--offset-after-4[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-4{margin-left:33.3333333333%;margin-right:0}.fd-col-xl--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-xl--offset-5{margin-left:41.6666666667%}.fd-col-xl--offset-5[dir=rtl],[dir=rtl] .fd-col-xl--offset-5{margin-left:0;margin-right:41.6666666667%}.fd-col-xl--offset-after-5{margin-right:41.6666666667%}.fd-col-xl--offset-after-5[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-5{margin-left:41.6666666667%;margin-right:0}.fd-col-xl--6{max-width:50%;min-width:50%}.fd-col-xl--offset-6{margin-left:50%}.fd-col-xl--offset-6[dir=rtl],[dir=rtl] .fd-col-xl--offset-6{margin-left:0;margin-right:50%}.fd-col-xl--offset-after-6{margin-right:50%}.fd-col-xl--offset-after-6[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-6{margin-left:50%;margin-right:0}.fd-col-xl--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-xl--offset-7{margin-left:58.3333333333%}.fd-col-xl--offset-7[dir=rtl],[dir=rtl] .fd-col-xl--offset-7{margin-left:0;margin-right:58.3333333333%}.fd-col-xl--offset-after-7{margin-right:58.3333333333%}.fd-col-xl--offset-after-7[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-7{margin-left:58.3333333333%;margin-right:0}.fd-col-xl--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-xl--offset-8{margin-left:66.6666666667%}.fd-col-xl--offset-8[dir=rtl],[dir=rtl] .fd-col-xl--offset-8{margin-left:0;margin-right:66.6666666667%}.fd-col-xl--offset-after-8{margin-right:66.6666666667%}.fd-col-xl--offset-after-8[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-8{margin-left:66.6666666667%;margin-right:0}.fd-col-xl--9{max-width:75%;min-width:75%}.fd-col-xl--offset-9{margin-left:75%}.fd-col-xl--offset-9[dir=rtl],[dir=rtl] .fd-col-xl--offset-9{margin-left:0;margin-right:75%}.fd-col-xl--offset-after-9{margin-right:75%}.fd-col-xl--offset-after-9[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-9{margin-left:75%;margin-right:0}.fd-col-xl--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-xl--offset-10{margin-left:83.3333333333%}.fd-col-xl--offset-10[dir=rtl],[dir=rtl] .fd-col-xl--offset-10{margin-left:0;margin-right:83.3333333333%}.fd-col-xl--offset-after-10{margin-right:83.3333333333%}.fd-col-xl--offset-after-10[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-10{margin-left:83.3333333333%;margin-right:0}.fd-col-xl--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-xl--offset-11{margin-left:91.6666666667%}.fd-col-xl--offset-11[dir=rtl],[dir=rtl] .fd-col-xl--offset-11{margin-left:0;margin-right:91.6666666667%}.fd-col-xl--offset-after-11{margin-right:91.6666666667%}.fd-col-xl--offset-after-11[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-11{margin-left:91.6666666667%;margin-right:0}.fd-col-xl--12{max-width:100%;min-width:100%}.fd-col-xl--offset-12{margin-left:100%}.fd-col-xl--offset-12[dir=rtl],[dir=rtl] .fd-col-xl--offset-12{margin-left:0;margin-right:100%}.fd-col-xl--offset-after-12{margin-right:100%}.fd-col-xl--offset-after-12[dir=rtl],[dir=rtl] .fd-col-xl--offset-after-12{margin-left:100%;margin-right:0}}.fd-container.fd-form-layout-grid-container .fd-form-group,.fd-container.fd-form-layout-grid-container.fd-form-group{padding:1rem!important}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-group,.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-group{padding:0!important}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label,.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label{margin-right:0;white-space:normal}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label{margin-left:0;margin-right:0}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required,.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required{padding-right:.5rem}.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required[dir=rtl],.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required,[dir=rtl] .fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required{padding-left:.5rem;padding-right:0}.fd-container.fd-form-layout-grid-container .fd-row{flex-direction:row}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{overflow:hidden;padding-bottom:0;padding-top:0;text-overflow:ellipsis;white-space:nowrap}.fd-container.fd-form-layout-grid-container .fd-row .fd-col:not(.fd-form-group){align-self:center}@media (min-width: 0){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col>.fd-form-label{float:right;text-align:right}}@media (min-width: 0) and (max-width: 599px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container.fd-form-group .fd-form-item:first-of-type{margin-top:0}}@media (min-width: 600px){.fd-container.fd-form-layout-grid-container{padding:0 .25rem}.fd-container.fd-form-layout-grid-container .fd-row{margin:0 -.25rem;min-width:calc(100% + .5rem)}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{padding:0 .25rem}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col-md>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md>.fd-form-label{float:right;text-align:right}}@media (min-width: 600px) and (max-width: 1023px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--md-vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}}@media (min-width: 1024px){.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-lg>.fd-form-label{float:right;text-align:right}}@media (min-width: 1024px) and (max-width: 1443px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--lg-vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}}@media (min-width: 1440px){.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical .fd-form-group .fd-form-item,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical.fd-form-group .fd-form-item{margin-top:.625rem}.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical .fd-form-group .fd-form-item:first-of-type,.fd-container.fd-form-layout-grid-container.fd-form-layout-grid-container--xl-vertical.fd-form-group .fd-form-item:first-of-type{margin-top:0}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--1>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--1>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--1>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--2>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--2>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--2>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--3>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--3>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--3>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--4>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--4>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--4>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--5>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--5>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--5>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--6>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--6>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--6>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--7>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--7>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--7>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--8>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--8>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--8>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--9>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--9>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--9>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--10>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--10>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--10>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--11>.fd-form-label{float:right;padding-bottom:0;text-align:right;width:100%}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--11>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--11>.fd-form-label{float:left;text-align:left}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--12>.fd-form-label,.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl>.fd-form-label{float:left;padding-bottom:.125rem;text-align:left;width:auto}.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--12>.fd-form-label[dir=rtl],.fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl>.fd-form-label[dir=rtl],[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl--12>.fd-form-label,[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-xl>.fd-form-label{float:right;text-align:right}}.fd-section{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_Background);border:0;border-bottom:none;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem .5rem 1.5rem}.fd-section:after,.fd-section:before{box-sizing:inherit;font-size:inherit}.fd-section:after{clear:both;content:\"\";display:table}@media (min-width: 600px){.fd-section{padding-left:2rem;padding-right:2rem}}@media (min-width: 1440px){.fd-section{padding-left:3rem;padding-right:3rem}}.fd-section--no-border,.fd-section:last-child{border-bottom:0}.fd-section--bleed,.fd-section--full-bleed{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-section--bleed:after,.fd-section--bleed:before,.fd-section--full-bleed:after,.fd-section--full-bleed:before{box-sizing:inherit;font-size:inherit}.fd-section--bleed .fd-section__footer,.fd-section--bleed .fd-section__header,.fd-section--full-bleed .fd-section__footer,.fd-section--full-bleed .fd-section__header{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){.fd-section--bleed .fd-section__footer,.fd-section--bleed .fd-section__header,.fd-section--full-bleed .fd-section__footer,.fd-section--full-bleed .fd-section__header{padding-left:2rem;padding-right:2rem}}@media (min-width: 1440px){.fd-section--bleed .fd-section__footer,.fd-section--bleed .fd-section__header,.fd-section--full-bleed .fd-section__footer,.fd-section--full-bleed .fd-section__header{padding-left:3rem;padding-right:3rem}}.fd-section__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1.5rem;min-height:1.5rem;padding:0}.fd-section__header:after,.fd-section__header:before{box-sizing:inherit;font-size:inherit}.fd-section__title{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapTitleColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader2Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;padding:0}.fd-section__title:after,.fd-section__title:before{box-sizing:inherit;font-size:inherit}.fd-section__actions{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-section__actions:after,.fd-section__actions:before{box-sizing:inherit;font-size:inherit}.fd-section__footer{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-section__footer:after,.fd-section__footer:before{box-sizing:inherit;font-size:inherit}.fd-form-group{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-form-group:after,.fd-form-group:before{box-sizing:inherit;font-size:inherit}.fd-form-group--inline{-webkit-box-pack:start;-ms-flex-pack:start;-ms-flex-wrap:wrap;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.fd-form-group--inline,.fd-form-group__header{display:flex}.fd-form-group__header{-webkit-box-sizing:border-box;align-items:center;background-color:var(--sapGroup_TitleBackground);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-form-group__header:after,.fd-form-group__header:before{box-sizing:inherit;font-size:inherit}.fd-form-group__header[class*=-compact],.fd-form-group__header[class*=-condensed],[class*=-compact] .fd-form-group__header:not([class*=-cozy]),[class*=-condensed] .fd-form-group__header:not([class*=-cozy]){height:2rem}.fd-form-group__header-text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;font-weight:700;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-form-group__header-text:after,.fd-form-group__header-text:before{box-sizing:inherit;font-size:inherit}/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-form-header{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-shadow:0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor);align-items:center;background-color:var(--sapGroup_TitleBackground);border:0;box-shadow:0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-form-header:after,.fd-form-header:before{box-sizing:inherit;font-size:inherit}.fd-form-header__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader4Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-form-header__text:after,.fd-form-header__text:before{box-sizing:inherit;font-size:inherit}fdp-form-group{display:block}.fd-form-label{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormGroupHeaderComponent, selector: "[fdp-form-group-header]", inputs: ["fieldGroup"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: FieldGroupRowValuePipe, name: "fieldGroupRowValue" }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
@@ -6070,8 +6011,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         NgFor,
                         FormGroupHeaderComponent,
                         LinkComponent,
-                        IconModule,
-                        InlineHelpModule,
+                        IconComponent,
+                        InlineHelpDirective,
                         AsyncPipe,
                         KeyValuePipe,
                         FieldGroupRowValuePipe,
@@ -6447,7 +6388,7 @@ class ComboboxMobileComponent extends MobileModeBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DialogService }, { token: COMBOBOX_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxMobileComponent, isStandalone: true, selector: "fdp-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i1$2.DialogTemplateDirective, selector: "[fdDialogTemplate]", inputs: ["fdDialogTemplateConfig"] }, { kind: "directive", type: i3$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i3$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$2.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BarModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxMobileComponent, isStandalone: true, selector: "fdp-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i1$2.DialogTemplateDirective, selector: "[fdDialogTemplate]", inputs: ["fdDialogTemplateConfig"] }, { kind: "directive", type: i3.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$1.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BarModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxMobileComponent, decorators: [{
             type: Component,
@@ -7465,11 +7406,11 @@ class ComboboxComponent extends BaseCombobox {
         }, [])
             .find((item) => item.label === text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i1$2.DialogConfig, optional: true }, { token: i3$1.DynamicComponentService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: DATA_PROVIDERS, optional: true }, { token: ComboboxConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i1$2.DialogConfig, optional: true }, { token: i3.DynamicComponentService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: DATA_PROVIDERS, optional: true }, { token: ComboboxConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxComponent, isStandalone: true, selector: "fdp-combobox", outputs: { selectionChange: "selectionChange" }, providers: [
             { provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n            <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n                {{\n                    (count === 1\n                        ? 'platformCombobox.countListResultsSingular'\n                        : 'platformCombobox.countListResultsPlural'\n                    ) | fdTranslate : { count: count }\n                }}\n            </ng-container>\n        </div>\n        <fd-form-message\n            *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate; else customGroupItemTemplateRenderer\">\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                </ng-container>\n\n                <ng-template #customGroupItemTemplateRenderer>\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                </ng-template>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    (click)=\"handleOptionItem(optionItem)\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                (click)=\"handleOptionItem(optionItem)\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (keyDown)=\"handlePressEnter($event, optionItem)\"\n                [selected]=\"isSelectedOptionItem(optionItem)\"\n            >\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate; else customOptinItemTemplateRenderer\">\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n    </ng-container>\n\n    <ng-template #customOptinItemTemplateRenderer>\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    </ng-template>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate; else customSecondaryItemTemplateRenderer\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-template #customSecondaryItemTemplateRenderer>\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n            <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n                {{\n                    (count === 1\n                        ? 'platformCombobox.countListResultsSingular'\n                        : 'platformCombobox.countListResultsPlural'\n                    ) | fdTranslate : { count: count }\n                }}\n            </ng-container>\n        </div>\n        <fd-form-message\n            *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate; else customGroupItemTemplateRenderer\">\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                </ng-container>\n\n                <ng-template #customGroupItemTemplateRenderer>\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                </ng-template>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    (click)=\"handleOptionItem(optionItem)\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                (click)=\"handleOptionItem(optionItem)\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (keyDown)=\"handlePressEnter($event, optionItem)\"\n                [selected]=\"isSelectedOptionItem(optionItem)\"\n            >\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate; else customOptinItemTemplateRenderer\">\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n    </ng-container>\n\n    <ng-template #customOptinItemTemplateRenderer>\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    </ng-template>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate; else customSecondaryItemTemplateRenderer\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-template #customSecondaryItemTemplateRenderer>\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -7509,7 +7450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     type: Self
                 }] }, { type: i1$2.DialogConfig, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.DynamicComponentService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Map, decorators: [{
+                }] }, { type: i3.DynamicComponentService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Map, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -7573,6 +7514,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
+class PlatformDatePickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, imports: [PlatformDatePickerComponent], exports: [PlatformDatePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, imports: [PlatformDatePickerComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [PlatformDatePickerComponent],
+                    exports: [PlatformDatePickerComponent]
+                }]
+        }] });
+
 /** @hidden */
 function createMissingDateImplementationError(provider) {
     return Error(`FdpDatetimePicker: No provider found for ${provider}. You must import one of the following ` +
@@ -7792,7 +7746,7 @@ class PlatformDatetimePickerComponent extends BaseInput {
         }
         customPopoverEl.style.display = 'inline';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatetimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i2$1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatetimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i2.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformDatetimePickerComponent, isStandalone: true, selector: "fdp-datetime-picker", inputs: { value: "value", placement: "placement", appendTo: "appendTo", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", datetimeChange: "datetimeChange", onClose: "onClose" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], viewQueries: [{ propertyName: "dateTimePickerComponent", first: true, predicate: DatetimePickerComponent, descendants: true }, { propertyName: "_elRef", first: true, predicate: DatetimePickerComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "_control", first: true, predicate: DatetimePickerComponent, descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n", dependencies: [{ kind: "component", type: DatetimePickerComponent, selector: "fd-datetime-picker", inputs: ["placeholder", "placement", "appendTo", "disabled", "inputId", "required", "meridian", "displaySeconds", "ariaLabelledBy", "message", "messageTriggers", "displayMinutes", "displayHours", "useValidation", "date", "isOpen", "startingDayOfWeek", "activeView", "allowNull", "keepTwoDigitsTime", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "spinnerButtons", "showWeekNumbers", "showFooter", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction"], outputs: ["isOpenChange", "activeViewChange", "dateChange", "calendarChange", "timeChange", "onClose", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatetimePickerComponent, decorators: [{
@@ -7828,7 +7782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }, {
                     type: Inject,
                     args: [FD_FORM_FIELD_CONTROL]
-                }] }, { type: i2$1.DatetimeAdapter, decorators: [{
+                }] }, { type: i2.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -8020,24 +7974,6 @@ const FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS = new InjectionToken('Default opti
     factory: () => defaultFormGeneratorHintOptions
 });
 
-class GetOrderedFieldControlsPipe {
-    /** @hidden */
-    transform(field) {
-        // casting type explicity to the DynamicFormControl[] as this pipe will be used specifically with this data type
-        return Object.values(field.controls).sort((a, b) => (a.formItem.rank ?? -Infinity) > (b.formItem.rank ?? -Infinity) ? 1 : -1);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: GetOrderedFieldControlsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: GetOrderedFieldControlsPipe, isStandalone: true, name: "getOrderedFieldControls", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: GetOrderedFieldControlsPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'getOrderedFieldControls',
-                    pure: false,
-                    standalone: true
-                }]
-        }] });
-
 class GetHintOptionsPipe {
     /** @hidden */
     constructor(_providedHintOptions) {
@@ -8080,6 +8016,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     args: [FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS]
                 }] }]; } });
 
+class GetOrderedFieldControlsPipe {
+    /** @hidden */
+    transform(field) {
+        // casting type explicity to the DynamicFormControl[] as this pipe will be used specifically with this data type
+        return Object.values(field.controls).sort((a, b) => (a.formItem.rank ?? -Infinity) > (b.formItem.rank ?? -Infinity) ? 1 : -1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: GetOrderedFieldControlsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: GetOrderedFieldControlsPipe, isStandalone: true, name: "getOrderedFieldControls", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: GetOrderedFieldControlsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getOrderedFieldControls',
+                    pure: false,
+                    standalone: true
+                }]
+        }] });
+
 let formUniqueId = 0;
 const FDP_FORM_IGNORED_STATUSES = ['INVALID', 'PENDING', 'DISABLED'];
 /**
@@ -8403,7 +8357,7 @@ class FormGeneratorComponent {
                 useFactory: (formGenerator) => formGenerator.doCheck$,
                 deps: [FormGeneratorComponent]
             }
-        ], viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "fields", predicate: FormGeneratorFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<fd-busy-indicator *ngIf=\"_firstLoadingDone; else loadingTemplate\" [loading]=\"formLoading\" [block]=\"true\">\n    <fdp-form-group\n        *ngIf=\"form\"\n        [hint]=\"hint\"\n        [mainTitle]=\"mainTitle\"\n        [hideMainTItle]=\"hideMainTItle\"\n        [formGroup]=\"form\"\n        [columnLayout]=\"columnLayout\"\n        [labelColumnLayout]=\"labelColumnLayout\"\n        [fieldColumnLayout]=\"fieldColumnLayout\"\n        [gapColumnLayout]=\"gapColumnLayout\"\n        [unifiedLayout]=\"unifiedLayout\"\n        [inlineColumnLayout]=\"inlineColumnLayout\"\n        [useForm]=\"true\"\n    >\n        <ng-container *ngFor=\"let error of _errorModels; trackBy: _errorsTrackBy\">\n            <span *fdpFormFieldError=\"error.type; let directiveError\">\n                <ng-container *ngIf=\"_isAdvancedError(directiveError); else simpleErrorTemplate\">\n                    <ng-container *ngIf=\"directiveError.heading\">\n                        <span *fdpFormFieldErrorHeading=\"let validationError; type: directiveError.type\">\n                            {{ validationError.heading }}\n                        </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"directiveError.description\">\n                        <span *fdpFormFieldErrorDescription=\"let validationError\">\n                            {{ validationError.description }}\n                        </span>\n                    </ng-container>\n                </ng-container>\n                <ng-template #simpleErrorTemplate>\n                    <span *fdpFormFieldErrorHeading=\"let validationError\">\n                        {{ error.value ? error.value : validationError }}\n                    </span>\n                </ng-template>\n            </span>\n        </ng-container>\n        <ng-container *ngFor=\"let field of formControlItems; trackBy: _trackFn\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    field.type === 'field' ? fieldRenderer : groupRenderer;\n                    context: { field: field, formFieldName: field.formItem.name, rank: field.formItem?.rank || 0 }\n                \"\n            ></ng-container>\n            <ng-template\n                #fieldRenderer\n                let-field=\"field\"\n                let-formFieldName=\"formFieldName\"\n                let-formGroupName=\"formGroupName\"\n                let-rank=\"rank\"\n            >\n                <ng-container\n                    *fdpDynamicFormControlField=\"field; show: shouldShowFields[field.formItem.name] !== false\"\n                >\n                    <fdp-form-generator-field\n                        [hintOptions]=\"field.formItem.guiOptions | getHintOptions\"\n                        [form]=\"form\"\n                        [shouldShow]=\"shouldShowFields[field.formItem.name] !== false\"\n                        [field]=\"field\"\n                        [formFieldName]=\"formFieldName\"\n                        [formGroupNamePath]=\"formGroupName\"\n                        [rank]=\"rank\"\n                    ></fdp-form-generator-field>\n                </ng-container>\n            </ng-template>\n            <ng-template #groupRenderer>\n                <fdp-form-field-group\n                    [hintOptions]=\"field.formItem.guiOptions | getHintOptions\"\n                    [label]=\"field.formItem.message || ''\"\n                    [labelColumnLayout]=\"field.formItem.guiOptions?.labelColumnLayout\"\n                    [fieldColumnLayout]=\"field.formItem.guiOptions?.fieldColumnLayout\"\n                    [gapColumnLayout]=\"field.formItem.guiOptions?.gapColumnLayout\"\n                    [formName]=\"field.formItem.name\"\n                >\n                    <ng-container *ngFor=\"let groupField of field | getOrderedFieldControls; trackBy: _groupTrackFn\">\n                        <ng-container\n                            *fdpDynamicFormControlField=\"\n                                groupField;\n                                show: shouldShowFields[groupField.formItem.name!] !== false\n                            \"\n                        >\n                            <fdp-form-generator-field\n                                [hintOptions]=\"groupField.formItem.guiOptions | getHintOptions\"\n                                [form]=\"form\"\n                                [field]=\"groupField\"\n                                [shouldShow]=\"shouldShowFields[groupField.formItem.name!] !== false\"\n                                [formFieldName]=\"groupField.formItem.name\"\n                                [formGroupNamePath]=\"field.formItem.name\"\n                                [rank]=\"groupField.formItem.rank || 0\"\n                            ></fdp-form-generator-field>\n                        </ng-container>\n                    </ng-container>\n                </fdp-form-field-group>\n            </ng-template>\n        </ng-container>\n        <fdp-form-field *ngIf=\"!noAdditionalContent\" [column]=\"1\" [rank]=\"formControlItems.length + 1\">\n            <!-- For user-defined elements, like submit button -->\n            <ng-content></ng-content>\n        </fdp-form-field>\n    </fdp-form-group>\n</fd-busy-indicator>\n\n<ng-template #loadingTemplate>\n    <fd-skeleton width=\"100%\" height=\"100px\" [style.padding.rem]=\"1\">\n        <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n    </fd-skeleton>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BusyIndicatorModule }, { kind: "component", type: i2$3.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "ngmodule", type: FdpFormGroupModule }, { kind: "component", type: FormGroupComponent, selector: "fdp-form-group", inputs: ["id", "name", "editable", "noLabelLayout", "class", "hint", "inlineColumnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "formGroup", "topTitle", "mainTitle", "hideMainTItle", "object", "i18Strings", "useForm", "columnLayout", "unifiedLayout"], outputs: ["onSubmit"] }, { kind: "component", type: FormFieldComponent, selector: "fdp-form-field", inputs: ["label", "id", "hint", "noLabelLayout", "validators", "rank", "placeholder", "column", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "i18Strings", "required", "editable", "columns", "disabled", "colon", "formGroupContainer"], outputs: ["onChange", "onColumnChange"] }, { kind: "component", type: FormFieldGroupComponent, selector: "fdp-form-field-group", inputs: ["label", "formName", "formGroupContainer", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "hintOptions"] }, { kind: "directive", type: FormFieldErrorDirective, selector: "[fdpFormFieldError]", inputs: ["fdpFormFieldErrorAs", "fdpFormFieldError", "fdpFormFieldErrorType"] }, { kind: "directive", type: FormFieldErrorHeadingDirective, selector: "[fdpFormFieldErrorHeading]", inputs: ["fdpFormFieldErrorHeadingAs", "fdpFormFieldErrorHeadingType"] }, { kind: "directive", type: FormFieldErrorDescriptionDirective, selector: "[fdpFormFieldErrorDescription]", inputs: ["fdpFormFieldErrorDescriptionAs"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicFormControlFieldDirective, selector: "[fdpDynamicFormControlField]", inputs: ["fdpDynamicFormControlField", "fdpDynamicFormControlFieldShow"] }, { kind: "component", type: FormGeneratorFieldComponent, selector: "fdp-form-generator-field", inputs: ["field", "form", "i18n", "formFieldName", "formGroupNamePath", "rank", "shouldShow", "hintOptions"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i10.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "pipe", type: GetOrderedFieldControlsPipe, name: "getOrderedFieldControls" }, { kind: "pipe", type: GetHintOptionsPipe, name: "getHintOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "fields", predicate: FormGeneratorFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<fd-busy-indicator *ngIf=\"_firstLoadingDone; else loadingTemplate\" [loading]=\"formLoading\" [block]=\"true\">\n    <fdp-form-group\n        *ngIf=\"form\"\n        [hint]=\"hint\"\n        [mainTitle]=\"mainTitle\"\n        [hideMainTItle]=\"hideMainTItle\"\n        [formGroup]=\"form\"\n        [columnLayout]=\"columnLayout\"\n        [labelColumnLayout]=\"labelColumnLayout\"\n        [fieldColumnLayout]=\"fieldColumnLayout\"\n        [gapColumnLayout]=\"gapColumnLayout\"\n        [unifiedLayout]=\"unifiedLayout\"\n        [inlineColumnLayout]=\"inlineColumnLayout\"\n        [useForm]=\"true\"\n    >\n        <ng-container *ngFor=\"let error of _errorModels; trackBy: _errorsTrackBy\">\n            <span *fdpFormFieldError=\"error.type; let directiveError\">\n                <ng-container *ngIf=\"_isAdvancedError(directiveError); else simpleErrorTemplate\">\n                    <ng-container *ngIf=\"directiveError.heading\">\n                        <span *fdpFormFieldErrorHeading=\"let validationError; type: directiveError.type\">\n                            {{ validationError.heading }}\n                        </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"directiveError.description\">\n                        <span *fdpFormFieldErrorDescription=\"let validationError\">\n                            {{ validationError.description }}\n                        </span>\n                    </ng-container>\n                </ng-container>\n                <ng-template #simpleErrorTemplate>\n                    <span *fdpFormFieldErrorHeading=\"let validationError\">\n                        {{ error.value ? error.value : validationError }}\n                    </span>\n                </ng-template>\n            </span>\n        </ng-container>\n        <ng-container *ngFor=\"let field of formControlItems; trackBy: _trackFn\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    field.type === 'field' ? fieldRenderer : groupRenderer;\n                    context: { field: field, formFieldName: field.formItem.name, rank: field.formItem?.rank || 0 }\n                \"\n            ></ng-container>\n            <ng-template\n                #fieldRenderer\n                let-field=\"field\"\n                let-formFieldName=\"formFieldName\"\n                let-formGroupName=\"formGroupName\"\n                let-rank=\"rank\"\n            >\n                <ng-container\n                    *fdpDynamicFormControlField=\"field; show: shouldShowFields[field.formItem.name] !== false\"\n                >\n                    <fdp-form-generator-field\n                        [hintOptions]=\"field.formItem.guiOptions | getHintOptions\"\n                        [form]=\"form\"\n                        [shouldShow]=\"shouldShowFields[field.formItem.name] !== false\"\n                        [field]=\"field\"\n                        [formFieldName]=\"formFieldName\"\n                        [formGroupNamePath]=\"formGroupName\"\n                        [rank]=\"rank\"\n                    ></fdp-form-generator-field>\n                </ng-container>\n            </ng-template>\n            <ng-template #groupRenderer>\n                <fdp-form-field-group\n                    [hintOptions]=\"field.formItem.guiOptions | getHintOptions\"\n                    [label]=\"field.formItem.message || ''\"\n                    [labelColumnLayout]=\"field.formItem.guiOptions?.labelColumnLayout\"\n                    [fieldColumnLayout]=\"field.formItem.guiOptions?.fieldColumnLayout\"\n                    [gapColumnLayout]=\"field.formItem.guiOptions?.gapColumnLayout\"\n                    [formName]=\"field.formItem.name\"\n                >\n                    <ng-container *ngFor=\"let groupField of field | getOrderedFieldControls; trackBy: _groupTrackFn\">\n                        <ng-container\n                            *fdpDynamicFormControlField=\"\n                                groupField;\n                                show: shouldShowFields[groupField.formItem.name!] !== false\n                            \"\n                        >\n                            <fdp-form-generator-field\n                                [hintOptions]=\"groupField.formItem.guiOptions | getHintOptions\"\n                                [form]=\"form\"\n                                [field]=\"groupField\"\n                                [shouldShow]=\"shouldShowFields[groupField.formItem.name!] !== false\"\n                                [formFieldName]=\"groupField.formItem.name\"\n                                [formGroupNamePath]=\"field.formItem.name\"\n                                [rank]=\"groupField.formItem.rank || 0\"\n                            ></fdp-form-generator-field>\n                        </ng-container>\n                    </ng-container>\n                </fdp-form-field-group>\n            </ng-template>\n        </ng-container>\n        <fdp-form-field *ngIf=\"!noAdditionalContent\" [column]=\"1\" [rank]=\"formControlItems.length + 1\">\n            <!-- For user-defined elements, like submit button -->\n            <ng-content></ng-content>\n        </fdp-form-field>\n    </fdp-form-group>\n</fd-busy-indicator>\n\n<ng-template #loadingTemplate>\n    <fd-skeleton width=\"100%\" height=\"100px\" [style.padding.rem]=\"1\">\n        <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n    </fd-skeleton>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BusyIndicatorModule }, { kind: "component", type: i2$2.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "ngmodule", type: FdpFormGroupModule }, { kind: "component", type: FormGroupComponent, selector: "fdp-form-group", inputs: ["id", "name", "editable", "noLabelLayout", "class", "hint", "inlineColumnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "formGroup", "topTitle", "mainTitle", "hideMainTItle", "object", "i18Strings", "useForm", "columnLayout", "unifiedLayout"], outputs: ["onSubmit"] }, { kind: "component", type: FormFieldComponent, selector: "fdp-form-field", inputs: ["label", "id", "hint", "noLabelLayout", "validators", "rank", "placeholder", "column", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "i18Strings", "required", "editable", "columns", "disabled", "colon", "formGroupContainer"], outputs: ["onChange", "onColumnChange"] }, { kind: "component", type: FormFieldGroupComponent, selector: "fdp-form-field-group", inputs: ["label", "formName", "formGroupContainer", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "hintOptions"] }, { kind: "directive", type: FormFieldErrorDirective, selector: "[fdpFormFieldError]", inputs: ["fdpFormFieldErrorAs", "fdpFormFieldError", "fdpFormFieldErrorType"] }, { kind: "directive", type: FormFieldErrorHeadingDirective, selector: "[fdpFormFieldErrorHeading]", inputs: ["fdpFormFieldErrorHeadingAs", "fdpFormFieldErrorHeadingType"] }, { kind: "directive", type: FormFieldErrorDescriptionDirective, selector: "[fdpFormFieldErrorDescription]", inputs: ["fdpFormFieldErrorDescriptionAs"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicFormControlFieldDirective, selector: "[fdpDynamicFormControlField]", inputs: ["fdpDynamicFormControlField", "fdpDynamicFormControlFieldShow"] }, { kind: "component", type: FormGeneratorFieldComponent, selector: "fdp-form-generator-field", inputs: ["field", "form", "i18n", "formFieldName", "formGroupNamePath", "rank", "shouldShow", "hintOptions"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "pipe", type: GetOrderedFieldControlsPipe, name: "getOrderedFieldControls" }, { kind: "pipe", type: GetHintOptionsPipe, name: "getHintOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FormGeneratorComponent, decorators: [{
             type: Component,
@@ -8423,7 +8377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         NgTemplateOutlet,
                         DynamicFormControlFieldDirective,
                         FormGeneratorFieldComponent,
-                        SkeletonModule,
+                        SkeletonComponent,
                         GetOrderedFieldControlsPipe,
                         GetHintOptionsPipe
                     ], template: "<fd-busy-indicator *ngIf=\"_firstLoadingDone; else loadingTemplate\" [loading]=\"formLoading\" [block]=\"true\">\n    <fdp-form-group\n        *ngIf=\"form\"\n        [hint]=\"hint\"\n        [mainTitle]=\"mainTitle\"\n        [hideMainTItle]=\"hideMainTItle\"\n        [formGroup]=\"form\"\n        [columnLayout]=\"columnLayout\"\n        [labelColumnLayout]=\"labelColumnLayout\"\n        [fieldColumnLayout]=\"fieldColumnLayout\"\n        [gapColumnLayout]=\"gapColumnLayout\"\n        [unifiedLayout]=\"unifiedLayout\"\n        [inlineColumnLayout]=\"inlineColumnLayout\"\n        [useForm]=\"true\"\n    >\n        <ng-container *ngFor=\"let error of _errorModels; trackBy: _errorsTrackBy\">\n            <span *fdpFormFieldError=\"error.type; let directiveError\">\n                <ng-container *ngIf=\"_isAdvancedError(directiveError); else simpleErrorTemplate\">\n                    <ng-container *ngIf=\"directiveError.heading\">\n                        <span *fdpFormFieldErrorHeading=\"let validationError; type: directiveError.type\">\n                            {{ validationError.heading }}\n                        </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"directiveError.description\">\n                        <span *fdpFormFieldErrorDescription=\"let validationError\">\n                            {{ validationError.description }}\n                        </span>\n                    </ng-container>\n                </ng-container>\n                <ng-template #simpleErrorTemplate>\n                    <span *fdpFormFieldErrorHeading=\"let validationError\">\n                        {{ error.value ? error.value : validationError }}\n                    </span>\n                </ng-template>\n            </span>\n        </ng-container>\n        <ng-container *ngFor=\"let field of formControlItems; trackBy: _trackFn\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    field.type === 'field' ? fieldRenderer : groupRenderer;\n                    context: { field: field, formFieldName: field.formItem.name, rank: field.formItem?.rank || 0 }\n                \"\n            ></ng-container>\n            <ng-template\n                #fieldRenderer\n                let-field=\"field\"\n                let-formFieldName=\"formFieldName\"\n                let-formGroupName=\"formGroupName\"\n                let-rank=\"rank\"\n            >\n                <ng-container\n                    *fdpDynamicFormControlField=\"field; show: shouldShowFields[field.formItem.name] !== false\"\n                >\n                    <fdp-form-generator-field\n                        [hintOptions]=\"field.formItem.guiOptions | getHintOptions\"\n                        [form]=\"form\"\n                        [shouldShow]=\"shouldShowFields[field.formItem.name] !== false\"\n                        [field]=\"field\"\n                        [formFieldName]=\"formFieldName\"\n                        [formGroupNamePath]=\"formGroupName\"\n                        [rank]=\"rank\"\n                    ></fdp-form-generator-field>\n                </ng-container>\n            </ng-template>\n            <ng-template #groupRenderer>\n                <fdp-form-field-group\n                    [hintOptions]=\"field.formItem.guiOptions | getHintOptions\"\n                    [label]=\"field.formItem.message || ''\"\n                    [labelColumnLayout]=\"field.formItem.guiOptions?.labelColumnLayout\"\n                    [fieldColumnLayout]=\"field.formItem.guiOptions?.fieldColumnLayout\"\n                    [gapColumnLayout]=\"field.formItem.guiOptions?.gapColumnLayout\"\n                    [formName]=\"field.formItem.name\"\n                >\n                    <ng-container *ngFor=\"let groupField of field | getOrderedFieldControls; trackBy: _groupTrackFn\">\n                        <ng-container\n                            *fdpDynamicFormControlField=\"\n                                groupField;\n                                show: shouldShowFields[groupField.formItem.name!] !== false\n                            \"\n                        >\n                            <fdp-form-generator-field\n                                [hintOptions]=\"groupField.formItem.guiOptions | getHintOptions\"\n                                [form]=\"form\"\n                                [field]=\"groupField\"\n                                [shouldShow]=\"shouldShowFields[groupField.formItem.name!] !== false\"\n                                [formFieldName]=\"groupField.formItem.name\"\n                                [formGroupNamePath]=\"field.formItem.name\"\n                                [rank]=\"groupField.formItem.rank || 0\"\n                            ></fdp-form-generator-field>\n                        </ng-container>\n                    </ng-container>\n                </fdp-form-field-group>\n            </ng-template>\n        </ng-container>\n        <fdp-form-field *ngIf=\"!noAdditionalContent\" [column]=\"1\" [rank]=\"formControlItems.length + 1\">\n            <!-- For user-defined elements, like submit button -->\n            <ng-content></ng-content>\n        </fdp-form-field>\n    </fdp-form-group>\n</fd-busy-indicator>\n\n<ng-template #loadingTemplate>\n    <fd-skeleton width=\"100%\" height=\"100px\" [style.padding.rem]=\"1\">\n        <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n    </fd-skeleton>\n</ng-template>\n" }]
@@ -8589,6 +8543,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
+class PlatformInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, imports: [InputComponent], exports: [InputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, imports: [InputComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [InputComponent],
+                    exports: [InputComponent]
+                }]
+        }] });
+
 const CSS_CLASS_NAME = {
     host: 'fdp-input-group',
     input: 'fd-input-group__input',
@@ -9883,7 +9850,7 @@ class MultiComboboxMobileComponent extends MobileModeBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MultiComboboxMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DialogService }, { token: MULTICOMBOBOX_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MultiComboboxMobileComponent, isStandalone: true, selector: "fdp-multi-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title fd-dialog-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n\n                        <button\n                            *ngIf=\"selectedShown$ | async\"\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            fdType=\"emphasized\"\n                            [title]=\"'platformMultiCombobox.mobileShowAllItemsButton' | fdTranslate\"\n                            [attr.aria-label]=\"'platformMultiCombobox.mobileShowAllItemsButton' | fdTranslate\"\n                            class=\"fd-margin-begin--tiny\"\n                            (click)=\"showSelected()\"\n                        ></button>\n\n                        <button\n                            *ngIf=\"(selectedShown$ | async) === false\"\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            fdType=\"transparent\"\n                            [title]=\"'platformMultiCombobox.mobileShowSelectedItemsButton' | fdTranslate\"\n                            [attr.aria-label]=\"'platformMultiCombobox.mobileShowSelectedItemsButton' | fdTranslate\"\n                            class=\"fd-margin-begin--tiny\"\n                            (click)=\"showSelected()\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i1$2.DialogTitleDirective, selector: "[fd-dialog-title]", inputs: ["id"] }, { kind: "directive", type: i1$2.DialogTemplateDirective, selector: "[fdDialogTemplate]", inputs: ["fdDialogTemplateConfig"] }, { kind: "directive", type: i3$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i3$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$2.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BarModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MultiComboboxMobileComponent, isStandalone: true, selector: "fdp-multi-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title fd-dialog-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n\n                        <button\n                            *ngIf=\"selectedShown$ | async\"\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            fdType=\"emphasized\"\n                            [title]=\"'platformMultiCombobox.mobileShowAllItemsButton' | fdTranslate\"\n                            [attr.aria-label]=\"'platformMultiCombobox.mobileShowAllItemsButton' | fdTranslate\"\n                            class=\"fd-margin-begin--tiny\"\n                            (click)=\"showSelected()\"\n                        ></button>\n\n                        <button\n                            *ngIf=\"(selectedShown$ | async) === false\"\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            fdType=\"transparent\"\n                            [title]=\"'platformMultiCombobox.mobileShowSelectedItemsButton' | fdTranslate\"\n                            [attr.aria-label]=\"'platformMultiCombobox.mobileShowSelectedItemsButton' | fdTranslate\"\n                            class=\"fd-margin-begin--tiny\"\n                            (click)=\"showSelected()\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i1$2.DialogTitleDirective, selector: "[fd-dialog-title]", inputs: ["id"] }, { kind: "directive", type: i1$2.DialogTemplateDirective, selector: "[fdDialogTemplate]", inputs: ["fdDialogTemplateConfig"] }, { kind: "directive", type: i3.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$1.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BarModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent$1, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MultiComboboxMobileComponent, decorators: [{
             type: Component,
@@ -9894,7 +9861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         TemplateDirective,
                         BarModule,
                         NgTemplateOutlet,
-                        ButtonModule,
+                        ButtonComponent$1,
                         CdkScrollable,
                         ScrollbarDirective,
                         AsyncPipe,
@@ -10181,7 +10148,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
             containerRef: this._viewContainerRef
         }, { injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MultiComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: i1$2.DialogConfig, optional: true }, { token: i3$1.DynamicComponentService }, { token: DATA_PROVIDERS, optional: true }, { token: MultiComboboxConfig }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: MAP_LIMIT }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MultiComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: i1$2.DialogConfig, optional: true }, { token: i3.DynamicComponentService }, { token: DATA_PROVIDERS, optional: true }, { token: MultiComboboxConfig }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: MAP_LIMIT }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MultiComboboxComponent, isStandalone: true, selector: "fdp-multi-combobox", providers: [
             {
                 provide: FD_FORM_FIELD_CONTROL,
@@ -10189,7 +10156,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
                 multi: true
             },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n        (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"true\"\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                class=\"fdp-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"disabled\"\n                    (onCloseClick)=\"removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdp-auto-complete\n                    (onComplete)=\"onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    [mobile]=\"mobile\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"id\"\n                    [name]=\"name\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"readonly\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [attr.aria-required]=\"required\"\n                    class=\"fd-tokenizer__input\"\n                    fdMultiAnnouncer\n                    [multiAnnouncerOptions]=\"_suggestions\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else plainList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #plainList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                (click)=\"!mobile && onOptionClicked($event, i)\"\n                (keydown)=\"onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: CheckboxComponent$1, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n        (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"true\"\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                class=\"fdp-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            >\n                <fd-token\n                    [readOnly]=\"disabled\"\n                    (onCloseClick)=\"removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdp-auto-complete\n                    (onComplete)=\"onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    [mobile]=\"mobile\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"id\"\n                    [name]=\"name\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"readonly\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [attr.aria-required]=\"required\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else plainList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #plainList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                (click)=\"!mobile && onOptionClicked($event, i)\"\n                (keydown)=\"onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: CheckboxComponent$1, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MultiComboboxComponent, decorators: [{
             type: Component,
@@ -10224,7 +10191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         FdTranslatePipe,
                         ContentDensityDirective,
                         MultiAnnouncerDirective
-                    ], template: "<div class=\"fdp-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n        (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"true\"\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                class=\"fdp-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"disabled\"\n                    (onCloseClick)=\"removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdp-auto-complete\n                    (onComplete)=\"onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    [mobile]=\"mobile\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"id\"\n                    [name]=\"name\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"readonly\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [attr.aria-required]=\"required\"\n                    class=\"fd-tokenizer__input\"\n                    fdMultiAnnouncer\n                    [multiAnnouncerOptions]=\"_suggestions\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else plainList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #plainList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                (click)=\"!mobile && onOptionClicked($event, i)\"\n                (keydown)=\"onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"] }]
+                    ], template: "<div class=\"fdp-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n        (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"true\"\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                class=\"fdp-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            >\n                <fd-token\n                    [readOnly]=\"disabled\"\n                    (onCloseClick)=\"removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdp-auto-complete\n                    (onComplete)=\"onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    [mobile]=\"mobile\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"id\"\n                    [name]=\"name\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"readonly\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [attr.aria-required]=\"required\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else plainList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #plainList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                (click)=\"!mobile && onOptionClicked($event, i)\"\n                (keydown)=\"onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -10239,7 +10206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     type: SkipSelf
                 }] }, { type: i1$2.DialogConfig, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.DynamicComponentService }, { type: Map, decorators: [{
+                }] }, { type: i3.DynamicComponentService }, { type: Map, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -10289,19 +10256,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
-class PlatformMultiInputMobileModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, imports: [PlatformMultiInputMobileComponent], exports: [PlatformMultiInputMobileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, imports: [PlatformMultiInputMobileComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputMobileModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [PlatformMultiInputMobileComponent],
-                    exports: [PlatformMultiInputMobileComponent]
-                }]
-        }] });
-
 class FileUploaderInvalidChangeEvent {
     /**
      * File Uploader invalid change event
@@ -10375,7 +10329,7 @@ class PlatformFileUploaderComponent extends BaseInput {
         this.invalidFileChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformFileUploaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformFileUploaderComponent, isStandalone: true, selector: "fdp-file-uploader", inputs: { buttonLabel: "buttonLabel", buttonAriaLabel: "buttonAriaLabel", dragndrop: "dragndrop", maxFileSize: "maxFileSize", minFileSize: "minFileSize", multiple: "multiple", accept: "accept", fileLimit: "fileLimit", value: "value" }, outputs: { selectionChange: "selectionChange", invalidFileChange: "invalidFileChange" }, providers: [contentDensityObserverProviders()], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n    [id]=\"id\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [placeholder]=\"placeholder\"\n    [buttonLabel]=\"buttonLabel\"\n    [buttonAriaLabel]=\"buttonAriaLabel\"\n    [disabled]=\"disabled\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    [maxFileSize]=\"maxFileSize\"\n    [minFileSize]=\"minFileSize\"\n    [state]=\"state\"\n    [required]=\"required\"\n    [width]=\"width\"\n    [(ngModel)]=\"value\"\n    (selectedInvalidFiles)=\"handleInvalidFiles($event)\"\n    (selectedFilesChanged)=\"handleFileChange($event)\"\n></fd-file-uploader>\n", dependencies: [{ kind: "ngmodule", type: FileUploaderModule }, { kind: "component", type: i3$4.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformFileUploaderComponent, isStandalone: true, selector: "fdp-file-uploader", inputs: { buttonLabel: "buttonLabel", buttonAriaLabel: "buttonAriaLabel", dragndrop: "dragndrop", maxFileSize: "maxFileSize", minFileSize: "minFileSize", multiple: "multiple", accept: "accept", fileLimit: "fileLimit", value: "value" }, outputs: { selectionChange: "selectionChange", invalidFileChange: "invalidFileChange" }, providers: [contentDensityObserverProviders()], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n    [id]=\"id\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [placeholder]=\"placeholder\"\n    [buttonLabel]=\"buttonLabel\"\n    [buttonAriaLabel]=\"buttonAriaLabel\"\n    [disabled]=\"disabled\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    [maxFileSize]=\"maxFileSize\"\n    [minFileSize]=\"minFileSize\"\n    [state]=\"state\"\n    [required]=\"required\"\n    [width]=\"width\"\n    [(ngModel)]=\"value\"\n    (selectedInvalidFiles)=\"handleInvalidFiles($event)\"\n    (selectedFilesChanged)=\"handleFileChange($event)\"\n></fd-file-uploader>\n", dependencies: [{ kind: "ngmodule", type: FileUploaderModule }, { kind: "component", type: i3$2.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformFileUploaderComponent, decorators: [{
             type: Component,
@@ -10447,6 +10401,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
+class PlatformSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, imports: [SelectComponent, OptionComponent], exports: [SelectComponent, OptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, imports: [SelectComponent, OptionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SelectComponent, OptionComponent],
+                    exports: [SelectComponent, OptionComponent]
+                }]
+        }] });
+
 /**
  * Default options for platform step input
  */
@@ -10853,12 +10820,12 @@ class StepInputComponent extends BaseInput {
     _resetPendingEnteredValue() {
         this._pendingEnteredValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl }, { token: i1$1.ControlContainer }, { token: i1$1.NgForm }, { token: i1.PlatformFormField }, { token: i1.PlatformFormFieldControl }, { token: StepInputConfig }, { token: i0.Renderer2 }, { token: i3$1.RtlService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl }, { token: i1$1.ControlContainer }, { token: i1$1.NgForm }, { token: i1.PlatformFormField }, { token: i1.PlatformFormFieldControl }, { token: StepInputConfig }, { token: i0.Renderer2 }, { token: i3.RtlService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputComponent, inputs: { value: "value", min: "min", max: "max", step: "step", stepFn: "stepFn", precision: "precision", largerStep: "largerStep", showLabels: "showLabels", align: "align", incrementLabel: "incrementLabel", decrementLabel: "decrementLabel" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl }, { type: i1$1.ControlContainer }, { type: i1$1.NgForm }, { type: i1.PlatformFormField }, { type: i1.PlatformFormFieldControl }, { type: StepInputConfig }, { type: i0.Renderer2 }, { type: i3$1.RtlService }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl }, { type: i1$1.ControlContainer }, { type: i1$1.NgForm }, { type: i1.PlatformFormField }, { type: i1.PlatformFormFieldControl }, { type: StepInputConfig }, { type: i0.Renderer2 }, { type: i3.RtlService }]; }, propDecorators: { value: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -11159,12 +11126,12 @@ class NumberStepInputComponent extends StepInputComponent {
         const parsedValue = Number.parseFloat(value);
         return isNaN(parsedValue) ? null : parsedValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NumberStepInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: StepInputConfig }, { token: i0.Renderer2 }, { token: i3$1.RtlService, optional: true }, { token: LOCALE_ID }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NumberStepInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: StepInputConfig }, { token: i0.Renderer2 }, { token: i3.RtlService, optional: true }, { token: LOCALE_ID }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: NumberStepInputComponent, isStandalone: true, selector: "fdp-number-step-input", inputs: { description: "description" }, providers: [
             { provide: FD_FORM_FIELD_CONTROL, useExisting: NumberStepInputComponent, multi: true },
             { provide: StepInputComponent, useExisting: NumberStepInputComponent },
             contentDensityObserverProviders()
-        ], usesInheritance: true, ngImport: i0, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"!editable\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--without-buttons]=\"showLabels\"\n        [class]=\"state ? 'is-' + state : ''\"\n    >\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'less'\"\n            fdpStepInputDecrement\n            [attr.aria-disabled]=\"disabled || !canDecrement\"\n            [attr.title]=\"decrementLabel\"\n            [attr.aria-label]=\"decrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? decrementLabel : '' }}\n        </button>\n        <input\n            #inputElementRef\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            [id]=\"id\"\n            [name]=\"name\"\n            [disabled]=\"disabled\"\n            [readonly]=\"!editable\"\n            [attr.placeholder]=\"placeholder || ''\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"description ? id + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [style.textAlign]=\"_align\"\n            fdpStepInputControl\n            type=\"text\"\n            inputmode=\"numeric\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n        />\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'add'\"\n            fdpStepInputIncrement\n            [attr.aria-disabled]=\"disabled || !canIncrement\"\n            [attr.title]=\"incrementLabel\"\n            [attr.aria-label]=\"incrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? incrementLabel : '' }}\n        </button>\n    </div>\n    <fd-form-message *ngIf=\"stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n<span *ngIf=\"description\" [id]=\"id + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ description }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--sapElement_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:var(--sapElement_Height);min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:var(--sapElement_Compact_Height);margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:var(--sapElement_Compact_Height);min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-success.is-expanded,.fd-input.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-error.is-expanded,.fd-input.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-warning.is-expanded,.fd-input.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-alert.is-expanded,.fd-input.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-information.is-expanded,.fd-input.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-input.is-readonly.is-focus,.fd-input.is-readonly.is-hover,.fd-input.is-readonly:focus,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-focus,.fd-input[readonly].is-hover,.fd-input[readonly]:focus,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{z-index:5}/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-step-input{--fdStepInput_Button_Width:var(--fdStepInput_Button_Width_Cozy);--fdStepInput_Bordered_Button_Width:var(--fdStepInput_Button_Width_Semantic_Cozy);-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--sapElement_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:var(--sapElement_Height);min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-step-input.is-success.is-hover,.fd-step-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-success.is-expanded,.fd-step-input.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-error.is-expanded,.fd-step-input.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-warning.is-expanded,.fd-step-input.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-alert.is-expanded,.fd-step-input.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-information.is-expanded,.fd-step-input.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;z-index:5}.fd-step-input .fd-step-input__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:first-child[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-hover,.fd-step-input .fd-step-input__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:first-child:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-active,.fd-step-input .fd-step-input__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-active[dir=rtl],.fd-step-input .fd-step-input__button:first-child:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover,.fd-step-input .fd-step-input__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active,.fd-step-input .fd-step-input__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-active,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{z-index:5}.fd-step-input.is-success.is-focus .fd-step-input__button,.fd-step-input.is-success:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-success.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-success.is-focus .fd-step-input__button:hover,.fd-step-input.is-success:focus .fd-step-input__button.is-hover,.fd-step-input.is-success:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-success.is-expanded .fd-step-input__button,.fd-step-input.is-success[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-success.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-success.is-expanded .fd-step-input__button:hover,.fd-step-input.is-success[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-success[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{z-index:5}.fd-step-input.is-error.is-focus .fd-step-input__button,.fd-step-input.is-error:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-error.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-error.is-focus .fd-step-input__button:hover,.fd-step-input.is-error:focus .fd-step-input__button.is-hover,.fd-step-input.is-error:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-error.is-expanded .fd-step-input__button,.fd-step-input.is-error[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-error.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-error.is-expanded .fd-step-input__button:hover,.fd-step-input.is-error[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-error[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{z-index:5}.fd-step-input.is-warning.is-focus .fd-step-input__button,.fd-step-input.is-warning:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-warning.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-warning.is-focus .fd-step-input__button:hover,.fd-step-input.is-warning:focus .fd-step-input__button.is-hover,.fd-step-input.is-warning:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-warning.is-expanded .fd-step-input__button,.fd-step-input.is-warning[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-warning.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-warning.is-expanded .fd-step-input__button:hover,.fd-step-input.is-warning[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-warning[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{z-index:5}.fd-step-input.is-alert.is-focus .fd-step-input__button,.fd-step-input.is-alert:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-alert.is-focus .fd-step-input__button:hover,.fd-step-input.is-alert:focus .fd-step-input__button.is-hover,.fd-step-input.is-alert:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-alert.is-expanded .fd-step-input__button,.fd-step-input.is-alert[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-alert.is-expanded .fd-step-input__button:hover,.fd-step-input.is-alert[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-alert[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{z-index:5}.fd-step-input.is-information.is-focus .fd-step-input__button,.fd-step-input.is-information:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input.is-information.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-information.is-focus .fd-step-input__button:hover,.fd-step-input.is-information:focus .fd-step-input__button.is-hover,.fd-step-input.is-information:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-information.is-expanded .fd-step-input__button,.fd-step-input.is-information[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input.is-information.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-information.is-expanded .fd-step-input__button:hover,.fd-step-input.is-information[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-information[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Button_Width);width:var(--fdStepInput_Button_Width)}.fd-step-input .fd-step-input__button.fd-button:after,.fd-step-input .fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input .fd-step-input__button.fd-button.is-focus,.fd-step-input .fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input .fd-step-input__button.fd-button.is-focus:after,.fd-step-input .fd-step-input__button.fd-button:focus:after{display:none}.fd-step-input .fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input .fd-step-input__button.fd-button.is-focus:hover,.fd-step-input .fd-step-input__button.fd-button:focus.is-hover,.fd-step-input .fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__input.fd-input{--fdInput_Field_Padding:0 .25rem;-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;margin:0;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Button_Width_Semantic_Cozy);width:var(--fdStepInput_Button_Width_Semantic_Cozy)}.fd-step-input[class*=-compact],.fd-step-input[class*=-condensed],[class*=-compact] .fd-step-input:not([class*=-cozy]),[class*=-condensed] .fd-step-input:not([class*=-cozy]){--fdStepInput_Button_Width:var(--fdStepInput_Button_Width_Compact);--fdStepInput_Bordered_Button_Width:var(--fdStepInput_Button_Width_Semantic_Compact);--fdInput_Field_Compact_Padding:0 .25rem;height:1.625rem;min-height:1.625rem}.fd-step-input[class*=-compact] .fd-step-input__input.fd-input,.fd-step-input[class*=-condensed] .fd-step-input__input.fd-input,[class*=-compact] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input,[class*=-condensed] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input{height:100%}.fd-step-input[class*=-compact].is-readonly,.fd-step-input[class*=-condensed].is-readonly,[class*=-compact] .fd-step-input:not([class*=-cozy]).is-readonly,[class*=-condensed] .fd-step-input:not([class*=-cozy]).is-readonly{--fdInput_Field_Compact_Padding:0 .5rem}.fd-step-input.is-readonly .fd-step-input__input.fd-input{--fdInput_Field_Padding:0 .625rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.fd-step-input.is-focus,.fd-step-input:focus{z-index:5}.fd-step-input.is-focus.is-error .fd-step-input__button.fd-button:not(:hover),.fd-step-input.is-focus.is-information .fd-step-input__button.fd-button:not(:hover),.fd-step-input.is-focus.is-success .fd-step-input__button.fd-button:not(:hover),.fd-step-input.is-focus.is-warning .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-error .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-information .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-success .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-warning .fd-step-input__button.fd-button:not(:hover){box-shadow:none}.fd-step-input{display:flex}\n"], dependencies: [{ kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: StepInputDecrementDirective, selector: "[fdpStepInputDecrement]" }, { kind: "directive", type: StepInputControlDirective, selector: "[fdpStepInputControl]" }, { kind: "directive", type: OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: StepInputIncrementDirective, selector: "[fdpStepInputIncrement]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"!editable\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--without-buttons]=\"showLabels\"\n        [class]=\"state ? 'is-' + state : ''\"\n    >\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'less'\"\n            fdpStepInputDecrement\n            [attr.aria-disabled]=\"disabled || !canDecrement\"\n            [attr.title]=\"decrementLabel\"\n            [attr.aria-label]=\"decrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? decrementLabel : '' }}\n        </button>\n        <input\n            #inputElementRef\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            [id]=\"id\"\n            [name]=\"name\"\n            [disabled]=\"disabled\"\n            [readonly]=\"!editable\"\n            [attr.placeholder]=\"placeholder || ''\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"description ? id + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [style.textAlign]=\"_align\"\n            fdpStepInputControl\n            type=\"text\"\n            inputmode=\"numeric\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n        />\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'add'\"\n            fdpStepInputIncrement\n            [attr.aria-disabled]=\"disabled || !canIncrement\"\n            [attr.title]=\"incrementLabel\"\n            [attr.aria-label]=\"incrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? incrementLabel : '' }}\n        </button>\n    </div>\n    <fd-form-message *ngIf=\"stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n<span *ngIf=\"description\" [id]=\"id + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ description }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--sapElement_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:var(--sapElement_Height);min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:var(--sapElement_Compact_Height);margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:var(--sapElement_Compact_Height);min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-success.is-expanded,.fd-input.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-error.is-expanded,.fd-input.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-warning.is-expanded,.fd-input.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-alert.is-expanded,.fd-input.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-information.is-expanded,.fd-input.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-input.is-readonly.is-focus,.fd-input.is-readonly.is-hover,.fd-input.is-readonly:focus,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-focus,.fd-input[readonly].is-hover,.fd-input[readonly]:focus,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{z-index:5}/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-step-input{--fdStepInput_Button_Width:var(--fdStepInput_Button_Width_Cozy);--fdStepInput_Bordered_Button_Width:var(--fdStepInput_Button_Width_Semantic_Cozy);-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--sapElement_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:var(--sapElement_Height);min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.fd-step-input.is-success.is-hover,.fd-step-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-success.is-expanded,.fd-step-input.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-error.is-expanded,.fd-step-input.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-warning.is-expanded,.fd-step-input.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-alert.is-expanded,.fd-step-input.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-information.is-expanded,.fd-step-input.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;z-index:5}.fd-step-input .fd-step-input__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:first-child[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-hover,.fd-step-input .fd-step-input__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:first-child:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-active,.fd-step-input .fd-step-input__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-active[dir=rtl],.fd-step-input .fd-step-input__button:first-child:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover,.fd-step-input .fd-step-input__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active,.fd-step-input .fd-step-input__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-active,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{z-index:5}.fd-step-input.is-success.is-focus .fd-step-input__button,.fd-step-input.is-success:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-success.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-success.is-focus .fd-step-input__button:hover,.fd-step-input.is-success:focus .fd-step-input__button.is-hover,.fd-step-input.is-success:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-success.is-expanded .fd-step-input__button,.fd-step-input.is-success[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-success.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-success.is-expanded .fd-step-input__button:hover,.fd-step-input.is-success[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-success[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{z-index:5}.fd-step-input.is-error.is-focus .fd-step-input__button,.fd-step-input.is-error:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-error.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-error.is-focus .fd-step-input__button:hover,.fd-step-input.is-error:focus .fd-step-input__button.is-hover,.fd-step-input.is-error:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-error.is-expanded .fd-step-input__button,.fd-step-input.is-error[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-error.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-error.is-expanded .fd-step-input__button:hover,.fd-step-input.is-error[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-error[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{z-index:5}.fd-step-input.is-warning.is-focus .fd-step-input__button,.fd-step-input.is-warning:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-warning.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-warning.is-focus .fd-step-input__button:hover,.fd-step-input.is-warning:focus .fd-step-input__button.is-hover,.fd-step-input.is-warning:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-warning.is-expanded .fd-step-input__button,.fd-step-input.is-warning[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-warning.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-warning.is-expanded .fd-step-input__button:hover,.fd-step-input.is-warning[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-warning[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{z-index:5}.fd-step-input.is-alert.is-focus .fd-step-input__button,.fd-step-input.is-alert:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-alert.is-focus .fd-step-input__button:hover,.fd-step-input.is-alert:focus .fd-step-input__button.is-hover,.fd-step-input.is-alert:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-alert.is-expanded .fd-step-input__button,.fd-step-input.is-alert[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-alert.is-expanded .fd-step-input__button:hover,.fd-step-input.is-alert[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-alert[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{z-index:5}.fd-step-input.is-information.is-focus .fd-step-input__button,.fd-step-input.is-information:focus .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input.is-information.is-focus .fd-step-input__button.is-hover,.fd-step-input.is-information.is-focus .fd-step-input__button:hover,.fd-step-input.is-information:focus .fd-step-input__button.is-hover,.fd-step-input.is-information:focus .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-information.is-expanded .fd-step-input__button,.fd-step-input.is-information[aria-expanded=true] .fd-step-input__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input.is-information.is-expanded .fd-step-input__button.is-hover,.fd-step-input.is-information.is-expanded .fd-step-input__button:hover,.fd-step-input.is-information[aria-expanded=true] .fd-step-input__button.is-hover,.fd-step-input.is-information[aria-expanded=true] .fd-step-input__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Button_Width);width:var(--fdStepInput_Button_Width)}.fd-step-input .fd-step-input__button.fd-button:after,.fd-step-input .fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input .fd-step-input__button.fd-button.is-focus,.fd-step-input .fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input .fd-step-input__button.fd-button.is-focus:after,.fd-step-input .fd-step-input__button.fd-button:focus:after{display:none}.fd-step-input .fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input .fd-step-input__button.fd-button.is-focus:hover,.fd-step-input .fd-step-input__button.fd-button:focus.is-hover,.fd-step-input .fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__input.fd-input{--fdInput_Field_Padding:0 .25rem;-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;margin:0;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Button_Width_Semantic_Cozy);width:var(--fdStepInput_Button_Width_Semantic_Cozy)}.fd-step-input[class*=-compact],.fd-step-input[class*=-condensed],[class*=-compact] .fd-step-input:not([class*=-cozy]),[class*=-condensed] .fd-step-input:not([class*=-cozy]){--fdStepInput_Button_Width:var(--fdStepInput_Button_Width_Compact);--fdStepInput_Bordered_Button_Width:var(--fdStepInput_Button_Width_Semantic_Compact);--fdInput_Field_Compact_Padding:0 .25rem;height:1.625rem;min-height:1.625rem}.fd-step-input[class*=-compact] .fd-step-input__input.fd-input,.fd-step-input[class*=-condensed] .fd-step-input__input.fd-input,[class*=-compact] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input,[class*=-condensed] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input{height:100%}.fd-step-input[class*=-compact].is-readonly,.fd-step-input[class*=-condensed].is-readonly,[class*=-compact] .fd-step-input:not([class*=-cozy]).is-readonly,[class*=-condensed] .fd-step-input:not([class*=-cozy]).is-readonly{--fdInput_Field_Compact_Padding:0 .5rem}.fd-step-input.is-readonly .fd-step-input__input.fd-input{--fdInput_Field_Padding:0 .625rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.fd-step-input.is-focus,.fd-step-input:focus{z-index:5}.fd-step-input.is-focus.is-error .fd-step-input__button.fd-button:not(:hover),.fd-step-input.is-focus.is-information .fd-step-input__button.fd-button:not(:hover),.fd-step-input.is-focus.is-success .fd-step-input__button.fd-button:not(:hover),.fd-step-input.is-focus.is-warning .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-error .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-information .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-success .fd-step-input__button.fd-button:not(:hover),.fd-step-input:focus.is-warning .fd-step-input__button.fd-button:not(:hover){box-shadow:none}.fd-step-input{display:flex}\n"], dependencies: [{ kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: ButtonComponent$1, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: StepInputDecrementDirective, selector: "[fdpStepInputDecrement]" }, { kind: "directive", type: StepInputControlDirective, selector: "[fdpStepInputControl]" }, { kind: "directive", type: OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: StepInputIncrementDirective, selector: "[fdpStepInputIncrement]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NumberStepInputComponent, decorators: [{
             type: Component,
@@ -11174,7 +11141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         contentDensityObserverProviders()
                     ], standalone: true, imports: [
                         FormInputMessageGroupComponent,
-                        ButtonModule,
+                        ButtonComponent$1,
                         StepInputDecrementDirective,
                         StepInputControlDirective,
                         OnlyDigitsDirective,
@@ -11213,7 +11180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }, {
                     type: Inject,
                     args: [FD_FORM_FIELD_CONTROL]
-                }] }, { type: StepInputConfig }, { type: i0.Renderer2 }, { type: i3$1.RtlService, decorators: [{
+                }] }, { type: StepInputConfig }, { type: i0.Renderer2 }, { type: i3.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
@@ -11251,6 +11218,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
+class PlatformSwitchModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, imports: [SwitchComponent], exports: [SwitchComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, imports: [SwitchComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SwitchComponent],
+                    exports: [SwitchComponent]
+                }]
+        }] });
+
+class PlatformTextAreaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, imports: [TextAreaComponent], exports: [TextAreaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, imports: [TextAreaComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TextAreaComponent],
+                    exports: [TextAreaComponent]
+                }]
+        }] });
+
 class PlatformTimePickerComponent extends BaseInput {
     /**
      * @Input date time object representation
@@ -11348,11 +11341,11 @@ class PlatformTimePickerComponent extends BaseInput {
         this.onTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformTimePickerComponent, isStandalone: true, selector: "fdp-time-picker", inputs: { value: "value", time: "time", spinnerButtons: "spinnerButtons", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", placeholder: "placeholder", timePickerInputLabel: "timePickerInputLabel", allowNull: "allowNull", tablet: "tablet", placement: "placement", state: "state", buttonFocusable: "buttonFocusable", useValidation: "useValidation", keepTwoDigitsTime: "keepTwoDigitsTime", displayFormat: "displayFormat", parseFormat: "parseFormat" }, outputs: { isOpenChange: "isOpenChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], viewQueries: [{ propertyName: "timePickerComponent", first: true, predicate: TimePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n", dependencies: [{ kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i2$4.TimePickerComponent, selector: "fd-time-picker", inputs: ["time", "inputId", "disabled", "required", "spinnerButtons", "meridian", "displaySeconds", "displayMinutes", "displayHours", "placeholder", "timePickerInputLabel", "timePickerButtonLabel", "ariaLabelledBy", "allowNull", "tablet", "message", "messageType", "messageTriggers", "placement", "useValidation", "state", "buttonFocusable", "keepTwoDigitsTime", "displayFormat", "parseFormat", "valueStateSuccessMessage", "valueStateInformationMessage", "valueStateWarningMessage", "valueStateErrorMessage"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformTimePickerComponent, isStandalone: true, selector: "fdp-time-picker", inputs: { value: "value", time: "time", spinnerButtons: "spinnerButtons", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", placeholder: "placeholder", timePickerInputLabel: "timePickerInputLabel", allowNull: "allowNull", tablet: "tablet", placement: "placement", state: "state", buttonFocusable: "buttonFocusable", useValidation: "useValidation", keepTwoDigitsTime: "keepTwoDigitsTime", displayFormat: "displayFormat", parseFormat: "parseFormat" }, outputs: { isOpenChange: "isOpenChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], viewQueries: [{ propertyName: "timePickerComponent", first: true, predicate: TimePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n", dependencies: [{ kind: "component", type: TimePickerComponent, selector: "fd-time-picker", inputs: ["time", "inputId", "disabled", "required", "spinnerButtons", "meridian", "displaySeconds", "displayMinutes", "displayHours", "placeholder", "timePickerInputLabel", "timePickerButtonLabel", "ariaLabelledBy", "allowNull", "tablet", "message", "messageType", "messageTriggers", "placement", "useValidation", "state", "buttonFocusable", "keepTwoDigitsTime", "displayFormat", "parseFormat", "valueStateSuccessMessage", "valueStateInformationMessage", "valueStateWarningMessage", "valueStateErrorMessage"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], standalone: true, imports: [TimePickerModule, FormsModule], template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n" }]
+            args: [{ selector: 'fdp-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], standalone: true, imports: [TimePickerComponent, FormsModule], template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {