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

package/fesm2022/fundamental-ngx-platform-action-button-group.mjs

@@ -1,15 +1,24 @@
 import * as i0 from '@angular/core';
 import { Component, NgModule } from '@angular/core';
+import { warnOnce } from '@fundamental-ngx/cdk/utils';
 import { ActionBarActionsDirective } from '@fundamental-ngx/core/action-bar';
 
+/**
+ * @deprecated
+ * ActionButtonGroupComponent is deprecated
+ */
 class ActionButtonGroupComponent {
+    /** @hidden */
+    constructor() {
+        warnOnce(`ActionButtonGroupComponent is deprecated and will be removed in future release.`);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ActionButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ActionButtonGroupComponent, isStandalone: true, selector: "fdp-action-button-group", ngImport: i0, template: "<div fd-action-bar-actions>\n    <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: ActionBarActionsDirective, selector: "[fd-action-bar-actions]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ActionButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-action-button-group', standalone: true, imports: [ActionBarActionsDirective], template: "<div fd-action-bar-actions>\n    <ng-content></ng-content>\n</div>\n" }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 class PlatformActionButtonGroupModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformActionButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }

package/fesm2022/fundamental-ngx-platform-action-button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-platform-action-button-group.mjs","sources":["../../../../libs/platform/src/lib/action-button-group/action-button-group.component.ts","../../../../libs/platform/src/lib/action-button-group/action-button-group.component.html","../../../../libs/platform/src/lib/action-button-group/action-button-group.module.ts","../../../../libs/platform/src/lib/action-button-group/fundamental-ngx-platform-action-button-group.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { ActionBarActionsDirective } from '@fundamental-ngx/core/action-bar';\n\n@Component({\n    selector: 'fdp-action-button-group',\n    templateUrl: './action-button-group.component.html',\n    standalone: true,\n    imports: [ActionBarActionsDirective]\n})\nexport class ActionButtonGroupComponent {}\n","<div fd-action-bar-actions>\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { ActionButtonGroupComponent } from './action-button-group.component';\n\n@NgModule({\n    imports: [ActionButtonGroupComponent],\n    exports: [ActionButtonGroupComponent]\n})\nexport class PlatformActionButtonGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,0BAA0B,CAAA;8GAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTvC,sEAGA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIc,yBAAyB,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAE1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,EAEvB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,yBAAyB,CAAC,EAAA,QAAA,EAAA,sEAAA,EAAA,CAAA;;;MEC3B,+BAA+B,CAAA;8GAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAA/B,+BAA+B,EAAA,OAAA,EAAA,CAH9B,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAC1B,0BAA0B,CAAA,EAAA,CAAA,CAAA,EAAA;+GAE3B,+BAA+B,EAAA,CAAA,CAAA,EAAA;;2FAA/B,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAJ3C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,0BAA0B,CAAC;AACxC,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}
+{"version":3,"file":"fundamental-ngx-platform-action-button-group.mjs","sources":["../../../../libs/platform/src/lib/action-button-group/action-button-group.component.ts","../../../../libs/platform/src/lib/action-button-group/action-button-group.component.html","../../../../libs/platform/src/lib/action-button-group/action-button-group.module.ts","../../../../libs/platform/src/lib/action-button-group/fundamental-ngx-platform-action-button-group.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { warnOnce } from '@fundamental-ngx/cdk/utils';\nimport { ActionBarActionsDirective } from '@fundamental-ngx/core/action-bar';\n\n/**\n * @deprecated\n * ActionButtonGroupComponent is deprecated\n */\n@Component({\n    selector: 'fdp-action-button-group',\n    templateUrl: './action-button-group.component.html',\n    standalone: true,\n    imports: [ActionBarActionsDirective]\n})\nexport class ActionButtonGroupComponent {\n    /** @hidden */\n    constructor() {\n        warnOnce(`ActionButtonGroupComponent is deprecated and will be removed in future release.`);\n    }\n}\n","<div fd-action-bar-actions>\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { ActionButtonGroupComponent } from './action-button-group.component';\n\n@NgModule({\n    imports: [ActionButtonGroupComponent],\n    exports: [ActionButtonGroupComponent]\n})\nexport class PlatformActionButtonGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;AAGG;MAOU,0BAA0B,CAAA;;AAEnC,IAAA,WAAA,GAAA;QACI,QAAQ,CAAC,CAAiF,+EAAA,CAAA,CAAC,CAAC;KAC/F;8GAJQ,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdvC,sEAGA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDSc,yBAAyB,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAE1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,EAEvB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,yBAAyB,CAAC,EAAA,QAAA,EAAA,sEAAA,EAAA,CAAA;;;MEJ3B,+BAA+B,CAAA;8GAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAA/B,+BAA+B,EAAA,OAAA,EAAA,CAH9B,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAC1B,0BAA0B,CAAA,EAAA,CAAA,CAAA,EAAA;+GAE3B,+BAA+B,EAAA,CAAA,CAAA,EAAA;;2FAA/B,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAJ3C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,0BAA0B,CAAC;AACxC,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}

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

@@ -5,6 +5,10 @@ import { warnOnce } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent as ButtonComponent$1 } from '@fundamental-ngx/core/button';
 import { BaseComponent } from '@fundamental-ngx/platform/shared';
 
+/**
+ * @deprecated
+ * Button component is deprecated. Use `fd-button` from `@fundamental-ngx/core` instead.
+ */
 class ButtonComponent extends BaseComponent {
     /** @deprecated use toggled input property instead
      * aria-selected for acccesiblity to the native HTML button
@@ -45,6 +49,7 @@ class ButtonComponent extends BaseComponent {
          * be properly focused on.
          */
         this.tabIndex = '-1';
+        warnOnce("Platform's ButtonComponent is deprecated and will be removed in the next major release. Consider using Core's ButtonComponent instead.");
     }
     /** @hidden */
     ngAfterViewInit() {

package/fesm2022/fundamental-ngx-platform-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-platform-button.mjs","sources":["../../../../libs/platform/src/lib/button/button.component.ts","../../../../libs/platform/src/lib/button/button.component.html","../../../../libs/platform/src/lib/button/button.module.ts","../../../../libs/platform/src/lib/button/fundamental-ngx-platform-button.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output\n} from '@angular/core';\n\nimport { ModuleDeprecation, Nullable, warnOnce } from '@fundamental-ngx/cdk/utils';\nimport { ButtonType, ButtonComponent as CoreButtonComponent, GlyphPosition } from '@fundamental-ngx/core/button';\nimport { BaseComponent } from '@fundamental-ngx/platform/shared';\n\n@Component({\n    selector: 'fdp-button',\n    templateUrl: './button.component.html',\n    styleUrls: ['./button.component.scss'],\n    standalone: true,\n    imports: [CoreButtonComponent]\n})\nexport class ButtonComponent extends BaseComponent implements AfterViewInit {\n    /** Position of glyph related to text */\n    @Input()\n    glyphPosition: GlyphPosition = 'before';\n\n    /**\n     * Text rendered inside button component\n     */\n    @Input()\n    label: string;\n\n    /** The icon to include in the button. See the icon page for the list of icons.\n     * Setter is used to control when css class have to be rebuilded.\n     * Default value is set to ''.\n     */\n    @Input()\n    glyph: string;\n\n    /** The buttonType of the button. Types includes\n     'standard','positive', 'negative', 'attention', 'ghost',\n     'transparent', 'emphasized','menu'.\n     *Leave empty for default (standard button).'*/\n    @Input()\n    buttonType: ButtonType = 'standard';\n\n    /** Whether button is in toggled state. */\n    @Input()\n    toggled: Nullable<boolean>;\n\n    /** arialabel, tooltip for truncated text\n     * for acccesiblity of the element */\n    @Input()\n    title: Nullable<string>;\n\n    /** @deprecated use toggled input property instead\n     * aria-selected for acccesiblity to the native HTML button\n     */\n    @Input()\n    set ariaSelected(value: Nullable<boolean>) {\n        warnOnce('Property ariaSelected is deprecated. Use `toggled` input property instead.');\n        this._ariaSelected = value;\n    }\n\n    get ariaSelected(): Nullable<boolean> {\n        return this._ariaSelected;\n    }\n\n    /** aria-disabled for acccesiblity to\n     *  the native HTML button*/\n    @Input()\n    ariaDisabled: Nullable<boolean>;\n\n    /**\n     * propagate aria-expanded for accessiblity to\n     * the native HTML button\n     */\n    @Input()\n    ariaExpanded: Nullable<boolean>;\n\n    /**\n     * propagate aria-controls for accessiblity to\n     * the native HTML button\n     */\n    @Input()\n    ariaControlsId: Nullable<string>;\n\n    /** @deprecated use toggled input property instead\n     * propagate aria-pressed for accessiblity to the native HTML button\n     */\n    @Input()\n    set ariaPressed(value: Nullable<boolean>) {\n        warnOnce('Property ariaPressed is deprecated. Use `toggled` input property instead.');\n        this._ariaPressed = value;\n    }\n\n    get ariaPressed(): Nullable<boolean> {\n        return this._ariaPressed;\n    }\n\n    /** Specifies a name to\n     *  the native HTML button */\n    @Input()\n    name: string;\n\n    /** Specifies the type to\n     *  the native HTML button */\n    @Input()\n    type: Nullable<string>;\n\n    /** Specifies an initial value to\n     *  the native HTML button */\n    @Input()\n    value: Nullable<string>;\n\n    /** Event sent when button is clicked */\n    @Output()\n    buttonClicked: EventEmitter<any> = new EventEmitter();\n\n    /**\n     * Take host element out of tab order, so that child button can\n     * be properly focused on.\n     */\n    @HostBinding('attr.tabindex')\n    tabIndex = '-1';\n\n    /** @hidden */\n    private _ariaSelected: Nullable<boolean>;\n\n    /** @hidden */\n    private _ariaPressed: Nullable<boolean>;\n\n    /** @hidden */\n    constructor(protected _changeDetector: ChangeDetectorRef, private _elementRef: ElementRef) {\n        super(_changeDetector);\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._elementRef.nativeElement.childNodes[0].classList.add('fd-ellipsis');\n    }\n\n    /**\n     *  Handles button click\n     */\n    public onBtnClick($event: any): void {\n        this.buttonClicked.emit($event);\n    }\n}\n\nexport class DeprecatedButtonAriaSelected implements ModuleDeprecation {\n    /** @hidden */\n    message = 'ariaSelected input property is deprecated.';\n\n    /** @hidden */\n    alternative = {\n        name: 'Use [toggled] input property instead',\n        link: ['/platform', 'button'],\n        fragment: 'state'\n    };\n}\n\nexport class DeprecatedButtonAriaPressed implements ModuleDeprecation {\n    /** @hidden */\n    message = 'ariaPressed input property is deprecated.';\n\n    /** @hidden */\n    alternative = {\n        name: 'Use [toggled] input property instead',\n        link: ['/platform', 'button'],\n        fragment: 'state'\n    };\n}\n","<button\n    #fdButton\n    fd-button\n    [attr.id]=\"id\"\n    [attr.title]=\"title\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [attr.aria-controls]=\"ariaControlsId\"\n    [attr.aria-expanded]=\"ariaExpanded\"\n    [attr.aria-pressed]=\"ariaPressed\"\n    [attr.aria-selected]=\"ariaSelected\"\n    [attr.aria-disabled]=\"ariaDisabled\"\n    [attr.value]=\"value\"\n    [glyphPosition]=\"glyphPosition\"\n    [label]=\"label\"\n    [type]=\"type\"\n    [toggled]=\"toggled || ariaPressed || ariaSelected\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [fdType]=\"buttonType\"\n    [class.is-disabled]=\"ariaDisabled\"\n    [style.width]=\"width\"\n    (click)=\"onBtnClick($event)\"\n></button>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n    imports: [ButtonComponent, ContentDensityModule],\n    exports: [ButtonComponent, ContentDensityModule]\n})\nexport class PlatformButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["CoreButtonComponent"],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-platform-button.mjs","sources":["../../../../libs/platform/src/lib/button/button.component.ts","../../../../libs/platform/src/lib/button/button.component.html","../../../../libs/platform/src/lib/button/button.module.ts","../../../../libs/platform/src/lib/button/fundamental-ngx-platform-button.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output\n} from '@angular/core';\n\nimport { ModuleDeprecation, Nullable, warnOnce } from '@fundamental-ngx/cdk/utils';\nimport { ButtonType, ButtonComponent as CoreButtonComponent, GlyphPosition } from '@fundamental-ngx/core/button';\nimport { BaseComponent } from '@fundamental-ngx/platform/shared';\n\n/**\n * @deprecated\n * Button component is deprecated. Use `fd-button` from `@fundamental-ngx/core` instead.\n */\n@Component({\n    selector: 'fdp-button',\n    templateUrl: './button.component.html',\n    styleUrls: ['./button.component.scss'],\n    standalone: true,\n    imports: [CoreButtonComponent]\n})\nexport class ButtonComponent extends BaseComponent implements AfterViewInit {\n    /** Position of glyph related to text */\n    @Input()\n    glyphPosition: GlyphPosition = 'before';\n\n    /**\n     * Text rendered inside button component\n     */\n    @Input()\n    label: string;\n\n    /** The icon to include in the button. See the icon page for the list of icons.\n     * Setter is used to control when css class have to be rebuilded.\n     * Default value is set to ''.\n     */\n    @Input()\n    glyph: string;\n\n    /** The buttonType of the button. Types includes\n     'standard','positive', 'negative', 'attention', 'ghost',\n     'transparent', 'emphasized','menu'.\n     *Leave empty for default (standard button).'*/\n    @Input()\n    buttonType: ButtonType = 'standard';\n\n    /** Whether button is in toggled state. */\n    @Input()\n    toggled: Nullable<boolean>;\n\n    /** arialabel, tooltip for truncated text\n     * for acccesiblity of the element */\n    @Input()\n    title: Nullable<string>;\n\n    /** @deprecated use toggled input property instead\n     * aria-selected for acccesiblity to the native HTML button\n     */\n    @Input()\n    set ariaSelected(value: Nullable<boolean>) {\n        warnOnce('Property ariaSelected is deprecated. Use `toggled` input property instead.');\n        this._ariaSelected = value;\n    }\n\n    get ariaSelected(): Nullable<boolean> {\n        return this._ariaSelected;\n    }\n\n    /** aria-disabled for acccesiblity to\n     *  the native HTML button*/\n    @Input()\n    ariaDisabled: Nullable<boolean>;\n\n    /**\n     * propagate aria-expanded for accessiblity to\n     * the native HTML button\n     */\n    @Input()\n    ariaExpanded: Nullable<boolean>;\n\n    /**\n     * propagate aria-controls for accessiblity to\n     * the native HTML button\n     */\n    @Input()\n    ariaControlsId: Nullable<string>;\n\n    /** @deprecated use toggled input property instead\n     * propagate aria-pressed for accessiblity to the native HTML button\n     */\n    @Input()\n    set ariaPressed(value: Nullable<boolean>) {\n        warnOnce('Property ariaPressed is deprecated. Use `toggled` input property instead.');\n        this._ariaPressed = value;\n    }\n\n    get ariaPressed(): Nullable<boolean> {\n        return this._ariaPressed;\n    }\n\n    /** Specifies a name to\n     *  the native HTML button */\n    @Input()\n    name: string;\n\n    /** Specifies the type to\n     *  the native HTML button */\n    @Input()\n    type: Nullable<string>;\n\n    /** Specifies an initial value to\n     *  the native HTML button */\n    @Input()\n    value: Nullable<string>;\n\n    /** Event sent when button is clicked */\n    @Output()\n    buttonClicked: EventEmitter<any> = new EventEmitter();\n\n    /**\n     * Take host element out of tab order, so that child button can\n     * be properly focused on.\n     */\n    @HostBinding('attr.tabindex')\n    tabIndex = '-1';\n\n    /** @hidden */\n    private _ariaSelected: Nullable<boolean>;\n\n    /** @hidden */\n    private _ariaPressed: Nullable<boolean>;\n\n    /** @hidden */\n    constructor(protected _changeDetector: ChangeDetectorRef, private _elementRef: ElementRef) {\n        super(_changeDetector);\n        warnOnce(\n            \"Platform's ButtonComponent is deprecated and will be removed in the next major release. Consider using Core's ButtonComponent instead.\"\n        );\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._elementRef.nativeElement.childNodes[0].classList.add('fd-ellipsis');\n    }\n\n    /**\n     *  Handles button click\n     */\n    public onBtnClick($event: any): void {\n        this.buttonClicked.emit($event);\n    }\n}\n\nexport class DeprecatedButtonAriaSelected implements ModuleDeprecation {\n    /** @hidden */\n    message = 'ariaSelected input property is deprecated.';\n\n    /** @hidden */\n    alternative = {\n        name: 'Use [toggled] input property instead',\n        link: ['/platform', 'button'],\n        fragment: 'state'\n    };\n}\n\nexport class DeprecatedButtonAriaPressed implements ModuleDeprecation {\n    /** @hidden */\n    message = 'ariaPressed input property is deprecated.';\n\n    /** @hidden */\n    alternative = {\n        name: 'Use [toggled] input property instead',\n        link: ['/platform', 'button'],\n        fragment: 'state'\n    };\n}\n","<button\n    #fdButton\n    fd-button\n    [attr.id]=\"id\"\n    [attr.title]=\"title\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [attr.aria-controls]=\"ariaControlsId\"\n    [attr.aria-expanded]=\"ariaExpanded\"\n    [attr.aria-pressed]=\"ariaPressed\"\n    [attr.aria-selected]=\"ariaSelected\"\n    [attr.aria-disabled]=\"ariaDisabled\"\n    [attr.value]=\"value\"\n    [glyphPosition]=\"glyphPosition\"\n    [label]=\"label\"\n    [type]=\"type\"\n    [toggled]=\"toggled || ariaPressed || ariaSelected\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [fdType]=\"buttonType\"\n    [class.is-disabled]=\"ariaDisabled\"\n    [style.width]=\"width\"\n    (click)=\"onBtnClick($event)\"\n></button>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n    imports: [ButtonComponent, ContentDensityModule],\n    exports: [ButtonComponent, ContentDensityModule]\n})\nexport class PlatformButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["CoreButtonComponent"],"mappings":"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"}

package/fesm2022/fundamental-ngx-platform-feed-input.mjs

@@ -3,11 +3,17 @@ import { EventEmitter, ElementRef, Component, ViewEncapsulation, ChangeDetection
 import { NgIf } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { warnOnce } from '@fundamental-ngx/cdk/utils';
 import { AvatarComponent } from '@fundamental-ngx/core/avatar';
 import { FormControlComponent } from '@fundamental-ngx/core/form';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { ButtonComponent } from '@fundamental-ngx/platform/button';
 
+/**
+ * @deprecated
+ * Use the `fd-feed-input[modelDriven]` component from `@fundamental-ngx/core/feed-input` instead.
+ * The `fd-feed-input` component is a drop-in replacement for the `fdp-feed-input` component.
+ */
 class FeedInputComponent {
     /** @hidden */
     constructor(_renderer) {
@@ -18,6 +24,8 @@ class FeedInputComponent {
         this.disabled = false;
         /** @hidden Event emitted when user click on send button */
         this.submit = new EventEmitter();
+        warnOnce('FeedInputComponent is deprecated and will be removed in future release. ' +
+            'Use the `fd-feed-input` component from `@fundamental-ngx/core/feed-input` instead.');
     }
     /** @hidden */
     ngAfterViewInit() {
@@ -62,7 +70,7 @@ class FeedInputComponent {
             parseInt(computed.getPropertyValue('border-bottom-width'), 10));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FeedInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FeedInputComponent, isStandalone: true, selector: "fdp-feed-input", inputs: { avatarSrc: "avatarSrc", placeholder: "placeholder", avatarShow: "avatarShow", disabled: "disabled", maxHeight: "maxHeight" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textAreaElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"fd-feed-input\" [class.is-disabled]=\"disabled\">\n    <fd-avatar\n        *ngIf=\"avatarShow\"\n        class=\"fd-feed-input__thumb\"\n        size=\"s\"\n        role=\"img\"\n        [attr.aria-label]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [title]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [image]=\"avatarSrc\"\n        [class.fd-avatar--placeholder]=\"!avatarSrc\"\n        [class.sap-icon]=\"!avatarSrc\"\n        [glyph]=\"!avatarSrc ? 'person-placeholder' : null\"\n    >\n    </fd-avatar>\n\n    <textarea\n        #textAreaElement\n        fd-form-control\n        class=\"fd-textarea fd-feed-input__textarea\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onChange()\"\n    ></textarea>\n\n    <fdp-button\n        class=\"fd-feed-input__submit-button\"\n        glyph=\"feeder-arrow\"\n        title=\"Send\"\n        ariaLabel=\"Send\"\n        [disabled]=\"!value || disabled\"\n        (click)=\"onSubmit()\"\n    >\n    </fdp-button>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-feed-input{-webkit-box-sizing:border-box;background-color:var(--sapField_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem .5rem 1rem 1rem}.fd-feed-input:after,.fd-feed-input:before{box-sizing:inherit;font-size:inherit}.fd-feed-input[dir=rtl],[dir=rtl] .fd-feed-input{padding-left:.5rem;padding-right:1rem}.fd-feed-input.is-disabled,.fd-feed-input:disabled,.fd-feed-input[aria-disabled=true]{cursor:not-allowed;opacity:1;pointer-events:auto}.fd-feed-input.is-disabled textarea::placeholder,.fd-feed-input:disabled textarea::placeholder,.fd-feed-input[aria-disabled=true] textarea::placeholder{color:var(--sapTextColor, #32363a);font-style:var(--fdFeed_Input_Placeholder_Font_Style)}.fd-feed-input .fd-feed-input__thumb{-webkit-box-flex:1;-ms-flex:1 0 auto;display:none;flex:1 0 auto;margin-left:0;margin-right:.5rem}.fd-feed-input .fd-feed-input__thumb[dir=rtl],[dir=rtl] .fd-feed-input .fd-feed-input__thumb{margin-left:.5rem;margin-right:0}.fd-feed-input .fd-feed-input__textarea{margin:0;max-height:20rem;min-height:3rem;padding:.3125rem .5rem}.fd-feed-input .fd-feed-input__submit-button{margin:auto 0 .375rem .5rem}.fd-feed-input .fd-feed-input__submit-button[dir=rtl],[dir=rtl] .fd-feed-input .fd-feed-input__submit-button{-webkit-transform:rotate(180deg);margin-left:0;margin-right:.5rem;transform:rotate(180deg)}@media (min-width: 25rem){.fd-feed-input{margin-bottom:1rem;margin-top:1rem}.fd-feed-input .fd-feed-input__thumb{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FeedInputComponent, isStandalone: true, selector: "fdp-feed-input", inputs: { avatarSrc: "avatarSrc", placeholder: "placeholder", avatarShow: "avatarShow", disabled: "disabled", maxHeight: "maxHeight" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textAreaElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"fd-feed-input\" [class.is-disabled]=\"disabled\">\n    <fd-avatar\n        *ngIf=\"avatarShow\"\n        class=\"fd-feed-input__thumb\"\n        size=\"s\"\n        role=\"img\"\n        [attr.aria-label]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [title]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [image]=\"avatarSrc\"\n        [class.fd-avatar--placeholder]=\"!avatarSrc\"\n        [class.sap-icon]=\"!avatarSrc\"\n        [glyph]=\"!avatarSrc ? 'person-placeholder' : null\"\n    >\n    </fd-avatar>\n\n    <textarea\n        #textAreaElement\n        fd-form-control\n        class=\"fd-textarea fd-feed-input__textarea\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onChange()\"\n    ></textarea>\n\n    <fdp-button\n        class=\"fd-feed-input__submit-button\"\n        glyph=\"feeder-arrow\"\n        title=\"Send\"\n        ariaLabel=\"Send\"\n        [disabled]=\"!value || disabled\"\n        (click)=\"onSubmit()\"\n    >\n    </fdp-button>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-feed-input{-webkit-box-sizing:border-box;background-color:var(--sapField_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem .5rem 1rem 1rem}.fd-feed-input:after,.fd-feed-input:before{box-sizing:inherit;font-size:inherit}.fd-feed-input[dir=rtl],[dir=rtl] .fd-feed-input{padding-left:.5rem;padding-right:1rem}.fd-feed-input.is-disabled,.fd-feed-input:disabled,.fd-feed-input[aria-disabled=true]{cursor:not-allowed;opacity:1;pointer-events:auto}.fd-feed-input.is-disabled textarea::placeholder,.fd-feed-input:disabled textarea::placeholder,.fd-feed-input[aria-disabled=true] textarea::placeholder{color:var(--sapTextColor, #32363a);font-style:var(--fdFeed_Input_Placeholder_Font_Style)}.fd-feed-input .fd-feed-input__thumb{-webkit-box-flex:1;-ms-flex:1 0 auto;display:none;flex:1 0 auto;margin-left:0;margin-right:.5rem}.fd-feed-input .fd-feed-input__thumb[dir=rtl],[dir=rtl] .fd-feed-input .fd-feed-input__thumb{margin-left:.5rem;margin-right:0}.fd-feed-input .fd-feed-input__textarea{margin:0;max-height:20rem;min-height:3rem;padding:.3125rem .5rem}.fd-feed-input .fd-feed-input__submit-button{margin:auto 0 .375rem .5rem}.fd-feed-input .fd-feed-input__submit-button[dir=rtl],[dir=rtl] .fd-feed-input .fd-feed-input__submit-button{-webkit-transform:rotate(180deg);margin-left:0;margin-right:.5rem;transform:rotate(180deg)}@media (min-width: 25rem){.fd-feed-input{margin-bottom:1rem;margin-top:1rem}.fd-feed-input .fd-feed-input__thumb{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FeedInputComponent, decorators: [{
             type: Component,

package/fesm2022/fundamental-ngx-platform-feed-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-platform-feed-input.mjs","sources":["../../../../libs/platform/src/lib/feed-input/feed-input.component.ts","../../../../libs/platform/src/lib/feed-input/feed-input.component.html","../../../../libs/platform/src/lib/feed-input/feed-input.module.ts","../../../../libs/platform/src/lib/feed-input/fundamental-ngx-platform-feed-input.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    Output,\n    Renderer2,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AvatarComponent } from '@fundamental-ngx/core/avatar';\nimport { FormControlComponent } from '@fundamental-ngx/core/form';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { ButtonComponent } from '@fundamental-ngx/platform/button';\n\n@Component({\n    selector: 'fdp-feed-input',\n    templateUrl: './feed-input.component.html',\n    styleUrls: ['./feed-input.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [NgIf, AvatarComponent, FormsModule, FormControlComponent, ButtonComponent, FdTranslatePipe]\n})\nexport class FeedInputComponent implements AfterViewInit {\n    /** The user image source, If is not set, then the user image will display placeholder image.  */\n    @Input()\n    avatarSrc: string;\n\n    /** Set placeholder textarea text */\n    @Input()\n    placeholder: string;\n\n    /** Set feed input without user image */\n    @Input()\n    avatarShow = true;\n\n    /** Set disabled state */\n    @Input()\n    disabled = false;\n\n    /** The max number of rows to allow textarea grow */\n    @Input()\n    maxHeight: number;\n\n    /** @hidden Event emitted when user click on send button */\n    @Output()\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    submit = new EventEmitter<string>();\n\n    /** @hidden */\n    @ViewChild('textAreaElement', { read: ElementRef })\n    textarea: ElementRef;\n\n    /** @hidden Textarea entered value */\n    value: string | null;\n\n    /** @hidden */\n    constructor(private _renderer: Renderer2) {}\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        const lineHeight = this._getTextareaLineHeight();\n\n        if (this.maxHeight) {\n            this.textarea.nativeElement.style.maxHeight = lineHeight * this.maxHeight + 'px';\n        }\n    }\n\n    /** @hidden */\n    onChange(): void {\n        this.resize();\n    }\n\n    /** @hidden Handle submit feed input value*/\n    onSubmit(): void {\n        if (this.value) {\n            this.submit.emit(this.value);\n        }\n    }\n\n    /** @hidden Make grow textarea */\n    resize(): void {\n        this._renderer.setStyle(this.textarea.nativeElement, 'height', 'inherit');\n\n        const totalHeight = this._getTextareaTotalHeight();\n        this._renderer.setStyle(this.textarea.nativeElement, 'height', `${totalHeight}px`);\n    }\n\n    /** @hidden get line height of textarea */\n    private _getTextareaLineHeight(): number {\n        if (this.textarea && this.textarea.nativeElement) {\n            const lineHeight = window.getComputedStyle(this.textarea.nativeElement).getPropertyValue('line-height');\n            if (lineHeight === 'normal') {\n                return (\n                    parseInt(window.getComputedStyle(this.textarea.nativeElement).getPropertyValue('font-size'), 10) *\n                    1.1\n                );\n            }\n\n            return parseInt(lineHeight, 10);\n        }\n        return 1;\n    }\n\n    /** @hidden Get the total height including borders and scroll height */\n    private _getTextareaTotalHeight(): number {\n        const computed = window.getComputedStyle(this.textarea.nativeElement);\n\n        return (\n            parseInt(computed.getPropertyValue('border-top-width'), 10) +\n            this.textarea.nativeElement.scrollHeight +\n            parseInt(computed.getPropertyValue('border-bottom-width'), 10)\n        );\n    }\n}\n","<div class=\"fd-feed-input\" [class.is-disabled]=\"disabled\">\n    <fd-avatar\n        *ngIf=\"avatarShow\"\n        class=\"fd-feed-input__thumb\"\n        size=\"s\"\n        role=\"img\"\n        [attr.aria-label]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [title]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [image]=\"avatarSrc\"\n        [class.fd-avatar--placeholder]=\"!avatarSrc\"\n        [class.sap-icon]=\"!avatarSrc\"\n        [glyph]=\"!avatarSrc ? 'person-placeholder' : null\"\n    >\n    </fd-avatar>\n\n    <textarea\n        #textAreaElement\n        fd-form-control\n        class=\"fd-textarea fd-feed-input__textarea\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onChange()\"\n    ></textarea>\n\n    <fdp-button\n        class=\"fd-feed-input__submit-button\"\n        glyph=\"feeder-arrow\"\n        title=\"Send\"\n        ariaLabel=\"Send\"\n        [disabled]=\"!value || disabled\"\n        (click)=\"onSubmit()\"\n    >\n    </fdp-button>\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { FeedInputComponent } from './feed-input.component';\n\n@NgModule({\n    imports: [FeedInputComponent],\n    exports: [FeedInputComponent]\n})\nexport class PlatformFeedInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-platform-feed-input.mjs","sources":["../../../../libs/platform/src/lib/feed-input/feed-input.component.ts","../../../../libs/platform/src/lib/feed-input/feed-input.component.html","../../../../libs/platform/src/lib/feed-input/feed-input.module.ts","../../../../libs/platform/src/lib/feed-input/fundamental-ngx-platform-feed-input.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    Output,\n    Renderer2,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { warnOnce } from '@fundamental-ngx/cdk/utils';\nimport { AvatarComponent } from '@fundamental-ngx/core/avatar';\nimport { FormControlComponent } from '@fundamental-ngx/core/form';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { ButtonComponent } from '@fundamental-ngx/platform/button';\n\n/**\n * @deprecated\n * Use the `fd-feed-input[modelDriven]` component from `@fundamental-ngx/core/feed-input` instead.\n * The `fd-feed-input` component is a drop-in replacement for the `fdp-feed-input` component.\n */\n@Component({\n    selector: 'fdp-feed-input',\n    templateUrl: './feed-input.component.html',\n    styleUrls: ['./feed-input.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [NgIf, AvatarComponent, FormsModule, FormControlComponent, ButtonComponent, FdTranslatePipe]\n})\nexport class FeedInputComponent implements AfterViewInit {\n    /** The user image source, If is not set, then the user image will display placeholder image.  */\n    @Input()\n    avatarSrc: string;\n\n    /** Set placeholder textarea text */\n    @Input()\n    placeholder: string;\n\n    /** Set feed input without user image */\n    @Input()\n    avatarShow = true;\n\n    /** Set disabled state */\n    @Input()\n    disabled = false;\n\n    /** The max number of rows to allow textarea grow */\n    @Input()\n    maxHeight: number;\n\n    /** @hidden Event emitted when user click on send button */\n    @Output()\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    submit = new EventEmitter<string>();\n\n    /** @hidden */\n    @ViewChild('textAreaElement', { read: ElementRef })\n    textarea: ElementRef;\n\n    /** @hidden Textarea entered value */\n    value: string | null;\n\n    /** @hidden */\n    constructor(private _renderer: Renderer2) {\n        warnOnce(\n            'FeedInputComponent is deprecated and will be removed in future release. ' +\n                'Use the `fd-feed-input` component from `@fundamental-ngx/core/feed-input` instead.'\n        );\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        const lineHeight = this._getTextareaLineHeight();\n\n        if (this.maxHeight) {\n            this.textarea.nativeElement.style.maxHeight = lineHeight * this.maxHeight + 'px';\n        }\n    }\n\n    /** @hidden */\n    onChange(): void {\n        this.resize();\n    }\n\n    /** @hidden Handle submit feed input value*/\n    onSubmit(): void {\n        if (this.value) {\n            this.submit.emit(this.value);\n        }\n    }\n\n    /** @hidden Make grow textarea */\n    resize(): void {\n        this._renderer.setStyle(this.textarea.nativeElement, 'height', 'inherit');\n\n        const totalHeight = this._getTextareaTotalHeight();\n        this._renderer.setStyle(this.textarea.nativeElement, 'height', `${totalHeight}px`);\n    }\n\n    /** @hidden get line height of textarea */\n    private _getTextareaLineHeight(): number {\n        if (this.textarea && this.textarea.nativeElement) {\n            const lineHeight = window.getComputedStyle(this.textarea.nativeElement).getPropertyValue('line-height');\n            if (lineHeight === 'normal') {\n                return (\n                    parseInt(window.getComputedStyle(this.textarea.nativeElement).getPropertyValue('font-size'), 10) *\n                    1.1\n                );\n            }\n\n            return parseInt(lineHeight, 10);\n        }\n        return 1;\n    }\n\n    /** @hidden Get the total height including borders and scroll height */\n    private _getTextareaTotalHeight(): number {\n        const computed = window.getComputedStyle(this.textarea.nativeElement);\n\n        return (\n            parseInt(computed.getPropertyValue('border-top-width'), 10) +\n            this.textarea.nativeElement.scrollHeight +\n            parseInt(computed.getPropertyValue('border-bottom-width'), 10)\n        );\n    }\n}\n","<div class=\"fd-feed-input\" [class.is-disabled]=\"disabled\">\n    <fd-avatar\n        *ngIf=\"avatarShow\"\n        class=\"fd-feed-input__thumb\"\n        size=\"s\"\n        role=\"img\"\n        [attr.aria-label]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [title]=\"'platformFeedInput.userTitle' | fdTranslate\"\n        [image]=\"avatarSrc\"\n        [class.fd-avatar--placeholder]=\"!avatarSrc\"\n        [class.sap-icon]=\"!avatarSrc\"\n        [glyph]=\"!avatarSrc ? 'person-placeholder' : null\"\n    >\n    </fd-avatar>\n\n    <textarea\n        #textAreaElement\n        fd-form-control\n        class=\"fd-textarea fd-feed-input__textarea\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onChange()\"\n    ></textarea>\n\n    <fdp-button\n        class=\"fd-feed-input__submit-button\"\n        glyph=\"feeder-arrow\"\n        title=\"Send\"\n        ariaLabel=\"Send\"\n        [disabled]=\"!value || disabled\"\n        (click)=\"onSubmit()\"\n    >\n    </fdp-button>\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { FeedInputComponent } from './feed-input.component';\n\n@NgModule({\n    imports: [FeedInputComponent],\n    exports: [FeedInputComponent]\n})\nexport class PlatformFeedInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1246,7 +1246,7 @@ class InputComponent extends BaseInput {
         this.focusChange.emit(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, skipSelf: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: InputComponent, isStandalone: true, selector: "fdp-input", inputs: { type: "type", required: "required", value: "value" }, outputs: { focusChange: "focusChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: InputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Does it make sense to have some other state than error?\n-->\n<input\n    #inputElementRef\n    fd-form-control\n    [(ngModel)]=\"value\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [state]=\"state\"\n    [readOnly]=\"readonly\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.aria-required]=\"required\"\n/>\n", styles: [".fd-input{display:block}\n"], dependencies: [{ kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: InputComponent, isStandalone: true, selector: "fdp-input", inputs: { type: "type", required: "required", value: "value" }, outputs: { focusChange: "focusChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: InputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Does it make sense to have some other state than error?\n-->\n<input\n    #inputElementRef\n    fd-form-control\n    [(ngModel)]=\"value\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [state]=\"state\"\n    [readOnly]=\"readonly\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.aria-required]=\"required\"\n/>\n", styles: [".fd-input{display:block}\n"], dependencies: [{ kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -2388,7 +2388,7 @@ class TextAreaComponent extends BaseInput {
                 useExisting: TextAreaComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "_textareaCounter", first: true, predicate: ["counter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<textarea\n    #inputElementRef\n    fd-form-control\n    [disabled]=\"disabled\"\n    [attr.id]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"id + '-counter'\"\n    [attr.aria-required]=\"required\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.rows]=\"growing ? 2 : height ? 2 : growingMaxLines\"\n    [attr.cols]=\"cols\"\n    [attr.wrap]=\"wrapType\"\n    [attr.maxlength]=\"!showExceededText ? maxLength : null\"\n    [attr.readonly]=\"readonly ? true : null\"\n    [(ngModel)]=\"value\"\n    [state]=\"getUpdatedState()\"\n    (paste)=\"handlePasteInteraction()\"\n    (blur)=\"_onFocusChanged(false)\"\n    (focus)=\"_onFocusChanged(true)\"\n></textarea>\n\n<!-- ICU recommends full text in format -->\n<div\n    class=\"fd-textarea-counter\"\n    *ngIf=\"showExceededText\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    [attr.id]=\"id + '-counter'\"\n    #counter\n>\n    <!-- render spaces instead of the actual value while translation string is loading in order to avoid content jumps -->\n    <ng-container *ngIf=\"counterExcessOrRemaining === 'excess'; else charactersRemaining\">\n        <span\n            [innerHtml]=\"\n                (exceededCharCount === 1\n                    ? 'platformTextarea.counterMessageCharactersOverTheLimitSingular'\n                    : 'platformTextarea.counterMessageCharactersOverTheLimitPlural'\n                ) | fdTranslate : { count: exceededCharCount } : '&nbsp;&nbsp;'\n            \"\n        ></span>\n    </ng-container>\n    <ng-template #charactersRemaining>\n        <span\n            [innerHtml]=\"\n                (exceededCharCount === 1\n                    ? 'platformTextarea.counterMessageCharactersRemainingSingular'\n                    : 'platformTextarea.counterMessageCharactersRemainingPlural'\n                ) | fdTranslate : { count: exceededCharCount } : '&nbsp;&nbsp;'\n            \"\n        ></span>\n    </ng-template>\n</div>\n", styles: [".fd-textarea-counter{display:inline-block;width:100%}\n"], dependencies: [{ kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_textareaCounter", first: true, predicate: ["counter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<textarea\n    #inputElementRef\n    fd-form-control\n    [disabled]=\"disabled\"\n    [attr.id]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"id + '-counter'\"\n    [attr.aria-required]=\"required\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.rows]=\"growing ? 2 : height ? 2 : growingMaxLines\"\n    [attr.cols]=\"cols\"\n    [attr.wrap]=\"wrapType\"\n    [attr.maxlength]=\"!showExceededText ? maxLength : null\"\n    [attr.readonly]=\"readonly ? true : null\"\n    [(ngModel)]=\"value\"\n    [state]=\"getUpdatedState()\"\n    (paste)=\"handlePasteInteraction()\"\n    (blur)=\"_onFocusChanged(false)\"\n    (focus)=\"_onFocusChanged(true)\"\n></textarea>\n\n<!-- ICU recommends full text in format -->\n<div\n    class=\"fd-textarea-counter\"\n    *ngIf=\"showExceededText\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    [attr.id]=\"id + '-counter'\"\n    #counter\n>\n    <!-- render spaces instead of the actual value while translation string is loading in order to avoid content jumps -->\n    <ng-container *ngIf=\"counterExcessOrRemaining === 'excess'; else charactersRemaining\">\n        <span\n            [innerHtml]=\"\n                (exceededCharCount === 1\n                    ? 'platformTextarea.counterMessageCharactersOverTheLimitSingular'\n                    : 'platformTextarea.counterMessageCharactersOverTheLimitPlural'\n                ) | fdTranslate : { count: exceededCharCount } : '&nbsp;&nbsp;'\n            \"\n        ></span>\n    </ng-container>\n    <ng-template #charactersRemaining>\n        <span\n            [innerHtml]=\"\n                (exceededCharCount === 1\n                    ? 'platformTextarea.counterMessageCharactersRemainingSingular'\n                    : 'platformTextarea.counterMessageCharactersRemainingPlural'\n                ) | fdTranslate : { count: exceededCharCount } : '&nbsp;&nbsp;'\n            \"\n        ></span>\n    </ng-template>\n</div>\n", styles: [".fd-textarea-counter{display:inline-block;width:100%}\n"], dependencies: [{ kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -4693,7 +4693,7 @@ class PlatformMultiInputComponent extends BaseMultiInput {
                 multi: true
             },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "listTemplateDD", first: true, predicate: ListComponent$1, descendants: true }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_listItems", predicate: BaseListItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-multi-input\">\n    <ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        <fd-tokenizer\n            *ngIf=\"selected\"\n            [tokenizerFocusable]=\"false\"\n            [compactCollapse]=\"true\"\n            #tokenizer\n            class=\"fd-multi-input-tokenizer-custom\"\n            (moreClickedEvent)=\"moreClicked()\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n            fdMultiAnnouncer\n            [multiAnnouncerOptions]=\"isOpen ? _suggestions : []\"\n        >\n            <fd-token\n                [readOnly]=\"disabled\"\n                (onCloseClick)=\"removeToken(token)\"\n                *ngFor=\"let token of selected; let i = index\"\n                [attr.aria-posinset]=\"i\"\n                [attr.aria-setsize]=\"selected.length\"\n            >\n                <span>{{ token.label | displayFnPipe : displayFn }}</span>\n            </fd-token>\n\n            <input\n                #searchInputElement\n                type=\"text\"\n                class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                fdp-auto-complete\n                autocomplete=\"off\"\n                (onComplete)=\"_onAutoComplete($event)\"\n                (keydown.enter)=\"_onKeydownEnter($event)\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [inputText]=\"inputText\"\n                [options]=\"_suggestions\"\n                fd-input-group-input\n                fd-form-control\n                [attr.id]=\"id\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                (blur)=\"tokenizer._hideTokens()\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-readonly]=\"readonly\"\n                [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                [ariaLabelledBy]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"tokenHiddenId\"\n                aria-roledescription=\"Multi Value Input\"\n                fdkInitialFocus\n                [enabled]=\"autofocus\"\n            />\n        </fd-tokenizer>\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <fdp-list\n        [noBorder]=\"true\"\n        #listTemplateDD\n        [hasByLine]=\"hasByLine\"\n        [selectionMode]=\"selectionMode\"\n        *ngIf=\"_suggestions && _suggestions.length\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [interceptTabKey]=\"false\"\n        (keydown.tab)=\"close()\"\n    >\n        <ng-container *ngIf=\"!isGroup\">\n            <fdp-standard-list-item\n                *ngFor=\"let listItem of _suggestions\"\n                [title]=\"listItem.label\"\n                [description]=\"listItem.description || ''\"\n                [avatar]=\"listItem.avatarSrc\"\n                [value]=\"listItem.value\"\n                (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                (buttonClicked)=\"deleteToken(listItem)\"\n                role=\"option\"\n            >\n            </fdp-standard-list-item>\n        </ng-container>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <fdp-standard-list-item\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    [title]=\"optionItem.label\"\n                    [value]=\"optionItem.value\"\n                    (itemSelected)=\"addToArray(optionItem, true)\"\n                    (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                    (buttonClicked)=\"deleteToken(optionItem)\"\n                    role=\"option\"\n                >\n                </fdp-standard-list-item>\n            </ng-container>\n        </ng-container>\n    </fdp-list>\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "ngmodule", type: PlatformListModule }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.ListGroupHeaderComponent, selector: "fdp-list-group-header", inputs: ["groupHeaderTitle"] }, { kind: "component", type: i7.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "listTemplateDD", first: true, predicate: ListComponent$1, descendants: true }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_listItems", predicate: BaseListItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-multi-input\">\n    <ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        <fd-tokenizer\n            *ngIf=\"selected\"\n            [tokenizerFocusable]=\"false\"\n            [compactCollapse]=\"true\"\n            #tokenizer\n            class=\"fd-multi-input-tokenizer-custom\"\n            (moreClickedEvent)=\"moreClicked()\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n            fdMultiAnnouncer\n            [multiAnnouncerOptions]=\"isOpen ? _suggestions : []\"\n        >\n            <fd-token\n                [readOnly]=\"disabled\"\n                (onCloseClick)=\"removeToken(token)\"\n                *ngFor=\"let token of selected; let i = index\"\n                [attr.aria-posinset]=\"i\"\n                [attr.aria-setsize]=\"selected.length\"\n            >\n                <span>{{ token.label | displayFnPipe : displayFn }}</span>\n            </fd-token>\n\n            <input\n                #searchInputElement\n                type=\"text\"\n                class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                fdp-auto-complete\n                autocomplete=\"off\"\n                (onComplete)=\"_onAutoComplete($event)\"\n                (keydown.enter)=\"_onKeydownEnter($event)\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [inputText]=\"inputText\"\n                [options]=\"_suggestions\"\n                fd-input-group-input\n                fd-form-control\n                [attr.id]=\"id\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                (blur)=\"tokenizer._hideTokens()\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-readonly]=\"readonly\"\n                [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                [ariaLabelledBy]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"tokenHiddenId\"\n                aria-roledescription=\"Multi Value Input\"\n                fdkInitialFocus\n                [enabled]=\"autofocus\"\n            />\n        </fd-tokenizer>\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <fdp-list\n        [noBorder]=\"true\"\n        #listTemplateDD\n        [hasByLine]=\"hasByLine\"\n        [selectionMode]=\"selectionMode\"\n        *ngIf=\"_suggestions && _suggestions.length\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [interceptTabKey]=\"false\"\n        (keydown.tab)=\"close()\"\n    >\n        <ng-container *ngIf=\"!isGroup\">\n            <fdp-standard-list-item\n                *ngFor=\"let listItem of _suggestions\"\n                [title]=\"listItem.label\"\n                [description]=\"listItem.description || ''\"\n                [avatar]=\"listItem.avatarSrc\"\n                [value]=\"listItem.value\"\n                (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                (buttonClicked)=\"deleteToken(listItem)\"\n                role=\"option\"\n            >\n            </fdp-standard-list-item>\n        </ng-container>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <fdp-standard-list-item\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    [title]=\"optionItem.label\"\n                    [value]=\"optionItem.value\"\n                    (itemSelected)=\"addToArray(optionItem, true)\"\n                    (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                    (buttonClicked)=\"deleteToken(optionItem)\"\n                    role=\"option\"\n                >\n                </fdp-standard-list-item>\n            </ng-container>\n        </ng-container>\n    </fdp-list>\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "ngmodule", type: PlatformListModule }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.ListGroupHeaderComponent, selector: "fdp-list-group-header", inputs: ["groupHeaderTitle"] }, { kind: "component", type: i7.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformMultiInputComponent, decorators: [{
             type: Component,
@@ -7747,11 +7747,11 @@ class PlatformDatetimePickerComponent extends BaseInput {
         customPopoverEl.style.display = 'inline';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatetimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }, { token: i2.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformDatetimePickerComponent, isStandalone: true, selector: "fdp-datetime-picker", inputs: { value: "value", placement: "placement", appendTo: "appendTo", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", datetimeChange: "datetimeChange", onClose: "onClose" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], viewQueries: [{ propertyName: "dateTimePickerComponent", first: true, predicate: DatetimePickerComponent, descendants: true }, { propertyName: "_elRef", first: true, predicate: DatetimePickerComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "_control", first: true, predicate: DatetimePickerComponent, descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n", dependencies: [{ kind: "component", type: DatetimePickerComponent, selector: "fd-datetime-picker", inputs: ["placeholder", "placement", "appendTo", "disabled", "inputId", "required", "meridian", "displaySeconds", "ariaLabelledBy", "message", "messageTriggers", "displayMinutes", "displayHours", "useValidation", "date", "isOpen", "startingDayOfWeek", "activeView", "allowNull", "keepTwoDigitsTime", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "spinnerButtons", "showWeekNumbers", "showFooter", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction"], outputs: ["isOpenChange", "activeViewChange", "dateChange", "calendarChange", "timeChange", "onClose", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PlatformDatetimePickerComponent, isStandalone: true, selector: "fdp-datetime-picker", inputs: { value: "value", placement: "placement", appendTo: "appendTo", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", datetimeChange: "datetimeChange", onClose: "onClose" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], viewQueries: [{ propertyName: "dateTimePickerComponent", first: true, predicate: DatetimePickerComponent, descendants: true }, { propertyName: "_elRef", first: true, predicate: DatetimePickerComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "_control", first: true, predicate: DatetimePickerComponent, descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n", dependencies: [{ kind: "component", type: DatetimePickerComponent, selector: "fd-datetime-picker", inputs: ["placeholder", "placement", "appendTo", "disabled", "inputId", "required", "meridian", "displaySeconds", "ariaLabelledBy", "message", "messageTriggers", "displayMinutes", "displayHours", "useValidation", "date", "isOpen", "startingDayOfWeek", "activeView", "allowNull", "keepTwoDigitsTime", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "spinnerButtons", "showWeekNumbers", "showFooter", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction"], outputs: ["isOpenChange", "activeViewChange", "dateChange", "calendarChange", "timeChange", "onClose", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformDatetimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], standalone: true, imports: [DatetimePickerComponent, FormsModule], template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n" }]
+            args: [{ selector: 'fdp-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], standalone: true, imports: [DatetimePickerComponent, FormsModule], template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -10156,7 +10156,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
                 multi: true
             },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n        (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"true\"\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                class=\"fdp-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            >\n                <fd-token\n                    [readOnly]=\"disabled\"\n                    (onCloseClick)=\"removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdp-auto-complete\n                    (onComplete)=\"onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    [mobile]=\"mobile\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"id\"\n                    [name]=\"name\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"readonly\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [attr.aria-required]=\"required\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else plainList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #plainList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                (click)=\"!mobile && onOptionClicked($event, i)\"\n                (keydown)=\"onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: CheckboxComponent$1, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n        (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"true\"\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                class=\"fdp-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            >\n                <fd-token\n                    [readOnly]=\"disabled\"\n                    (onCloseClick)=\"removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdp-auto-complete\n                    (onComplete)=\"onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    [mobile]=\"mobile\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"id\"\n                    [name]=\"name\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"readonly\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [attr.aria-required]=\"required\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n            [type]=\"state\"\n            [innerHtml]=\"stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <li\n            *ngIf=\"advancedStateMessage?.hasErrors && advancedStateMessage?.template\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n        >\n            <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n        </li>\n\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else plainList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #plainList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                (click)=\"!mobile && onOptionClicked($event, i)\"\n                (keydown)=\"onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: CheckboxComponent$1, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MultiComboboxComponent, decorators: [{
             type: Component,