import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { inject, ElementRef, Input, Directive, viewChild, ViewContainerRef, output, input, booleanAttribute, model, signal, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, linkedSignal, computed, DOCUMENT, HostListener, Output, ViewChildren, ViewChild, ContentChild, forwardRef, ContentChildren, Inject, NgModule } from '@angular/core';
import { applyCssClass, KeyUtil, RtlService, resizeObservable } from '@fundamental-ngx/cdk/utils';
import { ENTER, SPACE, DELETE, BACKSPACE, A, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@fundamental-ngx/core/content-density';
import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
import { FdTranslatePipe, TranslationResolver, FD_LANGUAGE_SIGNAL } from '@fundamental-ngx/i18n';
import { fromEvent, BehaviorSubject, startWith, Subscription, merge } from 'rxjs';
import * as i2 from '@angular/cdk/a11y';
import { NgTemplateOutlet } from '@angular/common';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { FormControlComponent } from '@fundamental-ngx/core/form';
import { FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
import { InputGroupAddOnDirective } from '@fundamental-ngx/core/input-group';
import { ListComponent, ListItemComponent } from '@fundamental-ngx/core/list';
import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
import { debounceTime, filter, map } from 'rxjs/operators';

class TokenizerInputDirective {
    constructor() {
        /** @hidden */
        this.elementRef = inject(ElementRef);
    }
    /** @hidden
     * CssClassBuilder interface implementation
     * function must return single string
     * function is responsible for order which css classes are applied
     */
    buildComponentCssClass() {
        return ['fd-tokenizer__input', this.class];
    }
    /** @hidden */
    ngOnInit() {
        this.buildComponentCssClass();
    }
    /** @hidden */
    ngOnChanges() {
        this.buildComponentCssClass();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenizerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TokenizerInputDirective, isStandalone: true, selector: "[fdTokenizerInput], [fd-tokenizer-input]", inputs: { class: "class" }, usesOnChanges: true, ngImport: i0 }); }
}
__decorate([
    applyCssClass,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", Array)
], TokenizerInputDirective.prototype, "buildComponentCssClass", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenizerInputDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTokenizerInput], [fd-tokenizer-input]',
                    standalone: true
                }]
        }], propDecorators: { class: [{
                type: Input
            }], buildComponentCssClass: [] } });

/**
 * A token is used to represent contextualizing information.
 * They can be useful to show applied filters, selected values for form fields or object metadata.
 */
class TokenComponent {
    constructor() {
        /** @hidden */
        this.tokenWrapperElement = viewChild('tokenWrapperElement', ...(ngDevMode ? [{ debugName: "tokenWrapperElement" }] : []));
        /** @hidden */
        this._content = viewChild('content', ...(ngDevMode ? [{ debugName: "_content" }] : []));
        /** @hidden */
        this._viewContainer = viewChild('viewContainer', { ...(ngDevMode ? { debugName: "_viewContainer" } : {}), read: ViewContainerRef });
        /** Emitted when the *x* icon is clicked. Specifically, any pseudo-element. */
        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
        this.onCloseClick = output();
        /** Emitted when token should be removed */
        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
        this.onRemove = output();
        /** Emitted when a token is clicked. */
        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
        this.onTokenClick = output();
        /** Emitted when a there's a keydown registered on the token. */
        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
        this.onTokenKeydown = output();
        /** Emitted when token element received or lost focus. */
        this.elementFocused = output();
        /** Whether the token is disabled. */
        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
        /** Whether the token is selected. Supports two-way binding via [(selected)]. */
        this.selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
        /** Whether the token is read-only. */
        this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
        /** @hidden Internal signal for total count (set by tokenizer) */
        this._totalCount = signal(undefined, ...(ngDevMode ? [{ debugName: "_totalCount" }] : []));
        /** @hidden Internal signal for item position (set by tokenizer) */
        this._itemPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemPosition" }] : []));
        /** @hidden */
        this.elementRef = inject(ElementRef);
        /** @hidden */
        this._contentDensityObserver = inject(ContentDensityObserver);
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
    }
    /** @hidden */
    ngAfterViewInit() {
        const viewContainer = this._viewContainer();
        const content = this._content();
        if (viewContainer && content) {
            viewContainer.createEmbeddedView(content);
        }
        const tokenWrapper = this.tokenWrapperElement();
        if (tokenWrapper) {
            fromEvent(tokenWrapper.nativeElement, 'focus')
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => {
                this.elementFocused.emit(true);
            });
            fromEvent(tokenWrapper.nativeElement, 'blur')
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => {
                this.elementFocused.emit(false);
            });
        }
    }
    /** @hidden */
    closeClickHandler(event) {
        if (event) {
            event.stopPropagation();
            if (!this.disabled()) {
                this.onCloseClick.emit(event);
            }
        }
    }
    /** @hidden */
    tokenClickHandler(event) {
        this.onTokenClick.emit(event);
    }
    /** @hidden */
    tokenKeydownHandler(event) {
        this.onTokenKeydown.emit(event);
        if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {
            this.onTokenClick.emit(event);
        }
    }
    /** @hidden */
    _setTotalCount(count, itemPosition) {
        this._totalCount.set(count);
        this._itemPosition.set(itemPosition);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused", selected: "selectedChange" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], 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-inline-box;display:-ms-inline-flexbox;display:inline-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);--fdToken_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);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--display{--fdToken_Text_Color:var(--sapTextColor);--fdToken_Border:none;--fdToken_Background_Color:transparent;--fdToken_Min_Width:fit-content;margin-inline:0;padding-inline:0;pointer-events:none;text-align:start}.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);--fdToken_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);--fdToken_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.41.7\n   * Copyright (c) 2026 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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], host: {
                        '[style.max-width.%]': '100'
                    }, 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-inline-box;display:-ms-inline-flexbox;display:inline-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);--fdToken_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);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--display{--fdToken_Text_Color:var(--sapTextColor);--fdToken_Border:none;--fdToken_Background_Color:transparent;--fdToken_Min_Width:fit-content;margin-inline:0;padding-inline:0;pointer-events:none;text-align:start}.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);--fdToken_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);--fdToken_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.41.7\n   * Copyright (c) 2026 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"] }]
        }], propDecorators: { tokenWrapperElement: [{ type: i0.ViewChild, args: ['tokenWrapperElement', { isSignal: true }] }], _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], _viewContainer: [{ type: i0.ViewChild, args: ['viewContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], onCloseClick: [{ type: i0.Output, args: ["onCloseClick"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onTokenClick: [{ type: i0.Output, args: ["onTokenClick"] }], onTokenKeydown: [{ type: i0.Output, args: ["onTokenKeydown"] }], elementFocused: [{ type: i0.Output, args: ["elementFocused"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });

class TokenizerComponent {
    /** @hidden */
    set content(content) {
        this.inputGroupAddonEl = content;
    }
    /** @hidden */
    get _hiddenTokens() {
        return this.tokenList.filter((token) => token.elementRef.nativeElement.style.display === 'none');
    }
    /** @hidden */
    constructor(_contentDensityObserver, elementRef, _cdRef, _renderer, _document, _liveAnnouncer) {
        this._contentDensityObserver = _contentDensityObserver;
        this.elementRef = elementRef;
        this._cdRef = _cdRef;
        this._renderer = _renderer;
        this._document = _document;
        this._liveAnnouncer = _liveAnnouncer;
        /** Disables possibility to remove tokens by keyboard */
        this.disableKeyboardDeletion = false;
        /** Whether to use cozy visuals but compact collapsing behavior. */
        this.compactCollapse = false;
        /** Whether tokenizer should have fake focus indicator, when input is focused inside*/
        this.tokenizerFocusable = true;
        /** Glyph font family */
        this.glyphFont = FD_DEFAULT_ICON_FONT_FAMILY;
        /** Word to use for when there are extra tokens. */
        this.moreTerm = 'more';
        /** @Hidden */
        this.showOverflowPopover = true;
        /** Event emitted when the search term changes. Use *$event* to access the new term. */
        this.moreClickedEvent = new EventEmitter();
        /** Number of tokens the consumer chose not to render (e.g., from count-based virtualization).
         *  When > 0, the tokenizer adds this to its own width-hidden count in the "+N more" label,
         *  and suppresses its internal overflow popover (consumer should handle "show me" via moreClickedEvent). */
        this.externalHiddenCount = input(0, ...(ngDevMode ? [{ debugName: "externalHiddenCount" }] : []));
        /** @hidden */
        this.moreTokensLeft = [];
        /** @hidden */
        this.moreTokensRight = [];
        /** @hidden */
        this.tokenListClickSubscriptions = [];
        /** @hidden */
        this.hiddenCozyTokenCount = 0;
        /** @hidden Used to add focus to tokenizer element */
        this._tokenizerHasFocus = false;
        /** @hidden */
        this._showMoreElement = linkedSignal(() => this.externalHiddenCount() > 0, ...(ngDevMode ? [{ debugName: "_showMoreElement" }] : []));
        /** Whether tokenizer's own width-collapse "+N more" span is currently rendered. */
        this.hasInternalOverflowIndicator = computed(() => this._showMoreElement() && this._hiddenTokens.length + this.externalHiddenCount() > 0, ...(ngDevMode ? [{ debugName: "hasInternalOverflowIndicator" }] : []));
        /** @hidden */
        this._tokensContainerWidth = 'auto';
        /** @hidden */
        this._tokenOutputSubscriptions = [];
        /** @hidden */
        this._translationResolver = new TranslationResolver();
        /** @hidden
         * Variable which will keep the index of the first token pressed in the tokenizer
         */
        this._firstElementInSelection = null;
        /** @hidden
         * Variable which will keep the index of the last token pressed in the tokenizer
         */
        this._lastElementInSelection = null;
        /** @hidden
         * Flag which will say if they held shift and clicked highlighting elements before or
         */
        this._directionShiftIsRight = null;
        /** An RxJS Subject that will kill the data stream upon destruction (for unsubscribing)  */
        this._destroyRef = inject(DestroyRef);
        /** @hidden */
        this._rtlService = inject(RtlService, { optional: true });
        /** @hidden */
        this._eventListeners = [];
        /** @hidden */
        this._forceAllTokensToDisplay = false;
        /** @hidden */
        this._tokenElementFocused = new BehaviorSubject(false);
        /** @hidden */
        this._inputElementFocused = false;
        /** @hidden */
        this._langSignal = inject(FD_LANGUAGE_SIGNAL);
        this._eventListeners.push(this._renderer.listen('window', 'click', (e) => {
            if (this.elementRef.nativeElement.contains(e.target) === false) {
                this.tokenList.forEach((token) => {
                    token.selected.set(false);
                });
            }
        }));
    }
    /** @hidden
     * CssClassBuilder interface implementation
     * function must return single string
     * function is responsible for order which css classes are applied
     */
    buildComponentCssClass() {
        return [this.class];
    }
    /** @hidden */
    keyDown(keyboardEvent) {
        if (KeyUtil.isKeyCode(keyboardEvent, [DELETE, BACKSPACE]) &&
            (!this._isInputFocused() || this._tokensSelected()) &&
            !this.disableKeyboardDeletion) {
            const selectedElements = this._getActiveTokens();
            const focusedTokenIndex = this._getFocusedTokenIndex();
            selectedElements.forEach((element) => element.onCloseClick.emit(undefined));
            if (selectedElements.length > 0) {
                if (KeyUtil.isKeyCode(keyboardEvent, DELETE)) {
                    this._focusInput();
                }
                else {
                    this.focusTokenElement(focusedTokenIndex - 1);
                }
            }
        }
        if (KeyUtil.isKeyCode(keyboardEvent, BACKSPACE) &&
            this._isInputFocused() &&
            !this._getInputValue() &&
            !this.disableKeyboardDeletion) {
            this.focusTokenElement(this.tokenList.length - 1);
        }
    }
    /** @hidden */
    ngAfterViewInit() {
        if (this.input?.nativeElement) {
            this._setupInputKeydownEvent();
            this._setupInputFocusEvent();
        }
        // watch for changes to the tokenList and attempt to expand/collapse tokens as needed
        this.tokenList.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
            this.tokenListChangesSubscription?.unsubscribe();
            this.tokenListChangesSubscription = new Subscription();
            this._unsubscribeTokenOutputs();
            this._resetTokens();
            this.tokenList.forEach((token) => {
                this._tokenOutputSubscriptions.push(token.onCloseClick.subscribe(() => {
                    this._resetTokens();
                }));
                this._tokenOutputSubscriptions.push(token.elementFocused.subscribe((isFocused) => {
                    this._tokenElementFocused.next(isFocused);
                }));
            });
        });
        if (!this._contentDensityObserver.isCompact && !this.compactCollapse) {
            this._handleCozyTokenCount();
        }
        this._listenElementEvents();
        this.previousElementWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
        this._listenOnResize();
    }
    /** @hidden */
    ngOnDestroy() {
        this.tokenListChangesSubscription?.unsubscribe();
        this._tokenElementFocusedSub?.unsubscribe();
        this._eventListeners.forEach((e) => e());
        this._unsubscribeClicks();
        this._unsubscribeTokenOutputs();
    }
    /** @hidden */
    ngOnInit() {
        this.buildComponentCssClass();
    }
    /** @hidden */
    ngOnChanges() {
        this.buildComponentCssClass();
    }
    /** @hidden */
    handleTokenClickSubscriptions() {
        this._unsubscribeClicks();
        this.tokenList.forEach((token, index) => {
            if (token.tokenWrapperElement()) {
                token.tokenWrapperElement().nativeElement.tabIndex = -1;
            }
            this.tokenListClickSubscriptions.push(token.onTokenClick.subscribe((event) => {
                event.stopPropagation();
                this.focusTokenElement(index);
                if (this._isControlKey(event)) {
                    this._ctrlSelected(token, index);
                }
                else if (!event.shiftKey || this._ctrlPrevious) {
                    this._basicSelected(token, index);
                }
                else if (event.shiftKey) {
                    this.resetFirstAndLastElement();
                    this._shiftSelected(index);
                }
            }));
            this.tokenListClickSubscriptions.push(token.onTokenKeydown.subscribe((event) => {
                this.handleKeyDown(event, index);
            }));
        });
    }
    /** @hidden */
    focusTokenElement(newIndex) {
        let elementToFocus;
        const tokenListArray = this.tokenList.toArray();
        if (tokenListArray[newIndex]) {
            elementToFocus = tokenListArray[newIndex].tokenWrapperElement().nativeElement;
            // element needs tabindex in order to be focused
            elementToFocus.focus();
        }
        return elementToFocus;
    }
    /** @hidden */
    onResize() {
        if (this.elementRef) {
            const elementWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
            this._resetTokens();
            this.previousElementWidth = elementWidth;
            if (!this._contentDensityObserver.isCompact && !this.compactCollapse) {
                this._handleCozyTokenCount();
            }
        }
    }
    /** @hidden */
    handleKeyDown(event, fromIndex) {
        let newIndex;
        const rtl = this._rtlService?.rtl() ?? false;
        if (KeyUtil.isKeyCode(event, SPACE) && !this._isInputFocused()) {
            const token = this.tokenList.find((_, index) => index === fromIndex);
            this.tokenList.forEach((shadowedToken) => {
                if (shadowedToken !== token) {
                    shadowedToken.selected.set(false);
                }
            });
            token && token.selected.set(!token.selected());
            event.preventDefault();
        }
        else if (KeyUtil.isKeyCode(event, ENTER)) {
            this._focusInput();
        }
        else if (this._goBackRequested(event, rtl)) {
            event.preventDefault();
            this._handleArrowLeft(fromIndex);
            newIndex = fromIndex - 1;
        }
        else if (this._goForwardRequested(event, rtl)) {
            event.preventDefault();
            this._handleArrowRight(fromIndex);
            newIndex = fromIndex + 1;
        }
        else if (KeyUtil.isKeyCode(event, A) && !this._getInputValue() && this._isControlKey(event)) {
            event.preventDefault();
            this.tokenList.forEach((token) => token.selected.set(true));
        }
        if (newIndex === this.tokenList.length && this._goForwardRequested(event, rtl)) {
            this._focusInput();
        }
        else if (newIndex > this.tokenList.length - this.moreTokensRight.length && this._isInputFocused()) {
            this.focusTokenElement(newIndex - this.moreTokensRight.length);
        }
        else if (newIndex || newIndex === 0) {
            this.focusTokenElement(newIndex);
        }
    }
    /** @hidden */
    getCombinedTokenWidth() {
        let totalTokenWidth = this._getTokensAreaWidthWithoutTokens();
        // get the width of each token
        this.tokenList.forEach((token) => {
            totalTokenWidth = totalTokenWidth + token.elementRef.nativeElement.getBoundingClientRect().width;
        });
        return totalTokenWidth;
    }
    /** @hidden */
    moreClicked() {
        this.moreClickedEvent.emit();
    }
    /** Removes all selected tokens */
    removeSelectedTokens() {
        const selectedElements = this._getActiveTokens();
        selectedElements.forEach((element) => element.onRemove.emit());
    }
    /** @hidden */
    _showAllTokens() {
        this._forceAllTokensToDisplay = true;
        this._inputElementFocused = true;
        this.tokenList.forEach((token) => {
            this._makeElementVisible(token.elementRef);
            token._viewContainer().createEmbeddedView(token._content());
        });
        this._tokensContainerWidth = 'auto';
        this._showMoreElement.set(false);
        this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
    }
    /** @hidden */
    _hideTokens() {
        setTimeout(() => {
            this._inputElementFocused = false;
            const tokenFocused = this._getFocusedTokenIndex() > -1;
            if (tokenFocused) {
                this._waitForFocusToDisappear();
                return;
            }
            this._forceAllTokensToDisplay = false;
            this._resetTokens();
            this._cdRef.detectChanges();
            this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
        });
    }
    /**
     * @hidden
     * Check whether user intends to go back to the previous token
     **/
    _goBackRequested($event, rtl) {
        const backKeys = rtl ? [RIGHT_ARROW] : [LEFT_ARROW];
        return KeyUtil.isKeyCode($event, backKeys);
    }
    /**
     * @hidden
     * Check whether user intends to go forward to the next token
     **/
    _goForwardRequested($event, rtl) {
        const forwardKeys = rtl ? [LEFT_ARROW] : [RIGHT_ARROW];
        return KeyUtil.isKeyCode($event, forwardKeys);
    }
    /** @hidden */
    _getTokensAreaWidthWithoutTokens() {
        let totalTokenWidth = 0;
        // add input width
        if (this.input?.nativeElement) {
            totalTokenWidth = totalTokenWidth + this.input.nativeElement.getBoundingClientRect().width;
        }
        // add the width of the "____ more" element
        if ((this.moreTokensLeft.length > 0 || this.externalHiddenCount() > 0) &&
            this.moreElement &&
            this.moreElement.nativeElement) {
            totalTokenWidth = totalTokenWidth + this.moreElement.nativeElement.getBoundingClientRect().width;
        }
        // add the input group addon
        if (this.inputGroupAddonEl && this.inputGroupAddonEl.nativeElement) {
            totalTokenWidth = totalTokenWidth + this.inputGroupAddonEl.nativeElement.getBoundingClientRect().width;
        }
        return totalTokenWidth;
    }
    /** @hidden */
    _handleArrowLeft(fromIndex) {
        // if the leftmost visible token is selected, and there are moreTokensLeft, need to display a moreTokenLeft
        if (fromIndex === this.moreTokensLeft.length) {
            const poppedToken = this.moreTokensLeft.pop();
            if (poppedToken) {
                this._makeElementVisible(poppedToken.elementRef);
            }
            // and then hide any tokens from the right that no longer fit
            this._collapseTokens('right');
            this._cdRef.detectChanges();
        }
    }
    /** @hidden */
    _waitForFocusToDisappear() {
        this._tokenElementFocusedSub?.unsubscribe();
        // 5 ms delay for other token to receive focus, check if _showAllTokens was called again
        this._tokenElementFocusedSub = this._tokenElementFocused
            .pipe(debounceTime(5), filter((isFocused) => isFocused && !this._inputElementFocused))
            .subscribe(() => {
            this._hideTokens();
        });
    }
    /** @hidden */
    _handleArrowRight(fromIndex) {
        if (fromIndex === this.tokenList.length - this.moreTokensRight.length - 1 && this.moreTokensRight.length) {
            const poppedToken = this.moreTokensRight.pop();
            if (poppedToken) {
                this._makeElementVisible(poppedToken.elementRef);
            }
            // and then hide any tokens from the left that no longer fit
            this._collapseTokens('left');
            this._cdRef.detectChanges();
        }
    }
    /** @hidden */
    _collapseTokens(side) {
        if (this._forceAllTokensToDisplay) {
            return;
        }
        if (!this._contentDensityObserver.isCompact && !this.compactCollapse) {
            this._getHiddenCozyTokenCount();
            return;
        }
        this._cdRef.detectChanges();
        this._viewContainer.forEach((viewContainer) => viewContainer.clear());
        const availableWidth = this._getTokensAreaWidthWithoutTokens();
        if (this.tokenList.length === 1) {
            const tokenWidth = this.tokenList.get(0)?.elementRef.nativeElement.getBoundingClientRect().width;
            this._tokensContainerWidth = availableWidth < tokenWidth ? `calc(100% - ${availableWidth}px)` : 'auto';
            return;
        }
        else {
            this._tokensContainerWidth = 'auto';
        }
        this._checkMoreElementVisibility();
        this.tokenList.forEach((token) => token._viewContainer().createEmbeddedView(token._content()));
        let elementWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
        let combinedTokenWidth = this.getCombinedTokenWidth(); // the combined width of all tokens, the "____ more" text, and the input
        let i = 0;
        /*
         When resizing, we want to collapse the tokens on the left first. However, when the user is navigating through
         a group of overflowing tokens using the arrow left key, we may need to hide tokens on the right. So if this
         function has been called with the param 'right' it will collapse tokens from the right side of the list rather
         than the (default) left side.
         */
        if (side === 'right') {
            i = this.tokenList.length - 1;
        }
        while (combinedTokenWidth > elementWidth && (side === 'right' ? i >= 0 : i < this.tokenList.length)) {
            // loop through the tokens and hide them until the combinedTokenWidth fits in the elementWidth
            const token = this.tokenList.get(i);
            const moreTokens = side === 'right' ? this.moreTokensRight : this.moreTokensLeft;
            if (token) {
                if (moreTokens.indexOf(token) === -1) {
                    moreTokens.push(token);
                }
                token.elementRef.nativeElement.style.display = 'none';
            }
            // get the new elementWidth and combinedTokenWidth as these will have changed after setting a token display to 'none'
            elementWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
            this._checkMoreElementVisibility();
            combinedTokenWidth = this.getCombinedTokenWidth();
            side === 'right' ? i-- : i++;
        }
        this._cdRef.detectChanges();
        if (this.showOverflowPopover) {
            this._hiddenTokens.forEach((hiddenToken, index) => {
                hiddenToken._viewContainer()?.clear();
                this._viewContainer.get(index)?.createEmbeddedView(hiddenToken._content());
            });
        }
    }
    /** @hidden */
    _resetTokens() {
        this.moreTokensLeft = [];
        this.moreTokensRight = [];
        if (this._contentDensityObserver.isCompact || this.compactCollapse || this._forceAllTokensToDisplay) {
            this.tokenList.forEach((token) => {
                this._makeElementVisible(token.elementRef);
            });
            this._cdRef.markForCheck();
            this._collapseTokens();
        }
        else {
            this._getHiddenCozyTokenCount();
        }
        this.handleTokenClickSubscriptions();
        this.previousTokenCount = this.tokenList.length;
        this.tokenList.forEach((token, index) => token._setTotalCount(this.tokenList.length, index + 1));
        this._cdRef.markForCheck();
    }
    /** @hidden */
    _getHiddenCozyTokenCount() {
        const elementLeft = this.elementRef.nativeElement.getBoundingClientRect().left;
        this.hiddenCozyTokenCount = 0;
        this.tokenList.forEach((token) => {
            if (token.tokenWrapperElement() &&
                token.tokenWrapperElement().nativeElement.getBoundingClientRect().right < elementLeft) {
                this.hiddenCozyTokenCount += 1;
            }
        });
        this._checkMoreElementVisibility();
    }
    /** @hidden */
    _handleCozyTokenCount() {
        // because justify-content breaks scrollbar, it cannot be used on cozy screens, so use JS to scroll to the end
        this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
        this._getHiddenCozyTokenCount();
        if (this.hiddenCozyTokenCount > 0) {
            // need to do this again in case "____ more" text was added
            this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
            this._getHiddenCozyTokenCount();
        }
    }
    /** @hidden */
    _makeElementVisible(elementRef) {
        elementRef.nativeElement.style.display = 'inline-block';
        elementRef.nativeElement.style.visibility = 'visible';
    }
    /** @hidden */
    _unsubscribeClicks() {
        if (this.tokenListClickSubscriptions && this.tokenListClickSubscriptions.length) {
            this.tokenListClickSubscriptions.forEach((subscription) => {
                subscription.unsubscribe();
            });
            this.tokenListClickSubscriptions = [];
        }
    }
    /** @hidden */
    _unsubscribeTokenOutputs() {
        this._tokenOutputSubscriptions.forEach((subscription) => {
            subscription.unsubscribe();
        });
        this._tokenOutputSubscriptions = [];
    }
    /** @hidden */
    _setupInputKeydownEvent() {
        this._eventListeners.push(this._renderer.listen(this.input.nativeElement, 'keydown', (event) => {
            this.handleKeyDown(event, this.tokenList.length);
        }));
    }
    /** @hidden */
    _setupInputFocusEvent() {
        this._eventListeners.push(this._renderer.listen(this.input.nativeElement, 'focus', () => {
            this._makeTokenizerFocusCountAnnouncement();
        }));
    }
    /** @hidden */
    async _makeTokenizerFocusCountAnnouncement() {
        const lang = this._langSignal();
        const message = this._translationResolver.resolve(lang, 'coreMultiInput.tokensCountText', {
            length: this.tokenList.length ? this.tokenList.length : 0
        });
        this._liveAnnouncer.announce(message);
    }
    /** @hidden Method which handles what happens to token when it is clicked and no key is being held down.*/
    _basicSelected(token, index) {
        this.tokenList.forEach((shadowedToken) => {
            if (shadowedToken !== token) {
                shadowedToken.selected.set(false);
            }
        });
        this._firstElementInSelection = index;
        this._lastElementInSelection = index;
        token.selected.set(true);
        this._ctrlPrevious = false;
    }
    /** @hidden Restart first and last elements for shift selection.*/
    resetFirstAndLastElement() {
        const reset = !this.tokenList.some((token) => token.selected());
        if (reset) {
            this._firstElementInSelection = null;
            this._lastElementInSelection = null;
        }
    }
    /** @hidden Method which handles what happens to token when it is clicked and the shift key is being held down.*/
    _shiftSelected(index) {
        if (!this._firstElementInSelection && !this._lastElementInSelection) {
            this._firstElementInSelection = index;
            this._lastElementInSelection = index;
            this._directionShiftIsRight = null;
        }
        else {
            if (this._firstElementInSelection && index < this._firstElementInSelection) {
                if (this._directionShiftIsRight) {
                    this._lastElementInSelection = this._firstElementInSelection;
                }
                this._directionShiftIsRight = false;
                this._firstElementInSelection = index;
            }
            else if (this._lastElementInSelection && index > this._lastElementInSelection) {
                if (!this._directionShiftIsRight) {
                    this._firstElementInSelection = this._lastElementInSelection;
                }
                this._directionShiftIsRight = true;
                this._lastElementInSelection = index;
            }
            if (!this._directionShiftIsRight) {
                this._firstElementInSelection = index;
            }
            else if (this._directionShiftIsRight) {
                this._lastElementInSelection = index;
            }
        }
        this.tokenList.forEach((token, indexOfToken) => {
            token.selected.set(this._firstElementInSelection != null &&
                this._lastElementInSelection != null &&
                indexOfToken >= this._firstElementInSelection &&
                indexOfToken <= this._lastElementInSelection);
        });
        this._ctrlPrevious = false;
    }
    /** @hidden Method which handles what happens to token when it is clicked and the control or meta key is being held down.*/
    _ctrlSelected(token, index) {
        this._firstElementInSelection = null;
        this._lastElementInSelection = null;
        const selected = token.selected();
        token.selected.set(true);
        if (selected) {
            token.selected.set(false);
            this.tokenList.forEach((element, indexOfToken) => {
                if (!this._firstElementInSelection) {
                    if (element.selected()) {
                        this._firstElementInSelection = indexOfToken;
                    }
                }
                else {
                    this._lastElementInSelection = indexOfToken;
                }
            });
            if (index === this._lastElementInSelection) {
                this._lastElementInSelection = this._lastElementInSelection - 1;
            }
            if (index === this._firstElementInSelection) {
                this._firstElementInSelection = this._firstElementInSelection - 1;
            }
        }
        this._ctrlPrevious = true;
    }
    /** Get selected and focused tokens */
    _getActiveTokens() {
        return this.tokenList.filter((item) => item.selected() || this._isTokenFocused(item));
    }
    /** @hidden */
    _getFocusedTokenIndex() {
        return this.tokenList.toArray().findIndex((token) => this._isTokenFocused(token));
    }
    /** @hidden */
    _isTokenFocused(token) {
        return token.tokenWrapperElement()?.nativeElement === this._document.activeElement;
    }
    /** @hidden */
    _isInputFocused() {
        return this._document.activeElement === this.input.nativeElement;
    }
    /** @hidden */
    _tokensSelected() {
        return this.tokenList.some((t) => t.selected());
    }
    /** @hidden */
    _getInputValue() {
        return this.input.nativeElement.value;
    }
    /** @hidden */
    _focusInput() {
        this.input.nativeElement.focus();
    }
    /** @hidden */
    _isControlKey(keyboardEvent) {
        return keyboardEvent.ctrlKey || keyboardEvent.metaKey;
    }
    /** @hidden */
    _listenElementEvents() {
        merge(fromEvent(this.elementRef.nativeElement, 'focus', { capture: true }).pipe(filter((event) => event['target']?.tagName === 'INPUT' && this.tokenizerFocusable), map(() => true)), fromEvent(this.elementRef.nativeElement, 'blur', { capture: true }).pipe(map(() => false)))
            .pipe(
        // debounceTime is needed in order to filter subsequent focus-blur events, that happen simultaneously
        debounceTime(10), takeUntilDestroyed(this._destroyRef))
            .subscribe((focused) => {
            this._tokenizerHasFocus = focused;
            this._cdRef.markForCheck();
        });
    }
    /** @hidden Listen window resize and distribute cards on column change */
    _listenOnResize() {
        this.onResize();
        resizeObservable(this.elementRef.nativeElement)
            .pipe(debounceTime(30), takeUntilDestroyed(this._destroyRef))
            .subscribe(() => this.onResize());
    }
    /** @hidden */
    _checkMoreElementVisibility() {
        const showMoreElement = (this.moreTokensLeft.length > 0 ||
            this.moreTokensRight.length > 0 ||
            this.hiddenCozyTokenCount > 0 ||
            this.externalHiddenCount() > 0) &&
            !this.open &&
            !this._tokenizerHasFocus;
        if (showMoreElement === this._showMoreElement()) {
            return;
        }
        this._showMoreElement.set(showMoreElement);
        this._cdRef.detectChanges();
    }
    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 }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenizerComponent, isStandalone: true, selector: "fd-tokenizer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, disableKeyboardDeletion: { classPropertyName: "disableKeyboardDeletion", publicName: "disableKeyboardDeletion", isSignal: false, isRequired: false, transformFunction: null }, compactCollapse: { classPropertyName: "compactCollapse", publicName: "compactCollapse", isSignal: false, isRequired: false, transformFunction: null }, tokenizerFocusable: { classPropertyName: "tokenizerFocusable", publicName: "tokenizerFocusable", isSignal: false, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: false, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: false, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: false, isRequired: false, transformFunction: null }, moreTerm: { classPropertyName: "moreTerm", publicName: "moreTerm", isSignal: false, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, showOverflowPopover: { classPropertyName: "showOverflowPopover", publicName: "showOverflowPopover", isSignal: false, isRequired: false, transformFunction: null }, externalHiddenCount: { classPropertyName: "externalHiddenCount", publicName: "externalHiddenCount", isSignal: true, isRequired: false, transformFunction: null } }, 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 (\n            showOverflowPopover &&\n            (_contentDensityObserver.isCompactSignal() || compactCollapse) &&\n            externalHiddenCount() === 0\n        ) {\n            <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n        } @else {\n            @if (\n                hasInternalOverflowIndicator() &&\n                moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n            ) {\n                <span\n                    (click)=\"moreClicked()\"\n                    (keydown.enter)=\"moreClicked()\"\n                    (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n                    #moreElementSpan\n                    class=\"fd-tokenizer-more\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                >\n                    @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n                        {{\n                            (\n                                'coreTokenizer.moreLabel'\n                                | fdTranslate\n                                    : { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n                            )()\n                        }}\n                    }\n                    @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n                        {{\n                            (\n                                'coreTokenizer.moreLabel'\n                                | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() }\n                            )()\n                        }}\n                    }\n                </span>\n            }\n        }\n        <ng-content select=\"[fd-tokenizer-extra]\"></ng-content>\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 (\n        hasInternalOverflowIndicator() &&\n        moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n    ) {\n        <span\n            (click)=\"moreClicked()\"\n            (keydown.enter)=\"moreClicked()\"\n            (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n            #moreElementSpan\n            class=\"fd-tokenizer-more\"\n            role=\"button\"\n            tabindex=\"0\"\n        >\n            @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n                {{\n                    (\n                        'coreTokenizer.moreLabel'\n                        | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n                    )()\n                }}\n            }\n            @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n                {{\n                    ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() })()\n                }}\n            }\n        </span>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.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{background:none;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color: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: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:transparent;-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--display{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:visible;pointer-events:none}.fd-tokenizer--display .fd-tokenizer__inner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__control{cursor:pointer;pointer-events:all}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__body{pointer-events:none}.fd-tokenizer--display .fd-tokenizer__input{display:none}.fd-tokenizer--display .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--display .fd-token{-webkit-margin-end:0;margin-inline-end:0}.fd-tokenizer--display .fd-token--display:after{content:\"\\b7\";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:1rem}.fd-tokenizer--display .fd-token--display:has(+.fd-tokenizer__input):after{content:\"\";min-width:0}.fd-tokenizer--display+.fd-input-group__addon.fd-input-group__addon--button{display:none}.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.41.7\n   * Copyright (c) 2026 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", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "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", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
__decorate([
    applyCssClass,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", Array)
], TokenizerComponent.prototype, "buildComponentCssClass", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenizerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], imports: [
                        NgTemplateOutlet,
                        InputGroupAddOnDirective,
                        ButtonComponent,
                        PopoverComponent,
                        PopoverControlComponent,
                        PopoverBodyComponent,
                        ListComponent,
                        ListItemComponent,
                        FdTranslatePipe
                    ], 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 (\n            showOverflowPopover &&\n            (_contentDensityObserver.isCompactSignal() || compactCollapse) &&\n            externalHiddenCount() === 0\n        ) {\n            <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n        } @else {\n            @if (\n                hasInternalOverflowIndicator() &&\n                moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n            ) {\n                <span\n                    (click)=\"moreClicked()\"\n                    (keydown.enter)=\"moreClicked()\"\n                    (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n                    #moreElementSpan\n                    class=\"fd-tokenizer-more\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                >\n                    @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n                        {{\n                            (\n                                'coreTokenizer.moreLabel'\n                                | fdTranslate\n                                    : { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n                            )()\n                        }}\n                    }\n                    @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n                        {{\n                            (\n                                'coreTokenizer.moreLabel'\n                                | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() }\n                            )()\n                        }}\n                    }\n                </span>\n            }\n        }\n        <ng-content select=\"[fd-tokenizer-extra]\"></ng-content>\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 (\n        hasInternalOverflowIndicator() &&\n        moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n    ) {\n        <span\n            (click)=\"moreClicked()\"\n            (keydown.enter)=\"moreClicked()\"\n            (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n            #moreElementSpan\n            class=\"fd-tokenizer-more\"\n            role=\"button\"\n            tabindex=\"0\"\n        >\n            @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n                {{\n                    (\n                        'coreTokenizer.moreLabel'\n                        | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n                    )()\n                }}\n            }\n            @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n                {{\n                    ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() })()\n                }}\n            }\n        </span>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.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{background:none;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color: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: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:transparent;-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--display{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:visible;pointer-events:none}.fd-tokenizer--display .fd-tokenizer__inner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__control{cursor:pointer;pointer-events:all}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__body{pointer-events:none}.fd-tokenizer--display .fd-tokenizer__input{display:none}.fd-tokenizer--display .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--display .fd-token{-webkit-margin-end:0;margin-inline-end:0}.fd-tokenizer--display .fd-token--display:after{content:\"\\b7\";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:1rem}.fd-tokenizer--display .fd-token--display:has(+.fd-tokenizer__input):after{content:\"\";min-width:0}.fd-tokenizer--display+.fd-input-group__addon.fd-input-group__addon--button{display:none}.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.41.7\n   * Copyright (c) 2026 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"] }]
        }], ctorParameters: () => [{ type: i1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i2.LiveAnnouncer }], propDecorators: { class: [{
                type: Input
            }], disableKeyboardDeletion: [{
                type: Input
            }], tokenList: [{
                type: ContentChildren,
                args: [forwardRef(() => TokenComponent)]
            }], input: [{
                type: ContentChild,
                args: [forwardRef(() => FormControlComponent), { read: ElementRef }]
            }], tokenizerInnerEl: [{
                type: ViewChild,
                args: ['tokenizerInner']
            }], moreElement: [{
                type: ViewChild,
                args: ['moreElementSpan']
            }], content: [{
                type: ViewChild,
                args: ['inputGroupAddOn']
            }], _viewContainer: [{
                type: ViewChildren,
                args: ['viewContainer', { read: ViewContainerRef }]
            }], compactCollapse: [{
                type: Input
            }], tokenizerFocusable: [{
                type: Input
            }], inputValue: [{
                type: Input
            }], glyph: [{
                type: Input
            }], glyphFont: [{
                type: Input
            }], moreTerm: [{
                type: Input
            }], open: [{
                type: Input
            }], showOverflowPopover: [{
                type: Input
            }], moreClickedEvent: [{
                type: Output
            }], externalHiddenCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalHiddenCount", required: false }] }], buildComponentCssClass: [], keyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

/**
 * @deprecated
 * Use direct imports of `TokenComponent`, `TokenizerComponent`, `TokenizerInputDirective` instead
 */
class TokenModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TokenModule, imports: [TokenComponent, TokenizerComponent, TokenizerInputDirective], exports: [TokenComponent, TokenizerComponent, TokenizerInputDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenModule, imports: [TokenizerComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [TokenComponent, TokenizerComponent, TokenizerInputDirective],
                    exports: [TokenComponent, TokenizerComponent, TokenizerInputDirective]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { TokenComponent, TokenModule, TokenizerComponent, TokenizerInputDirective };
//# sourceMappingURL=fundamental-ngx-core-token.mjs.map
