@fundamental-ngx/core 0.43.51 → 0.43.53

package/fesm2020/fundamental-ngx-core-token.mjs

@@ -1,25 +1,27 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, inject, ViewContainerRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output, ElementRef, Optional, Inject, ContentChildren, forwardRef, ContentChild, ViewChildren, HostListener, Directive, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { ENTER, SPACE, DELETE, BACKSPACE, A, LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
 import * as i2 from '@fundamental-ngx/cdk/utils';
 import { DestroyedService, KeyUtil, resizeObservable, applyCssClass } from '@fundamental-ngx/cdk/utils';
 import * as i1 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
-import { Subscription, fromEvent, Subject, BehaviorSubject, startWith, merge } from 'rxjs';
+import * as i10 from 'rxjs';
+import { Subscription, fromEvent, Subject, BehaviorSubject, startWith, firstValueFrom, merge } from 'rxjs';
 import { takeUntil, debounceTime, filter, map } from 'rxjs/operators';
-import * as i3$1 from '@fundamental-ngx/i18n';
-import { I18nModule } from '@fundamental-ngx/i18n';
+import * as i3 from '@fundamental-ngx/i18n';
+import { TranslationResolver, FD_LANGUAGE, I18nModule } from '@fundamental-ngx/i18n';
 import { __decorate, __metadata } from 'tslib';
 import { FormControlComponent } from '@fundamental-ngx/core/form';
-import * as i4 from '@fundamental-ngx/core/input-group';
+import * as i3$1 from '@angular/cdk/a11y';
+import * as i5 from '@fundamental-ngx/core/input-group';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
-import * as i5 from '@fundamental-ngx/core/button';
+import * as i6 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i6 from '@fundamental-ngx/core/popover';
+import * as i7 from '@fundamental-ngx/core/popover';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
-import * as i7 from '@fundamental-ngx/core/list';
+import * as i8 from '@fundamental-ngx/core/list';
 import { ListModule } from '@fundamental-ngx/core/list';
 
 /* eslint-disable @typescript-eslint/member-ordering */
@@ -114,7 +116,7 @@ class TokenComponent {
     }
 }
 TokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
-TokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TokenComponent, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly", deleteButtonLabel: "deleteButtonLabel", ariaRoleDescription: "ariaRoleDescription" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders(), DestroyedService], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"_totalCount\"\n    [attr.aria-posinset]=\"_itemPosition\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\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-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token[class*=-compact],.fd-token[class*=-condensed],[class*=-compact] .fd-token:not([class*=-cozy]),[class*=-condensed] .fd-token:not([class*=-cozy]){height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token[class*=-compact] .fd-token__close,.fd-token[class*=-condensed] .fd-token__close,[class*=-compact] .fd-token:not([class*=-cozy]) .fd-token__close,[class*=-condensed] .fd-token:not([class*=-cozy]) .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token[class*=-compact][dir=rtl],.fd-token[class*=-condensed][dir=rtl],[class*=-compact] .fd-token:not([class*=-cozy])[dir=rtl],[class*=-condensed] .fd-token:not([class*=-cozy])[dir=rtl],[dir=rtl] .fd-token[class*=-compact],[dir=rtl] .fd-token[class*=-condensed],[dir=rtl] [class*=-compact] .fd-token:not([class*=-cozy]),[dir=rtl] [class*=-condensed] .fd-token:not([class*=-cozy]){padding-left:0;padding-right:.25rem}.fd-token[class*=-compact].is-focus,.fd-token[class*=-compact]:focus,.fd-token[class*=-condensed].is-focus,.fd-token[class*=-condensed]:focus,[class*=-compact] .fd-token:not([class*=-cozy]).is-focus,[class*=-compact] .fd-token:not([class*=-cozy]):focus,[class*=-condensed] .fd-token:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-token:not([class*=-cozy]):focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly[class*=-compact],.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--readonly:not([class*=-cozy]){padding:.1rem .25rem}.fd-token--readonly[class*=-compact][dir=rtl],.fd-token--readonly[class*=-condensed][dir=rtl],[class*=-compact] .fd-token--readonly:not([class*=-cozy])[dir=rtl],[class*=-condensed] .fd-token--readonly:not([class*=-cozy])[dir=rtl],[dir=rtl] .fd-token--readonly[class*=-compact],[dir=rtl] .fd-token--readonly[class*=-condensed],[dir=rtl] [class*=-compact] .fd-token--readonly:not([class*=-cozy]),[dir=rtl] [class*=-condensed] .fd-token--readonly:not([class*=-cozy]){padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TokenComponent, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly", deleteButtonLabel: "deleteButtonLabel", ariaRoleDescription: "ariaRoleDescription" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders(), DestroyedService], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"_totalCount\"\n    [attr.aria-posinset]=\"_itemPosition\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\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-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token[class*=-compact],.fd-token[class*=-condensed],[class*=-compact] .fd-token:not([class*=-cozy]),[class*=-condensed] .fd-token:not([class*=-cozy]){height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token[class*=-compact] .fd-token__close,.fd-token[class*=-condensed] .fd-token__close,[class*=-compact] .fd-token:not([class*=-cozy]) .fd-token__close,[class*=-condensed] .fd-token:not([class*=-cozy]) .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token[class*=-compact][dir=rtl],.fd-token[class*=-condensed][dir=rtl],[class*=-compact] .fd-token:not([class*=-cozy])[dir=rtl],[class*=-condensed] .fd-token:not([class*=-cozy])[dir=rtl],[dir=rtl] .fd-token[class*=-compact],[dir=rtl] .fd-token[class*=-condensed],[dir=rtl] [class*=-compact] .fd-token:not([class*=-cozy]),[dir=rtl] [class*=-condensed] .fd-token:not([class*=-cozy]){padding-left:0;padding-right:.25rem}.fd-token[class*=-compact].is-focus,.fd-token[class*=-compact]:focus,.fd-token[class*=-condensed].is-focus,.fd-token[class*=-condensed]:focus,[class*=-compact] .fd-token:not([class*=-cozy]).is-focus,[class*=-compact] .fd-token:not([class*=-cozy]):focus,[class*=-condensed] .fd-token:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-token:not([class*=-cozy]):focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly[class*=-compact],.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--readonly:not([class*=-cozy]){padding:.1rem .25rem}.fd-token--readonly[class*=-compact][dir=rtl],.fd-token--readonly[class*=-condensed][dir=rtl],[class*=-compact] .fd-token--readonly:not([class*=-cozy])[dir=rtl],[class*=-condensed] .fd-token--readonly:not([class*=-cozy])[dir=rtl],[dir=rtl] .fd-token--readonly[class*=-compact],[dir=rtl] .fd-token--readonly[class*=-condensed],[dir=rtl] [class*=-compact] .fd-token--readonly:not([class*=-cozy]),[dir=rtl] [class*=-condensed] .fd-token--readonly:not([class*=-cozy]){padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders(), DestroyedService], host: {
@@ -179,13 +181,15 @@ class TokenizerComponent {
         return this._contentDensityObserver.isCompact;
     }
     /** @hidden */
-    constructor(_contentDensityObserver, elementRef, _cdRef, _rtlService, _renderer, _document) {
+    constructor(_contentDensityObserver, elementRef, _cdRef, _rtlService, _renderer, _document, _liveAnnouncer, _language$) {
         this._contentDensityObserver = _contentDensityObserver;
         this.elementRef = elementRef;
         this._cdRef = _cdRef;
         this._rtlService = _rtlService;
         this._renderer = _renderer;
         this._document = _document;
+        this._liveAnnouncer = _liveAnnouncer;
+        this._language$ = _language$;
         /** Disables possibility to remove tokens by keyboard */
         this.disableKeyboardDeletion = false;
         /** Whether to use cozy visuals but compact collapsing behavior. */
@@ -212,6 +216,8 @@ class TokenizerComponent {
         this._showMoreElement = false;
         /** @hidden */
         this._tokensContainerWidth = 'auto';
+        /** @hidden */
+        this._translationResolver = new TranslationResolver();
         /** @hidden
          * Variable which will keep the index of the first token pressed in the tokenizer
          */
@@ -245,7 +251,8 @@ class TokenizerComponent {
     /** @hidden */
     ngAfterViewInit() {
         if (this.input?.nativeElement) {
-            this._inputKeydownEvent();
+            this._setupInputKeydownEvent();
+            this._setupInputFocusEvent();
         }
         // watch for changes to the tokenList and attempt to expand/collapse tokens as needed
         this.tokenList.changes.pipe(startWith(null)).subscribe(() => {
@@ -636,11 +643,25 @@ class TokenizerComponent {
         }
     }
     /** @hidden */
-    _inputKeydownEvent() {
+    _setupInputKeydownEvent() {
         this._eventListeners.push(this._renderer.listen(this.input.nativeElement, 'keydown', (event) => {
             this.handleKeyDown(event, this.tokenList.length);
         }));
     }
+    /** @hidden */
+    _setupInputFocusEvent() {
+        this._eventListeners.push(this._renderer.listen(this.input.nativeElement, 'focus', () => {
+            this._makeTokenizerFocusCountAnnouncement();
+        }));
+    }
+    /** @hidden */
+    async _makeTokenizerFocusCountAnnouncement() {
+        const lang = await firstValueFrom(this._language$);
+        const message = this._translationResolver.resolve(lang, 'coreMultiInput.tokensCountText', {
+            length: this.tokenList.length ? this.tokenList.length : 0
+        });
+        this._liveAnnouncer.announce(message);
+    }
     /** @hidden Method which handles what happens to token when it is clicked and no key is being held down.*/
     _basicSelected(token, index) {
         this.tokenList.forEach((shadowedToken) => {
@@ -788,8 +809,8 @@ class TokenizerComponent {
         this._cdRef.detectChanges();
     }
 }
-TokenizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.RtlService, optional: true }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TokenizerComponent, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", moreTerm: "moreTerm", open: "open" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return FormControlComponent; }), descendants: true, read: ElementRef }, { propertyName: "tokenList", predicate: i0.forwardRef(function () { return TokenComponent; }) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElementSpan"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div\n            role=\"listbox\"\n            [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\n            [style.width]=\"_tokensContainerWidth\"\n            [attr.aria-hidden]=\"tokenList.length === 0\"\n        >\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && ((_compact$ | async) || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button fd-button class=\"fd-tokenizer-addon\" fdType=\"transparent\" [glyph]=\"glyph\" type=\"button\"></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"_showMoreElement && _hiddenTokens.length > 0 && !_tokenizerHasFocus\"\n        #moreElementSpan\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"-1\"\n    >\n        <ng-container *ngIf=\"(_compact$ | async) || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"(_compact$ | async) === false && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\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-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-tokenizer:after,.fd-tokenizer:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:var(--fdTokenizer_Inner_Padding, 0 .3125rem);scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:var(--fdTokenizer_Input_Width, 3rem);padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{border:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:focus,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){--fdTokenizer_Inner_Padding:0 .25rem;--fdInput_Field_Compact_Min_Width:2rem;height:1.625rem;min-height:1.625rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer[class*=-compact] .fd-token[dir=rtl],.fd-tokenizer[class*=-condensed] .fd-token[dir=rtl],[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token[dir=rtl],[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer[class*=-compact] .fd-token,[dir=rtl] .fd-tokenizer[class*=-condensed] .fd-token,[dir=rtl] [class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[dir=rtl] [class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole", "preventClick"], outputs: ["keyDown"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TokenizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.RtlService, optional: true }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i3$1.LiveAnnouncer }, { token: FD_LANGUAGE }], target: i0.ɵɵFactoryTarget.Component });
+TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TokenizerComponent, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", moreTerm: "moreTerm", open: "open" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return FormControlComponent; }), descendants: true, read: ElementRef }, { propertyName: "tokenList", predicate: i0.forwardRef(function () { return TokenComponent; }) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElementSpan"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div\n            role=\"listbox\"\n            [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\n            [style.width]=\"_tokensContainerWidth\"\n            [attr.aria-hidden]=\"tokenList.length === 0\"\n        >\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && ((_compact$ | async) || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button fd-button class=\"fd-tokenizer-addon\" fdType=\"transparent\" [glyph]=\"glyph\" type=\"button\"></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"_showMoreElement && _hiddenTokens.length > 0 && !_tokenizerHasFocus\"\n        #moreElementSpan\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"-1\"\n    >\n        <ng-container *ngIf=\"(_compact$ | async) || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"(_compact$ | async) === false && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\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-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-tokenizer:after,.fd-tokenizer:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:var(--fdTokenizer_Inner_Padding, 0 .3125rem);scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:var(--fdTokenizer_Input_Width, 3rem);padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{border:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:focus,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){--fdTokenizer_Inner_Padding:0 .25rem;--fdInput_Field_Compact_Min_Width:2rem;height:1.625rem;min-height:1.625rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer[class*=-compact] .fd-token[dir=rtl],.fd-tokenizer[class*=-condensed] .fd-token[dir=rtl],[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token[dir=rtl],[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer[class*=-compact] .fd-token,[dir=rtl] .fd-tokenizer[class*=-condensed] .fd-token,[dir=rtl] [class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[dir=rtl] [class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole", "preventClick"], outputs: ["keyDown"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -804,6 +825,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }] }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
+                }] }, { type: i3$1.LiveAnnouncer }, { type: i10.Observable, decorators: [{
+                    type: Inject,
+                    args: [FD_LANGUAGE]
                 }] }]; }, propDecorators: { class: [{
                 type: Input
             }], disableKeyboardDeletion: [{