@fundamental-ngx/core 0.58.3 → 0.58.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, HostListener, ContentChildren, Input, Directive, Injectable, ElementRef, ChangeDetectorRef, DestroyRef, InjectionToken, ViewChild, Inject, Component, ChangeDetectionStrategy, ViewEncapsulation, EventEmitter,
|
|
2
|
+
import { inject, HostListener, ContentChildren, Input, Directive, Injectable, ElementRef, ChangeDetectorRef, DestroyRef, Injector, viewChild, afterNextRender, InjectionToken, ViewChild, Inject, Component, ChangeDetectionStrategy, ViewEncapsulation, EventEmitter, ViewChildren, Output, NgModule } from '@angular/core';
|
|
3
3
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
4
4
|
import * as i1 from '@fundamental-ngx/cdk/utils';
|
|
5
5
|
import { KeyUtil, isJsObject, isFunction, isString, RangeSelector, coerceArraySafe, TemplateModule, TemplateDirective, resizeObservable, AutoCompleteDirective, TruncatedTitleDirective, SearchHighlightPipe, DynamicComponentService } from '@fundamental-ngx/cdk/utils';
|
|
@@ -16,6 +16,7 @@ import equal from 'fast-deep-equal';
|
|
|
16
16
|
import { BehaviorSubject, Subscription, startWith, skip, timer, isObservable, Subject } from 'rxjs';
|
|
17
17
|
import { debounceTime } from 'rxjs/operators';
|
|
18
18
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
19
|
+
import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
|
|
19
20
|
import { NgTemplateOutlet, AsyncPipe, NgClass } from '@angular/common';
|
|
20
21
|
import { BarMiddleDirective, BarElementDirective, ButtonBarComponent } from '@fundamental-ngx/core/bar';
|
|
21
22
|
import { ButtonComponent } from '@fundamental-ngx/core/button';
|
|
@@ -27,7 +28,6 @@ import { FormsModule } from '@angular/forms';
|
|
|
27
28
|
import { CheckboxComponent } from '@fundamental-ngx/core/checkbox';
|
|
28
29
|
import { FormItemComponent, FormInputMessageGroupComponent, FormControlComponent, FormMessageComponent } from '@fundamental-ngx/core/form';
|
|
29
30
|
import { InputGroupComponent, InputGroupInputDirective } from '@fundamental-ngx/core/input-group';
|
|
30
|
-
import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
|
|
31
31
|
import { ToolbarComponent } from '@fundamental-ngx/core/toolbar';
|
|
32
32
|
|
|
33
33
|
class MultiAnnouncerDirective {
|
|
@@ -225,6 +225,8 @@ class BaseMultiCombobox {
|
|
|
225
225
|
/** @Hidden */
|
|
226
226
|
this._destroyRef = inject(DestroyRef);
|
|
227
227
|
/** @hidden */
|
|
228
|
+
this._injector = inject(Injector);
|
|
229
|
+
/** @hidden */
|
|
228
230
|
this._matchingStrategy = this._multiComboboxConfig?.matchingStrategy ?? MatchingStrategy.CONTAINS;
|
|
229
231
|
/** @hidden */
|
|
230
232
|
this._dsSubscription = null;
|
|
@@ -252,6 +254,8 @@ class BaseMultiCombobox {
|
|
|
252
254
|
/** @hidden */
|
|
253
255
|
this._dataSourceChanged = false;
|
|
254
256
|
/** @hidden */
|
|
257
|
+
this.popover = viewChild(PopoverComponent, ...(ngDevMode ? [{ debugName: "popover" }] : []));
|
|
258
|
+
/** @hidden */
|
|
255
259
|
this._displayFn = (value) => displayValue(value, this.displayKey);
|
|
256
260
|
/** @hidden */
|
|
257
261
|
this._secondaryFn = (value) => {
|
|
@@ -293,6 +297,10 @@ class BaseMultiCombobox {
|
|
|
293
297
|
_emitChangeEvent() {
|
|
294
298
|
const event = new MultiComboboxSelectionChangeEvent(this, this.selectedItems);
|
|
295
299
|
this.selectionChange.emit(event);
|
|
300
|
+
// Wait for Angular to complete the current render cycle, then refresh popover position after selection changes
|
|
301
|
+
afterNextRender(() => {
|
|
302
|
+
this.popover()?.refreshPosition();
|
|
303
|
+
}, { injector: this._injector });
|
|
296
304
|
}
|
|
297
305
|
/** @hidden */
|
|
298
306
|
_setSelectedSuggestions() {
|
|
@@ -565,7 +573,7 @@ class BaseMultiCombobox {
|
|
|
565
573
|
this._cd.detectChanges();
|
|
566
574
|
}
|
|
567
575
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BaseMultiCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
568
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
576
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.4", type: BaseMultiCombobox, isStandalone: true, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
569
577
|
}
|
|
570
578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BaseMultiCombobox, decorators: [{
|
|
571
579
|
type: Directive
|
|
@@ -1409,7 +1417,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1409
1417
|
provide: MULTI_COMBOBOX_COMPONENT,
|
|
1410
1418
|
useExisting: MultiComboboxComponent
|
|
1411
1419
|
}
|
|
1412
|
-
], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { 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 }, { propertyName: "items", predicate: ["item"], 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 @if (mobile) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_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 [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions\"\n >\n @for (token of _selectedSuggestions; track token) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions.length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline\"\n [selection]=\"byline\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile && maxHeight\"\n [style.min-width.px]=\"!mobile && minWidth\"\n [style.max-width.px]=\"autoResize && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange\"\n [selectedItems]=\"_selectedSuggestions\"\n [flatItems]=\"_flatSuggestions\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"'coreMultiComboBox.listGroupHeader' | fdTranslate\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: inputText\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!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 } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.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{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open", "showOverflowPopover"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1420
|
+
], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { 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 }, { propertyName: "items", predicate: ["item"], 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 @if (mobile) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_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 [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions\"\n >\n @for (token of _selectedSuggestions; track token.id) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions.length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline\"\n [selection]=\"byline\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile && maxHeight\"\n [style.min-width.px]=\"!mobile && minWidth\"\n [style.max-width.px]=\"autoResize && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange\"\n [selectedItems]=\"_selectedSuggestions\"\n [flatItems]=\"_flatSuggestions\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group.label; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"'coreMultiComboBox.listGroupHeader' | fdTranslate\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: inputText\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!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 } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.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{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open", "showOverflowPopover"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1413
1421
|
}
|
|
1414
1422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MultiComboboxComponent, decorators: [{
|
|
1415
1423
|
type: Component,
|
|
@@ -1461,7 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1461
1469
|
SearchHighlightPipe,
|
|
1462
1470
|
MultiAnnouncerDirective,
|
|
1463
1471
|
TruncatedTitleDirective
|
|
1464
|
-
], template: "<div class=\"fd-multi-combobox\">\n @if (mobile) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_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 [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions\"\n >\n @for (token of _selectedSuggestions; track token) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions.length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline\"\n [selection]=\"byline\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile && maxHeight\"\n [style.min-width.px]=\"!mobile && minWidth\"\n [style.max-width.px]=\"autoResize && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange\"\n [selectedItems]=\"_selectedSuggestions\"\n [flatItems]=\"_flatSuggestions\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"'coreMultiComboBox.listGroupHeader' | fdTranslate\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: inputText\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!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 } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.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{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
1472
|
+
], template: "<div class=\"fd-multi-combobox\">\n @if (mobile) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_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 [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions\"\n >\n @for (token of _selectedSuggestions; track token.id) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions.length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"'coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"_searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline\"\n [selection]=\"byline\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile && maxHeight\"\n [style.min-width.px]=\"!mobile && minWidth\"\n [style.max-width.px]=\"autoResize && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange\"\n [selectedItems]=\"_selectedSuggestions\"\n [flatItems]=\"_flatSuggestions\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group.label; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"'coreMultiComboBox.listGroupHeader' | fdTranslate\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: inputText\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!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 } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.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{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
1465
1473
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1.DynamicComponentService }, { type: i1.FocusTrapService }], propDecorators: { showSelectAll: [{
|
|
1466
1474
|
type: Input
|
|
1467
1475
|
}], selectedItems: [{
|