@fundamental-ngx/core 0.42.0-rc.9 → 0.42.0

package/fesm2015/fundamental-ngx-core-message-strip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-message-strip.mjs","sources":["../../../../libs/core/src/lib/message-strip/message-strip.component.ts","../../../../libs/core/src/lib/message-strip/message-strip.component.html","../../../../libs/core/src/lib/message-strip/message-strip.module.ts","../../../../libs/core/src/lib/message-strip/fundamental-ngx-core-message-strip.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Input,\n    OnChanges,\n    OnInit,\n    ViewEncapsulation,\n    EventEmitter,\n    Output\n} from '@angular/core';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/cdk/utils';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\n\nlet messageStripUniqueId = 0;\n\nexport type MessageStripType = Nullable<'warning' | 'success' | 'information' | 'error'>;\n\n/**\n * The component that represents a message-strip. It can only be used inline.\n */\n@Component({\n    selector: 'fd-message-strip',\n    templateUrl: './message-strip.component.html',\n    styleUrls: ['./message-strip.component.scss'],\n    host: {\n        '[attr.aria-labelledby]': 'ariaLabelledBy',\n        '[attr.aria-label]': 'ariaLabel',\n        '[style.width]': 'width',\n        '[style.min-width]': 'minWidth',\n        '[style.margin-bottom]': 'marginBottom',\n        role: 'alert',\n        '[attr.id]': 'id'\n    },\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MessageStripComponent implements OnInit, OnChanges, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class = '';\n\n    /** Whether the message strip is dismissible. */\n    @Input()\n    dismissible = true;\n\n    /** The default message strip does not have an icon.\n     * The other types (warning, success, information and error) have icons by default.\n     * To remove the icon set the property to true.\n     */\n    @Input()\n    noIcon = false;\n\n    /** The type of the message strip.\n     * Can be one of *warning*, *success*, *information*, *error* or null.\n     */\n    @Input()\n    type: MessageStripType;\n\n    /** Id for the message-strip component. If omitted, a unique one is generated. */\n    @Input()\n    id: string = 'fd-message-strip-' + messageStripUniqueId++;\n\n    /** Id of the element that labels the message-strip. */\n    @Input()\n    ariaLabelledBy: Nullable<string>;\n\n    /** Aria label for the message-strip component element. */\n    @Input()\n    ariaLabel: Nullable<string>;\n\n    /**\n     * @deprecated use i18n capabilities instead\n     * Aria label for the dismiss button.\n     */\n    @Input()\n    dismissLabel: string;\n\n    /** Width of the message-strip. */\n    @Input()\n    width: string;\n\n    /** Minimum width of the message-strip. */\n    @Input()\n    minWidth: string;\n\n    /** Margin bottom of the message-strip. */\n    @Input()\n    marginBottom: string;\n\n    /** Event fired when the message-strip is dismissed. */\n    @Output()\n    // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n    onDismiss: EventEmitter<void> = new EventEmitter<void>();\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /**\n     * Dismisses the message-strip.\n     */\n    dismiss(): void {\n        this._elementRef.nativeElement.classList.add('fd-has-display-none');\n        this._elementRef.nativeElement.classList.remove('fd-has-display-block');\n        this.onDismiss.emit();\n    }\n\n    /** @hidden\n     * CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    @applyCssClass\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-message-strip',\n            this.type ? `fd-message-strip--${this.type}` : '',\n            this.dismissible ? 'fd-message-strip--dismissible' : '',\n            this.noIcon ? 'fd-message-strip--no-icon' : '',\n            this.class\n        ];\n    }\n}\n","<button\n    class=\"fd-message-strip__close\"\n    fd-button\n    glyph=\"decline\"\n    fdType=\"transparent\"\n    fdCompact\n    *ngIf=\"dismissible\"\n    (click)=\"dismiss()\"\n    [attr.aria-controls]=\"id\"\n    [attr.aria-label]=\"dismissLabel || ('coreMessageStrip.dismissLabel' | fdTranslate)\"\n    [attr.title]=\"dismissLabel || ('coreMessageStrip.dismissLabel' | fdTranslate)\"\n></button>\n<p class=\"fd-message-strip__text\">\n    <ng-content></ng-content>\n</p>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MessageStripComponent } from './message-strip.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { I18nModule } from '@fundamental-ngx/i18n';\n\n@NgModule({\n    declarations: [MessageStripComponent],\n    imports: [CommonModule, ButtonModule, I18nModule],\n    exports: [MessageStripComponent]\n})\nexport class MessageStripModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-message-strip.mjs","sources":["../../../../libs/core/src/lib/message-strip/message-strip.component.ts","../../../../libs/core/src/lib/message-strip/message-strip.component.html","../../../../libs/core/src/lib/message-strip/auto-dismiss-message-strip.directive.ts","../../../../libs/core/src/lib/message-strip/message-strip.module.ts","../../../../libs/core/src/lib/message-strip/alert/message-strip-alert.ref.ts","../../../../libs/core/src/lib/message-strip/alert/tokens.ts","../../../../libs/core/src/lib/message-strip/alert/message-strip-alert/message-strip-alert.component.ts","../../../../libs/core/src/lib/message-strip/alert/message-strip-alert/message-strip-alert.component.html","../../../../libs/core/src/lib/message-strip/alert/message-strip-alert-container-footer/message-strip-alert-container-footer.component.ts","../../../../libs/core/src/lib/message-strip/alert/message-strip-alert-container/message-strip-alert-container.component.ts","../../../../libs/core/src/lib/message-strip/alert/default-config.ts","../../../../libs/core/src/lib/message-strip/alert/message-strip-alert.service.ts","../../../../libs/core/src/lib/message-strip/fundamental-ngx-core-message-strip.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    ViewEncapsulation\n} from '@angular/core';\nimport { applyCssClass, CssClassBuilder, Nullable } from '@fundamental-ngx/cdk/utils';\nimport { I18nModule } from '@fundamental-ngx/i18n';\nimport { ContentDensityDirective } from '@fundamental-ngx/core/content-density';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { NgIf } from '@angular/common';\nimport { MessageStripType } from './message-strip-type';\n\nlet messageStripUniqueId = 0;\n\n/**\n * The component that represents a message-strip. It can only be used inline.\n */\n@Component({\n    selector: 'fd-message-strip',\n    templateUrl: './message-strip.component.html',\n    styleUrls: ['./message-strip.component.scss'],\n    host: {\n        '[attr.aria-labelledby]': 'ariaLabelledBy',\n        '[attr.aria-label]': 'ariaLabel',\n        '[style.width]': 'width',\n        '[style.min-width]': 'minWidth',\n        '[style.margin-bottom]': 'marginBottom',\n        role: 'alert',\n        '[attr.id]': 'id'\n    },\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [NgIf, ButtonModule, ContentDensityDirective, I18nModule]\n})\nexport class MessageStripComponent implements OnInit, OnChanges, CssClassBuilder {\n    /** User's custom classes */\n    @Input() class = '';\n\n    /** Whether the message strip is dismissible. */\n    @Input() dismissible = true;\n\n    /** The default message strip does not have an icon.\n     * The other types (warning, success, information and error) have icons by default.\n     * To remove the icon set the property to true.\n     */\n    @Input() noIcon = false;\n\n    /** The type of the message strip.\n     * Can be one of *warning*, *success*, *information*, *error* or null.\n     */\n    @Input() type: MessageStripType;\n\n    /** Id for the message-strip component. If omitted, a unique one is generated. */\n    @Input() id: string = 'fd-message-strip-' + messageStripUniqueId++;\n\n    /** Id of the element that labels the message-strip. */\n    @Input() ariaLabelledBy: Nullable<string>;\n\n    /** Aria label for the message-strip component element. */\n    @Input() ariaLabel: Nullable<string>;\n\n    /**\n     * @deprecated use i18n capabilities instead\n     * Aria label for the dismiss button.\n     */\n    @Input() dismissLabel: string;\n\n    /** Width of the message-strip. */\n    @Input() width: string;\n\n    /** Minimum width of the message-strip. */\n    @Input() minWidth: string;\n\n    /** Margin bottom of the message-strip. */\n    @Input() marginBottom: string;\n\n    /** Event fired when the message-strip is dismissed. */\n    @Output() // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n    onDismiss: EventEmitter<void> = new EventEmitter<void>();\n\n    /** @hidden */\n    constructor(public readonly elementRef: ElementRef) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /**\n     * Dismisses the message-strip.\n     */\n    dismiss(): void {\n        this.elementRef.nativeElement.classList.add('fd-has-display-none');\n        this.elementRef.nativeElement.classList.remove('fd-has-display-block');\n        this.onDismiss.emit();\n    }\n\n    /** @hidden\n     * CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    @applyCssClass\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-message-strip',\n            this.type ? `fd-message-strip--${this.type}` : '',\n            this.dismissible ? 'fd-message-strip--dismissible' : '',\n            this.noIcon ? 'fd-message-strip--no-icon' : '',\n            this.class\n        ];\n    }\n}\n","<button\n    class=\"fd-message-strip__close\"\n    fd-button\n    glyph=\"decline\"\n    fdType=\"transparent\"\n    fdCompact\n    *ngIf=\"dismissible\"\n    (click)=\"dismiss()\"\n    [attr.aria-controls]=\"id\"\n    [attr.aria-label]=\"dismissLabel || ('coreMessageStrip.dismissLabel' | fdTranslate)\"\n    [attr.title]=\"dismissLabel || ('coreMessageStrip.dismissLabel' | fdTranslate)\"\n></button>\n<p class=\"fd-message-strip__text\">\n    <ng-content></ng-content>\n</p>\n","import { Directive, ElementRef, inject, Input, isDevMode } from '@angular/core';\nimport { MessageStripComponent } from './message-strip.component';\nimport { fromEvent, map, merge, Observable, of, startWith, takeUntil } from 'rxjs';\nimport { DestroyedService } from '@fundamental-ngx/cdk/utils';\nimport { switchMap } from 'rxjs/operators';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-message-strip[mousePersist], fd-message-strip[duration], fd-message-strip[autoDismiss]',\n    exportAs: 'fdAutoDismissMessageStrip',\n    standalone: true,\n    providers: [DestroyedService],\n    host: {\n        '[style.display]': '!opened ? \"none\" : null'\n    }\n})\nexport class AutoDismissMessageStripDirective {\n    /** @hidden */\n    private messageStripComponent = inject(MessageStripComponent, { optional: false, host: true });\n\n    /** Whether the message strip is dismissible */\n    @Input() dismissible = true;\n\n    /** Whether the alert should be automatically dismissed. */\n    @Input() autoDismiss = true;\n\n    /** Duration of time *in milliseconds* that the alert will be visible. Set to -1 for indefinite. */\n    @Input() duration = 10000;\n\n    /** Whether the alert should stay open if the mouse is hovering over it. */\n    @Input() mousePersist = false;\n\n    /** Whether the message strip is currently opened. */\n    opened = false;\n\n    /** @hidden */\n    private autoDismissTimeout?: ReturnType<typeof setTimeout>;\n    /** @hidden */\n    private elementRef = inject(ElementRef);\n\n    /** @hidden */\n    private destroy$ = inject(DestroyedService);\n\n    /**\n     * Mouse is hovering over the message strip.\n     * */\n    private mouseIn$ = merge(\n        fromEvent(this.elementRef.nativeElement, 'mouseenter').pipe(map(() => true)),\n        fromEvent(this.elementRef.nativeElement, 'mouseleave').pipe(map(() => false))\n    ).pipe(startWith(false));\n\n    /** @hidden */\n    open(): void {\n        this.opened = true;\n        this.elementRef.nativeElement.classList.remove('fd-has-display-block');\n        this.elementRef.nativeElement.classList.remove('fd-has-display-none');\n        this.stopAutoDismiss();\n        if (this.autoDismiss && !this.dismissible && isDevMode()) {\n            console.warn(\n                'Auto dismiss is enabled but the message strip is not dismissible. Please set the dismissible input to true.'\n            );\n        }\n        if (this.autoDismiss && this.dismissible) {\n            this.startAutoDismiss();\n        }\n    }\n\n    /** @hidden */\n    private stopAutoDismiss = (): void => {\n        if (this.autoDismissTimeout) {\n            clearTimeout(this.autoDismissTimeout);\n            this.autoDismissTimeout = undefined;\n        }\n    };\n\n    /** @hidden */\n    private startAutoDismiss(): void {\n        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n        const startAutoDismissTimer$ = new Observable((res) => {\n            this.autoDismissTimeout = setTimeout(() => {\n                this.dismiss();\n                res.next();\n            }, this.duration);\n            return this.stopAutoDismiss;\n        });\n        if (this.duration > -1) {\n            const source$ = this.mousePersist\n                ? this.mouseIn$.pipe(\n                      switchMap((mouseIn) => {\n                          if (mouseIn) {\n                              return of(null);\n                          }\n                          return startAutoDismissTimer$;\n                      })\n                  )\n                : startAutoDismissTimer$;\n            source$.pipe(takeUntil(merge(this.destroy$, this.messageStripComponent.onDismiss))).subscribe();\n        }\n    }\n\n    /** @hidden */\n    private dismiss = (): void => this.messageStripComponent.dismiss();\n}\n","import { NgModule } from '@angular/core';\n\nimport { MessageStripComponent } from './message-strip.component';\nimport { AutoDismissMessageStripDirective } from './auto-dismiss-message-strip.directive';\n\n@NgModule({\n    imports: [MessageStripComponent, AutoDismissMessageStripDirective],\n    exports: [MessageStripComponent, AutoDismissMessageStripDirective]\n})\nexport class MessageStripModule {}\n","import { ComponentPortal } from '@angular/cdk/portal';\nimport { MessageStripAlertComponent } from './message-strip-alert/message-strip-alert.component';\nimport { Observable } from 'rxjs';\n\nexport abstract class MessageStripAlertRef<ComponentType = unknown> {\n    /** Message strip alert component portal which is rendered in the container */\n    abstract portal: ComponentPortal<MessageStripAlertComponent<ComponentType>>;\n    /**\n     * Function, which dismisses the alert, it calls the user-provided function\n     * after dismissing the actual alert\n     */\n    abstract dismiss: () => void;\n    /** Observable that emits when the alert is dismissed */\n    abstract onDismiss$: Observable<void>;\n}\n","import { InjectionToken, TemplateRef, Type } from '@angular/core';\nimport { MessageStripAlertPosition } from './message-strip-alert.position';\nimport { Observable } from 'rxjs';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport { MessageStripAlertRef } from './message-strip-alert.ref';\nimport { MessageStripConfiguration } from './message-strip-configuration-type';\n\n/**\n * Injection token for getting the position of the message strip alert container.\n * Is available in any of the message strip alert components and in footer component.\n */\nexport const MessageStripAlertContainerPosition = new InjectionToken<MessageStripAlertPosition>(\n    'MessageStripAlertContainerPosition'\n);\n/**\n * Injection token for getting the list of the message strip alert refs\n * in the given container. Is available in the footer component injection\n * context.\n */\nexport const MessageStripAlertContainerAlertRefs = new InjectionToken<Observable<Nullable<MessageStripAlertRef[]>>>(\n    'MessageStripAlertContainerAlertRefs'\n);\n\nexport const MessageStripAlertComponentData = new InjectionToken<{\n    content: string | TemplateRef<any> | Type<any>;\n    messageStripConfig: MessageStripConfiguration;\n}>('MessageStripAlertComponentData');\n","import {\n    AfterViewInit,\n    Component,\n    inject,\n    OnDestroy,\n    Renderer2,\n    TemplateRef,\n    Type,\n    ViewChild,\n    ViewContainerRef\n} from '@angular/core';\nimport { MessageStripConfiguration } from '../message-strip-configuration-type';\nimport { ComponentPortal, DomPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';\nimport { MessageStripComponent } from '../../message-strip.component';\nimport { MessageStripAlertRef } from '../message-strip-alert.ref';\nimport { MessageStripAlertComponentData } from '../tokens';\nimport { AutoDismissMessageStripDirective } from '../../auto-dismiss-message-strip.directive';\n\n/**\n * The wrapper component, which is wrapping the Message Strip and passes\n * configuration to it, also generates the content which will appear in it.\n */\n@Component({\n    templateUrl: `./message-strip-alert.component.html`,\n    standalone: true,\n    imports: [MessageStripComponent, PortalModule, AutoDismissMessageStripDirective]\n})\nexport class MessageStripAlertComponent<ComponentType = unknown> implements OnDestroy, AfterViewInit {\n    /** @hidden */\n    @ViewChild(AutoDismissMessageStripDirective)\n    autoDismissMessageStripDirective: AutoDismissMessageStripDirective;\n\n    /** User provided data. Full of it */\n    data = inject(MessageStripAlertComponentData);\n    /** Configuration for the message strip appearance */\n    messageStripConfig: MessageStripConfiguration;\n    /** Portal, which is responsible for correctly rendering user provided content. It can be any type of the portal */\n    contentPortal: Portal<unknown>;\n\n    /** @hidden */\n    private viewContainerRef = inject(ViewContainerRef);\n    /** @hidden */\n    private renderer2 = inject(Renderer2);\n\n    /**\n     * Timeout, which is responsible for auto-dismissing the message strip.\n     * It should be properly cleared on component destroy.\n     */\n    private autoDismissTimeout: ReturnType<typeof setTimeout>;\n\n    /**\n     * Reference to the message strip alert, which is used to close it from the outside, or access the data and/or the component instance\n     *  */\n    readonly alertRef = inject(MessageStripAlertRef);\n\n    /** @hidden */\n    constructor() {\n        this.messageStripConfig = this.data.messageStripConfig;\n        this.contentPortal = this.getPortal(this.data.content);\n    }\n\n    /**\n     * Handler for the dismiss button click.\n     *  */\n    onDismissHandler(): void {\n        this.messageStripConfig.onDismiss();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        clearTimeout(this.autoDismissTimeout);\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this.autoDismissMessageStripDirective.open();\n    }\n\n    /**\n     * Method, which is responsible for generating the portal, which will be rendered inside the message strip.\n     * It can be any type of the portal, depending on the user provided content.\n     *  */\n    private getPortal(\n        content:\n            | string\n            | TemplateRef<{\n                  $implicit: MessageStripAlertRef<ComponentType>;\n              }>\n            | Type<ComponentType>\n    ):\n        | DomPortal\n        | TemplatePortal<{\n              $implicit: MessageStripAlertRef<ComponentType>;\n          }>\n        | ComponentPortal<ComponentType> {\n        if (typeof content === 'string') {\n            const textEl = this.renderer2.createText(content);\n            this.renderer2.appendChild(this.viewContainerRef.element.nativeElement, textEl);\n            return new DomPortal(textEl);\n        }\n        if (content instanceof TemplateRef) {\n            return new TemplatePortal(content, this.viewContainerRef, { $implicit: this.alertRef });\n        }\n        return new ComponentPortal(content);\n    }\n}\n","<fd-message-strip\n    [class]=\"messageStripConfig.class\"\n    [dismissible]=\"messageStripConfig.dismissible\"\n    [autoDismiss]=\"messageStripConfig.duration > 0\"\n    [mousePersist]=\"messageStripConfig.mousePersist\"\n    [duration]=\"messageStripConfig.duration\"\n    [noIcon]=\"messageStripConfig.noIcon\"\n    [type]=\"messageStripConfig.type\"\n    [id]=\"messageStripConfig.id\"\n    [ariaLabelledBy]=\"messageStripConfig.ariaLabelledBy\"\n    [ariaLabel]=\"messageStripConfig.ariaLabel\"\n    [dismissLabel]=\"messageStripConfig.dismissLabel\"\n    (onDismiss)=\"onDismissHandler()\"\n>\n    <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n</fd-message-strip>\n","import { AfterViewInit, Component, inject, Injector, Input } from '@angular/core';\nimport { MessageStripAlertService } from '../message-strip-alert.service';\nimport { DestroyedService, Nullable } from '@fundamental-ngx/cdk/utils';\nimport { takeUntil } from 'rxjs/operators';\nimport { BehaviorSubject, map, tap } from 'rxjs';\nimport { ComponentPortal, PortalModule } from '@angular/cdk/portal';\nimport { MessageStripAlertRef } from '../message-strip-alert.ref';\nimport { MessageStripAlertContainerAlertRefs, MessageStripAlertContainerPosition } from '../tokens';\n\n/**\n * The component that represents the footer of the message strip alert container.\n * if user has provided the footer component through service, then this component\n * will render it inside itself.\n * Bear in mind that this component is always created, just sometimes if there is nothing to render\n * it will be empty.\n */\n@Component({\n    selector: 'fd-message-strip-alert-container-footer',\n    template: ` <ng-template [cdkPortalOutlet]=\"footerComponentPortal\"></ng-template> `,\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `\n    ],\n    standalone: true,\n    imports: [PortalModule],\n    providers: [DestroyedService]\n})\nexport class MessageStripAlertContainerFooterComponent implements AfterViewInit {\n    /** @hidden */\n    @Input()\n    set alertRefs(alertRefs: Nullable<MessageStripAlertRef[]>) {\n        this.alertRefs$.next(alertRefs);\n    }\n\n    /**\n     * Reference to the user provided component's portal.\n     */\n    footerComponentPortal?: ComponentPortal<any>;\n\n    /**\n     * Position of the overlay in which this component is rendered.\n     */\n    private position = inject(MessageStripAlertContainerPosition);\n\n    /** @hidden */\n    private destroyed = inject(DestroyedService);\n\n    /** @hidden */\n    private messageStripAlertService = inject(MessageStripAlertService);\n\n    /**\n     * Observable that emits the alert references that are currently rendered in the container.\n     */\n    private alertRefs$ = new BehaviorSubject<Nullable<MessageStripAlertRef[]>>([]);\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this.messageStripAlertService.footerComponents$\n            .pipe(\n                map((components) => components[this.position]),\n                tap((footerComponent) => {\n                    if (footerComponent) {\n                        this.footerComponentPortal = new ComponentPortal(\n                            footerComponent,\n                            null,\n                            Injector.create({\n                                providers: [\n                                    {\n                                        provide: MessageStripAlertContainerAlertRefs,\n                                        useValue: this.alertRefs$.pipe(takeUntil(this.destroyed))\n                                    }\n                                ]\n                            })\n                        );\n                    } else {\n                        this.footerComponentPortal = undefined;\n                    }\n                }),\n                takeUntil(this.destroyed)\n            )\n            .subscribe();\n    }\n}\n","import { AfterViewInit, Component, ComponentRef, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';\nimport { CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';\nimport { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';\nimport { MessageStripAlertComponent } from '../message-strip-alert/message-strip-alert.component';\nimport { AsyncPipe, NgFor } from '@angular/common';\nimport { MessageStripAlertContainerFooterComponent } from '../message-strip-alert-container-footer/message-strip-alert-container-footer.component';\nimport { map, Observable, startWith } from 'rxjs';\n\nimport { MessageStripAlertRef } from '../message-strip-alert.ref';\n\n/**\n * This will be rendered in the overlay. It is responsible for rendering the alerts and the footer.\n */\n@Component({\n    selector: 'fd-message-strip-alert-container',\n    template: `\n        <div fdScrollbar>\n            <ng-container *ngFor=\"let portal of attachedElements\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </ng-container>\n        </div>\n        <fd-message-strip-alert-container-footer\n            [alertRefs]=\"alertRefs$ | async\"\n        ></fd-message-strip-alert-container-footer>\n    `,\n    styleUrls: ['./message-strip-alert-container.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [NgFor, PortalModule, ScrollbarDirective, MessageStripAlertContainerFooterComponent, AsyncPipe]\n})\nexport class MessageStripAlertContainerComponent implements AfterViewInit {\n    /**\n     * The list of the elements that are attached to the container.\n     */\n    attachedElements: ComponentPortal<MessageStripAlertComponent>[] = [];\n\n    /**\n     * List of the rendered message strip alerts. It is used in the footer and is injected into the\n     * user-provided footer component portal. This way, user has full control over the container alerts.\n     */\n    alertRefs$!: Observable<MessageStripAlertRef[]>;\n\n    /** @hidden */\n    @ViewChildren(CdkPortalOutlet)\n    portalOutlets: QueryList<CdkPortalOutlet>;\n\n    /** @hidden */\n    @ViewChildren(MessageStripAlertComponent)\n    alerts: QueryList<MessageStripAlertComponent>;\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this.alertRefs$ = this.portalOutlets.changes.pipe(\n            startWith(this.portalOutlets),\n            map(() =>\n                this.portalOutlets\n                    .toArray()\n                    .map((p) => (p.attachedRef as ComponentRef<MessageStripAlertComponent>)?.instance.alertRef)\n            )\n        );\n    }\n}\n","import { OpenMessageStripAlertConfig } from './open-message-strip-alert.config';\n\nconst defaultConfig: Required<Omit<OpenMessageStripAlertConfig, 'content'>> = {\n    position: 'top-middle',\n    messageStrip: {}\n};\n\n/**\n * Applies default config to the given config\n */\nexport function applyDefaultConfig<ComponentType = unknown>(\n    config: OpenMessageStripAlertConfig<ComponentType>\n): Required<OpenMessageStripAlertConfig<ComponentType>> {\n    return { ...defaultConfig, ...config };\n}\n","import { ComponentRef, inject, Injectable, Injector, Type } from '@angular/core';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { BehaviorSubject, combineLatest, map, Subject, tap } from 'rxjs';\nimport { ResponsiveBreakpoints, ViewportSizeObservable } from '@fundamental-ngx/cdk/utils';\nimport { MessageStripAlertContainerComponent } from './message-strip-alert-container/message-strip-alert-container.component';\nimport { MessageStripAlertComponent } from './message-strip-alert/message-strip-alert.component';\nimport { MessageStripAlertPosition } from './message-strip-alert.position';\nimport { OpenMessageStripAlertConfig } from './open-message-strip-alert.config';\nimport { MessageStripAlertRef } from './message-strip-alert.ref';\nimport { MessageStripAlertComponentData, MessageStripAlertContainerPosition } from './tokens';\nimport { applyDefaultConfig } from './default-config';\n\n/**\n * Service that is responsible for opening and closing message strip alerts.\n * This should be only created once in entire application.\n * Service is responsible for creating and managing the overlays for the\n * message strip alerts. This also manages the footer components for any\n * given position.\n */\n@Injectable({\n    providedIn: 'root'\n})\nexport class MessageStripAlertService {\n    /** @hidden */\n    private injector = inject(Injector);\n\n    /** @hidden */\n    private readonly _overlay: Overlay = inject(Overlay);\n\n    /** @hidden */\n    private viewportSize$ = inject(ViewportSizeObservable);\n\n    /** @hidden */\n    private readonly _messageStripAlertService = inject(MessageStripAlertService, { optional: true, skipSelf: true });\n\n    /** @hidden */\n    private _messageAlerts$ = new BehaviorSubject<\n        Array<\n            Required<OpenMessageStripAlertConfig> & {\n                portal: ComponentPortal<MessageStripAlertComponent>;\n            }\n        >\n    >([]);\n\n    /** @hidden */\n    private _overlayRefs: Partial<\n        Record<\n            MessageStripAlertPosition,\n            {\n                ref: OverlayRef;\n                containerRef: ComponentRef<MessageStripAlertContainerComponent>;\n            }\n        >\n    > = {};\n\n    /** @hidden */\n    private _messageStripAlertContainerFooters$ = new BehaviorSubject<\n        Partial<Record<MessageStripAlertPosition, Type<any>>>\n    >({});\n\n    /** @hidden */\n    footerComponents$ = this._messageStripAlertContainerFooters$.asObservable();\n\n    /** @hidden */\n    constructor() {\n        if (this._messageStripAlertService) {\n            throw new Error('MessageStripAlertService is already provided');\n        }\n        this.listenToItemsChanges();\n    }\n\n    /**\n     * Set the footer component for a given position.\n     */\n    setFooterComponent(position: MessageStripAlertPosition, component: Type<any>): void {\n        this._messageStripAlertContainerFooters$.next({\n            ...this._messageStripAlertContainerFooters$.value,\n            [position]: component\n        });\n    }\n\n    /**\n     * Open a message strip alert with given configuration\n     */\n    open<ComponentType = unknown>(c: OpenMessageStripAlertConfig<ComponentType>): MessageStripAlertRef<ComponentType> {\n        const config = applyDefaultConfig<ComponentType>(c);\n        const alertRef = this.getMessageStripAlertRef(config);\n        this._messageAlerts$.next([{ ...config, portal: alertRef.portal }, ...this._messageAlerts$.value]);\n        return alertRef;\n    }\n\n    /** @hidden */\n    private getMessageStripAlertRef<ComponentType = unknown>(\n        config: Required<OpenMessageStripAlertConfig<ComponentType>>\n    ): MessageStripAlertRef<ComponentType> {\n        const onDismiss$ = new Subject<void>();\n        const alertRef = {\n            portal: new ComponentPortal(\n                MessageStripAlertComponent<ComponentType>,\n                null,\n                Injector.create({\n                    providers: [\n                        {\n                            provide: MessageStripAlertComponentData,\n                            useValue: {\n                                content: config.content,\n                                messageStripConfig: {\n                                    ...config.messageStrip,\n                                    onDismiss: () => {\n                                        this._messageAlerts$.next(\n                                            this._messageAlerts$.value.filter((item) => item.portal !== alertRef.portal)\n                                        );\n                                        config.messageStrip &&\n                                            config.messageStrip.onDismiss &&\n                                            config.messageStrip.onDismiss();\n                                        onDismiss$.next();\n                                    }\n                                }\n                            }\n                        },\n                        {\n                            provide: MessageStripAlertRef,\n                            useFactory: () => alertRef\n                        }\n                    ],\n                    parent: this.injector\n                })\n            ),\n            dismiss: () => {\n                this._messageAlerts$.next(this._messageAlerts$.value.filter((item) => item.portal !== alertRef.portal));\n                config.messageStrip && config.messageStrip.onDismiss && config.messageStrip.onDismiss();\n                onDismiss$.next();\n                onDismiss$.complete();\n            },\n            onDismiss$: onDismiss$.asObservable()\n        };\n        return alertRef;\n    }\n\n    /** @hidden */\n    private listenToItemsChanges(): void {\n        combineLatest([this.viewportSize$, this._messageAlerts$.asObservable()])\n            .pipe(\n                map(\n                    ([viewportSize, messageAlerts]): Record<\n                        MessageStripAlertPosition,\n                        Array<ComponentPortal<MessageStripAlertComponent>>\n                    > => {\n                        if (viewportSize < ResponsiveBreakpoints.M) {\n                            return messageAlerts.reduce((acc, next) => {\n                                const position = next.position?.startsWith('top') ? 'top-middle' : 'bottom-middle';\n                                acc[position] = [...(acc[position] || []), next.portal];\n                                return acc;\n                            }, {} as Record<MessageStripAlertPosition, Array<ComponentPortal<MessageStripAlertComponent>>>);\n                        }\n                        return messageAlerts.reduce((acc, next) => {\n                            acc[next.position] = [...(acc[next.position] || []), next.portal];\n                            return acc;\n                        }, {} as Record<MessageStripAlertPosition, Array<ComponentPortal<MessageStripAlertComponent>>>);\n                    }\n                ),\n                tap(\n                    (\n                        messageAlertsByPosition: Partial<\n                            Record<MessageStripAlertPosition, Array<ComponentPortal<MessageStripAlertComponent>>>\n                        >\n                    ) => {\n                        let topSectionIsOpened = false;\n                        let bottomSectionIsOpened = false;\n                        (\n                            Object.entries(messageAlertsByPosition) as Array<\n                                [MessageStripAlertPosition, ComponentPortal<MessageStripAlertComponent>[]]\n                            >\n                        ).forEach(([position, portals]) => {\n                            topSectionIsOpened = topSectionIsOpened || position.startsWith('top');\n                            bottomSectionIsOpened = bottomSectionIsOpened || position.startsWith('bottom');\n                            const { containerRef } = this.getOverlayRef(position);\n                            containerRef.instance.attachedElements = portals;\n                            containerRef.changeDetectorRef.detectChanges();\n                        });\n                        this.syncExistingOverlays(messageAlertsByPosition, bottomSectionIsOpened, topSectionIsOpened);\n                    }\n                )\n            )\n            .subscribe();\n    }\n\n    /** @hidden */\n    private syncExistingOverlays(\n        messageAlertsByPosition: Partial<\n            Record<MessageStripAlertPosition, ComponentPortal<MessageStripAlertComponent>[]>\n        >,\n        bottomSectionIsOpened: boolean,\n        topSectionIsOpened: boolean\n    ): void {\n        (Object.keys(this._overlayRefs) as MessageStripAlertPosition[]).forEach((position) => {\n            if (!messageAlertsByPosition[position]) {\n                this._overlayRefs[position]!.ref.dispose();\n                delete this._overlayRefs[position];\n            } else {\n                const ref = this._overlayRefs[position]!.ref;\n                if (position.startsWith('top')) {\n                    if (bottomSectionIsOpened) {\n                        ref.overlayElement.classList.add('fd-message-strip-alert-overlay--bottom-opened');\n                    } else {\n                        ref.overlayElement.classList.remove('fd-message-strip-alert-overlay--bottom-opened');\n                    }\n                }\n                if (position.startsWith('bottom')) {\n                    if (topSectionIsOpened) {\n                        ref.overlayElement.classList.add('fd-message-strip-alert-overlay--top-opened');\n                    } else {\n                        ref.overlayElement.classList.remove('fd-message-strip-alert-overlay--top-opened');\n                    }\n                }\n            }\n        });\n    }\n\n    /** @hidden */\n    private getOverlayRef(position: MessageStripAlertPosition): {\n        ref: OverlayRef;\n        containerRef: ComponentRef<MessageStripAlertContainerComponent>;\n    } {\n        if (!this._overlayRefs[position]) {\n            const [verticalPosition, horizontalPosition] = position.split('-');\n            const overlayRef = this.createOverlay(verticalPosition, horizontalPosition);\n            const containerRef = overlayRef.attach(\n                new ComponentPortal(\n                    MessageStripAlertContainerComponent,\n                    null,\n                    Injector.create({\n                        parent: this.injector,\n                        providers: [\n                            {\n                                provide: MessageStripAlertContainerPosition,\n                                useValue: position\n                            }\n                        ]\n                    })\n                )\n            );\n            this._overlayRefs[position] = { ref: overlayRef, containerRef };\n        }\n        return this._overlayRefs[position]!;\n    }\n\n    /** @hidden */\n    private createOverlay(verticalPosition: string, horizontalPosition: string): OverlayRef {\n        return this._overlay.create({\n            panelClass: [\n                'fd-message-strip-alert-overlay',\n                `fd-message-strip-alert-overlay--${verticalPosition}`,\n                `fd-message-strip-alert-overlay--${horizontalPosition}`\n            ],\n            hasBackdrop: false\n        });\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","takeUntil"],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-multi-combobox.mjs

@@ -762,7 +762,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
         });
     }
     /** @hidden */
-    _toggleSelection(item) {
+    _toggleSelection(item, fromTokenCloseClick = false) {
         const idx = getTokenIndexByIdlOrValue(item, this._selectedSuggestions);
         if (idx === -1) {
             this._selectedSuggestions.push(item);
@@ -771,7 +771,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
             this._selectedSuggestions.splice(idx, 1);
         }
         item.selected = !item.selected;
-        this._propagateChange();
+        this._propagateChange(fromTokenCloseClick);
         if (!this._selectedSuggestions.length) {
             this._focusToSearchField();
         }
@@ -822,7 +822,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
         }
         const optionItem = this._suggestions.find((s) => s.value === token.value);
         if (optionItem) {
-            this._toggleSelection(optionItem);
+            this._toggleSelection(optionItem, true);
             this._rangeSelector.reset();
         }
     }
@@ -1166,7 +1166,7 @@ MultiComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: MultiComboboxComponent
         },
         DestroyedService
-    ], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2$1.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3$1.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.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            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.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                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.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                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.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]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\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=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.minWidth]=\"!mobile && minWidth + 'px'\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\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                    [tabindex]=\"0\"\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-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\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-container>\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.28.3\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}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i6$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7$1.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i8.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1$1.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2$1.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3$1.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.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            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.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                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.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                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.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]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\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=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.minWidth]=\"!mobile && minWidth + 'px'\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label 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                    [tabindex]=\"0\"\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-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\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-container>\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.28.3\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}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i6$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7$1.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i8.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1$1.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-multi-combobox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
@@ -1194,7 +1194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                             useExisting: MultiComboboxComponent
                         },
                         DestroyedService
-                    ], template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.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            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.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                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.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                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.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]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\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=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.minWidth]=\"!mobile && minWidth + 'px'\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\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                    [tabindex]=\"0\"\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-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\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-container>\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.28.3\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}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"] }]
+                    ], template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.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            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.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                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.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                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.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]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\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=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.minWidth]=\"!mobile && minWidth + 'px'\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label 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                    [tabindex]=\"0\"\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-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\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-container>\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.28.3\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}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1$1.DynamicComponentService }]; }, propDecorators: { selectedItems: [{
                 type: Input
             }], maxHeight: [{