@fundamental-ngx/core 0.46.2-rc.2 → 0.46.2-rc.21

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

@@ -147,13 +147,13 @@ class TokenComponent {
         this._cdRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TokenComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused" }, host: { properties: { "style.max-width.%": "100" } }, 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]=\"'coreToken.ariaRoleDescription' | fdTranslate\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\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]=\"'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.30.2\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{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding:.25rem .5rem;--fdToken_Close_Width:1.75rem;-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-negative:0;align-items:center;background-color:var(--fdToken_Background_Color);border:0;border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:var(--fdToken_Min_Width);padding:0;padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.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(--fdToken_Close_Color);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:var(--fdToken_Close_Width);padding:0;padding:var(--fdToken_Close_Padding);width:var(--fdToken_Close_Width)}.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.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding:.125rem .25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.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{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.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]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{--fdToken_Border:var(--fdToken_Selected_Border);background-color:var(--sapButton_Selected_Hover_Background)}.fd-token--selected.is-focus,.fd-token--selected:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);--fdToken_Border:var(--fdToken_Selected_Border);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{display:inline-flex}.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused" }, host: { properties: { "style.max-width.%": "100" } }, 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]=\"'coreToken.ariaRoleDescription' | fdTranslate\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\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]=\"'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.31.0\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{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding:.25rem .5rem;--fdToken_Close_Width:1.75rem;-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-negative:0;align-items:center;background-color:var(--fdToken_Background_Color);border:0;border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:var(--fdToken_Min_Width);padding:0;padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.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(--fdToken_Close_Color);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:var(--fdToken_Close_Width);padding:0;padding:var(--fdToken_Close_Padding);width:var(--fdToken_Close_Width)}.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.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding:.125rem .25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.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{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.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]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{--fdToken_Border:var(--fdToken_Selected_Border);background-color:var(--sapButton_Selected_Hover_Background)}.fd-token--selected.is-focus,.fd-token--selected:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);--fdToken_Border:var(--fdToken_Selected_Border);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{display:inline-flex}.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TokenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], host: {
                         '[style.max-width.%]': '100'
-                    }, standalone: true, imports: [NgIf, FdTranslatePipe], template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"'coreToken.ariaRoleDescription' | fdTranslate\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\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]=\"'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.30.2\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{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding:.25rem .5rem;--fdToken_Close_Width:1.75rem;-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-negative:0;align-items:center;background-color:var(--fdToken_Background_Color);border:0;border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:var(--fdToken_Min_Width);padding:0;padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.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(--fdToken_Close_Color);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:var(--fdToken_Close_Width);padding:0;padding:var(--fdToken_Close_Padding);width:var(--fdToken_Close_Width)}.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.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding:.125rem .25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.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{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.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]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{--fdToken_Border:var(--fdToken_Selected_Border);background-color:var(--sapButton_Selected_Hover_Background)}.fd-token--selected.is-focus,.fd-token--selected:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);--fdToken_Border:var(--fdToken_Selected_Border);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{display:inline-flex}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"] }]
+                    }, standalone: true, imports: [NgIf, FdTranslatePipe], template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"'coreToken.ariaRoleDescription' | fdTranslate\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\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]=\"'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.31.0\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{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding:.25rem .5rem;--fdToken_Close_Width:1.75rem;-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-negative:0;align-items:center;background-color:var(--fdToken_Background_Color);border:0;border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:var(--fdToken_Min_Width);padding:0;padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.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(--fdToken_Close_Color);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:var(--fdToken_Close_Width);padding:0;padding:var(--fdToken_Close_Padding);width:var(--fdToken_Close_Width)}.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.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding:.125rem .25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.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{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);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{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.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]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{--fdToken_Border:var(--fdToken_Selected_Border);background-color:var(--sapButton_Selected_Hover_Background)}.fd-token--selected.is-focus,.fd-token--selected:focus{--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);--fdToken_Border:var(--fdToken_Selected_Border);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{display:inline-flex}.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: [{
@@ -816,7 +816,7 @@ class TokenizerComponent {
         this._cdRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TokenizerComponent, isStandalone: true, 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    [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\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$ | 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]=\"'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\"\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.30.2\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:var(--sapField_Shadow);-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:var(--sapField_Shadow);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:var(--sapElement_Height);height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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);color:var(--fdTokenizer_Indicator_Color);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{-webkit-box-shadow:none;background:transparent;box-shadow:none}.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "directive", type: i3.InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i5.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i5.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TokenizerComponent, isStandalone: true, 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    [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\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$ | 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]=\"'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\"\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.31.0\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:var(--sapField_Shadow);-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:var(--sapField_Shadow);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:var(--sapElement_Height);height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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);color:var(--fdTokenizer_Indicator_Color);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{-webkit-box-shadow:none;background:transparent;box-shadow:none}.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "directive", type: i3.InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i5.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i5.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -838,7 +838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         NgFor,
                         AsyncPipe,
                         FdTranslatePipe
-                    ], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\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$ | 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]=\"'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\"\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.30.2\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:var(--sapField_Shadow);-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:var(--sapField_Shadow);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:var(--sapElement_Height);height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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);color:var(--fdTokenizer_Indicator_Color);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{-webkit-box-shadow:none;background:transparent;box-shadow:none}.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"] }]
+                    ], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\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$ | 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]=\"'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\"\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.31.0\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:var(--sapField_Shadow);-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:var(--sapField_Shadow);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:var(--sapElement_Height);height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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);color:var(--fdTokenizer_Indicator_Color);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{-webkit-box-shadow:none;background:transparent;box-shadow:none}.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"] }]
         }], ctorParameters: function () { return [{ type: i1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: i0.Renderer2 }, { type: Document, decorators: [{

package/fesm2022/fundamental-ngx-core-toolbar.mjs

@@ -341,7 +341,7 @@ class ToolbarComponent {
             contentDensityObserverProviders({
                 defaultContentDensity: ContentDensityMode.COMPACT
             })
-        ], queries: [{ propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(function () { return ToolbarItem; }) }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true }], ngImport: i0, template: "<h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\" [id]=\"titleId\" #titleElement>{{ title }}</h4>\n\n<ng-content></ng-content>\n\n<ng-container *ngIf=\"overflownItems.length > 0\">\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n    <fd-toolbar-separator></fd-toolbar-separator>\n    <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n        <fd-popover-control>\n            <button\n                fd-button\n                title=\"More\"\n                aria-label=\"More\"\n                aria-haspopup=\"true\"\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n            ></button>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                <ng-container *ngFor=\"let overflowedItem of overflownItems\">\n                    <fdk-dynamic-portal\n                        [domElement]=\"overflowedItem.element\"\n                        [style.display]=\"overflowedItem.priority === 'disappear' ? 'none' : 'flex'\"\n                        [style.flex-direction]=\"overflowedItem.priority === 'disappear' ? undefined : 'column'\"\n                    >\n                    </fdk-dynamic-portal>\n                </ng-container>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2\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-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border:.0625rem solid var(--sapGroup_TitleBorderColor);-webkit-box-sizing:border-box;align-items:center;background-color:var(--fdToolbar_Background);border:0;border-bottom:var(--fdToolbar_Border);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;height:var(--fdToolbar_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-left:var(--fdToolbar_Padding_Left);padding-right:var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar[dir=rtl],[dir=rtl] .fd-toolbar{padding-left:var(--fdToolbar_Padding_Right);padding-right:var(--fdToolbar_Padding_Left)}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdToolbar_Separator_Margin);padding:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem 0;--fdToolbar_Overflow_Padding:.25rem .5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding:0;padding:var(--fdToolbar_Overflow_Padding)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding:.1875rem .375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin:.625rem 0 .125rem}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin:.375rem 0}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--clear{--fdToolbar_Border:none}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem;padding-bottom:.375rem;padding-top:.375rem}.fd-toolbar--info{--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background);color:var(--fdToolbar_Info_Color);position:relative}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor);outline:none;position:relative}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(function () { return ToolbarItem; }) }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true }], ngImport: i0, template: "<h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\" [id]=\"titleId\" #titleElement>{{ title }}</h4>\n\n<ng-content></ng-content>\n\n<ng-container *ngIf=\"overflownItems.length > 0\">\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n    <fd-toolbar-separator></fd-toolbar-separator>\n    <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n        <fd-popover-control>\n            <button\n                fd-button\n                title=\"More\"\n                aria-label=\"More\"\n                aria-haspopup=\"true\"\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n            ></button>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                <ng-container *ngFor=\"let overflowedItem of overflownItems\">\n                    <fdk-dynamic-portal\n                        [domElement]=\"overflowedItem.element\"\n                        [style.display]=\"overflowedItem.priority === 'disappear' ? 'none' : 'flex'\"\n                        [style.flex-direction]=\"overflowedItem.priority === 'disappear' ? undefined : 'column'\"\n                    >\n                    </fdk-dynamic-portal>\n                </ng-container>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.31.0\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-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border:.0625rem solid var(--sapGroup_TitleBorderColor);-webkit-box-sizing:border-box;align-items:center;background-color:var(--fdToolbar_Background);border:0;border-bottom:var(--fdToolbar_Border);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;height:var(--fdToolbar_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-left:var(--fdToolbar_Padding_Left);padding-right:var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar[dir=rtl],[dir=rtl] .fd-toolbar{padding-left:var(--fdToolbar_Padding_Right);padding-right:var(--fdToolbar_Padding_Left)}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdToolbar_Separator_Margin);padding:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem 0;--fdToolbar_Overflow_Padding:.25rem .5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding:0;padding:var(--fdToolbar_Overflow_Padding)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding:.1875rem .375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin:.625rem 0 .125rem}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin:.375rem 0}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--clear{--fdToolbar_Border:none}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem;padding-bottom:.375rem;padding-top:.375rem}.fd-toolbar--info{--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background);color:var(--fdToolbar_Info_Color);position:relative}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor);outline:none;position:relative}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -363,7 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         ButtonModule,
                         NgFor,
                         DynamicPortalComponent
-                    ], template: "<h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\" [id]=\"titleId\" #titleElement>{{ title }}</h4>\n\n<ng-content></ng-content>\n\n<ng-container *ngIf=\"overflownItems.length > 0\">\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n    <fd-toolbar-separator></fd-toolbar-separator>\n    <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n        <fd-popover-control>\n            <button\n                fd-button\n                title=\"More\"\n                aria-label=\"More\"\n                aria-haspopup=\"true\"\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n            ></button>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                <ng-container *ngFor=\"let overflowedItem of overflownItems\">\n                    <fdk-dynamic-portal\n                        [domElement]=\"overflowedItem.element\"\n                        [style.display]=\"overflowedItem.priority === 'disappear' ? 'none' : 'flex'\"\n                        [style.flex-direction]=\"overflowedItem.priority === 'disappear' ? undefined : 'column'\"\n                    >\n                    </fdk-dynamic-portal>\n                </ng-container>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2\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-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border:.0625rem solid var(--sapGroup_TitleBorderColor);-webkit-box-sizing:border-box;align-items:center;background-color:var(--fdToolbar_Background);border:0;border-bottom:var(--fdToolbar_Border);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;height:var(--fdToolbar_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-left:var(--fdToolbar_Padding_Left);padding-right:var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar[dir=rtl],[dir=rtl] .fd-toolbar{padding-left:var(--fdToolbar_Padding_Right);padding-right:var(--fdToolbar_Padding_Left)}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdToolbar_Separator_Margin);padding:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem 0;--fdToolbar_Overflow_Padding:.25rem .5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding:0;padding:var(--fdToolbar_Overflow_Padding)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding:.1875rem .375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin:.625rem 0 .125rem}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin:.375rem 0}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--clear{--fdToolbar_Border:none}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem;padding-bottom:.375rem;padding-top:.375rem}.fd-toolbar--info{--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background);color:var(--fdToolbar_Info_Color);position:relative}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor);outline:none;position:relative}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"] }]
+                    ], template: "<h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\" [id]=\"titleId\" #titleElement>{{ title }}</h4>\n\n<ng-content></ng-content>\n\n<ng-container *ngIf=\"overflownItems.length > 0\">\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n    <fd-toolbar-separator></fd-toolbar-separator>\n    <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n        <fd-popover-control>\n            <button\n                fd-button\n                title=\"More\"\n                aria-label=\"More\"\n                aria-haspopup=\"true\"\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n            ></button>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                <ng-container *ngFor=\"let overflowedItem of overflownItems\">\n                    <fdk-dynamic-portal\n                        [domElement]=\"overflowedItem.element\"\n                        [style.display]=\"overflowedItem.priority === 'disappear' ? 'none' : 'flex'\"\n                        [style.flex-direction]=\"overflowedItem.priority === 'disappear' ? undefined : 'column'\"\n                    >\n                    </fdk-dynamic-portal>\n                </ng-container>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.31.0\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-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border:.0625rem solid var(--sapGroup_TitleBorderColor);-webkit-box-sizing:border-box;align-items:center;background-color:var(--fdToolbar_Background);border:0;border-bottom:var(--fdToolbar_Border);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;height:var(--fdToolbar_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-left:var(--fdToolbar_Padding_Left);padding-right:var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar[dir=rtl],[dir=rtl] .fd-toolbar{padding-left:var(--fdToolbar_Padding_Right);padding-right:var(--fdToolbar_Padding_Left)}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdToolbar_Separator_Margin);padding:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem 0;--fdToolbar_Overflow_Padding:.25rem .5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding:0;padding:var(--fdToolbar_Overflow_Padding)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding:.1875rem .375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin:.625rem 0 .125rem}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin:.375rem 0}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--clear{--fdToolbar_Border:none}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem;padding-bottom:.375rem;padding-top:.375rem}.fd-toolbar--info{--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background);color:var(--fdToolbar_Info_Color);position:relative}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor);outline:none;position:relative}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i0.DestroyRef }, { type: i2.ResizeObserverService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {