@fundamental-ngx/platform 0.46.2-rc.6 → 0.46.2-rc.8

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

@@ -1,6 +1,6 @@
 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, 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, NgModule, Attribute, 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';
@@ -6373,37 +6373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
-/**
- * Default options for Combobox
- */
-class ComboboxConfig {
-    /**
-     * Create Provider factory function
-     */
-    static createProviderFactory(obj) {
-        const useFactory = (platformConfig) => Object.assign(new ComboboxConfig(platformConfig), obj);
-        return useFactory;
-    }
-    /** @hidden */
-    constructor(platformConfig) {
-        /**
-         * String matching strategy for typeahead list. Default: 'starts with per term'
-         */
-        this.matchingStrategy = MatchingStrategy.STARTS_WITH_PER_TERM;
-        /**
-         * Maps data providers
-         */
-        this.providers = new Map();
-        this.contentDensity = platformConfig.contentDensity;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxConfig, deps: [{ token: i1.PlatformConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxConfig, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.PlatformConfig }]; } });
-
 const COMBOBOX_COMPONENT = new InjectionToken('ComboboxInterface');
 
 class ComboboxMobileComponent extends MobileModeBase {
@@ -6499,6 +6468,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['dialogTemplate']
             }] } });
 
+class PlatformComboboxMobileModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, imports: [ComboboxMobileComponent], exports: [ComboboxMobileComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, imports: [ComboboxMobileComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ComboboxMobileComponent],
+                    exports: [ComboboxMobileComponent]
+                }]
+        }] });
+
+/**
+ * Default options for Combobox
+ */
+class ComboboxConfig {
+    /**
+     * Create Provider factory function
+     */
+    static createProviderFactory(obj) {
+        const useFactory = (platformConfig) => Object.assign(new ComboboxConfig(platformConfig), obj);
+        return useFactory;
+    }
+    /** @hidden */
+    constructor(platformConfig) {
+        /**
+         * String matching strategy for typeahead list. Default: 'starts with per term'
+         */
+        this.matchingStrategy = MatchingStrategy.STARTS_WITH_PER_TERM;
+        /**
+         * Maps data providers
+         */
+        this.providers = new Map();
+        this.contentDensity = platformConfig.contentDensity;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxConfig, deps: [{ token: i1.PlatformConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.PlatformConfig }]; } });
+
+const FDP_COMBOBOX_ITEM_DEF = new InjectionToken('FdpComboboxItemDefinition');
+class FdpComboboxItemDef {
+    constructor() {
+        /** @hidden */
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FdpComboboxItemDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: FdpComboboxItemDef, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FdpComboboxItemDef, decorators: [{
+            type: Directive
+        }] });
+class ComboboxItemDirective extends FdpComboboxItemDef {
+    constructor() {
+        super(...arguments);
+        /** @hidden */
+        this.name = 'optionItemTemplate';
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxItemDirective, isStandalone: true, selector: "[fdpComboboxItem]", inputs: { useModel: ["fdpComboboxItemUse", "useModel"] }, providers: [
+            {
+                provide: FDP_COMBOBOX_ITEM_DEF,
+                useExisting: ComboboxItemDirective
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpComboboxItem]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FDP_COMBOBOX_ITEM_DEF,
+                            useExisting: ComboboxItemDirective
+                        }
+                    ]
+                }]
+        }], propDecorators: { useModel: [{
+                type: Input,
+                args: ['fdpComboboxItemUse']
+            }] } });
+class ComboboxSelectedItemDirective extends FdpComboboxItemDef {
+    constructor() {
+        super(...arguments);
+        /** @hidden */
+        this.name = 'selectedItemTemplate';
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxSelectedItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxSelectedItemDirective, isStandalone: true, selector: "[fdpComboboxSelectedItem]", inputs: { useModel: ["fdpComboboxSelectedItemUse", "useModel"] }, providers: [
+            {
+                provide: FDP_COMBOBOX_ITEM_DEF,
+                useExisting: ComboboxSelectedItemDirective
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxSelectedItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpComboboxSelectedItem]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FDP_COMBOBOX_ITEM_DEF,
+                            useExisting: ComboboxSelectedItemDirective
+                        }
+                    ]
+                }]
+        }], propDecorators: { useModel: [{
+                type: Input,
+                args: ['fdpComboboxSelectedItemUse']
+            }] } });
+class ComboboxItemGroupDirective extends FdpComboboxItemDef {
+    constructor() {
+        super(...arguments);
+        /** @hidden */
+        this.name = 'groupItemTemplate';
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxItemGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxItemGroupDirective, isStandalone: true, selector: "[fdpComboboxGroup]", providers: [
+            {
+                provide: FDP_COMBOBOX_ITEM_DEF,
+                useExisting: ComboboxItemGroupDirective
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxItemGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpComboboxGroup]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FDP_COMBOBOX_ITEM_DEF,
+                            useExisting: ComboboxItemGroupDirective
+                        }
+                    ]
+                }]
+        }] });
+class ComboboxSecondaryItemDirective extends FdpComboboxItemDef {
+    constructor() {
+        super(...arguments);
+        /** @hidden */
+        this.name = 'secondaryItemTemplate';
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxSecondaryItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ComboboxSecondaryItemDirective, isStandalone: true, selector: "[fdpComboboxSecondaryItem]", inputs: { useModel: ["fdpComboboxSecondaryItemUse", "useModel"] }, providers: [
+            {
+                provide: FDP_COMBOBOX_ITEM_DEF,
+                useExisting: ComboboxSecondaryItemDirective
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxSecondaryItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpComboboxSecondaryItem]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FDP_COMBOBOX_ITEM_DEF,
+                            useExisting: ComboboxSecondaryItemDirective
+                        }
+                    ]
+                }]
+        }], propDecorators: { useModel: [{
+                type: Input,
+                args: ['fdpComboboxSecondaryItemUse']
+            }] } });
+
 class BaseCombobox extends CollectionBaseInput {
     /** Datasource for suggestion list */
     set dataSource(value) {
@@ -6669,10 +6828,10 @@ class BaseCombobox extends CollectionBaseInput {
             return;
         }
         this.inputText = text;
-        const map = new Map();
-        map.set('query', text);
-        map.set('limit', 12);
-        this.ds.match(map);
+        const queryMap = new Map();
+        queryMap.set('query', text);
+        queryMap.set('limit', 12);
+        this.ds.match(queryMap);
     }
     /** @hidden */
     isOpenChangeHandle(isOpen) {
@@ -6875,10 +7034,10 @@ class BaseCombobox extends CollectionBaseInput {
         initDataSource.dataProvider.setMatchingBy(matchingBy);
         initDataSource.dataProvider.setMatchingStrategy(this._matchingStrategy);
         // initial data fetch
-        const map = new Map();
-        map.set('query', '*');
-        map.set('limit', 12);
-        initDataSource.match(map);
+        const queryMap = new Map();
+        queryMap.set('query', '*');
+        queryMap.set('limit', 12);
+        initDataSource.match(queryMap);
         return initDataSource;
     }
     /** @hidden */
@@ -7025,25 +7184,29 @@ class BaseCombobox extends CollectionBaseInput {
     }
     /** @hidden Assign custom templates */
     _assignCustomTemplates() {
-        this.customTemplates.forEach((template) => {
-            switch (template.name) {
-                case 'optionItemTemplate':
-                    this.optionItemTemplate = template.templateRef;
-                    break;
-                case 'groupItemTemplate':
-                    this.groupItemTemplate = template.templateRef;
-                    break;
-                case 'secondaryItemTemplate':
-                    this.secondaryItemTemplate = template.templateRef;
-                    break;
-                case 'selectedItemTemplate':
-                    this.selectedItemTemplate = template.templateRef;
-                    break;
-            }
+        combineLatest([this._customTemplates.changes, this._customItemDef.changes])
+            .pipe(startWith(null), map(() => this._customItemDef.length > 0 ? this._customItemDef.toArray() : this._customTemplates.toArray()), takeUntil(this._destroyed))
+            .subscribe((data) => {
+            data.forEach((template) => {
+                switch (template.name) {
+                    case 'optionItemTemplate':
+                        this.optionItemTemplate = template.templateRef;
+                        break;
+                    case 'groupItemTemplate':
+                        this.groupItemTemplate = template.templateRef;
+                        break;
+                    case 'secondaryItemTemplate':
+                        this.secondaryItemTemplate = template.templateRef;
+                        break;
+                    case 'selectedItemTemplate':
+                        this.selectedItemTemplate = template.templateRef;
+                        break;
+                }
+            });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BaseCombobox, 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: 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.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: BaseCombobox, inputs: { maxHeight: "maxHeight", autoComplete: "autoComplete", entityClass: "entityClass", mobile: "mobile", mobileConfig: "mobileConfig", group: "group", groupKey: "groupKey", secondaryKey: "secondaryKey", showSecondaryText: "showSecondaryText", secondaryTextAlignment: "secondaryTextAlignment", autoResize: "autoResize", fillControlMode: "fillControlMode", buttonFocusable: "buttonFocusable", triggers: "triggers", closeOnOutsideClick: "closeOnOutsideClick", byline: "byline", dataSource: "dataSource", value: "value" }, outputs: { onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: BaseCombobox, inputs: { maxHeight: "maxHeight", autoComplete: "autoComplete", entityClass: "entityClass", mobile: "mobile", mobileConfig: "mobileConfig", group: "group", groupKey: "groupKey", secondaryKey: "secondaryKey", showSecondaryText: "showSecondaryText", secondaryTextAlignment: "secondaryTextAlignment", autoResize: "autoResize", fillControlMode: "fillControlMode", buttonFocusable: "buttonFocusable", triggers: "triggers", closeOnOutsideClick: "closeOnOutsideClick", byline: "byline", dataSource: "dataSource", value: "value" }, outputs: { onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, queries: [{ propertyName: "_customTemplates", predicate: TemplateDirective }, { propertyName: "_customItemDef", predicate: FDP_COMBOBOX_ITEM_DEF }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BaseCombobox, decorators: [{
             type: Directive
@@ -7122,9 +7285,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], listComponent: [{
                 type: ViewChild,
                 args: [ListComponent]
-            }], customTemplates: [{
+            }], _customTemplates: [{
                 type: ContentChildren,
                 args: [TemplateDirective]
+            }], _customItemDef: [{
+                type: ContentChildren,
+                args: [FDP_COMBOBOX_ITEM_DEF]
             }] } });
 
 class ComboboxSelectionChangeEvent {
@@ -7286,7 +7452,7 @@ class ComboboxComponent extends BaseCombobox {
     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    >\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\">\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-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                    (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\">\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></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: [".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    >\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -7311,7 +7477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         SearchHighlightPipe,
                         FdTranslatePipe,
                         ContentDensityModule
-                    ], 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    >\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\">\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-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                    (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\">\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></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: [".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"] }]
+                    ], 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    >\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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -7362,29 +7528,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['listTemplate']
             }] } });
 
+const EXPORTABLE_COMPONENTS = [
+    ComboboxComponent,
+    ComboboxItemDirective,
+    ComboboxSelectedItemDirective,
+    ComboboxItemGroupDirective,
+    ComboboxSecondaryItemDirective
+];
 class PlatformComboboxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxModule, imports: [ComboboxComponent], exports: [ComboboxComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxModule, imports: [ComboboxComponent,
+            ComboboxItemDirective,
+            ComboboxSelectedItemDirective,
+            ComboboxItemGroupDirective,
+            ComboboxSecondaryItemDirective], exports: [ComboboxComponent,
+            ComboboxItemDirective,
+            ComboboxSelectedItemDirective,
+            ComboboxItemGroupDirective,
+            ComboboxSecondaryItemDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxModule, imports: [ComboboxComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ComboboxComponent],
-                    exports: [ComboboxComponent]
-                }]
-        }] });
-
-class PlatformComboboxMobileModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, imports: [ComboboxMobileComponent], exports: [ComboboxMobileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, imports: [ComboboxMobileComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformComboboxMobileModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ComboboxMobileComponent],
-                    exports: [ComboboxMobileComponent]
+                    imports: [...EXPORTABLE_COMPONENTS],
+                    exports: [...EXPORTABLE_COMPONENTS]
                 }]
         }] });
 
@@ -7740,6 +7908,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
+const defaultFormGeneratorHintOptions = {
+    placement: 'right',
+    position: 'after',
+    trigger: [
+        { trigger: 'mouseenter', openAction: true, closeAction: false },
+        { trigger: 'mouseleave', openAction: false, closeAction: true },
+        { trigger: 'focusin', openAction: true, closeAction: false },
+        { trigger: 'focusout', openAction: false, closeAction: true }
+    ],
+    glyph: 'hint',
+    target: 'auto'
+};
+
 /**
  * @description
  * Structural directive, which hides current form item and toggles validation rules for it.
@@ -7818,19 +7999,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Input
             }] } });
 
-const defaultFormGeneratorHintOptions = {
-    placement: 'right',
-    position: 'after',
-    trigger: [
-        { trigger: 'mouseenter', openAction: true, closeAction: false },
-        { trigger: 'mouseleave', openAction: false, closeAction: true },
-        { trigger: 'focusin', openAction: true, closeAction: false },
-        { trigger: 'focusout', openAction: false, closeAction: true }
-    ],
-    glyph: 'hint',
-    target: 'auto'
-};
-
 const FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS = new InjectionToken('Default options for form-generator hint', {
     factory: () => defaultFormGeneratorHintOptions
 });
@@ -8413,6 +8581,57 @@ const CSS_CLASS_NAME = {
 };
 const INPUT_GROUP_CHILD_TOKEN = new InjectionToken('INPUT_GROUP_CHILD_TOKEN');
 
+/**
+ * Fundamental input group addon body component
+ */
+class InputGroupAddonBodyComponent {
+    /**
+     * indicates if addon contains a button
+     */
+    set hasButton(hasButton) {
+        if (hasButton) {
+            this._addClassNameToHostElement(CSS_CLASS_NAME.addonButton);
+        }
+        else {
+            this._removeClassNameFromHostElement(CSS_CLASS_NAME.addonButton);
+        }
+    }
+    /** @hidden */
+    constructor(_elementRef, _renderer, contentDensityObserver) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.contentDensityObserver = contentDensityObserver;
+        contentDensityObserver.subscribe();
+    }
+    /** @hidden */
+    ngOnInit() {
+        this._addClassNameToHostElement(CSS_CLASS_NAME.addon);
+    }
+    /** @hidden */
+    _addClassNameToHostElement(className) {
+        this._renderer.addClass(this._elementRef.nativeElement, className);
+    }
+    /** @hidden */
+    _removeClassNameFromHostElement(className) {
+        this._renderer.removeClass(this._elementRef.nativeElement, className);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupAddonBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: InputGroupAddonBodyComponent, isStandalone: true, selector: "fdp-input-group-addon-body", inputs: { hasButton: "hasButton" }, providers: [contentDensityObserverProviders()], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupAddonBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-input-group-addon-body',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [contentDensityObserverProviders()],
+                    imports: [ContentDensityModule],
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.ContentDensityObserver }]; }, propDecorators: { hasButton: [{
+                type: Input
+            }] } });
+
 const inputGroupAddonChildProvider = {
     provide: INPUT_GROUP_CHILD_TOKEN,
     useExisting: forwardRef(() => InputGroupAddonComponent)
@@ -8501,55 +8720,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }] } });
 
 /**
- * Fundamental input group addon body component
+ * Default options for platform input group
  */
-class InputGroupAddonBodyComponent {
+class InputGroupConfig {
     /**
-     * indicates if addon contains a button
+     * Create Provider factory function
      */
-    set hasButton(hasButton) {
-        if (hasButton) {
-            this._addClassNameToHostElement(CSS_CLASS_NAME.addonButton);
-        }
-        else {
-            this._removeClassNameFromHostElement(CSS_CLASS_NAME.addonButton);
-        }
-    }
-    /** @hidden */
-    constructor(_elementRef, _renderer, contentDensityObserver) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this.contentDensityObserver = contentDensityObserver;
-        contentDensityObserver.subscribe();
-    }
-    /** @hidden */
-    ngOnInit() {
-        this._addClassNameToHostElement(CSS_CLASS_NAME.addon);
-    }
-    /** @hidden */
-    _addClassNameToHostElement(className) {
-        this._renderer.addClass(this._elementRef.nativeElement, className);
-    }
-    /** @hidden */
-    _removeClassNameFromHostElement(className) {
-        this._renderer.removeClass(this._elementRef.nativeElement, className);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupAddonBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: InputGroupAddonBodyComponent, isStandalone: true, selector: "fdp-input-group-addon-body", inputs: { hasButton: "hasButton" }, providers: [contentDensityObserverProviders()], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupAddonBodyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fdp-input-group-addon-body',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [contentDensityObserverProviders()],
-                    imports: [ContentDensityModule],
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.ContentDensityObserver }]; }, propDecorators: { hasButton: [{
-                type: Input
-            }] } });
+    static createProviderFactory(obj) {
+        const useFactory = (platformConfig) => Object.assign(new InputGroupConfig(platformConfig), obj);
+        return useFactory;
+    }
+    /** @hidden */
+    constructor(platformConfig) {
+        this.contentDensity = platformConfig.contentDensity;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupConfig, deps: [{ token: i1.PlatformConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.PlatformConfig }]; } });
 
 /**
  * fdp-input-group needs it's own input component to
@@ -8595,29 +8786,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Input
             }] } });
 
-/**
- * Default options for platform input group
- */
-class InputGroupConfig {
-    /**
-     * Create Provider factory function
-     */
-    static createProviderFactory(obj) {
-        const useFactory = (platformConfig) => Object.assign(new InputGroupConfig(platformConfig), obj);
-        return useFactory;
-    }
-    /** @hidden */
-    constructor(platformConfig) {
-        this.contentDensity = platformConfig.contentDensity;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupConfig, deps: [{ token: i1.PlatformConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupConfig, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputGroupConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.PlatformConfig }]; } });
-
 /**
  * Fundamental input group component
  *
@@ -8845,8 +9013,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.PlatformConfig }]; } });
 
-const MULTICOMBOBOX_COMPONENT = new InjectionToken('MultiComboboxInterface');
-
 const MAP_LIMIT = new InjectionToken('Map limit≥', { factory: () => 12 });
 class MultiComboboxSelectionChangeEvent {
     /**
@@ -9627,6 +9793,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: [TemplateDirective]
             }] } });
 
+const MULTICOMBOBOX_COMPONENT = new InjectionToken('MultiComboboxInterface');
+
 class MultiComboboxMobileComponent extends MobileModeBase {
     /** @hidden */
     constructor(elementRef, dialogService, multiComboboxComponent, mobileModes) {
@@ -9726,6 +9894,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['dialogTemplate']
             }] } });
 
+class PlatformMultiComboboxMobileModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, imports: [MultiComboboxMobileComponent], exports: [MultiComboboxMobileComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, imports: [MultiComboboxMobileComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MultiComboboxMobileComponent],
+                    exports: [MultiComboboxMobileComponent]
+                }]
+        }] });
+
 let deprecationWarningShown = false;
 /**
  * This component can work with both string primitives as well as with complex objects. In order
@@ -10091,19 +10272,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
-class PlatformMultiComboboxMobileModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, imports: [MultiComboboxMobileComponent], exports: [MultiComboboxMobileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, imports: [MultiComboboxMobileComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiComboboxMobileModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [MultiComboboxMobileComponent],
-                    exports: [MultiComboboxMobileComponent]
-                }]
-        }] });
-
 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] }); }
@@ -10699,101 +10867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Output
             }] } });
 
-/**
- * This is a base step input directive to be used for increase/decrease buttons.
- */
-class StepInputActionButton {
-    constructor() {
-        /** @hidden */
-        this._destroyed = new Subject();
-    }
-    /** @hidden  */
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    /** @hidden */
-    click() {
-        if (!this.canHandleAction()) {
-            return;
-        }
-        // Run action while button is pressed
-        timer(500)
-            .pipe(switchMap(() => interval(40)), takeUntil(fromEvent(window, 'mouseup', { capture: true, once: true })))
-            .pipe(takeUntil(this._destroyed))
-            .subscribe(() => this.runAction());
-        this.runAction();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputActionButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputActionButton, host: { listeners: { "mousedown": "click()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputActionButton, decorators: [{
-            type: Directive
-        }], propDecorators: { click: [{
-                type: HostListener,
-                args: ['mousedown']
-            }] } });
-
-/**
- * This Directive is used to be assigned to decrement button.
- */
-class StepInputDecrementDirective extends StepInputActionButton {
-    /** @hidden */
-    constructor(stepInput) {
-        super();
-        this.stepInput = stepInput;
-    }
-    /** @hidden */
-    canHandleAction() {
-        return !!this.stepInput.canChangeValue;
-    }
-    /** @hidden */
-    runAction() {
-        this.stepInput.decrease();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputDecrementDirective, deps: [{ token: StepInputComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputDecrementDirective, isStandalone: true, selector: "[fdpStepInputDecrement]", usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputDecrementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fdpStepInputDecrement]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: StepInputComponent, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
-
-/**
- * This Directive is used to be assigned to increment button.
- */
-class StepInputIncrementDirective extends StepInputActionButton {
-    /** @hidden */
-    constructor(stepInput) {
-        super();
-        this.stepInput = stepInput;
-    }
-    /** @hidden */
-    canHandleAction() {
-        return !!this.stepInput.canChangeValue;
-    }
-    /** @hidden */
-    runAction() {
-        this.stepInput.increase();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputIncrementDirective, deps: [{ token: StepInputComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputIncrementDirective, isStandalone: true, selector: "[fdpStepInputIncrement]", usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputIncrementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fdpStepInputIncrement]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: StepInputComponent, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
-
 /**
  * This directive is intendant to be a bridge between input control and BaseStepInput Component.
  */
@@ -10917,6 +10990,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['wheel', ['$event']]
             }] } });
 
+/**
+ * This is a base step input directive to be used for increase/decrease buttons.
+ */
+class StepInputActionButton {
+    constructor() {
+        /** @hidden */
+        this._destroyed = new Subject();
+    }
+    /** @hidden  */
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** @hidden */
+    click() {
+        if (!this.canHandleAction()) {
+            return;
+        }
+        // Run action while button is pressed
+        timer(500)
+            .pipe(switchMap(() => interval(40)), takeUntil(fromEvent(window, 'mouseup', { capture: true, once: true })))
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => this.runAction());
+        this.runAction();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputActionButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputActionButton, host: { listeners: { "mousedown": "click()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputActionButton, decorators: [{
+            type: Directive
+        }], propDecorators: { click: [{
+                type: HostListener,
+                args: ['mousedown']
+            }] } });
+
+/**
+ * This Directive is used to be assigned to decrement button.
+ */
+class StepInputDecrementDirective extends StepInputActionButton {
+    /** @hidden */
+    constructor(stepInput) {
+        super();
+        this.stepInput = stepInput;
+    }
+    /** @hidden */
+    canHandleAction() {
+        return !!this.stepInput.canChangeValue;
+    }
+    /** @hidden */
+    runAction() {
+        this.stepInput.decrease();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputDecrementDirective, deps: [{ token: StepInputComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputDecrementDirective, isStandalone: true, selector: "[fdpStepInputDecrement]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputDecrementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpStepInputDecrement]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: StepInputComponent, decorators: [{
+                    type: SkipSelf
+                }] }]; } });
+
+/**
+ * This Directive is used to be assigned to increment button.
+ */
+class StepInputIncrementDirective extends StepInputActionButton {
+    /** @hidden */
+    constructor(stepInput) {
+        super();
+        this.stepInput = stepInput;
+    }
+    /** @hidden */
+    canHandleAction() {
+        return !!this.stepInput.canChangeValue;
+    }
+    /** @hidden */
+    runAction() {
+        this.stepInput.increase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputIncrementDirective, deps: [{ token: StepInputComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: StepInputIncrementDirective, isStandalone: true, selector: "[fdpStepInputIncrement]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StepInputIncrementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpStepInputIncrement]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: StepInputComponent, decorators: [{
+                    type: SkipSelf
+                }] }]; } });
+
 /**
  * Fundamental number-step-input component
  *
@@ -11258,5 +11426,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutoCompleteDirective, BaseCombobox, BaseDynamicFormGeneratorControl, BaseMultiCombobox, BaseMultiInput, BaseSelect, COMBOBOX_COMPONENT, CSS_CLASS_NAME, CheckboxComponent, CheckboxGroupComponent, ComboboxComponent, ComboboxConfig, ComboboxMobileComponent, ComboboxSelectionChangeEvent, DEFAULT_COMPONENTS_LIST, DEFAULT_VALIDATION_ERRORS, DefaultGapLayout, DefaultHorizontalFieldLayout, DefaultHorizontalLabelLayout, DefaultVerticalFieldLayout, DefaultVerticalLabelLayout, DynamicFormControl, DynamicFormControlDirective, DynamicFormControlFieldDirective, DynamicFormControlGroup, DynamicFormGeneratorCheckboxComponent, DynamicFormGeneratorDatepickerComponent, DynamicFormGeneratorEditorComponent, DynamicFormGeneratorInputComponent, DynamicFormGeneratorMultiInputComponent, DynamicFormGeneratorObjectStatusComponent, DynamicFormGeneratorRadioComponent, DynamicFormGeneratorSelectComponent, DynamicFormGeneratorSwitchComponent, FDP_FORM_ERROR_DIRECTIVE, FDP_FORM_FIELD_HINT_LAYOUT_CONFIG, FDP_FORM_FIELD_HINT_OPTIONS_DEFAULT, FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS, FDP_FORM_IGNORED_STATUSES, FORM_GENERATOR_CONFIG, FORM_GENERATOR_ITEM_CONFIG, FORM_GROUP_CHILD_FIELD_TOKEN, FdpFormGroupModule, FdpSelectionChangeEvent, Field, FieldGroup, FieldGroupRowValuePipe, FileUploaderInvalidChangeEvent, FileUploaderSelectionChangeEvent, FormFieldComponent, FormFieldControlExtrasComponent, FormFieldErrorDescriptionDirective, FormFieldErrorDirective, FormFieldErrorHeadingDirective, FormFieldGroupComponent, FormGeneratorComponent, FormGeneratorComponentsAccessorService, FormGeneratorFieldComponent, FormGeneratorService, FormGroupComponent, FormGroupHeaderComponent, GetHintOptionsPipe, INPUT_GROUP_CHILD_TOKEN, InputComponent, InputGroupAddonBodyComponent, InputGroupAddonComponent, InputGroupComponent, InputGroupConfig, InputGroupInputComponent, InputMessageGroupWithTemplate, MAP_LIMIT, MULTICOMBOBOX_COMPONENT, MULTIINPUT_COMPONENT, MultiComboboxComponent, MultiComboboxConfig, MultiComboboxMobileComponent, MultiComboboxSelectionChangeEvent, MultiInputConfig, MultiInputSelectionChangeEvent, NumberStepInputComponent, OptionComponent, PlatformAutoCompleteModule, PlatformCheckboxChange, PlatformCheckboxGroupModule, PlatformCheckboxModule, PlatformComboboxMobileModule, PlatformComboboxModule, PlatformDatePickerComponent, PlatformDatePickerModule, PlatformDatetimePickerComponent, PlatformDatetimePickerModule, PlatformFileUploaderComponent, PlatformFileUploaderModule, PlatformFormGeneratorModule, PlatformInputGroupModule, PlatformInputModule, PlatformMultiComboboxMobileModule, PlatformMultiComboboxModule, PlatformMultiInputComponent, PlatformMultiInputMobileComponent, PlatformMultiInputMobileModule, PlatformMultiInputModule, PlatformRadioGroupModule, PlatformSelectModule, PlatformStepInputModule, PlatformSwitchModule, PlatformTextAreaModule, PlatformTimePickerComponent, PlatformTimePickerModule, RadioButtonComponent, RadioGroupComponent, SelectComponent, SelectConfig, StepInputActionButton, StepInputAlign, StepInputChangeEvent, StepInputComponent, StepInputConfig, StepInputControlDirective, StepInputDecrementDirective, StepInputIncrementDirective, SwitchChangeEvent, SwitchComponent, SwitchConfig, TextAreaComponent, TextAreaConfig, addAndCutFloatingNumberDistortion, createMissingDateImplementationError$1 as createMissingDateImplementationError, defaultFormFieldHintOptions, defaultFormGeneratorConfig, defaultFormGeneratorConfigProvider, defaultFormGeneratorHintOptions, defaultFormGeneratorItemConfig, defaultFormGeneratorItemConfigProvider, dynamicFormFieldProvider, dynamicFormGroupChildProvider, formGroupProvider, getField, getFormField, getFormState, getNumberDecimalLength, inputGroupAddonChildProvider, inputGroupInputChildProvider, isFieldChild, isFieldGroupChild, isFieldGroupWrapperChild };
+export { AutoCompleteDirective, BaseCombobox, BaseDynamicFormGeneratorControl, BaseMultiCombobox, BaseMultiInput, BaseSelect, COMBOBOX_COMPONENT, CSS_CLASS_NAME, CheckboxComponent, CheckboxGroupComponent, ComboboxComponent, ComboboxConfig, ComboboxItemDirective, ComboboxItemGroupDirective, ComboboxMobileComponent, ComboboxSecondaryItemDirective, ComboboxSelectedItemDirective, ComboboxSelectionChangeEvent, DEFAULT_COMPONENTS_LIST, DEFAULT_VALIDATION_ERRORS, DefaultGapLayout, DefaultHorizontalFieldLayout, DefaultHorizontalLabelLayout, DefaultVerticalFieldLayout, DefaultVerticalLabelLayout, DynamicFormControl, DynamicFormControlDirective, DynamicFormControlFieldDirective, DynamicFormControlGroup, DynamicFormGeneratorCheckboxComponent, DynamicFormGeneratorDatepickerComponent, DynamicFormGeneratorEditorComponent, DynamicFormGeneratorInputComponent, DynamicFormGeneratorMultiInputComponent, DynamicFormGeneratorObjectStatusComponent, DynamicFormGeneratorRadioComponent, DynamicFormGeneratorSelectComponent, DynamicFormGeneratorSwitchComponent, FDP_COMBOBOX_ITEM_DEF, FDP_FORM_ERROR_DIRECTIVE, FDP_FORM_FIELD_HINT_LAYOUT_CONFIG, FDP_FORM_FIELD_HINT_OPTIONS_DEFAULT, FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS, FDP_FORM_IGNORED_STATUSES, FORM_GENERATOR_CONFIG, FORM_GENERATOR_ITEM_CONFIG, FORM_GROUP_CHILD_FIELD_TOKEN, FdpComboboxItemDef, FdpFormGroupModule, FdpSelectionChangeEvent, Field, FieldGroup, FieldGroupRowValuePipe, FileUploaderInvalidChangeEvent, FileUploaderSelectionChangeEvent, FormFieldComponent, FormFieldControlExtrasComponent, FormFieldErrorDescriptionDirective, FormFieldErrorDirective, FormFieldErrorHeadingDirective, FormFieldGroupComponent, FormGeneratorComponent, FormGeneratorComponentsAccessorService, FormGeneratorFieldComponent, FormGeneratorService, FormGroupComponent, FormGroupHeaderComponent, GetHintOptionsPipe, INPUT_GROUP_CHILD_TOKEN, InputComponent, InputGroupAddonBodyComponent, InputGroupAddonComponent, InputGroupComponent, InputGroupConfig, InputGroupInputComponent, InputMessageGroupWithTemplate, MAP_LIMIT, MULTICOMBOBOX_COMPONENT, MULTIINPUT_COMPONENT, MultiComboboxComponent, MultiComboboxConfig, MultiComboboxMobileComponent, MultiComboboxSelectionChangeEvent, MultiInputConfig, MultiInputSelectionChangeEvent, NumberStepInputComponent, OptionComponent, PlatformAutoCompleteModule, PlatformCheckboxChange, PlatformCheckboxGroupModule, PlatformCheckboxModule, PlatformComboboxMobileModule, PlatformComboboxModule, PlatformDatePickerComponent, PlatformDatePickerModule, PlatformDatetimePickerComponent, PlatformDatetimePickerModule, PlatformFileUploaderComponent, PlatformFileUploaderModule, PlatformFormGeneratorModule, PlatformInputGroupModule, PlatformInputModule, PlatformMultiComboboxMobileModule, PlatformMultiComboboxModule, PlatformMultiInputComponent, PlatformMultiInputMobileComponent, PlatformMultiInputMobileModule, PlatformMultiInputModule, PlatformRadioGroupModule, PlatformSelectModule, PlatformStepInputModule, PlatformSwitchModule, PlatformTextAreaModule, PlatformTimePickerComponent, PlatformTimePickerModule, RadioButtonComponent, RadioGroupComponent, SelectComponent, SelectConfig, StepInputActionButton, StepInputAlign, StepInputChangeEvent, StepInputComponent, StepInputConfig, StepInputControlDirective, StepInputDecrementDirective, StepInputIncrementDirective, SwitchChangeEvent, SwitchComponent, SwitchConfig, TextAreaComponent, TextAreaConfig, addAndCutFloatingNumberDistortion, createMissingDateImplementationError$1 as createMissingDateImplementationError, defaultFormFieldHintOptions, defaultFormGeneratorConfig, defaultFormGeneratorConfigProvider, defaultFormGeneratorHintOptions, defaultFormGeneratorItemConfig, defaultFormGeneratorItemConfigProvider, dynamicFormFieldProvider, dynamicFormGroupChildProvider, formGroupProvider, getField, getFormField, getFormState, getNumberDecimalLength, inputGroupAddonChildProvider, inputGroupInputChildProvider, isFieldChild, isFieldGroupChild, isFieldGroupWrapperChild };
 //# sourceMappingURL=fundamental-ngx-platform-form.mjs.map