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

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

@@ -538,8 +538,8 @@ export class MultiComboboxComponent extends BaseMultiCombobox {
         });
     }
 }
-MultiComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiComboboxComponent, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1.DynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MultiComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MultiComboboxComponent, selector: "fd-multi-combobox", inputs: { showSelectAll: "showSelectAll", selectedItems: "selectedItems", maxHeight: "maxHeight", buttonFocusable: "buttonFocusable", autoComplete: "autoComplete", entityClass: "entityClass", mobile: "mobile", mobileConfig: "mobileConfig", group: "group", groupKey: "groupKey", secondaryKey: "secondaryKey", showSecondaryText: "showSecondaryText", secondaryTextAlignment: "secondaryTextAlignment", autoResize: "autoResize", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", value: "value", fillControlMode: "fillControlMode", addonIconTitle: "addonIconTitle", invalidEntryMessage: "invalidEntryMessage", limitless: "limitless", lookupKey: "lookupKey", displayKey: "displayKey", list: "list", invalidEntryDisplayTime: "invalidEntryDisplayTime" }, outputs: { selectionChange: "selectionChange", isOpenChange: "isOpenChange", addOnButtonClicked: "addOnButtonClicked", dataRequested: "dataRequested", dataReceived: "dataReceived" }, providers: [
+MultiComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxComponent, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1.DynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MultiComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiComboboxComponent, selector: "fd-multi-combobox", inputs: { showSelectAll: "showSelectAll", selectedItems: "selectedItems", maxHeight: "maxHeight", buttonFocusable: "buttonFocusable", autoComplete: "autoComplete", entityClass: "entityClass", mobile: "mobile", mobileConfig: "mobileConfig", group: "group", groupKey: "groupKey", secondaryKey: "secondaryKey", showSecondaryText: "showSecondaryText", secondaryTextAlignment: "secondaryTextAlignment", autoResize: "autoResize", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", value: "value", fillControlMode: "fillControlMode", addonIconTitle: "addonIconTitle", invalidEntryMessage: "invalidEntryMessage", limitless: "limitless", lookupKey: "lookupKey", displayKey: "displayKey", list: "list", invalidEntryDisplayTime: "invalidEntryDisplayTime" }, outputs: { selectionChange: "selectionChange", isOpenChange: "isOpenChange", addOnButtonClicked: "addOnButtonClicked", dataRequested: "dataRequested", dataReceived: "dataReceived" }, providers: [
         CvaControl,
         contentDensityObserverProviders(),
         {
@@ -551,8 +551,8 @@ 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            >\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                    [attr.aria-label]=\"this._cva.ariaLabel\"\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            [attr.aria-label]=\"this._cva.ariaLabel\"\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    >\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\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\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, i)\"\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-container *ngIf=\"!isGroup\">\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, i)\"\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    </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\">\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-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\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-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\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", "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", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "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", "displayFn"], outputs: ["onComplete"] }, { kind: "component", type: i12.SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "pipe", type: i13.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.8", ngImport: i0, type: MultiComboboxComponent, decorators: [{
+    ], 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            >\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                    [attr.aria-label]=\"this._cva.ariaLabel\"\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            [attr.aria-label]=\"this._cva.ariaLabel\"\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    >\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\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\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, i)\"\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-container *ngIf=\"!isGroup\">\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, i)\"\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    </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\">\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-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\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-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\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", "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", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], 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", "displayFn"], outputs: ["onComplete"] }, { kind: "component", type: i12.SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "pipe", type: i13.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-combobox/multi-combobox.module.mjs

@@ -16,8 +16,8 @@ import { ToolbarModule } from '@fundamental-ngx/core/toolbar';
 import * as i0 from "@angular/core";
 export class MultiComboboxModule {
 }
-MultiComboboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiComboboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MultiComboboxModule, declarations: [MultiComboboxComponent, SelectAllTogglerComponent], imports: [CommonModule,
+MultiComboboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiComboboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxModule, declarations: [MultiComboboxComponent, SelectAllTogglerComponent], imports: [CommonModule,
         I18nModule,
         PopoverModule,
         CheckboxModule,
@@ -30,7 +30,7 @@ MultiComboboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         AutoCompleteModule,
         ContentDensityModule,
         ToolbarModule], exports: [MultiComboboxComponent] });
-MultiComboboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiComboboxModule, providers: [DynamicComponentService], imports: [CommonModule,
+MultiComboboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxModule, providers: [DynamicComponentService], imports: [CommonModule,
         I18nModule,
         PopoverModule,
         CheckboxModule,
@@ -43,7 +43,7 @@ MultiComboboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         AutoCompleteModule,
         ContentDensityModule,
         ToolbarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiComboboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/multi-combobox/select-all-toggler/select-all-toggler.component.mjs

@@ -60,8 +60,8 @@ export class SelectAllTogglerComponent extends ListFocusItem {
         this.selectAllHandler(value);
     }
 }
-SelectAllTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectAllTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectAllTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: { selectAllHandler: "selectAllHandler", valueChanges: "valueChanges", selectedItems: "selectedItems", flatItems: "flatItems" }, host: { listeners: { "keydown.enter": "onKeyDown($event)", "keydown.space": "onKeyDown($event)", "click": "onClick()" } }, providers: [
+SelectAllTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectAllTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectAllTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: { selectAllHandler: "selectAllHandler", valueChanges: "valueChanges", selectedItems: "selectedItems", flatItems: "flatItems" }, host: { listeners: { "keydown.enter": "onKeyDown($event)", "keydown.space": "onKeyDown($event)", "click": "onClick()" } }, providers: [
         {
             provide: ListFocusItem,
             useExisting: SelectAllTogglerComponent
@@ -79,7 +79,7 @@ SelectAllTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </div>
         </fd-toolbar>
     `, isInline: true, styles: ["fd-multi-combobox-select-all-toggler{display:block;background-color:var(--sapBackgroundColor);cursor:pointer;position:sticky;top:0;z-index:1}fd-multi-combobox-select-all-toggler:focus,fd-multi-combobox-select-all-toggler.is-focus{outline-offset:-.1875rem;outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--sapContent_FocusColor)}fd-multi-combobox-select-all-toggler .fd-toolbar{padding-left:1rem;padding-right:0}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item{display:flex;flex-direction:row;align-items:center;font-weight:700}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox{pointer-events:none}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark{margin-right:.5rem}[dir=rtl] fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark,fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark[dir=rtl]{margin-right:0;margin-left:.5rem}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__text{font-weight:700!important}\n"], dependencies: [{ kind: "component", type: i1.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: i2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectAllTogglerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectAllTogglerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-multi-combobox-select-all-toggler', template: `
         <fd-toolbar>

package/esm2020/multi-input/deprecated-multi-input-compact.directive.mjs

@@ -7,14 +7,14 @@ export class DeprecatedMultiInputCompactDirective extends DeprecatedCompactDirec
         super('fd-multi-input');
     }
 }
-DeprecatedMultiInputCompactDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DeprecatedMultiInputCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedMultiInputCompactDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DeprecatedMultiInputCompactDirective, selector: "fd-multi-input[compact]", providers: [
+DeprecatedMultiInputCompactDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedMultiInputCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedMultiInputCompactDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedMultiInputCompactDirective, selector: "fd-multi-input[compact]", providers: [
         {
             provide: CONTENT_DENSITY_DIRECTIVE,
             useExisting: forwardRef(() => DeprecatedMultiInputCompactDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DeprecatedMultiInputCompactDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedMultiInputCompactDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

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

@@ -72,9 +72,9 @@ export class MultiInputMobileComponent extends MobileModeBase {
         });
     }
 }
-MultiInputMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: MULTI_INPUT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiInputMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MultiInputMobileComponent, selector: "fd-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            [fdType]=\"allItemsSelected ? 'emphasized' : 'transparent'\"\n                            (click)=\"selectAll(allItemsSelected)\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i3.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputMobileComponent, decorators: [{
+MultiInputMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: MULTI_INPUT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiInputMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiInputMobileComponent, selector: "fd-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            [fdType]=\"allItemsSelected ? 'emphasized' : 'transparent'\"\n                            (click)=\"selectAll(allItemsSelected)\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i3.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-multi-input-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            [fdType]=\"allItemsSelected ? 'emphasized' : 'transparent'\"\n                            (click)=\"selectAll(allItemsSelected)\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DialogService }, { type: undefined, decorators: [{

package/esm2020/multi-input/multi-input-mobile/multi-input-mobile.module.mjs

@@ -7,10 +7,10 @@ import { CommonModule } from '@angular/common';
 import * as i0 from "@angular/core";
 export class MultiInputMobileModule {
 }
-MultiInputMobileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiInputMobileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MultiInputMobileModule, declarations: [MultiInputMobileComponent], imports: [BarModule, DialogModule, ButtonModule, CommonModule], exports: [MultiInputMobileComponent] });
-MultiInputMobileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputMobileModule, imports: [BarModule, DialogModule, ButtonModule, CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputMobileModule, decorators: [{
+MultiInputMobileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiInputMobileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MultiInputMobileModule, declarations: [MultiInputMobileComponent], imports: [BarModule, DialogModule, ButtonModule, CommonModule], exports: [MultiInputMobileComponent] });
+MultiInputMobileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputMobileModule, imports: [BarModule, DialogModule, ButtonModule, CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputMobileModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MultiInputMobileComponent],

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

@@ -599,8 +599,8 @@ export class MultiInputComponent {
         this.ariaLabel = this._translationResolver.resolve(lang, 'coreMultiInput.multiInputAriaLabel');
     }
 }
-MultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.DynamicComponentService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: FD_LANGUAGE }, { token: i2.RtlService, optional: true }, { token: i2.FocusTrapService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", newTokenValidateFn: "newTokenValidateFn", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", byline: "byline", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
+MultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.DynamicComponentService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: FD_LANGUAGE }, { token: i2.RtlService, optional: true }, { token: i2.FocusTrapService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", newTokenValidateFn: "newTokenValidateFn", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", byline: "byline", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => MultiInputComponent),
@@ -609,14 +609,14 @@ 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 [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></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 *ngTemplateOutlet=\"control\"></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>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\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            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, 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                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\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.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            [byline]=\"byline\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option.value, $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\">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-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"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "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", "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", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }], 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 [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></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 *ngTemplateOutlet=\"control\"></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>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\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            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, 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                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\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.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            [byline]=\"byline\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option.value, $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\">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-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"], 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", "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", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Array)
 ], MultiInputComponent.prototype, "buildComponentCssClass", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-multi-input', providers: [
                         {

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

@@ -16,8 +16,8 @@ import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
 import * as i0 from "@angular/core";
 export class MultiInputModule {
 }
-MultiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MultiInputModule, declarations: [MultiInputComponent, DeprecatedMultiInputCompactDirective], imports: [CommonModule,
+MultiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MultiInputModule, declarations: [MultiInputComponent, DeprecatedMultiInputCompactDirective], imports: [CommonModule,
         TokenModule,
         FormsModule,
         ReactiveFormsModule,
@@ -30,7 +30,7 @@ MultiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         LinkModule,
         AutoCompleteModule,
         ContentDensityModule], exports: [MultiInputComponent, DeprecatedMultiInputCompactDirective, ContentDensityModule] });
-MultiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputModule, imports: [CommonModule,
+MultiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputModule, imports: [CommonModule,
         TokenModule,
         FormsModule,
         ReactiveFormsModule,
@@ -43,7 +43,7 @@ MultiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
         LinkModule,
         AutoCompleteModule,
         ContentDensityModule, ContentDensityModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MultiInputComponent, DeprecatedMultiInputCompactDirective],

package/esm2020/nested-list/deprecated-nested-list-compact.directive.mjs

@@ -7,14 +7,14 @@ export class DeprecatedNestedListCompactDirective extends DeprecatedCompactDirec
         super('[fdNestedList][compact], [fd-nested-list]');
     }
 }
-DeprecatedNestedListCompactDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DeprecatedNestedListCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedNestedListCompactDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DeprecatedNestedListCompactDirective, selector: "[fdNestedList][compact], [fd-nested-list][compact]", providers: [
+DeprecatedNestedListCompactDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedNestedListCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedNestedListCompactDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedNestedListCompactDirective, selector: "[fdNestedList][compact], [fd-nested-list][compact]", providers: [
         {
             provide: CONTENT_DENSITY_DIRECTIVE,
             useExisting: forwardRef(() => DeprecatedNestedListCompactDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DeprecatedNestedListCompactDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedNestedListCompactDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedList][compact], [fd-nested-list][compact]',

package/esm2020/nested-list/nested-content/nested-list-content.directive.mjs

@@ -88,9 +88,9 @@ export class NestedListContentDirective {
         }
     }
 }
-NestedListContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedListContentDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.NestedItemService }], target: i0.ɵɵFactoryTarget.Directive });
-NestedListContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NestedListContentDirective, selector: "[fdNestedListContent], [fd-nested-list-content]", inputs: { selected: "selected" }, outputs: { selectedChange: "selectedChange", keyboardTriggered: "keyboardTriggered", clicked: "clicked" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class.is-selected": "this.selected", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "class.fd-nested-list__content": "this.fdNestedListContentClass", "class.has-child": "this.hasChildren" } }, queries: [{ propertyName: "nestedLink", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "nestedExpandIcon", first: true, predicate: NestedListExpandIconComponent, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedListContentDirective, decorators: [{
+NestedListContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedListContentDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.NestedItemService }], target: i0.ɵɵFactoryTarget.Directive });
+NestedListContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NestedListContentDirective, selector: "[fdNestedListContent], [fd-nested-list-content]", inputs: { selected: "selected" }, outputs: { selectedChange: "selectedChange", keyboardTriggered: "keyboardTriggered", clicked: "clicked" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class.is-selected": "this.selected", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "class.fd-nested-list__content": "this.fdNestedListContentClass", "class.has-child": "this.hasChildren" } }, queries: [{ propertyName: "nestedLink", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "nestedExpandIcon", first: true, predicate: NestedListExpandIconComponent, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedListContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedListContent], [fd-nested-list-content]',

package/esm2020/nested-list/nested-item/nested-item.directive.mjs

@@ -210,9 +210,9 @@ export class NestedItemDirective {
         }
     }
 }
-NestedItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedItemDirective, deps: [{ token: i1.NestedItemService }, { token: i2.NestedListKeyboardService }, { token: i3.NestedListStateService }], target: i0.ɵɵFactoryTarget.Directive });
-NestedItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NestedItemDirective, selector: "[fdNestedItem], [fd-nested-list-item]", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange", keyboardTriggered: "keyboardTriggered" }, host: { attributes: { "role": "treeitem" }, properties: { "class.fd-nested-list__item": "this.fdNestedListItemClass", "attr.aria-level": "this._ariaLevel", "attr.title": "this._title", "attr.role": "this._role", "attr.aria-expanded": "this._ariaExpanded", "attr.aria-selected": "this._ariaSelected", "attr.aria-disabled": "this._ariaDisabled", "attr.aria-label": "this._ariaLabel", "attr.aria-hidden": "this._ariaHidden" } }, providers: [NestedItemService], queries: [{ propertyName: "linkItem", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "contentItem", first: true, predicate: NestedListContentDirective, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedItemDirective, decorators: [{
+NestedItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedItemDirective, deps: [{ token: i1.NestedItemService }, { token: i2.NestedListKeyboardService }, { token: i3.NestedListStateService }], target: i0.ɵɵFactoryTarget.Directive });
+NestedItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NestedItemDirective, selector: "[fdNestedItem], [fd-nested-list-item]", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange", keyboardTriggered: "keyboardTriggered" }, host: { attributes: { "role": "treeitem" }, properties: { "class.fd-nested-list__item": "this.fdNestedListItemClass", "attr.aria-level": "this._ariaLevel", "attr.title": "this._title", "attr.role": "this._role", "attr.aria-expanded": "this._ariaExpanded", "attr.aria-selected": "this._ariaSelected", "attr.aria-disabled": "this._ariaDisabled", "attr.aria-label": "this._ariaLabel", "attr.aria-hidden": "this._ariaHidden" } }, providers: [NestedItemService], queries: [{ propertyName: "linkItem", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "contentItem", first: true, predicate: NestedListContentDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedItem], [fd-nested-list-item]',

package/esm2020/nested-list/nested-link/nested-link.directive.mjs

@@ -53,9 +53,9 @@ export class NestedLinkDirective {
         return this.title && this.title.getInnerText();
     }
 }
-NestedLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedLinkDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.NestedItemService }], target: i0.ɵɵFactoryTarget.Directive });
-NestedLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: { onClickCallback: "onClickCallback", selected: "selected", ariaDescribedby: "ariaDescribedby" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)", "focus": "onFocus()" }, properties: { "class.is-selected": "this.selected", "attr.aria-label": "this._ariaLabel", "attr.aria-describedby": "this.ariaDescribedby", "class.fd-nested-list__link": "this.fdNestedListItemClass", "attr.tabindex": "this.tabIndex", "attr.role": "this.role" } }, queries: [{ propertyName: "title", first: true, predicate: NestedListTitleDirective, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedLinkDirective, decorators: [{
+NestedLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedLinkDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.NestedItemService }], target: i0.ɵɵFactoryTarget.Directive });
+NestedLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: { onClickCallback: "onClickCallback", selected: "selected", ariaDescribedby: "ariaDescribedby" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)", "focus": "onFocus()" }, properties: { "class.is-selected": "this.selected", "attr.aria-label": "this._ariaLabel", "attr.aria-describedby": "this.ariaDescribedby", "class.fd-nested-list__link": "this.fdNestedListItemClass", "attr.tabindex": "this.tabIndex", "attr.role": "this.role" } }, queries: [{ propertyName: "title", first: true, predicate: NestedListTitleDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedLink], [fd-nested-list-link]'

package/esm2020/nested-list/nested-list/nested-list.directive.mjs

@@ -131,9 +131,9 @@ export class NestedListDirective {
         }
     }
 }
-NestedListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedListDirective, deps: [{ token: i1.NestedItemService, optional: true }, { token: i2.NestedListStateService }, { token: i3.NestedListKeyboardService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FD_LANGUAGE }, { token: i4.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Directive });
-NestedListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NestedListDirective, selector: "[fdNestedList], [fd-nested-list]", inputs: { textOnly: "textOnly", ariaRoledescriptionTree: "ariaRoledescriptionTree", ariaRoledescriptionMenuBar: "ariaRoledescriptionMenuBar", ariaLabelSelected: "ariaLabelSelected" }, host: { properties: { "class.fd-nested-list--text-only": "this.textOnly", "class.fd-nested-list": "this.fdNestedListItemClass", "attr.aria-hidden": "this.hidden", "attr.role": "this._role", "attr.aria-roledescription": "this._ariaRoledescription", "attr.aria-haspopup": "this._ariaHaspopup", "attr.tabindex": "this._tabindex" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "_nestedListHeader", first: true, predicate: NestedListHeaderDirective, descendants: true }, { propertyName: "nestedItems", predicate: i0.forwardRef(function () { return NestedItemDirective; }) }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NestedListDirective, decorators: [{
+NestedListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedListDirective, deps: [{ token: i1.NestedItemService, optional: true }, { token: i2.NestedListStateService }, { token: i3.NestedListKeyboardService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FD_LANGUAGE }, { token: i4.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Directive });
+NestedListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NestedListDirective, selector: "[fdNestedList], [fd-nested-list]", inputs: { textOnly: "textOnly", ariaRoledescriptionTree: "ariaRoledescriptionTree", ariaRoledescriptionMenuBar: "ariaRoledescriptionMenuBar", ariaLabelSelected: "ariaLabelSelected" }, host: { properties: { "class.fd-nested-list--text-only": "this.textOnly", "class.fd-nested-list": "this.fdNestedListItemClass", "attr.aria-hidden": "this.hidden", "attr.role": "this._role", "attr.aria-roledescription": "this._ariaRoledescription", "attr.aria-haspopup": "this._ariaHaspopup", "attr.tabindex": "this._tabindex" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "_nestedListHeader", first: true, predicate: NestedListHeaderDirective, descendants: true }, { propertyName: "nestedItems", predicate: i0.forwardRef(function () { return NestedItemDirective; }) }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NestedListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedList], [fd-nested-list]',