@fundamental-ngx/core 0.39.2 → 0.40.0-rc.0

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

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ViewContainerRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output, ElementRef, Optional, ContentChildren, forwardRef, ContentChild, ViewChildren, HostListener, Directive, NgModule } 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 { CommonModule } from '@angular/common';
-import { Subscription, Subject, merge, fromEvent } from 'rxjs';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { Subscription, fromEvent, Subject, BehaviorSubject, startWith, merge } from 'rxjs';
 import * as i2 from '@fundamental-ngx/cdk/utils';
-import { KeyUtil, resizeObservable, applyCssClass } from '@fundamental-ngx/cdk/utils';
+import { DestroyedService, KeyUtil, resizeObservable, applyCssClass } from '@fundamental-ngx/cdk/utils';
 import { ENTER, SPACE, DELETE, BACKSPACE, LEFT_ARROW, RIGHT_ARROW, A } from '@angular/cdk/keycodes';
 import * as i1 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
+import { takeUntil, debounceTime, filter, map } from 'rxjs/operators';
 import * as i3$1 from '@fundamental-ngx/i18n';
 import { I18nModule } from '@fundamental-ngx/i18n';
 import { __decorate, __metadata } from 'tslib';
-import { filter, mapTo, debounceTime, takeUntil } from 'rxjs/operators';
 import { FormControlComponent } from '@fundamental-ngx/core/form';
 import * as i4 from '@fundamental-ngx/core/input-group';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
@@ -60,10 +60,26 @@ class TokenComponent {
         /** Emitted when a there's a keydown registered on the token. */
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onTokenKeydown = new EventEmitter();
+        /**
+         * Emitted when token element received or lost focus.
+         */
+        this.elementFocused = new EventEmitter();
+        /** @hidden */
+        this._destroy$ = inject(DestroyedService);
     }
     /** @hidden */
     ngAfterViewInit() {
         this._viewContainer.createEmbeddedView(this._content);
+        fromEvent(this.tokenWrapperElement.nativeElement, 'focus')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.elementFocused.emit(true);
+        });
+        fromEvent(this.tokenWrapperElement.nativeElement, 'blur')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.elementFocused.emit(false);
+        });
     }
     /** @hidden */
     ngOnDestroy() {
@@ -95,10 +111,12 @@ class TokenComponent {
     }
 }
 TokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", 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.1.1", 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" }, providers: [contentDensityObserverProviders()], 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    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\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.27.1\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--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact: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.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{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.AsyncPipe, name: "async" }, { 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.1.1", 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    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\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.27.1\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--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact: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.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{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.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TokenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], 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    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\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.27.1\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--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact: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.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{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"] }]
+            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders(), DestroyedService], host: {
+                        '[style.max-width.%]': '100'
+                    }, 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    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\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.27.1\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--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact: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.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }]; }, propDecorators: { disabled: [{
                 type: Input
             }], tokenWrapperElement: [{
@@ -130,6 +148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         onTokenKeydown: [{
                 type: Output
+            }], elementFocused: [{
+                type: Output
             }] } });
 
 class TokenizerComponent {
@@ -148,12 +168,13 @@ class TokenizerComponent {
         return this._contentDensityObserver.isCompact;
     }
     /** @hidden */
-    constructor(_contentDensityObserver, _elementRef, _cdRef, _rtlService, _renderer) {
+    constructor(_contentDensityObserver, _elementRef, _cdRef, _rtlService, _renderer, _document) {
         this._contentDensityObserver = _contentDensityObserver;
         this._elementRef = _elementRef;
         this._cdRef = _cdRef;
         this._rtlService = _rtlService;
         this._renderer = _renderer;
+        this._document = _document;
         /** Disables possibility to remove tokens by keyboard */
         this.disableKeyboardDeletion = false;
         /** Whether to use cozy visuals but compact collapsing behavior. */
@@ -176,6 +197,10 @@ class TokenizerComponent {
         this._tokenizerHasFocus = false;
         /** @hidden */
         this._showOverflowPopover = true;
+        /** @hidden */
+        this._showMoreElement = false;
+        /** @hidden */
+        this._tokensContainerWidth = 'auto';
         /** @hidden
          * Variable which will keep the index of the first token pressed in the tokenizer
          */
@@ -192,6 +217,12 @@ class TokenizerComponent {
         this._onDestroy$ = new Subject();
         /** @hidden */
         this._eventListeners = [];
+        /** @hidden */
+        this._forceAllTokensToDisplay = false;
+        /** @hidden */
+        this._tokenElementFocused = new BehaviorSubject(false);
+        /** @hidden */
+        this._inputElementFocused = false;
         this._eventListeners.push(this._renderer.listen('window', 'click', (e) => {
             if (this._elementRef.nativeElement.contains(e.target) === false) {
                 this.tokenList.forEach((token) => {
@@ -207,33 +238,32 @@ class TokenizerComponent {
             this._inputKeydownEvent();
         }
         // watch for changes to the tokenList and attempt to expand/collapse tokens as needed
-        if (this.tokenListChangesSubscription) {
-            this.tokenListChangesSubscription.unsubscribe();
-        }
-        this.tokenListChangesSubscription = this.tokenList.changes.subscribe(() => {
+        this.tokenList.changes.pipe(startWith(null)).subscribe(() => {
+            var _a;
+            (_a = this.tokenListChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.tokenListChangesSubscription = new Subscription();
             this._resetTokens();
-        });
-        this.tokenList.forEach((token) => {
-            this.tokenListChangesSubscription.add(token.onCloseClick.subscribe(() => {
-                this._resetTokens();
-            }));
+            this.tokenList.forEach((token) => {
+                this.tokenListChangesSubscription.add(token.onCloseClick.subscribe(() => {
+                    this._resetTokens();
+                }));
+                this.tokenListChangesSubscription.add(token.elementFocused.subscribe((isFocused) => {
+                    this._tokenElementFocused.next(isFocused);
+                }));
+            });
         });
         if (!this.compact && !this.compactCollapse) {
             this._handleCozyTokenCount();
         }
-    }
-    /** @hidden */
-    ngAfterContentInit() {
         this._listenElementEvents();
         this.previousElementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
         this._listenOnResize();
-        this.onResize();
     }
     /** @hidden */
     ngOnDestroy() {
-        if (this.tokenListChangesSubscription) {
-            this.tokenListChangesSubscription.unsubscribe();
-        }
+        var _a, _b;
+        (_a = this.tokenListChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        (_b = this._tokenElementFocusedSub) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         this._onDestroy$.next();
         this._onDestroy$.complete();
         this._eventListeners.forEach((e) => e());
@@ -373,12 +403,17 @@ class TokenizerComponent {
     }
     /** @hidden */
     getCombinedTokenWidth() {
-        var _a;
-        let totalTokenWidth = 0;
+        let totalTokenWidth = this._getTokensAreaWidthWithoutTokens();
         // get the width of each token
         this.tokenList.forEach((token) => {
             totalTokenWidth = totalTokenWidth + token.elementRef.nativeElement.getBoundingClientRect().width;
         });
+        return totalTokenWidth;
+    }
+    /** @hidden */
+    _getTokensAreaWidthWithoutTokens() {
+        var _a;
+        let totalTokenWidth = 0;
         // add input width
         if ((_a = this.input) === null || _a === void 0 ? void 0 : _a.nativeElement) {
             totalTokenWidth = totalTokenWidth + this.input.nativeElement.getBoundingClientRect().width;
@@ -416,6 +451,45 @@ class TokenizerComponent {
         }
     }
     /** @hidden */
+    _showAllTokens() {
+        this._forceAllTokensToDisplay = true;
+        this._inputElementFocused = true;
+        this.tokenList.forEach((token) => {
+            this._makeElementVisible(token.elementRef);
+            token._viewContainer.createEmbeddedView(token._content);
+        });
+        this._tokensContainerWidth = 'auto';
+        this._showMoreElement = false;
+        this._cdRef.detectChanges();
+        this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
+    }
+    /** @hidden */
+    _hideTokens() {
+        setTimeout(() => {
+            this._inputElementFocused = false;
+            const tokenFocused = this._getFocusedTokenIndex() > -1;
+            if (tokenFocused) {
+                this._waitForFocusToDisappear();
+                return;
+            }
+            this._forceAllTokensToDisplay = false;
+            this._resetTokens();
+            this._cdRef.detectChanges();
+            this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
+        });
+    }
+    /** @hidden */
+    _waitForFocusToDisappear() {
+        var _a;
+        (_a = this._tokenElementFocusedSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        // 5 ms delay for other token to receive focus, check if _showAllTokens was called again
+        this._tokenElementFocusedSub = this._tokenElementFocused
+            .pipe(debounceTime(5), filter((isFocused) => isFocused && !this._inputElementFocused))
+            .subscribe(() => {
+            this._hideTokens();
+        });
+    }
+    /** @hidden */
     _handleArrowRight(fromIndex) {
         if (fromIndex === this.tokenList.length - this.moreTokensRight.length - 1 && this.moreTokensRight.length) {
             const poppedToken = this.moreTokensRight.pop();
@@ -429,53 +503,67 @@ class TokenizerComponent {
     }
     /** @hidden */
     _collapseTokens(side) {
-        if (this.compact || this.compactCollapse) {
-            this._cdRef.detectChanges();
-            this._viewContainer.forEach((viewContainer) => viewContainer.clear());
-            this.tokenList.forEach((token) => token._viewContainer.createEmbeddedView(token._content));
-            let elementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
-            let combinedTokenWidth = this.getCombinedTokenWidth(); // the combined width of all tokens, the "____ more" text, and the input
-            let i = 0;
-            /*
-             When resizing, we want to collapse the tokens on the left first. However when the user is navigating through
-             a group of overflowing tokens using the arrow left key, we may need to hide tokens on the right. So if this
-             function has been called with the param 'right' it will collapse tokens from the right side of the list rather
-             than the (default) left side.
-             */
-            if (side === 'right') {
-                i = this.tokenList.length - 1;
-            }
-            while (combinedTokenWidth > elementWidth && (side === 'right' ? i >= 0 : i < this.tokenList.length)) {
-                // loop through the tokens and hide them until the combinedTokenWidth fits in the elementWidth
-                const token = this.tokenList.find((item, index) => index === i);
-                const moreTokens = side === 'right' ? this.moreTokensRight : this.moreTokensLeft;
-                if (token) {
-                    if (moreTokens.indexOf(token) === -1) {
-                        moreTokens.push(token);
-                    }
-                    token.elementRef.nativeElement.style.display = 'none';
-                }
-                // get the new elementWidth and combinedTokenWidth as these will have changed after setting a token display to 'none'
-                elementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
-                combinedTokenWidth = this.getCombinedTokenWidth();
-                side === 'right' ? i-- : i++;
-            }
-            this._cdRef.detectChanges();
-            this._hiddenTokens.forEach((hiddenToken, index) => {
-                var _a;
-                hiddenToken._viewContainer.clear();
-                (_a = this._viewContainer.get(index)) === null || _a === void 0 ? void 0 : _a.createEmbeddedView(hiddenToken._content);
-            });
+        var _a;
+        if (this._forceAllTokensToDisplay) {
+            return;
         }
-        else {
+        if (!this.compact && !this.compactCollapse) {
             this._getHiddenCozyTokenCount();
+            return;
+        }
+        this._cdRef.detectChanges();
+        this._viewContainer.forEach((viewContainer) => viewContainer.clear());
+        const availableWidth = this._getTokensAreaWidthWithoutTokens();
+        if (this.tokenList.length === 1) {
+            const tokenWidth = (_a = this.tokenList.get(0)) === null || _a === void 0 ? void 0 : _a.elementRef.nativeElement.getBoundingClientRect().width;
+            this._tokensContainerWidth = availableWidth < tokenWidth ? `calc(100% - ${availableWidth}px)` : 'auto';
+            return;
+        }
+        else {
+            this._tokensContainerWidth = 'auto';
+        }
+        this._checkMoreElementVisibility();
+        this.tokenList.forEach((token) => token._viewContainer.createEmbeddedView(token._content));
+        let elementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
+        let combinedTokenWidth = this.getCombinedTokenWidth(); // the combined width of all tokens, the "____ more" text, and the input
+        let i = 0;
+        /*
+         When resizing, we want to collapse the tokens on the left first. However, when the user is navigating through
+         a group of overflowing tokens using the arrow left key, we may need to hide tokens on the right. So if this
+         function has been called with the param 'right' it will collapse tokens from the right side of the list rather
+         than the (default) left side.
+         */
+        if (side === 'right') {
+            i = this.tokenList.length - 1;
+        }
+        while (combinedTokenWidth > elementWidth && (side === 'right' ? i >= 0 : i < this.tokenList.length)) {
+            // loop through the tokens and hide them until the combinedTokenWidth fits in the elementWidth
+            const token = this.tokenList.get(i);
+            const moreTokens = side === 'right' ? this.moreTokensRight : this.moreTokensLeft;
+            if (token) {
+                if (moreTokens.indexOf(token) === -1) {
+                    moreTokens.push(token);
+                }
+                token.elementRef.nativeElement.style.display = 'none';
+            }
+            // get the new elementWidth and combinedTokenWidth as these will have changed after setting a token display to 'none'
+            elementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
+            this._checkMoreElementVisibility();
+            combinedTokenWidth = this.getCombinedTokenWidth();
+            side === 'right' ? i-- : i++;
         }
+        this._cdRef.detectChanges();
+        this._hiddenTokens.forEach((hiddenToken, index) => {
+            var _a;
+            hiddenToken._viewContainer.clear();
+            (_a = this._viewContainer.get(index)) === null || _a === void 0 ? void 0 : _a.createEmbeddedView(hiddenToken._content);
+        });
     }
     /** @hidden */
     _resetTokens() {
         this.moreTokensLeft = [];
         this.moreTokensRight = [];
-        if (this.compact || this.compactCollapse) {
+        if (this.compact || this.compactCollapse || this._forceAllTokensToDisplay) {
             this.tokenList.forEach((token) => {
                 this._makeElementVisible(token.elementRef);
             });
@@ -500,7 +588,7 @@ class TokenizerComponent {
                 this.hiddenCozyTokenCount += 1;
             }
         });
-        this._cdRef.detectChanges();
+        this._checkMoreElementVisibility();
     }
     /** @hidden */
     _handleCozyTokenCount() {
@@ -627,11 +715,11 @@ class TokenizerComponent {
     }
     /** @hidden */
     _isTokenFocused(token) {
-        return token.tokenWrapperElement.nativeElement === document.activeElement;
+        return token.tokenWrapperElement.nativeElement === this._document.activeElement;
     }
     /** @hidden */
     _isInputFocused() {
-        return document.activeElement === this.input.nativeElement;
+        return this._document.activeElement === this.input.nativeElement;
     }
     /** @hidden */
     _tokensSelected() {
@@ -651,7 +739,7 @@ class TokenizerComponent {
     }
     /** @hidden */
     _listenElementEvents() {
-        merge(fromEvent(this._elementRef.nativeElement, 'focus', { capture: true }).pipe(filter((event) => { var _a; return ((_a = event['target']) === null || _a === void 0 ? void 0 : _a.tagName) === 'INPUT' && this.tokenizerFocusable; }), mapTo(true)), fromEvent(this._elementRef.nativeElement, 'blur', { capture: true }).pipe(mapTo(false)))
+        merge(fromEvent(this._elementRef.nativeElement, 'focus', { capture: true }).pipe(filter((event) => { var _a; return ((_a = event['target']) === null || _a === void 0 ? void 0 : _a.tagName) === 'INPUT' && this.tokenizerFocusable; }), map(() => true)), fromEvent(this._elementRef.nativeElement, 'blur', { capture: true }).pipe(map(() => false)))
             .pipe(
         // debounceTime is needed in order to filter subsequent focus-blur events, that happen simultaneously
         debounceTime(10), takeUntil(this._onDestroy$))
@@ -662,13 +750,25 @@ class TokenizerComponent {
     }
     /** @hidden Listen window resize and distribute cards on column change */
     _listenOnResize() {
-        resizeObservable(this.elementRef().nativeElement)
-            .pipe(debounceTime(60), takeUntil(this._onDestroy$))
+        this.onResize();
+        resizeObservable(this._elementRef.nativeElement)
+            .pipe(debounceTime(30), takeUntil(this._onDestroy$))
             .subscribe(() => this.onResize());
     }
+    /** @hidden */
+    _checkMoreElementVisibility() {
+        const showMoreElement = (this.moreTokensLeft.length > 0 || this.moreTokensRight.length > 0 || this.hiddenCozyTokenCount > 0) &&
+            !this.open &&
+            !this._tokenizerHasFocus;
+        if (showMoreElement === this._showMoreElement) {
+            return;
+        }
+        this._showMoreElement = showMoreElement;
+        this._cdRef.detectChanges();
+    }
 }
-TokenizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.RtlService, optional: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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: ["moreElement"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || 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\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></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=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.27.1\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: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: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--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .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}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[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: "[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"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { 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.1.1", 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.1.1", 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\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\" [style.width]=\"_tokensContainerWidth\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || 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\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></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\"\n        #moreElementSpan\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.27.1\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: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: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--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .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}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[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: "[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"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "pipe", type: i3$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -677,11 +777,14 @@ __decorate([
 ], TokenizerComponent.prototype, "buildComponentCssClass", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TokenizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || 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\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></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=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.27.1\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: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: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--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .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}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[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"] }]
+            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\" [style.width]=\"_tokensContainerWidth\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || 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\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></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\"\n        #moreElementSpan\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate : { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.27.1\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: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: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--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .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}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[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"] }]
         }], ctorParameters: function () {
         return [{ type: i1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.RtlService, decorators: [{
                         type: Optional
-                    }] }, { type: i0.Renderer2 }];
+                    }] }, { type: i0.Renderer2 }, { type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
     }, propDecorators: { class: [{
                 type: Input
             }], disableKeyboardDeletion: [{
@@ -697,7 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['tokenizerInner']
             }], moreElement: [{
                 type: ViewChild,
-                args: ['moreElement']
+                args: ['moreElementSpan']
             }], content: [{
                 type: ViewChild,
                 args: ['inputGroupAddOn']