@fundamental-ngx/core 0.61.2-rc.8 → 0.61.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.
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +2 -3
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +4 -6
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +13 -11
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +7 -5
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-calendar.mjs +31 -35
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-carousel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-combobox.mjs +3 -5
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime.mjs +13 -7
- package/fesm2022/fundamental-ngx-core-datetime.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-form.mjs +1 -1
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-info-label.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-info-label.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-inline-help.mjs +65 -59
- package/fesm2022/fundamental-ngx-core-inline-help.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-link.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-menu.mjs +1 -3
- package/fesm2022/fundamental-ngx-core-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +49 -44
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +17 -23
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +21 -22
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +16 -13
- package/fesm2022/fundamental-ngx-core-notification.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-number.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-number.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-status.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-status.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +14 -11
- package/fesm2022/fundamental-ngx-core-pagination.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-popover.mjs +6 -0
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +7 -4
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +11 -10
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +6 -7
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +6 -6
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-slider.mjs +6 -6
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-split-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-split-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-step-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-step-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tabs.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-text.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time-picker.mjs +29 -4
- package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-token.mjs +15 -12
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +3 -5
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-tree.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +3 -5
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/package.json +3 -3
- package/types/fundamental-ngx-core-breadcrumb.d.ts +5 -5
- package/types/fundamental-ngx-core-busy-indicator.d.ts +3 -3
- package/types/fundamental-ngx-core-combobox.d.ts +2 -4
- package/types/fundamental-ngx-core-datetime.d.ts +5 -1
- package/types/fundamental-ngx-core-dynamic-page.d.ts +2 -1
- package/types/fundamental-ngx-core-inline-help.d.ts +45 -24
- package/types/fundamental-ngx-core-menu.d.ts +0 -2
- package/types/fundamental-ngx-core-message-strip.d.ts +12 -3
- package/types/fundamental-ngx-core-multi-combobox.d.ts +1 -1
- package/types/fundamental-ngx-core-nested-list.d.ts +10 -10
- package/types/fundamental-ngx-core-notification.d.ts +7 -5
- package/types/fundamental-ngx-core-pagination.d.ts +4 -3
- package/types/fundamental-ngx-core-rating-indicator.d.ts +2 -3
- package/types/fundamental-ngx-core-segmented-button.d.ts +5 -3
- package/types/fundamental-ngx-core-slider.d.ts +1 -1
- package/types/fundamental-ngx-core-time-picker.d.ts +17 -1
- package/types/fundamental-ngx-core-token.d.ts +4 -4
|
@@ -6,8 +6,9 @@ import { ENTER, SPACE, DELETE, BACKSPACE, A, RIGHT_ARROW, LEFT_ARROW } from '@an
|
|
|
6
6
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
7
|
import * as i1 from '@fundamental-ngx/core/content-density';
|
|
8
8
|
import { contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
|
|
9
|
-
import { FdTranslatePipe, TranslationResolver,
|
|
10
|
-
import
|
|
9
|
+
import { FdTranslatePipe, TranslationResolver, FD_LANGUAGE } from '@fundamental-ngx/i18n';
|
|
10
|
+
import * as i3 from 'rxjs';
|
|
11
|
+
import { Subscription, fromEvent, BehaviorSubject, startWith, firstValueFrom, merge } from 'rxjs';
|
|
11
12
|
import * as i2 from '@angular/cdk/a11y';
|
|
12
13
|
import { NgTemplateOutlet } from '@angular/common';
|
|
13
14
|
import { ButtonComponent } from '@fundamental-ngx/core/button';
|
|
@@ -146,13 +147,13 @@ class TokenComponent {
|
|
|
146
147
|
this._cdRef.markForCheck();
|
|
147
148
|
}
|
|
148
149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n #tokenWrapperElement\n class=\"fd-token\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n #tokenWrapperElement\n class=\"fd-token\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"'coreToken.ariaRoleDescription' | fdTranslate\"\n (click)=\"tokenClickHandler($event)\"\n (keydown)=\"tokenKeydownHandler($event)\"\n [attr.aria-setsize]=\"_totalCount\"\n [attr.aria-posinset]=\"_itemPosition\"\n [class.fd-token__disabled]=\"disabled\"\n [class.fd-token--selected]=\"selected\"\n [class.fd-token--readonly]=\"readOnly\"\n [attr.aria-selected]=\"selected\"\n>\n <span class=\"fd-token__text no-text-select\">\n <ng-container #viewContainer></ng-container>\n </span>\n @if (!readOnly) {\n <span\n (click)=\"closeClickHandler($event)\"\n role=\"button\"\n [attr.aria-label]=\"'coreToken.deleteButtonLabel' | fdTranslate\"\n class=\"fd-token__close\"\n ></span>\n }\n</span>\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".fd-token{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding_Block:.25rem;--fdToken_Close_Padding_Inline:.5rem;--fdToken_Close_Width:1.75rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;background-color:var(--fdToken_Background_Color);border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);color:var(--fdToken_Text_Color);flex-shrink:0;font-size:var(--sapFontSize);height:var(--fdToken_Height);line-height:1.5rem;max-width:100%;min-width:var(--fdToken_Min_Width);padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Close_Color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);line-height:normal;line-height:1.25rem;margin-block:0;margin-inline:0;min-width:var(--fdToken_Close_Width);padding-block:0;padding-block:var(--fdToken_Close_Padding_Block);padding-inline:0;padding-inline:var(--fdToken_Close_Padding_Inline);width:var(--fdToken_Close_Width);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fd-token__close:after,.fd-token__close:before{-webkit-box-sizing:inherit;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{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-token.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius)}.fd-token[class*=-compact],.fd-token[class*=-condensed],[class*=-compact] .fd-token:not([class*=-cozy]),[class*=-condensed] .fd-token:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding_Block:.125rem;--fdToken_Close_Padding_Inline:.25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.fd-token[class*=-compact].is-focus,.fd-token[class*=-compact]:focus,.fd-token[class*=-condensed].is-focus,.fd-token[class*=-condensed]:focus,[class*=-compact] .fd-token:not([class*=-cozy]).is-focus,[class*=-compact] .fd-token:not([class*=-cozy]):focus,[class*=-condensed] .fd-token:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-token:not([class*=-cozy]):focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-offset:var(--fdToken_Outline_Offset_Compact)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--readonly[class*=-compact],.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{background-color:var(--sapButton_Selected_Hover_Background);--fdToken_Border:var(--fdToken_Selected_Border)}.fd-token--selected.is-focus,.fd-token--selected:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-color:var(--fdToken_Border_Color_Selected_Focus);--fdToken_Border:var(--fdToken_Selected_Border)}fd-token{display:inline-flex}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/token.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
150
151
|
}
|
|
151
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenComponent, decorators: [{
|
|
152
153
|
type: Component,
|
|
153
154
|
args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], host: {
|
|
154
155
|
'[style.max-width.%]': '100'
|
|
155
|
-
}, imports: [FdTranslatePipe], template: "<span\n #tokenWrapperElement\n class=\"fd-token\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"
|
|
156
|
+
}, imports: [FdTranslatePipe], template: "<span\n #tokenWrapperElement\n class=\"fd-token\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"'coreToken.ariaRoleDescription' | fdTranslate\"\n (click)=\"tokenClickHandler($event)\"\n (keydown)=\"tokenKeydownHandler($event)\"\n [attr.aria-setsize]=\"_totalCount\"\n [attr.aria-posinset]=\"_itemPosition\"\n [class.fd-token__disabled]=\"disabled\"\n [class.fd-token--selected]=\"selected\"\n [class.fd-token--readonly]=\"readOnly\"\n [attr.aria-selected]=\"selected\"\n>\n <span class=\"fd-token__text no-text-select\">\n <ng-container #viewContainer></ng-container>\n </span>\n @if (!readOnly) {\n <span\n (click)=\"closeClickHandler($event)\"\n role=\"button\"\n [attr.aria-label]=\"'coreToken.deleteButtonLabel' | fdTranslate\"\n class=\"fd-token__close\"\n ></span>\n }\n</span>\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".fd-token{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding_Block:.25rem;--fdToken_Close_Padding_Inline:.5rem;--fdToken_Close_Width:1.75rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;background-color:var(--fdToken_Background_Color);border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);color:var(--fdToken_Text_Color);flex-shrink:0;font-size:var(--sapFontSize);height:var(--fdToken_Height);line-height:1.5rem;max-width:100%;min-width:var(--fdToken_Min_Width);padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Close_Color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);line-height:normal;line-height:1.25rem;margin-block:0;margin-inline:0;min-width:var(--fdToken_Close_Width);padding-block:0;padding-block:var(--fdToken_Close_Padding_Block);padding-inline:0;padding-inline:var(--fdToken_Close_Padding_Inline);width:var(--fdToken_Close_Width);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fd-token__close:after,.fd-token__close:before{-webkit-box-sizing:inherit;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{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-token.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius)}.fd-token[class*=-compact],.fd-token[class*=-condensed],[class*=-compact] .fd-token:not([class*=-cozy]),[class*=-condensed] .fd-token:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding_Block:.125rem;--fdToken_Close_Padding_Inline:.25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.fd-token[class*=-compact].is-focus,.fd-token[class*=-compact]:focus,.fd-token[class*=-condensed].is-focus,.fd-token[class*=-condensed]:focus,[class*=-compact] .fd-token:not([class*=-cozy]).is-focus,[class*=-compact] .fd-token:not([class*=-cozy]):focus,[class*=-condensed] .fd-token:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-token:not([class*=-cozy]):focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-offset:var(--fdToken_Outline_Offset_Compact)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--readonly[class*=-compact],.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);background-color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{background-color:var(--sapButton_Selected_Hover_Background);--fdToken_Border:var(--fdToken_Selected_Border)}.fd-token--selected.is-focus,.fd-token--selected:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-color:var(--fdToken_Border_Color_Selected_Focus);--fdToken_Border:var(--fdToken_Selected_Border)}fd-token{display:inline-flex}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/token.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
156
157
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }], propDecorators: { disabled: [{
|
|
157
158
|
type: Input
|
|
158
159
|
}], tokenWrapperElement: [{
|
|
@@ -190,13 +191,14 @@ class TokenizerComponent {
|
|
|
190
191
|
return this.tokenList.filter((token) => token.elementRef.nativeElement.style.display === 'none');
|
|
191
192
|
}
|
|
192
193
|
/** @hidden */
|
|
193
|
-
constructor(_contentDensityObserver, elementRef, _cdRef, _renderer, _document, _liveAnnouncer) {
|
|
194
|
+
constructor(_contentDensityObserver, elementRef, _cdRef, _renderer, _document, _liveAnnouncer, _language$) {
|
|
194
195
|
this._contentDensityObserver = _contentDensityObserver;
|
|
195
196
|
this.elementRef = elementRef;
|
|
196
197
|
this._cdRef = _cdRef;
|
|
197
198
|
this._renderer = _renderer;
|
|
198
199
|
this._document = _document;
|
|
199
200
|
this._liveAnnouncer = _liveAnnouncer;
|
|
201
|
+
this._language$ = _language$;
|
|
200
202
|
/** Disables possibility to remove tokens by keyboard */
|
|
201
203
|
this.disableKeyboardDeletion = false;
|
|
202
204
|
/** Whether to use cozy visuals but compact collapsing behavior. */
|
|
@@ -251,8 +253,6 @@ class TokenizerComponent {
|
|
|
251
253
|
this._tokenElementFocused = new BehaviorSubject(false);
|
|
252
254
|
/** @hidden */
|
|
253
255
|
this._inputElementFocused = false;
|
|
254
|
-
/** @hidden */
|
|
255
|
-
this._langSignal = inject(FD_LANGUAGE_SIGNAL);
|
|
256
256
|
this._eventListeners.push(this._renderer.listen('window', 'click', (e) => {
|
|
257
257
|
if (this.elementRef.nativeElement.contains(e.target) === false) {
|
|
258
258
|
this.tokenList.forEach((token) => {
|
|
@@ -665,7 +665,7 @@ class TokenizerComponent {
|
|
|
665
665
|
}
|
|
666
666
|
/** @hidden */
|
|
667
667
|
async _makeTokenizerFocusCountAnnouncement() {
|
|
668
|
-
const lang = this.
|
|
668
|
+
const lang = await firstValueFrom(this._language$);
|
|
669
669
|
const message = this._translationResolver.resolve(lang, 'coreMultiInput.tokensCountText', {
|
|
670
670
|
length: this.tokenList.length ? this.tokenList.length : 0
|
|
671
671
|
});
|
|
@@ -817,8 +817,8 @@ class TokenizerComponent {
|
|
|
817
817
|
this._showMoreElement = showMoreElement;
|
|
818
818
|
this._cdRef.detectChanges();
|
|
819
819
|
}
|
|
820
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i2.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
821
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenizerComponent, isStandalone: true, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", glyphFont: "glyphFont", moreTerm: "moreTerm", open: "open", showOverflowPopover: "showOverflowPopover" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(() => FormControlComponent), descendants: true, read: ElementRef }, { propertyName: "tokenList", predicate: i0.forwardRef(() => TokenComponent) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElementSpan"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n <div\n [attr.aria-hidden]=\"tokenList.length === 0\"\n role=\"listbox\"\n [attr.aria-label]=\"('coreTokenizer.tokenizerLabel' | fdTranslate)()\"\n [style.width]=\"_tokensContainerWidth\"\n >\n <ng-content select=\"fd-token\"></ng-content>\n </div>\n @if (showOverflowPopover && (_contentDensityObserver.isCompactSignal() || compactCollapse)) {\n <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n } @else {\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount })() }}\n }\n </span>\n }\n }\n <ng-content select=\"[fd-form-control]\"></ng-content>\n </div>\n @if (glyph) {\n <span fd-input-group-addon #inputGroupAddOn [button]=\"true\" placement=\"after\">\n <button\n fd-button\n class=\"fd-tokenizer-addon\"\n fdType=\"transparent\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n type=\"button\"\n ></button>\n </span>\n }\n</div>\n<ng-template #tokensOverflow>\n <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"moreElement\"></ng-template>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list class=\"fd-tokenizer__overflow-list\">\n @for (token of _hiddenTokens; track token) {\n <li fd-list-item class=\"fd-tokenizer__overflow-list-item\">\n <ng-container #viewContainer></ng-container>\n @if (!token.readOnly) {\n <span\n class=\"fd-token__close\"\n role=\"button\"\n [attr.aria-label]=\"('coreToken.deleteButtonLabel' | fdTranslate)()\"\n (click)=\"token.closeClickHandler($event)\"\n ></span>\n }\n </li>\n }\n </ul>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #moreElement>\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount })() }}\n }\n </span>\n }\n</ng-template>\n", styles: [".fd-tokenizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle,var(--sapField_BackgroundStyle));background-color:var(--sapField_Background,var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);margin-block:0;margin-inline:0;min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:2.75rem;outline:none;overflow:hidden;padding-block:0;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);padding-inline:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tokenizer:after,.fd-tokenizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-tokenizer::-webkit-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-tokenizer::-moz-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-tokenizer:-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-tokenizer::-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{background:var(--sapField_Hover_BackgroundStyle,var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background,var(--sapField_Focus_Background));outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;float:right;height:100%;overflow:hidden;padding-block:0;padding-inline:var(--fdTokenizer_Inner_Padding,.3125rem);scrollbar-width:none;white-space:nowrap;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{-webkit-margin-end:.3125rem;margin-inline-end:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer__indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdTokenizer_Indicator_Color);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent;-webkit-box-shadow:none;box-shadow:none;height:100%;min-height:100%}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding-block:0;padding-inline:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{border:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:focus,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{border:none;-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.0625rem;z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){height:1.625rem;min-height:1.625rem;--fdTokenizer_Inner_Padding:.25rem;--fdInput_Field_Compact_Min_Width:2rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{-webkit-margin-end:.25rem;margin-inline-end:.25rem;max-width:calc(100% - 2.25rem)}.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]{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;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{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:normal;overflow-x:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n/*! Bundled license information:\n\nfundamental-styles/dist/tokenizer.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
820
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i2.LiveAnnouncer }, { token: FD_LANGUAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
821
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenizerComponent, isStandalone: true, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", glyphFont: "glyphFont", moreTerm: "moreTerm", open: "open", showOverflowPopover: "showOverflowPopover" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(() => FormControlComponent), descendants: true, read: ElementRef }, { propertyName: "tokenList", predicate: i0.forwardRef(() => TokenComponent) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElementSpan"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n <div\n [attr.aria-hidden]=\"tokenList.length === 0\"\n role=\"listbox\"\n [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\n [style.width]=\"_tokensContainerWidth\"\n >\n <ng-content select=\"fd-token\"></ng-content>\n </div>\n @if (showOverflowPopover && (_contentDensityObserver.isCompactSignal() || compactCollapse)) {\n <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n } @else {\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length }\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n }\n </span>\n }\n }\n <ng-content select=\"[fd-form-control]\"></ng-content>\n </div>\n @if (glyph) {\n <span fd-input-group-addon #inputGroupAddOn [button]=\"true\" placement=\"after\">\n <button\n fd-button\n class=\"fd-tokenizer-addon\"\n fdType=\"transparent\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n type=\"button\"\n ></button>\n </span>\n }\n</div>\n<ng-template #tokensOverflow>\n <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"moreElement\"></ng-template>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list class=\"fd-tokenizer__overflow-list\">\n @for (token of _hiddenTokens; track token) {\n <li fd-list-item class=\"fd-tokenizer__overflow-list-item\">\n <ng-container #viewContainer></ng-container>\n @if (!token.readOnly) {\n <span\n class=\"fd-token__close\"\n role=\"button\"\n [attr.aria-label]=\"'coreToken.deleteButtonLabel' | fdTranslate\"\n (click)=\"token.closeClickHandler($event)\"\n ></span>\n }\n </li>\n }\n </ul>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #moreElement>\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n }\n </span>\n }\n</ng-template>\n", styles: [".fd-tokenizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle,var(--sapField_BackgroundStyle));background-color:var(--sapField_Background,var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);margin-block:0;margin-inline:0;min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:2.75rem;outline:none;overflow:hidden;padding-block:0;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);padding-inline:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tokenizer:after,.fd-tokenizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-tokenizer::-webkit-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-tokenizer::-moz-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-tokenizer:-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-tokenizer::-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{background:var(--sapField_Hover_BackgroundStyle,var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background,var(--sapField_Focus_Background));outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;float:right;height:100%;overflow:hidden;padding-block:0;padding-inline:var(--fdTokenizer_Inner_Padding,.3125rem);scrollbar-width:none;white-space:nowrap;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{-webkit-margin-end:.3125rem;margin-inline-end:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer__indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdTokenizer_Indicator_Color);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent;-webkit-box-shadow:none;box-shadow:none;height:100%;min-height:100%}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding-block:0;padding-inline:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{border:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:focus,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{border:none;-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.0625rem;z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){height:1.625rem;min-height:1.625rem;--fdTokenizer_Inner_Padding:.25rem;--fdInput_Field_Compact_Min_Width:2rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{-webkit-margin-end:.25rem;margin-inline-end:.25rem;max-width:calc(100% - 2.25rem)}.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]{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;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{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:normal;overflow-x:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n/*! Bundled license information:\n\nfundamental-styles/dist/tokenizer.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
822
822
|
}
|
|
823
823
|
__decorate([
|
|
824
824
|
applyCssClass,
|
|
@@ -838,11 +838,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
838
838
|
ListComponent,
|
|
839
839
|
ListItemComponent,
|
|
840
840
|
FdTranslatePipe
|
|
841
|
-
], template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n <div\n [attr.aria-hidden]=\"tokenList.length === 0\"\n role=\"listbox\"\n [attr.aria-label]=\"('coreTokenizer.tokenizerLabel' | fdTranslate)()\"\n [style.width]=\"_tokensContainerWidth\"\n >\n <ng-content select=\"fd-token\"></ng-content>\n </div>\n @if (showOverflowPopover && (_contentDensityObserver.isCompactSignal() || compactCollapse)) {\n <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n } @else {\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount })() }}\n }\n </span>\n }\n }\n <ng-content select=\"[fd-form-control]\"></ng-content>\n </div>\n @if (glyph) {\n <span fd-input-group-addon #inputGroupAddOn [button]=\"true\" placement=\"after\">\n <button\n fd-button\n class=\"fd-tokenizer-addon\"\n fdType=\"transparent\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n type=\"button\"\n ></button>\n </span>\n }\n</div>\n<ng-template #tokensOverflow>\n <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"moreElement\"></ng-template>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list class=\"fd-tokenizer__overflow-list\">\n @for (token of _hiddenTokens; track token) {\n <li fd-list-item class=\"fd-tokenizer__overflow-list-item\">\n <ng-container #viewContainer></ng-container>\n @if (!token.readOnly) {\n <span\n class=\"fd-token__close\"\n role=\"button\"\n [attr.aria-label]=\"('coreToken.deleteButtonLabel' | fdTranslate)()\"\n (click)=\"token.closeClickHandler($event)\"\n ></span>\n }\n </li>\n }\n </ul>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #moreElement>\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount })() }}\n }\n </span>\n }\n</ng-template>\n", styles: [".fd-tokenizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle,var(--sapField_BackgroundStyle));background-color:var(--sapField_Background,var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);margin-block:0;margin-inline:0;min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:2.75rem;outline:none;overflow:hidden;padding-block:0;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);padding-inline:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tokenizer:after,.fd-tokenizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-tokenizer::-webkit-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-tokenizer::-moz-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-tokenizer:-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-tokenizer::-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{background:var(--sapField_Hover_BackgroundStyle,var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background,var(--sapField_Focus_Background));outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;float:right;height:100%;overflow:hidden;padding-block:0;padding-inline:var(--fdTokenizer_Inner_Padding,.3125rem);scrollbar-width:none;white-space:nowrap;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{-webkit-margin-end:.3125rem;margin-inline-end:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer__indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdTokenizer_Indicator_Color);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent;-webkit-box-shadow:none;box-shadow:none;height:100%;min-height:100%}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding-block:0;padding-inline:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{border:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:focus,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{border:none;-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.0625rem;z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){height:1.625rem;min-height:1.625rem;--fdTokenizer_Inner_Padding:.25rem;--fdInput_Field_Compact_Min_Width:2rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{-webkit-margin-end:.25rem;margin-inline-end:.25rem;max-width:calc(100% - 2.25rem)}.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]{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;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{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:normal;overflow-x:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n/*! Bundled license information:\n\nfundamental-styles/dist/tokenizer.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
841
|
+
], template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n <div\n [attr.aria-hidden]=\"tokenList.length === 0\"\n role=\"listbox\"\n [attr.aria-label]=\"'coreTokenizer.tokenizerLabel' | fdTranslate\"\n [style.width]=\"_tokensContainerWidth\"\n >\n <ng-content select=\"fd-token\"></ng-content>\n </div>\n @if (showOverflowPopover && (_contentDensityObserver.isCompactSignal() || compactCollapse)) {\n <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n } @else {\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length }\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n }\n </span>\n }\n }\n <ng-content select=\"[fd-form-control]\"></ng-content>\n </div>\n @if (glyph) {\n <span fd-input-group-addon #inputGroupAddOn [button]=\"true\" placement=\"after\">\n <button\n fd-button\n class=\"fd-tokenizer-addon\"\n fdType=\"transparent\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n type=\"button\"\n ></button>\n </span>\n }\n</div>\n<ng-template #tokensOverflow>\n <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"moreElement\"></ng-template>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list class=\"fd-tokenizer__overflow-list\">\n @for (token of _hiddenTokens; track token) {\n <li fd-list-item class=\"fd-tokenizer__overflow-list-item\">\n <ng-container #viewContainer></ng-container>\n @if (!token.readOnly) {\n <span\n class=\"fd-token__close\"\n role=\"button\"\n [attr.aria-label]=\"'coreToken.deleteButtonLabel' | fdTranslate\"\n (click)=\"token.closeClickHandler($event)\"\n ></span>\n }\n </li>\n }\n </ul>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #moreElement>\n @if (_showMoreElement && _hiddenTokens.length > 0) {\n <span (click)=\"moreClicked()\" #moreElementSpan class=\"fd-tokenizer-more\" role=\"button\" tabindex=\"-1\">\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length } }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{ 'coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount } }}\n }\n </span>\n }\n</ng-template>\n", styles: [".fd-tokenizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle,var(--sapField_BackgroundStyle));background-color:var(--sapField_Background,var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);margin-block:0;margin-inline:0;min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:2.75rem;outline:none;overflow:hidden;padding-block:0;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);padding-inline:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tokenizer:after,.fd-tokenizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-tokenizer::-webkit-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-tokenizer::-moz-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-tokenizer:-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-tokenizer::-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{background:var(--sapField_Hover_BackgroundStyle,var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background,var(--sapField_Focus_Background));outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;float:right;height:100%;overflow:hidden;padding-block:0;padding-inline:var(--fdTokenizer_Inner_Padding,.3125rem);scrollbar-width:none;white-space:nowrap;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{-webkit-margin-end:.3125rem;margin-inline-end:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer__indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdTokenizer_Indicator_Color);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent;-webkit-box-shadow:none;box-shadow:none;height:100%;min-height:100%}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding-block:0;padding-inline:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{border:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:focus,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{border:none;-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.0625rem;z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){height:1.625rem;min-height:1.625rem;--fdTokenizer_Inner_Padding:.25rem;--fdInput_Field_Compact_Min_Width:2rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{-webkit-margin-end:.25rem;margin-inline-end:.25rem;max-width:calc(100% - 2.25rem)}.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]{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;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{background:none;background-color:var(transparent,transparent);-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:normal;overflow-x:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n/*! Bundled license information:\n\nfundamental-styles/dist/tokenizer.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
842
842
|
}], ctorParameters: () => [{ type: i1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
843
843
|
type: Inject,
|
|
844
844
|
args: [DOCUMENT]
|
|
845
|
-
}] }, { type: i2.LiveAnnouncer }
|
|
845
|
+
}] }, { type: i2.LiveAnnouncer }, { type: i3.Observable, decorators: [{
|
|
846
|
+
type: Inject,
|
|
847
|
+
args: [FD_LANGUAGE]
|
|
848
|
+
}] }], propDecorators: { class: [{
|
|
846
849
|
type: Input
|
|
847
850
|
}], disableKeyboardDeletion: [{
|
|
848
851
|
type: Input
|