npm - @fundamental-ngx/core - Versions diffs - 0.38.2-rc.8 → 0.38.2 - Mend

@fundamental-ngx/core 0.38.2-rc.8 → 0.38.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/esm2020/title/title.component.mjs CHANGED Viewed

@@ -45,13 +45,13 @@ export class TitleComponent extends TitleToken {
     }
 }
 TitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TitleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: { headerSize: "headerSize", wrap: "wrap" }, host: { properties: { "class.fd-title--wrap": "wrap" }, classAttribute: "fd-title" }, providers: [{ provide: TitleToken, useExisting: TitleComponent }], exportAs: ["fd-title"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 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-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:1rem;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-title:after,.fd-title:before{box-sizing:inherit;font-size:inherit}.fd-title--h1{font-size:var(--sapFontHeader1Size)}.fd-title--h2{font-size:var(--sapFontHeader2Size)}.fd-title--h3{font-size:var(--sapFontHeader3Size)}.fd-title--h4{font-size:var(--sapFontHeader4Size)}.fd-title--h5{font-size:var(--sapFontHeader5Size)}.fd-title--h6{font-size:var(--sapFontHeader6Size)}.fd-title--wrap{overflow:auto;text-overflow:clip;white-space:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: { headerSize: "headerSize", wrap: "wrap" }, host: { properties: { "class.fd-title--wrap": "wrap" }, classAttribute: "fd-title" }, providers: [{ provide: TitleToken, useExisting: TitleComponent }], exportAs: ["fd-title"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 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-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:1rem;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-title:after,.fd-title:before{box-sizing:inherit;font-size:inherit}.fd-title--h1{font-size:var(--sapFontHeader1Size)}.fd-title--h2{font-size:var(--sapFontHeader2Size)}.fd-title--h3{font-size:var(--sapFontHeader3Size)}.fd-title--h4{font-size:var(--sapFontHeader4Size)}.fd-title--h5{font-size:var(--sapFontHeader5Size)}.fd-title--h6{font-size:var(--sapFontHeader6Size)}.fd-title--wrap{overflow:auto;text-overflow:clip;white-space:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]', exportAs: 'fd-title', template: '<ng-content></ng-content>', host: {
                         class: 'fd-title',
                         '[class.fd-title--wrap]': 'wrap'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: TitleToken, useExisting: TitleComponent }], styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 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-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:1rem;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-title:after,.fd-title:before{box-sizing:inherit;font-size:inherit}.fd-title--h1{font-size:var(--sapFontHeader1Size)}.fd-title--h2{font-size:var(--sapFontHeader2Size)}.fd-title--h3{font-size:var(--sapFontHeader3Size)}.fd-title--h4{font-size:var(--sapFontHeader4Size)}.fd-title--h5{font-size:var(--sapFontHeader5Size)}.fd-title--h6{font-size:var(--sapFontHeader6Size)}.fd-title--wrap{overflow:auto;text-overflow:clip;white-space:normal}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: TitleToken, useExisting: TitleComponent }], styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 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-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:1rem;font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-title:after,.fd-title:before{box-sizing:inherit;font-size:inherit}.fd-title--h1{font-size:var(--sapFontHeader1Size)}.fd-title--h2{font-size:var(--sapFontHeader2Size)}.fd-title--h3{font-size:var(--sapFontHeader3Size)}.fd-title--h4{font-size:var(--sapFontHeader4Size)}.fd-title--h5{font-size:var(--sapFontHeader5Size)}.fd-title--h6{font-size:var(--sapFontHeader6Size)}.fd-title--wrap{overflow:auto;text-overflow:clip;white-space:normal}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { headerSize: [{
                 type: Input
             }], wrap: [{

package/esm2020/token/token.component.mjs CHANGED Viewed

@@ -81,10 +81,10 @@ export class TokenComponent {
     }
 }
 TokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TokenComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
-TokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TokenComponent, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly", deleteButtonLabel: "deleteButtonLabel", ariaRoleDescription: "ariaRoleDescription" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown" }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TokenComponent, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly", deleteButtonLabel: "deleteButtonLabel", ariaRoleDescription: "ariaRoleDescription" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown" }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TokenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }]; }, propDecorators: { disabled: [{
                 type: Input
             }], tokenWrapperElement: [{

package/esm2020/token/tokenizer.component.mjs CHANGED Viewed

@@ -545,7 +545,7 @@ export class TokenizerComponent {
     }
 }
 TokenizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.RtlService, optional: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TokenizerComponent, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", moreTerm: "moreTerm", open: "open" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return FormControlComponent; }), descendants: true }, { propertyName: "tokenList", predicate: i0.forwardRef(function () { return TokenComponent; }) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElement"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width: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);background-color: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);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color: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:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TokenizerComponent, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", moreTerm: "moreTerm", open: "open" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return FormControlComponent; }), descendants: true }, { propertyName: "tokenList", predicate: i0.forwardRef(function () { return TokenComponent; }) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElement"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width: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);background-color: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);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color: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:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -554,7 +554,7 @@ __decorate([
 ], TokenizerComponent.prototype, "buildComponentCssClass", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TokenizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width: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);background-color: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);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color: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:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel || ('coreToken.deleteButtonLabel' | fdTranslate)\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\">\n            {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n        </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width: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);background-color: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);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact{height:1.625rem;min-height:1.625rem}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color: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:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: i0.Renderer2 }]; }, propDecorators: { class: [{

package/esm2020/toolbar/toolbar.component.mjs CHANGED Viewed

@@ -400,7 +400,7 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         contentDensityObserverProviders({
             defaultContentDensity: ContentDensityMode.COMPACT
         })
-    ], queries: [{ propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(function () { return ToolbarItemDirective; }) }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "overflowBody", first: true, predicate: ["overflowBody"], descendants: true }, { propertyName: "overflowSpacer", first: true, predicate: ["overflowSpacer"], descendants: true }], ngImport: i0, template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\">{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"shouldOverflow\">\n        <span #overflowSpacer class=\"fd-toolbar__spacer\"></span>\n\n        <span class=\"fd-toolbar__separator\" *ngIf=\"overflowVisibility | async\"></span>\n\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    *ngIf=\"overflowVisibility | async\"\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\" #overflowBody></div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 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>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.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--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info: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--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.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:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;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:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.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__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:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(function () { return ToolbarItemDirective; }) }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "overflowBody", first: true, predicate: ["overflowBody"], descendants: true }, { propertyName: "overflowSpacer", first: true, predicate: ["overflowSpacer"], descendants: true }], ngImport: i0, template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\">{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"shouldOverflow\">\n        <span #overflowSpacer class=\"fd-toolbar__spacer\"></span>\n\n        <span class=\"fd-toolbar__separator\" *ngIf=\"overflowVisibility | async\"></span>\n\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    *ngIf=\"overflowVisibility | async\"\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\" #overflowBody></div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 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>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.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--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info: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--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.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:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;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:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.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__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:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -413,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         contentDensityObserverProviders({
                             defaultContentDensity: ContentDensityMode.COMPACT
                         })
-                    ], template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\">{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"shouldOverflow\">\n        <span #overflowSpacer class=\"fd-toolbar__spacer\"></span>\n\n        <span class=\"fd-toolbar__separator\" *ngIf=\"overflowVisibility | async\"></span>\n\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    *ngIf=\"overflowVisibility | async\"\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\" #overflowBody></div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\n * Copyright (c) 2022 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>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.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--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info: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--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.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:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;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:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.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__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:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}\n"] }]
+                    ], template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\">{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"shouldOverflow\">\n        <span #overflowSpacer class=\"fd-toolbar__spacer\"></span>\n\n        <span class=\"fd-toolbar__separator\" *ngIf=\"overflowVisibility | async\"></span>\n\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    *ngIf=\"overflowVisibility | async\"\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\" #overflowBody></div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\n * Copyright (c) 2022 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>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.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--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info: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--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.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:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;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:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.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__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:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1.ContentDensityObserver }, { type: undefined, decorators: [{
                     type: Optional
                 }, {