@fundamental-ngx/core 0.43.18 → 0.43.19

package/esm2020/multi-combobox/multi-combobox.component.mjs

@@ -550,7 +550,7 @@ MultiComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: MultiComboboxComponent
         },
         DestroyedService
-    ], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && _onPrimaryButtonClick(false)\"\n            (keydown)=\"_navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.disabled\"\n                    (onCloseClick)=\"_removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"_handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n        (keydown.shift.tab)=\"close()\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <fd-multi-combobox-select-all-toggler\n            *ngIf=\"showSelectAll\"\n            [selectAllHandler]=\"_handleSelectAllItems\"\n            [valueChanges]=\"selectionChange\"\n            [selectedItems]=\"_selectedSuggestions\"\n            [flatItems]=\"_flatSuggestions\"\n        ></fd-multi-combobox-select-all-toggler>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else flatList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate; else groupItemTemplateRenderer\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-template #groupItemTemplateRenderer>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-template>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (click)=\"!mobile && close()\"\n                    (keydown)=\"_onItemKeyDownHandler($event)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"_onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"_toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #flatList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (click)=\"!mobile && _onOptionClicked($event, i)\"\n                (keydown)=\"_onItemKeyDownHandler($event)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"_onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"_toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate; else optionItemTemplateRenderer\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-template #optionItemTemplateRenderer>\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate; else secondaryItemTemplateRenderer\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-template #secondaryItemTemplateRenderer>\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i8.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "directive", type: i12.MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "component", type: i13.SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "pipe", type: i14.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && _onPrimaryButtonClick(false)\"\n            (keydown)=\"_navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"_suggestions\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.disabled\"\n                    (onCloseClick)=\"_removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"_handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n        (keydown.shift.tab)=\"close()\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <fd-multi-combobox-select-all-toggler\n            *ngIf=\"showSelectAll\"\n            [selectAllHandler]=\"_handleSelectAllItems\"\n            [valueChanges]=\"selectionChange\"\n            [selectedItems]=\"_selectedSuggestions\"\n            [flatItems]=\"_flatSuggestions\"\n        ></fd-multi-combobox-select-all-toggler>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup; else flatList\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate; else groupItemTemplateRenderer\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-template #groupItemTemplateRenderer>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-template>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (click)=\"!mobile && close()\"\n                    (keydown)=\"_onItemKeyDownHandler($event)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"_onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"_toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #flatList>\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (click)=\"!mobile && _onOptionClicked($event, i)\"\n                (keydown)=\"_onItemKeyDownHandler($event)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"_onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"_toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate; else optionItemTemplateRenderer\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-template #optionItemTemplateRenderer>\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate; else secondaryItemTemplateRenderer\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-template #secondaryItemTemplateRenderer>\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i8.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "directive", type: i12.MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "component", type: i13.SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "pipe", type: i14.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-multi-combobox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [

package/esm2020/multi-input/multi-input.component.mjs

@@ -665,7 +665,7 @@ MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         MenuKeyboardService,
         registerFormItemControl(MultiInputComponent),
         contentDensityObserverProviders()
-    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container\n                [ngTemplateOutlet]=\"control\"\n                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                *ngIf=\"mobile\"\n            ></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\n                [isOpen]=\"open\"\n                (isOpenChange)=\"openChangeHandle($event)\"\n                (input)=\"!open && openChangeHandle(true)\"\n                [triggers]=\"[]\"\n                [maxWidth]=\"_popoverMaxWidth\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n                        ></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\n    <ng-template #control let-showAddonButton=\"displayAddonButton\">\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"showAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"showAddonButton ? glyph : ''\"\n            [addonButtonAriaHidden]=\"!!title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\n            <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n                'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n            }}</span>\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\n\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fdkAutoComplete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [matcher]=\"typeAheadMatcher\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"!includes && autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n            [byline]=\"byline\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.min-width]=\"'100%'\"\n            (keydown.tab)=\"_close()\"\n            aria-multiselectable=\"true\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n                [selected]=\"!!option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "directive", type: i12.MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container\n                [ngTemplateOutlet]=\"control\"\n                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                *ngIf=\"mobile\"\n            ></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\n                [isOpen]=\"open\"\n                (isOpenChange)=\"openChangeHandle($event)\"\n                (input)=\"!open && openChangeHandle(true)\"\n                [triggers]=\"[]\"\n                [maxWidth]=\"_popoverMaxWidth\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n                        ></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\n    <ng-template #control let-showAddonButton=\"displayAddonButton\">\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"showAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"showAddonButton ? glyph : ''\"\n            [addonButtonAriaHidden]=\"!!title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\n            <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n                'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n            }}</span>\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\n\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fdkAutoComplete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [matcher]=\"typeAheadMatcher\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"!includes && autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n            [byline]=\"byline\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.min-width]=\"'100%'\"\n            (keydown.tab)=\"_close()\"\n            aria-multiselectable=\"true\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n                [selected]=\"!!option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "directive", type: i12.MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

package/esm2020/shellbar/shellbar-action/shellbar-action.component.mjs

@@ -19,12 +19,12 @@ import * as i3 from "@fundamental-ngx/core/button";
 export class ShellbarActionComponent {
 }
 ShellbarActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShellbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellbarActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: { glyph: "glyph", callback: "callback", label: "label", notificationLabel: "notificationLabel", notificationCount: "notificationCount" }, providers: [
+ShellbarActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: { glyph: "glyph", callback: "callback", label: "label", notificationLabel: "notificationLabel", notificationCount: "notificationCount", title: "title", ariaLabel: "ariaLabel" }, providers: [
         {
             provide: FD_SHELLBAR_ACTION_COMPONENT,
             useExisting: ShellbarActionComponent
         }
-    ], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <button\n        fd-button\n        fdType=\"transparent\"\n        class=\"fd-shellbar__button\"\n        fdCozy\n        [glyph]=\"glyph\"\n        (click)=\"callback ? callback($event) : ''\"\n    >\n        <span *ngIf=\"notificationCount\" class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel\">\n            {{ notificationCount }}\n        </span>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <button\n        fd-button\n        fdType=\"transparent\"\n        class=\"fd-shellbar__button\"\n        fdCozy\n        [attr.title]=\"title\"\n        [ariaLabel]=\"ariaLabel\"\n        [glyph]=\"glyph\"\n        (click)=\"callback ? callback($event) : ''\"\n    >\n        <span *ngIf=\"notificationCount\" class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel\">\n            {{ notificationCount }}\n        </span>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShellbarActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-action', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -32,7 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             provide: FD_SHELLBAR_ACTION_COMPONENT,
                             useExisting: ShellbarActionComponent
                         }
-                    ], template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <button\n        fd-button\n        fdType=\"transparent\"\n        class=\"fd-shellbar__button\"\n        fdCozy\n        [glyph]=\"glyph\"\n        (click)=\"callback ? callback($event) : ''\"\n    >\n        <span *ngIf=\"notificationCount\" class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel\">\n            {{ notificationCount }}\n        </span>\n    </button>\n</div>\n" }]
+                    ], template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <button\n        fd-button\n        fdType=\"transparent\"\n        class=\"fd-shellbar__button\"\n        fdCozy\n        [attr.title]=\"title\"\n        [ariaLabel]=\"ariaLabel\"\n        [glyph]=\"glyph\"\n        (click)=\"callback ? callback($event) : ''\"\n    >\n        <span *ngIf=\"notificationCount\" class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel\">\n            {{ notificationCount }}\n        </span>\n    </button>\n</div>\n" }]
         }], propDecorators: { glyph: [{
                 type: Input
             }], callback: [{
@@ -43,5 +43,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], notificationCount: [{
                 type: Input
+            }], title: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hlbGxiYXItYWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29yZS9zcmMvbGliL3NoZWxsYmFyL3NoZWxsYmFyLWFjdGlvbi9zaGVsbGJhci1hY3Rpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb3JlL3NyYy9saWIvc2hlbGxiYXIvc2hlbGxiYXItYWN0aW9uL3NoZWxsYmFyLWFjdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBRXpEOzs7Ozs7Ozs7OztHQVdHO0FBYUgsTUFBTSxPQUFPLHVCQUF1Qjs7b0hBQXZCLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLCtMQVByQjtRQUNQO1lBQ0ksT0FBTyxFQUFFLDRCQUE0QjtZQUNyQyxXQUFXLEVBQUUsdUJBQXVCO1NBQ3ZDO0tBQ0osMEJDekJMLCtjQWNBOzJGRGFhLHVCQUF1QjtrQkFabkMsU0FBUzsrQkFDSSxvQkFBb0IsaUJBRWYsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDUDs0QkFDSSxPQUFPLEVBQUUsNEJBQTRCOzRCQUNyQyxXQUFXLHlCQUF5Qjt5QkFDdkM7cUJBQ0o7OEJBS0QsS0FBSztzQkFESixLQUFLO2dCQUtOLFFBQVE7c0JBRFAsS0FBSztnQkFLTixLQUFLO3NCQURKLEtBQUs7Z0JBS04saUJBQWlCO3NCQURoQixLQUFLO2dCQUtOLGlCQUFpQjtzQkFEaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRkRfU0hFTExCQVJfQUNUSU9OX0NPTVBPTkVOVCB9IGZyb20gJy4uL3Rva2Vucyc7XG5cbi8qKlxuICogVGhlIGNvbXBvbmVudCB0aGF0IHJlcHJlc2VudHMgYSBzaGVsbGJhciBhY3Rpb24uXG4gKiBgYGBodG1sXG4gKiAgPGZkLXNoZWxsYmFyLWFjdGlvbiAqbmdGb3I9XCJsZXQgYWN0aW9uIG9mIGFjdGlvbnNcIlxuICogICAgICAgICAgICAgICAgICAgICAgW2dseXBoXT1cImFjdGlvbi5nbHlwaFwiXG4gKiAgICAgICAgICAgICAgICAgICAgICBbY2FsbGJhY2tdPVwiYWN0aW9uLmNhbGxiYWNrXCJcbiAqICAgICAgICAgICAgICAgICAgICAgIFtsYWJlbF09XCJhY3Rpb24ubGFiZWxcIlxuICogICAgICAgICAgICAgICAgICAgICAgW25vdGlmaWNhdGlvbkNvdW50XT1cImFjdGlvbi5ub3RpZmljYXRpb25Db3VudFwiXG4gKiAgICAgICAgICAgICAgICAgICAgICBbbm90aWZpY2F0aW9uTGFiZWxdPVwiYWN0aW9uLm5vdGlmaWNhdGlvbkxhYmVsXCI+XG4gKiAgPC9mZC1zaGVsbGJhci1hY3Rpb24+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdmZC1zaGVsbGJhci1hY3Rpb24nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaGVsbGJhci1hY3Rpb24uY29tcG9uZW50Lmh0bWwnLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIHByb3ZpZGU6IEZEX1NIRUxMQkFSX0FDVElPTl9DT01QT05FTlQsXG4gICAgICAgICAgICB1c2VFeGlzdGluZzogU2hlbGxiYXJBY3Rpb25Db21wb25lbnRcbiAgICAgICAgfVxuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgU2hlbGxiYXJBY3Rpb25Db21wb25lbnQge1xuICAgIC8qKiBUaGUgZ2x5cGggKGljb24pIG5hbWUgKi9cbiAgICBASW5wdXQoKVxuICAgIGdseXBoOiBzdHJpbmc7XG5cbiAgICAvKiogQ2FsbGJhY2sgdGhhdCBoYW5sZGxlcyB0aGUgcmVzcG9uc2UgdG8gY2xpY2tzIG9uIGFueSBvZiB0aGUgYWN0aW9ucy4gKi9cbiAgICBASW5wdXQoKVxuICAgIGNhbGxiYWNrOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG5cbiAgICAvKiogVGhlIGFjdGlvbiBsYWJlbC4gKi9cbiAgICBASW5wdXQoKVxuICAgIGxhYmVsOiBzdHJpbmc7XG5cbiAgICAvKiogVGhlIG5vdGlmaWNhdGlvbiBsYWJlbC4gKi9cbiAgICBASW5wdXQoKVxuICAgIG5vdGlmaWNhdGlvbkxhYmVsOiBzdHJpbmc7XG5cbiAgICAvKiogUmVwcmVzZW50cyB0aGUgbnVtYmVyIG9mIG5vdGlmaWNhdGlvbnMuICovXG4gICAgQElucHV0KClcbiAgICBub3RpZmljYXRpb25Db3VudDogbnVtYmVyO1xufVxuIiwiPGRpdiBjbGFzcz1cImZkLXNoZWxsYmFyX19hY3Rpb24gZmQtc2hlbGxiYXJfX2FjdGlvbi0tZGVza3RvcFwiPlxuICAgIDxidXR0b25cbiAgICAgICAgZmQtYnV0dG9uXG4gICAgICAgIGZkVHlwZT1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgY2xhc3M9XCJmZC1zaGVsbGJhcl9fYnV0dG9uXCJcbiAgICAgICAgZmRDb3p5XG4gICAgICAgIFtnbHlwaF09XCJnbHlwaFwiXG4gICAgICAgIChjbGljayk9XCJjYWxsYmFjayA/IGNhbGxiYWNrKCRldmVudCkgOiAnJ1wiXG4gICAgPlxuICAgICAgICA8c3BhbiAqbmdJZj1cIm5vdGlmaWNhdGlvbkNvdW50XCIgY2xhc3M9XCJmZC1idXR0b25fX2JhZGdlXCIgW2F0dHIuYXJpYS1sYWJlbF09XCJub3RpZmljYXRpb25MYWJlbFwiPlxuICAgICAgICAgICAge3sgbm90aWZpY2F0aW9uQ291bnQgfX1cbiAgICAgICAgPC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hlbGxiYXItYWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29yZS9zcmMvbGliL3NoZWxsYmFyL3NoZWxsYmFyLWFjdGlvbi9zaGVsbGJhci1hY3Rpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb3JlL3NyYy9saWIvc2hlbGxiYXIvc2hlbGxiYXItYWN0aW9uL3NoZWxsYmFyLWFjdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBR3pEOzs7Ozs7Ozs7OztHQVdHO0FBYUgsTUFBTSxPQUFPLHVCQUF1Qjs7b0hBQXZCLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLHVPQVByQjtRQUNQO1lBQ0ksT0FBTyxFQUFFLDRCQUE0QjtZQUNyQyxXQUFXLEVBQUUsdUJBQXVCO1NBQ3ZDO0tBQ0osMEJDMUJMLGtoQkFnQkE7MkZEWWEsdUJBQXVCO2tCQVpuQyxTQUFTOytCQUNJLG9CQUFvQixpQkFFZixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNQOzRCQUNJLE9BQU8sRUFBRSw0QkFBNEI7NEJBQ3JDLFdBQVcseUJBQXlCO3lCQUN2QztxQkFDSjs4QkFLRCxLQUFLO3NCQURKLEtBQUs7Z0JBS04sUUFBUTtzQkFEUCxLQUFLO2dCQUtOLEtBQUs7c0JBREosS0FBSztnQkFLTixpQkFBaUI7c0JBRGhCLEtBQUs7Z0JBS04saUJBQWlCO3NCQURoQixLQUFLO2dCQUtOLEtBQUs7c0JBREosS0FBSztnQkFLTixTQUFTO3NCQURSLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZEX1NIRUxMQkFSX0FDVElPTl9DT01QT05FTlQgfSBmcm9tICcuLi90b2tlbnMnO1xuaW1wb3J0IHsgTnVsbGFibGUgfSBmcm9tICdAZnVuZGFtZW50YWwtbmd4L2Nkay91dGlscyc7XG5cbi8qKlxuICogVGhlIGNvbXBvbmVudCB0aGF0IHJlcHJlc2VudHMgYSBzaGVsbGJhciBhY3Rpb24uXG4gKiBgYGBodG1sXG4gKiAgPGZkLXNoZWxsYmFyLWFjdGlvbiAqbmdGb3I9XCJsZXQgYWN0aW9uIG9mIGFjdGlvbnNcIlxuICogICAgICAgICAgICAgICAgICAgICAgW2dseXBoXT1cImFjdGlvbi5nbHlwaFwiXG4gKiAgICAgICAgICAgICAgICAgICAgICBbY2FsbGJhY2tdPVwiYWN0aW9uLmNhbGxiYWNrXCJcbiAqICAgICAgICAgICAgICAgICAgICAgIFtsYWJlbF09XCJhY3Rpb24ubGFiZWxcIlxuICogICAgICAgICAgICAgICAgICAgICAgW25vdGlmaWNhdGlvbkNvdW50XT1cImFjdGlvbi5ub3RpZmljYXRpb25Db3VudFwiXG4gKiAgICAgICAgICAgICAgICAgICAgICBbbm90aWZpY2F0aW9uTGFiZWxdPVwiYWN0aW9uLm5vdGlmaWNhdGlvbkxhYmVsXCI+XG4gKiAgPC9mZC1zaGVsbGJhci1hY3Rpb24+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdmZC1zaGVsbGJhci1hY3Rpb24nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaGVsbGJhci1hY3Rpb24uY29tcG9uZW50Lmh0bWwnLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIHByb3ZpZGU6IEZEX1NIRUxMQkFSX0FDVElPTl9DT01QT05FTlQsXG4gICAgICAgICAgICB1c2VFeGlzdGluZzogU2hlbGxiYXJBY3Rpb25Db21wb25lbnRcbiAgICAgICAgfVxuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgU2hlbGxiYXJBY3Rpb25Db21wb25lbnQge1xuICAgIC8qKiBUaGUgZ2x5cGggKGljb24pIG5hbWUgKi9cbiAgICBASW5wdXQoKVxuICAgIGdseXBoOiBzdHJpbmc7XG5cbiAgICAvKiogQ2FsbGJhY2sgdGhhdCBoYW5sZGxlcyB0aGUgcmVzcG9uc2UgdG8gY2xpY2tzIG9uIGFueSBvZiB0aGUgYWN0aW9ucy4gKi9cbiAgICBASW5wdXQoKVxuICAgIGNhbGxiYWNrOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG5cbiAgICAvKiogVGhlIGFjdGlvbiBsYWJlbC4gKi9cbiAgICBASW5wdXQoKVxuICAgIGxhYmVsOiBzdHJpbmc7XG5cbiAgICAvKiogVGhlIG5vdGlmaWNhdGlvbiBsYWJlbC4gKi9cbiAgICBASW5wdXQoKVxuICAgIG5vdGlmaWNhdGlvbkxhYmVsOiBzdHJpbmc7XG5cbiAgICAvKiogUmVwcmVzZW50cyB0aGUgbnVtYmVyIG9mIG5vdGlmaWNhdGlvbnMuICovXG4gICAgQElucHV0KClcbiAgICBub3RpZmljYXRpb25Db3VudDogbnVtYmVyO1xuXG4gICAgLyoqIHRpdGxlIG9mIHRoZSBhY3Rpb24gYnV0dG9uLiAqL1xuICAgIEBJbnB1dCgpXG4gICAgdGl0bGU6IE51bGxhYmxlPHN0cmluZz47XG5cbiAgICAvKiogYXJpYS1sYWJlbCBvZiB0aGUgYWN0aW9uIGJ1dHRvbiAqL1xuICAgIEBJbnB1dCgpXG4gICAgYXJpYUxhYmVsOiBOdWxsYWJsZTxzdHJpbmc+O1xufVxuIiwiPGRpdiBjbGFzcz1cImZkLXNoZWxsYmFyX19hY3Rpb24gZmQtc2hlbGxiYXJfX2FjdGlvbi0tZGVza3RvcFwiPlxuICAgIDxidXR0b25cbiAgICAgICAgZmQtYnV0dG9uXG4gICAgICAgIGZkVHlwZT1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgY2xhc3M9XCJmZC1zaGVsbGJhcl9fYnV0dG9uXCJcbiAgICAgICAgZmRDb3p5XG4gICAgICAgIFthdHRyLnRpdGxlXT1cInRpdGxlXCJcbiAgICAgICAgW2FyaWFMYWJlbF09XCJhcmlhTGFiZWxcIlxuICAgICAgICBbZ2x5cGhdPVwiZ2x5cGhcIlxuICAgICAgICAoY2xpY2spPVwiY2FsbGJhY2sgPyBjYWxsYmFjaygkZXZlbnQpIDogJydcIlxuICAgID5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJub3RpZmljYXRpb25Db3VudFwiIGNsYXNzPVwiZmQtYnV0dG9uX19iYWRnZVwiIFthdHRyLmFyaWEtbGFiZWxdPVwibm90aWZpY2F0aW9uTGFiZWxcIj5cbiAgICAgICAgICAgIHt7IG5vdGlmaWNhdGlvbkNvdW50IH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbjwvZGl2PlxuIl19

package/esm2020/shellbar/shellbar-actions/shellbar-actions.component.mjs

@@ -125,7 +125,7 @@ export class ShellbarActionsComponent {
     }
 }
 ShellbarActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShellbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShellbarActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", collapsedItemMenuLabel: "collapsedItemMenuLabel" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true", "class.fd-shellbar__group--shrink": "this._groupShrink", "class.fd-shellbar__group--basis-auto": "this._groupBasisAuto" } }, queries: [{ propertyName: "userComponent", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "productSwitchComponent", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "shellbarActions", predicate: FD_SHELLBAR_ACTION_COMPONENT }], viewQueries: [{ propertyName: "userComponentView", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div *ngIf=\"comboboxComponent\" class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content select=\"fd-combobox\"></ng-content>\n</div>\n\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--mobile\">\n    <fd-shellbar-actions-mobile\n        [shellbarActions]=\"shellbarActions\"\n        [collapsedItemMenuLabel]=\"collapsedItemMenuLabel\"\n        [searchExists]=\"!!_searchPortal\"\n        (showSearch)=\"_toggleSearch()\"\n    ></fd-shellbar-actions-mobile>\n</div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content></ng-content>\n</div>\n\n<fd-shellbar-action\n    *ngIf=\"_addSearchIcon && !showSearch\"\n    glyph=\"search\"\n    [callback]=\"_toggleSearch\"\n></fd-shellbar-action>\n\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n\n<ng-container *ngIf=\"userItem\">\n    <ng-container *ngIf=\"!userComponent\">\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"userComponent\">\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    </ng-container>\n</ng-container>\n\n<div *ngIf=\"productSwitchComponent\" class=\"fd-shellbar__action\">\n    <ng-content select=\"fd-product-switch\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "collapsedItemMenuLabel", "searchExists"], outputs: ["showSearch"] }, { kind: "component", type: i4.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i5.ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ShellbarActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", collapsedItemMenuLabel: "collapsedItemMenuLabel" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true", "class.fd-shellbar__group--shrink": "this._groupShrink", "class.fd-shellbar__group--basis-auto": "this._groupBasisAuto" } }, queries: [{ propertyName: "userComponent", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "productSwitchComponent", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "shellbarActions", predicate: FD_SHELLBAR_ACTION_COMPONENT }], viewQueries: [{ propertyName: "userComponentView", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div *ngIf=\"comboboxComponent\" class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content select=\"fd-combobox\"></ng-content>\n</div>\n\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--mobile\">\n    <fd-shellbar-actions-mobile\n        [shellbarActions]=\"shellbarActions\"\n        [collapsedItemMenuLabel]=\"collapsedItemMenuLabel\"\n        [searchExists]=\"!!_searchPortal\"\n        (showSearch)=\"_toggleSearch()\"\n    ></fd-shellbar-actions-mobile>\n</div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content></ng-content>\n</div>\n\n<fd-shellbar-action\n    *ngIf=\"_addSearchIcon && !showSearch\"\n    glyph=\"search\"\n    [callback]=\"_toggleSearch\"\n></fd-shellbar-action>\n\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n\n<ng-container *ngIf=\"userItem\">\n    <ng-container *ngIf=\"!userComponent\">\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"userComponent\">\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    </ng-container>\n</ng-container>\n\n<div *ngIf=\"productSwitchComponent\" class=\"fd-shellbar__action\">\n    <ng-content select=\"fd-product-switch\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "collapsedItemMenuLabel", "searchExists"], outputs: ["showSearch"] }, { kind: "component", type: i4.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount", "title", "ariaLabel"] }, { kind: "component", type: i5.ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShellbarActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-actions', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {

package/esm2020/token/tokenizer.component.mjs

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

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

@@ -673,7 +673,7 @@ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: FD_COMBOBOX_COMPONENT,
             useExisting: ComboboxComponent
         }
-    ], queries: [{ propertyName: "listMessages", predicate: FD_LIST_MESSAGE_DIRECTIVE }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"640\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues.length\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template let-term=\"term\" #itemSource>\n    <span\n        fd-list-title\n        *ngIf=\"!itemTemplate; else customRendererTemplate\"\n        [innerHTML]=\"term | displayFnPipe : displayFn | highlight : inputText : highlighting && filterHighlight\"\n    >\n    </span>\n    <ng-template #customRendererTemplate>\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: term }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fdkAutoComplete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        <span\n            class=\"fd-input-group__addon fd-input-group__addon--button\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            *ngIf=\"isSearch && showClearButton && inputText && inputText.length > 0\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                title=\"Clear input\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n                (focus)=\"clearInputBtnFocus()\"\n                (blur)=\"clearInputBtnBlur()\"\n                (click)=\"_handleClearSearchTerm()\"\n            >\n                <fd-icon glyph=\"decline\"></fd-icon>\n            </button>\n        </span>\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues.length || 0 }} result list items\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"groupFn; else flatList\">\n            <ng-container *ngFor=\"let group of displayedValues | listGroupPipe : groupFn\">\n                <li role=\"group\" fd-list-group-header [tabindex]=\"0\">\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                <li\n                    role=\"option\"\n                    fd-list-item\n                    [attr.aria-placeholder]=\"group.key\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    *ngFor=\"let term of group.value\"\n                    [selected]=\"isSelected(term)\"\n                    [value]=\"term\"\n                    (keydown)=\"onItemKeyDownHandler($event, term)\"\n                    (click)=\"onMenuClickHandler(term)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n        <ng-template #flatList>\n            <li\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                class=\"fd-combobox-list-item\"\n                *ngFor=\"let term of displayedValues\"\n                [selected]=\"isSelected(term)\"\n                (keydown)=\"onItemKeyDownHandler($event, term)\"\n                (click)=\"onMenuClickHandler(term)\"\n                [value]=\"term\"\n            >\n                <ng-container [ngTemplateOutlet]=\"itemSource\" [ngTemplateOutletContext]=\"{ term: term }\"></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i9.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i9.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i9.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i2$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i2$1.DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: i2$1.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "listMessages", predicate: FD_LIST_MESSAGE_DIRECTIVE }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"640\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues.length\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template let-term=\"term\" #itemSource>\n    <span\n        fd-list-title\n        *ngIf=\"!itemTemplate; else customRendererTemplate\"\n        [innerHTML]=\"term | displayFnPipe : displayFn | highlight : inputText : highlighting && filterHighlight\"\n    >\n    </span>\n    <ng-template #customRendererTemplate>\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: term }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fdkAutoComplete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        <span\n            class=\"fd-input-group__addon fd-input-group__addon--button\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            *ngIf=\"isSearch && showClearButton && inputText && inputText.length > 0\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                title=\"Clear input\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n                (focus)=\"clearInputBtnFocus()\"\n                (blur)=\"clearInputBtnBlur()\"\n                (click)=\"_handleClearSearchTerm()\"\n            >\n                <fd-icon glyph=\"decline\"></fd-icon>\n            </button>\n        </span>\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues.length || 0 }} result list items\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"groupFn; else flatList\">\n            <ng-container *ngFor=\"let group of displayedValues | listGroupPipe : groupFn\">\n                <li role=\"group\" fd-list-group-header [tabindex]=\"0\">\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                <li\n                    role=\"option\"\n                    fd-list-item\n                    [attr.aria-placeholder]=\"group.key\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    *ngFor=\"let term of group.value\"\n                    [selected]=\"isSelected(term)\"\n                    [value]=\"term\"\n                    (keydown)=\"onItemKeyDownHandler($event, term)\"\n                    (click)=\"onMenuClickHandler(term)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n        <ng-template #flatList>\n            <li\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                class=\"fd-combobox-list-item\"\n                *ngFor=\"let term of displayedValues\"\n                [selected]=\"isSelected(term)\"\n                (keydown)=\"onItemKeyDownHandler($event, term)\"\n                (click)=\"onMenuClickHandler(term)\"\n                [value]=\"term\"\n            >\n                <ng-container [ngTemplateOutlet]=\"itemSource\" [ngTemplateOutletContext]=\"{ term: term }\"></ng-container>\n            </li>\n        </ng-template>\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i9.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i9.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i9.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i2$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i2$1.DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: i2$1.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-combobox', providers: [