@fundamental-ngx/core 0.63.2-rc.7 → 0.63.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/fesm2022/fundamental-ngx-core-action-bar.mjs +26 -27
- package/fesm2022/fundamental-ngx-core-action-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +22 -25
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs +31 -35
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +43 -52
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar.mjs +43 -67
- package/fesm2022/fundamental-ngx-core-avatar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-bar.mjs +41 -50
- package/fesm2022/fundamental-ngx-core-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +14 -18
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +23 -34
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-button.mjs +37 -56
- package/fesm2022/fundamental-ngx-core-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-calendar.mjs +62 -87
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-card.mjs +188 -264
- package/fesm2022/fundamental-ngx-core-card.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +26 -35
- package/fesm2022/fundamental-ngx-core-carousel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-checkbox.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-combobox.mjs +18 -19
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-content-density.mjs +36 -46
- package/fesm2022/fundamental-ngx-core-content-density.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +14 -15
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime.mjs +31 -32
- package/fesm2022/fundamental-ngx-core-datetime.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +89 -116
- package/fesm2022/fundamental-ngx-core-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +77 -100
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-side-content.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-facets.mjs +20 -24
- package/fesm2022/fundamental-ngx-core-facets.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-input.mjs +17 -18
- package/fesm2022/fundamental-ngx-core-feed-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +24 -24
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-file-uploader.mjs +16 -16
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs +15 -17
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-flexible-column-layout.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-form.mjs +74 -74
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-formatted-text.mjs +12 -17
- package/fesm2022/fundamental-ngx-core-formatted-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs +13 -19
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +51 -56
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-icon.mjs +20 -33
- package/fesm2022/fundamental-ngx-core-icon.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs +31 -42
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-infinite-scroll.mjs +9 -11
- package/fesm2022/fundamental-ngx-core-infinite-scroll.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-info-label.mjs +18 -29
- package/fesm2022/fundamental-ngx-core-info-label.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-inline-help.mjs +25 -35
- package/fesm2022/fundamental-ngx-core-inline-help.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-input-group.mjs +21 -21
- package/fesm2022/fundamental-ngx-core-input-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs +27 -40
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs +37 -41
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-link.mjs +19 -24
- package/fesm2022/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-list.mjs +91 -100
- package/fesm2022/fundamental-ngx-core-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-menu.mjs +101 -125
- package/fesm2022/fundamental-ngx-core-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-box.mjs +38 -39
- package/fesm2022/fundamental-ngx-core-message-box.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-page.mjs +19 -19
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +55 -79
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-toast.mjs +17 -17
- package/fesm2022/fundamental-ngx-core-message-toast.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs +20 -21
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-mobile-mode.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +66 -98
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +21 -27
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +43 -46
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +132 -178
- package/fesm2022/fundamental-ngx-core-notification.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-attribute.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +17 -24
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-marker.mjs +24 -41
- package/fesm2022/fundamental-ngx-core-object-marker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-number.mjs +21 -33
- package/fesm2022/fundamental-ngx-core-object-number.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-status.mjs +26 -41
- package/fesm2022/fundamental-ngx-core-object-status.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +32 -33
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +10 -10
- package/fesm2022/fundamental-ngx-core-pagination.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-panel.mjs +35 -51
- package/fesm2022/fundamental-ngx-core-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-popover.mjs +164 -267
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +32 -46
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-progress-indicator.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-quick-view.mjs +44 -47
- package/fesm2022/fundamental-ngx-core-quick-view.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-radio.mjs +8 -8
- package/fesm2022/fundamental-ngx-core-radio.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +39 -61
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs +11 -12
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-scroll-spy.mjs +12 -17
- package/fesm2022/fundamental-ngx-core-scroll-spy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-scrollbar.mjs +12 -14
- package/fesm2022/fundamental-ngx-core-scrollbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +8 -9
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +21 -22
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-settings.mjs +60 -70
- package/fesm2022/fundamental-ngx-core-settings.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shared.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +63 -77
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-side-navigation.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-skeleton.mjs +16 -24
- package/fesm2022/fundamental-ngx-core-skeleton.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-slider.mjs +13 -15
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-split-button.mjs +10 -10
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs +35 -62
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-step-input.mjs +9 -11
- package/fesm2022/fundamental-ngx-core-step-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-switch.mjs +8 -8
- package/fesm2022/fundamental-ngx-core-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-table.mjs +50 -51
- package/fesm2022/fundamental-ngx-core-table.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tabs.mjs +55 -56
- package/fesm2022/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-text.mjs +19 -29
- package/fesm2022/fundamental-ngx-core-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-theming.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-tile.mjs +136 -171
- package/fesm2022/fundamental-ngx-core-tile.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time-picker.mjs +8 -9
- package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +14 -17
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-timeline.mjs +43 -43
- package/fesm2022/fundamental-ngx-core-title.mjs +10 -12
- package/fesm2022/fundamental-ngx-core-title.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-token.mjs +25 -34
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +32 -35
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +36 -41
- package/fesm2022/fundamental-ngx-core-tree.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +57 -43
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +84 -108
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +17 -20
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-wizard.mjs +32 -41
- package/fesm2022/fundamental-ngx-core-wizard.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core.mjs +4 -4
- package/package.json +10 -11
- package/schematics/add-styles/index.js +3 -3
- package/schematics/add-styles/index.js.map +1 -1
- package/schematics/add-theming/index.js +1 -1
- package/schematics/add-theming/index.js.map +1 -1
- package/schematics/tsconfig.json +6 -12
- package/schematics/tsconfig.spec.json +0 -2
- package/schematics/utils/calls-providers-function.js +1 -34
- package/schematics/utils/calls-providers-function.js.map +1 -1
- package/schematics/utils/ng-module-utils.js +1 -34
- package/schematics/utils/ng-module-utils.js.map +1 -1
- package/types/fundamental-ngx-core-avatar-group-legacy.d.ts +0 -1
- package/types/fundamental-ngx-core-carousel.d.ts +0 -2
- package/types/fundamental-ngx-core-list.d.ts +2 -2
- package/types/fundamental-ngx-core-menu.d.ts +4 -4
- package/types/fundamental-ngx-core-notification.d.ts +2 -0
- package/types/fundamental-ngx-core-popover.d.ts +6 -8
- package/types/fundamental-ngx-core-product-switch.d.ts +3 -6
- package/types/fundamental-ngx-core-upload-collection.d.ts +2 -0
- package/types/fundamental-ngx-core-wizard.d.ts +1 -4
- package/schematics/package.json +0 -7
|
@@ -78,10 +78,10 @@ class MultiAnnouncerDirective {
|
|
|
78
78
|
this._announcement = '';
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
82
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
81
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiAnnouncerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
82
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MultiAnnouncerDirective, isStandalone: true, selector: "[fdMultiAnnouncer]", inputs: { multiAnnouncerOptions: "multiAnnouncerOptions" }, host: { listeners: { "keyup": "_makeSearchTermChangeAnnouncements($event)" } }, queries: [{ propertyName: "_tokens", predicate: TokenComponent, descendants: true }], exportAs: ["fdMultiAnnouncer"], ngImport: i0 }); }
|
|
83
83
|
}
|
|
84
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiAnnouncerDirective, decorators: [{
|
|
85
85
|
type: Directive,
|
|
86
86
|
args: [{
|
|
87
87
|
selector: '[fdMultiAnnouncer]',
|
|
@@ -177,10 +177,10 @@ class MultiComboboxConfig {
|
|
|
177
177
|
*/
|
|
178
178
|
this.providers = new Map();
|
|
179
179
|
}
|
|
180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
181
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
181
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxConfig, providedIn: 'root' }); }
|
|
182
182
|
}
|
|
183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxConfig, decorators: [{
|
|
184
184
|
type: Injectable,
|
|
185
185
|
args: [{ providedIn: 'root' }]
|
|
186
186
|
}] });
|
|
@@ -211,41 +211,35 @@ class BaseMultiCombobox {
|
|
|
211
211
|
* Signal containing currently selected suggestion items.
|
|
212
212
|
* @hidden
|
|
213
213
|
*/
|
|
214
|
-
this._selectedSuggestions = signal([],
|
|
215
|
-
...(ngDevMode ? [{ debugName: "_selectedSuggestions" }] : /* istanbul ignore next */ []));
|
|
214
|
+
this._selectedSuggestions = signal([], ...(ngDevMode ? [{ debugName: "_selectedSuggestions" }] : []));
|
|
216
215
|
/**
|
|
217
216
|
* Signal containing currently matched suggestion items based on search text.
|
|
218
217
|
* Updates when the user types in the search field.
|
|
219
218
|
* Contains filtered options that match the current query.
|
|
220
219
|
* @hidden
|
|
221
220
|
*/
|
|
222
|
-
this._suggestions = signal([],
|
|
223
|
-
...(ngDevMode ? [{ debugName: "_suggestions" }] : /* istanbul ignore next */ []));
|
|
221
|
+
this._suggestions = signal([], ...(ngDevMode ? [{ debugName: "_suggestions" }] : []));
|
|
224
222
|
/**
|
|
225
223
|
* Signal containing flattened suggestion items (groups expanded to flat list).
|
|
226
224
|
* @hidden
|
|
227
225
|
*/
|
|
228
|
-
this._flatSuggestions = signal([],
|
|
229
|
-
...(ngDevMode ? [{ debugName: "_flatSuggestions" }] : /* istanbul ignore next */ []));
|
|
226
|
+
this._flatSuggestions = signal([], ...(ngDevMode ? [{ debugName: "_flatSuggestions" }] : []));
|
|
230
227
|
/**
|
|
231
228
|
* Signal containing the complete flattened list of all available items.
|
|
232
229
|
* @hidden
|
|
233
230
|
*/
|
|
234
|
-
this._fullFlatSuggestions = signal([],
|
|
235
|
-
...(ngDevMode ? [{ debugName: "_fullFlatSuggestions" }] : /* istanbul ignore next */ []));
|
|
231
|
+
this._fullFlatSuggestions = signal([], ...(ngDevMode ? [{ debugName: "_fullFlatSuggestions" }] : []));
|
|
236
232
|
/**
|
|
237
233
|
* Signal indicating whether the "show selected only" mode is active.
|
|
238
234
|
* In mobile mode, toggles between showing all items and showing only selected items.
|
|
239
235
|
* @hidden
|
|
240
236
|
*/
|
|
241
|
-
this.selectedShown = signal(false,
|
|
242
|
-
...(ngDevMode ? [{ debugName: "selectedShown" }] : /* istanbul ignore next */ []));
|
|
237
|
+
this.selectedShown = signal(false, ...(ngDevMode ? [{ debugName: "selectedShown" }] : []));
|
|
243
238
|
/**
|
|
244
239
|
* Writable signal for overriding the invalid entry message with i18n translations.
|
|
245
240
|
* @hidden
|
|
246
241
|
*/
|
|
247
|
-
this._invalidEntryMessageOverride = signal(null,
|
|
248
|
-
...(ngDevMode ? [{ debugName: "_invalidEntryMessageOverride" }] : /* istanbul ignore next */ []));
|
|
242
|
+
this._invalidEntryMessageOverride = signal(null, ...(ngDevMode ? [{ debugName: "_invalidEntryMessageOverride" }] : []));
|
|
249
243
|
/** @hidden */
|
|
250
244
|
this._elmRef = inject((ElementRef));
|
|
251
245
|
/** @hidden */
|
|
@@ -310,8 +304,7 @@ class BaseMultiCombobox {
|
|
|
310
304
|
* Used for controlling popover visibility and position.
|
|
311
305
|
* @hidden
|
|
312
306
|
*/
|
|
313
|
-
this.popover = viewChild(PopoverComponent,
|
|
314
|
-
...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
|
|
307
|
+
this.popover = viewChild(PopoverComponent, ...(ngDevMode ? [{ debugName: "popover" }] : []));
|
|
315
308
|
/** @hidden */
|
|
316
309
|
this._displayFn = (value) => displayValue(value, this.displayKey());
|
|
317
310
|
/** @hidden */
|
|
@@ -693,10 +686,10 @@ class BaseMultiCombobox {
|
|
|
693
686
|
this._dsSubscription.add(this.dataSourceDirective.dataSourceProvider?.dataRequested.subscribe((value) => this.dataRequested.emit(value)));
|
|
694
687
|
this._dsSubscription.add(this.dataSourceDirective.dataSourceProvider?.dataReceived.subscribe((value) => this.dataReceived.emit(value)));
|
|
695
688
|
}
|
|
696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
697
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "
|
|
689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseMultiCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
690
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: BaseMultiCombobox, isStandalone: true, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
698
691
|
}
|
|
699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseMultiCombobox, decorators: [{
|
|
700
693
|
type: Directive
|
|
701
694
|
}], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
|
|
702
695
|
|
|
@@ -767,10 +760,10 @@ class MobileMultiComboboxComponent extends MobileModeBase {
|
|
|
767
760
|
disablePaddings: true
|
|
768
761
|
});
|
|
769
762
|
}
|
|
770
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MobileMultiComboboxComponent, deps: [{ token: MULTI_COMBOBOX_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
764
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MobileMultiComboboxComponent, isStandalone: true, selector: "fd-mobile-multi-combobox", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n <fd-dialog-header>\n @if (mobileConfig.title) {\n <h1 fd-title fd-dialog-title>{{ mobileConfig.title }}</h1>\n }\n @if (mobileConfig.hasCloseButton) {\n <button fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n }\n <ng-template fdkTemplate=\"subheader\">\n <div fd-bar-middle>\n <fd-bar-element [fullWidth]=\"true\">\n <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n @if (selectedShown()) {\n <button\n fd-button\n glyph=\"multiselect-all\"\n fdType=\"emphasized\"\n [title]=\"('platformMultiCombobox.mobileShowAllItemsButton' | fdTranslate)()\"\n [attr.aria-label]=\"('platformMultiCombobox.mobileShowAllItemsButton' | fdTranslate)()\"\n class=\"fd-margin-begin--tiny\"\n (click)=\"showSelected()\"\n ></button>\n }\n @if (selectedShown() === false) {\n <button\n fd-button\n glyph=\"multiselect-all\"\n fdType=\"transparent\"\n [title]=\"('platformMultiCombobox.mobileShowSelectedItemsButton' | fdTranslate)()\"\n [attr.aria-label]=\"\n ('platformMultiCombobox.mobileShowSelectedItemsButton' | fdTranslate)()\n \"\n class=\"fd-margin-begin--tiny\"\n (click)=\"showSelected()\"\n ></button>\n }\n </fd-bar-element>\n </div>\n </ng-template>\n </fd-dialog-header>\n <fd-dialog-body>\n <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n </fd-dialog-body>\n <fd-dialog-footer>\n @if (mobileConfig.approveButtonText) {\n <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n </fd-button-bar>\n }\n @if (mobileConfig.cancelButtonText) {\n <fd-button-bar [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\"> </fd-button-bar>\n }\n </fd-dialog-footer>\n </fd-dialog>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
772
765
|
}
|
|
773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MobileMultiComboboxComponent, decorators: [{
|
|
774
767
|
type: Component,
|
|
775
768
|
args: [{ selector: 'fd-mobile-multi-combobox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
776
769
|
BarMiddleDirective,
|
|
@@ -891,8 +884,8 @@ class SelectAllTogglerComponent extends ListFocusItem {
|
|
|
891
884
|
change(value) {
|
|
892
885
|
this.selectAllHandler(value);
|
|
893
886
|
}
|
|
894
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
895
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
887
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectAllTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
888
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: SelectAllTogglerComponent, isStandalone: true, 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: [
|
|
896
889
|
{
|
|
897
890
|
provide: ListFocusItem,
|
|
898
891
|
useExisting: SelectAllTogglerComponent
|
|
@@ -912,7 +905,7 @@ class SelectAllTogglerComponent extends ListFocusItem {
|
|
|
912
905
|
</fd-toolbar>
|
|
913
906
|
`, 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:0;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-inline-end:.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: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: "ngmodule", type: FormsModule }, { 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: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
914
907
|
}
|
|
915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectAllTogglerComponent, decorators: [{
|
|
916
909
|
type: Component,
|
|
917
910
|
args: [{ selector: 'fd-multi-combobox-select-all-toggler', template: `
|
|
918
911
|
<fd-toolbar>
|
|
@@ -1011,28 +1004,27 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1011
1004
|
* Show select all checkbox
|
|
1012
1005
|
* @defaultValue false
|
|
1013
1006
|
*/
|
|
1014
|
-
this.showSelectAll = input(false, { ...(ngDevMode ? { debugName: "showSelectAll" } :
|
|
1007
|
+
this.showSelectAll = input(false, { ...(ngDevMode ? { debugName: "showSelectAll" } : {}), transform: booleanAttribute });
|
|
1015
1008
|
/**
|
|
1016
1009
|
* Maximum height of the dropdown options panel.
|
|
1017
1010
|
* @defaultValue '250px'
|
|
1018
1011
|
*/
|
|
1019
|
-
this.maxHeight = input('250px',
|
|
1020
|
-
...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
1012
|
+
this.maxHeight = input('250px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
1021
1013
|
/**
|
|
1022
1014
|
* Controls whether the addon button can receive keyboard focus.
|
|
1023
1015
|
* @defaultValue false
|
|
1024
1016
|
*/
|
|
1025
|
-
this.buttonFocusable = input(false, { ...(ngDevMode ? { debugName: "buttonFocusable" } :
|
|
1017
|
+
this.buttonFocusable = input(false, { ...(ngDevMode ? { debugName: "buttonFocusable" } : {}), transform: booleanAttribute });
|
|
1026
1018
|
/**
|
|
1027
1019
|
* Whether the autocomplete should be enabled; Enabled by default.
|
|
1028
1020
|
* @defaultValue true
|
|
1029
1021
|
*/
|
|
1030
|
-
this.autoComplete = input(true, { ...(ngDevMode ? { debugName: "autoComplete" } :
|
|
1022
|
+
this.autoComplete = input(true, { ...(ngDevMode ? { debugName: "autoComplete" } : {}), transform: booleanAttribute });
|
|
1031
1023
|
/**
|
|
1032
1024
|
* Whether list item options should be rendered as byline.
|
|
1033
1025
|
* @defaultValue false
|
|
1034
1026
|
*/
|
|
1035
|
-
this.byline = input(false, { ...(ngDevMode ? { debugName: "byline" } :
|
|
1027
|
+
this.byline = input(false, { ...(ngDevMode ? { debugName: "byline" } : {}), transform: booleanAttribute });
|
|
1036
1028
|
/**
|
|
1037
1029
|
* Max width of multi combobox dropdown body.
|
|
1038
1030
|
* `none` will not limit width of the dropdown.
|
|
@@ -1041,15 +1033,13 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1041
1033
|
*
|
|
1042
1034
|
* @defaultValue 'none'
|
|
1043
1035
|
*/
|
|
1044
|
-
this.bodyMaxWidth = input('none',
|
|
1045
|
-
...(ngDevMode ? [{ debugName: "bodyMaxWidth" }] : /* istanbul ignore next */ []));
|
|
1036
|
+
this.bodyMaxWidth = input('none', ...(ngDevMode ? [{ debugName: "bodyMaxWidth" }] : []));
|
|
1046
1037
|
/**
|
|
1047
1038
|
* TODO: Name of the entity for which DataProvider will be loaded. You can either pass list of
|
|
1048
1039
|
* items or use this entityClass and internally we should be able to do lookup to some registry
|
|
1049
1040
|
* and retrieve the best matching DataProvider that is set on application level
|
|
1050
1041
|
*/
|
|
1051
|
-
this.entityClass = input(
|
|
1052
|
-
...(ngDevMode ? [undefined, { debugName: "entityClass" }] : /* istanbul ignore next */ []));
|
|
1042
|
+
this.entityClass = input(...(ngDevMode ? [undefined, { debugName: "entityClass" }] : []));
|
|
1053
1043
|
/**
|
|
1054
1044
|
* Enables mobile-optimized rendering mode.
|
|
1055
1045
|
* When enabled, displays the combobox in a full-screen dialog optimized for touch devices.
|
|
@@ -1057,7 +1047,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1057
1047
|
*
|
|
1058
1048
|
* @defaultValue false
|
|
1059
1049
|
*/
|
|
1060
|
-
this.mobile = input(false, { ...(ngDevMode ? { debugName: "mobile" } :
|
|
1050
|
+
this.mobile = input(false, { ...(ngDevMode ? { debugName: "mobile" } : {}), transform: booleanAttribute });
|
|
1061
1051
|
/**
|
|
1062
1052
|
* Controls whether items should be grouped in the dropdown.
|
|
1063
1053
|
* When enabled, items are organized by the property specified in `groupKey`.
|
|
@@ -1065,7 +1055,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1065
1055
|
*
|
|
1066
1056
|
* @defaultValue false
|
|
1067
1057
|
*/
|
|
1068
|
-
this.group = input(false, { ...(ngDevMode ? { debugName: "group" } :
|
|
1058
|
+
this.group = input(false, { ...(ngDevMode ? { debugName: "group" } : {}), transform: booleanAttribute });
|
|
1069
1059
|
/**
|
|
1070
1060
|
* Property path for grouping items.
|
|
1071
1061
|
* Specifies which property to use for grouping items when `group` is enabled.
|
|
@@ -1077,30 +1067,27 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1077
1067
|
*
|
|
1078
1068
|
* @defaultValue ''
|
|
1079
1069
|
*/
|
|
1080
|
-
this.groupKey = input('',
|
|
1081
|
-
...(ngDevMode ? [{ debugName: "groupKey" }] : /* istanbul ignore next */ []));
|
|
1070
|
+
this.groupKey = input('', ...(ngDevMode ? [{ debugName: "groupKey" }] : []));
|
|
1082
1071
|
/**
|
|
1083
1072
|
* Property path for secondary text display.
|
|
1084
1073
|
* When `showSecondaryText` is enabled, displays this property as secondary text below the main label.
|
|
1085
1074
|
*
|
|
1086
1075
|
* @defaultValue ''
|
|
1087
1076
|
*/
|
|
1088
|
-
this.secondaryKey = input('',
|
|
1089
|
-
...(ngDevMode ? [{ debugName: "secondaryKey" }] : /* istanbul ignore next */ []));
|
|
1077
|
+
this.secondaryKey = input('', ...(ngDevMode ? [{ debugName: "secondaryKey" }] : []));
|
|
1090
1078
|
/**
|
|
1091
1079
|
* Controls visibility of the secondary text column.
|
|
1092
1080
|
* When enabled, displays secondary text from the `secondaryKey` property in a two-column layout.
|
|
1093
1081
|
*
|
|
1094
1082
|
* @defaultValue false
|
|
1095
1083
|
*/
|
|
1096
|
-
this.showSecondaryText = input(false, { ...(ngDevMode ? { debugName: "showSecondaryText" } :
|
|
1084
|
+
this.showSecondaryText = input(false, { ...(ngDevMode ? { debugName: "showSecondaryText" } : {}), transform: booleanAttribute });
|
|
1097
1085
|
/**
|
|
1098
1086
|
* Horizontally align text inside the second column (applicable for two columns layout).
|
|
1099
1087
|
*
|
|
1100
1088
|
* @defaultValue 'right'
|
|
1101
1089
|
*/
|
|
1102
|
-
this.secondaryTextAlignment = input('right',
|
|
1103
|
-
...(ngDevMode ? [{ debugName: "secondaryTextAlignment" }] : /* istanbul ignore next */ []));
|
|
1090
|
+
this.secondaryTextAlignment = input('right', ...(ngDevMode ? [{ debugName: "secondaryTextAlignment" }] : []));
|
|
1104
1091
|
/**
|
|
1105
1092
|
* Enables automatic width adjustment of the dropdown.
|
|
1106
1093
|
* When enabled, the dropdown width automatically adjusts based on content.
|
|
@@ -1108,66 +1095,57 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1108
1095
|
*
|
|
1109
1096
|
* @defaultValue true
|
|
1110
1097
|
*/
|
|
1111
|
-
this.autoResize = input(true, { ...(ngDevMode ? { debugName: "autoResize" } :
|
|
1098
|
+
this.autoResize = input(true, { ...(ngDevMode ? { debugName: "autoResize" } : {}), transform: booleanAttribute });
|
|
1112
1099
|
/**
|
|
1113
1100
|
* Controls whether clicking the addon button opens the dropdown.
|
|
1114
1101
|
* @defaultValue true
|
|
1115
1102
|
*/
|
|
1116
|
-
this.openDropdownOnAddOnClicked = input(true, { ...(ngDevMode ? { debugName: "openDropdownOnAddOnClicked" } :
|
|
1103
|
+
this.openDropdownOnAddOnClicked = input(true, { ...(ngDevMode ? { debugName: "openDropdownOnAddOnClicked" } : {}), transform: booleanAttribute });
|
|
1117
1104
|
/**
|
|
1118
1105
|
* Preset options for the Select body width, whatever is chosen, the body has a 600px limit.
|
|
1119
1106
|
* * `at-least` will apply a minimum width to the body equivalent to the width of the control. - Default
|
|
1120
1107
|
* * `equal` will apply a width to the body equivalent to the width of the control.
|
|
1121
1108
|
* * 'fit-content' will apply width needed to properly display items inside, independent of control.
|
|
1122
1109
|
*/
|
|
1123
|
-
this.fillControlMode = input('at-least',
|
|
1124
|
-
...(ngDevMode ? [{ debugName: "fillControlMode" }] : /* istanbul ignore next */ []));
|
|
1110
|
+
this.fillControlMode = input('at-least', ...(ngDevMode ? [{ debugName: "fillControlMode" }] : []));
|
|
1125
1111
|
/** Sets title attribute to addon button. */
|
|
1126
|
-
this.addonIconTitle = input(
|
|
1127
|
-
...(ngDevMode ? [undefined, { debugName: "addonIconTitle" }] : /* istanbul ignore next */ []));
|
|
1112
|
+
this.addonIconTitle = input(...(ngDevMode ? [undefined, { debugName: "addonIconTitle" }] : []));
|
|
1128
1113
|
/**
|
|
1129
1114
|
* @deprecated Use the i18n module to modify the translation for this string.
|
|
1130
1115
|
* Sets invalid entry message.
|
|
1131
1116
|
* */
|
|
1132
|
-
this.invalidEntryMessage = input(null,
|
|
1133
|
-
...(ngDevMode ? [{ debugName: "invalidEntryMessage" }] : /* istanbul ignore next */ []));
|
|
1117
|
+
this.invalidEntryMessage = input(null, ...(ngDevMode ? [{ debugName: "invalidEntryMessage" }] : []));
|
|
1134
1118
|
/** Turns limitless mode, ON or OFF */
|
|
1135
|
-
this.limitless = model(false,
|
|
1136
|
-
...(ngDevMode ? [{ debugName: "limitless" }] : /* istanbul ignore next */ []));
|
|
1119
|
+
this.limitless = model(false, ...(ngDevMode ? [{ debugName: "limitless" }] : []));
|
|
1137
1120
|
/**
|
|
1138
1121
|
* Used in filters and any kind of comparators when we work with objects and this identify
|
|
1139
1122
|
* unique field name based on which we are going to do the job
|
|
1140
1123
|
*/
|
|
1141
|
-
this.lookupKey = input('',
|
|
1142
|
-
...(ngDevMode ? [{ debugName: "lookupKey" }] : /* istanbul ignore next */ []));
|
|
1124
|
+
this.lookupKey = input('', ...(ngDevMode ? [{ debugName: "lookupKey" }] : []));
|
|
1143
1125
|
/**
|
|
1144
1126
|
* When we deal with unknown object we can use `displayKey` to retrieve value from specific
|
|
1145
1127
|
* property of the object to act as display value.
|
|
1146
1128
|
*
|
|
1147
1129
|
* @See ComboBox, Select, RadioGroup, CheckBox Group
|
|
1148
1130
|
*/
|
|
1149
|
-
this.displayKey = input('',
|
|
1150
|
-
...(ngDevMode ? [{ debugName: "displayKey" }] : /* istanbul ignore next */ []));
|
|
1131
|
+
this.displayKey = input('', ...(ngDevMode ? [{ debugName: "displayKey" }] : []));
|
|
1151
1132
|
/**
|
|
1152
1133
|
* List of values, it can be of type SelectItem, string or any object.
|
|
1153
1134
|
* Generic object type is among the list of types,
|
|
1154
1135
|
* because we allow to get labels and values using `displayKey` and `lookupKey` inputs accordingly.
|
|
1155
1136
|
*/
|
|
1156
|
-
this.list = input(
|
|
1157
|
-
...(ngDevMode ? [undefined, { debugName: "list" }] : /* istanbul ignore next */ []));
|
|
1137
|
+
this.list = input(...(ngDevMode ? [undefined, { debugName: "list" }] : []));
|
|
1158
1138
|
/**
|
|
1159
1139
|
* Time in ms for how long message of invalid entry should be displayed.
|
|
1160
1140
|
* @defaultValue 3000
|
|
1161
1141
|
*/
|
|
1162
|
-
this.invalidEntryDisplayTime = input(3000,
|
|
1163
|
-
...(ngDevMode ? [{ debugName: "invalidEntryDisplayTime" }] : /* istanbul ignore next */ []));
|
|
1142
|
+
this.invalidEntryDisplayTime = input(3000, ...(ngDevMode ? [{ debugName: "invalidEntryDisplayTime" }] : []));
|
|
1164
1143
|
/**
|
|
1165
1144
|
* String matching strategy for typeahead list.
|
|
1166
1145
|
* Available options: 'starts with per term', 'starts with', 'contains'
|
|
1167
1146
|
* @defaultValue MatchingStrategy.STARTS_WITH_PER_TERM
|
|
1168
1147
|
*/
|
|
1169
|
-
this.matchingStrategy = input(MatchingStrategy.STARTS_WITH_PER_TERM,
|
|
1170
|
-
...(ngDevMode ? [{ debugName: "matchingStrategy" }] : /* istanbul ignore next */ []));
|
|
1148
|
+
this.matchingStrategy = input(MatchingStrategy.STARTS_WITH_PER_TERM, ...(ngDevMode ? [{ debugName: "matchingStrategy" }] : []));
|
|
1171
1149
|
/** Event emitted when item is selected. */
|
|
1172
1150
|
this.selectionChange = output();
|
|
1173
1151
|
/** @hidden Emits event when the menu is opened/closed. */
|
|
@@ -1182,8 +1160,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1182
1160
|
* References the search input element within the template.
|
|
1183
1161
|
* @hidden
|
|
1184
1162
|
*/
|
|
1185
|
-
this.searchInputElement = viewChild('searchInputElement',
|
|
1186
|
-
...(ngDevMode ? [{ debugName: "searchInputElement" }] : /* istanbul ignore next */ []));
|
|
1163
|
+
this.searchInputElement = viewChild('searchInputElement', ...(ngDevMode ? [{ debugName: "searchInputElement" }] : []));
|
|
1187
1164
|
/**
|
|
1188
1165
|
* Observable version of selectionChange for template use.
|
|
1189
1166
|
*
|
|
@@ -1203,14 +1180,12 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1203
1180
|
* Computed signal for the current input text value.
|
|
1204
1181
|
* @returns Computed signal containing the current input text
|
|
1205
1182
|
*/
|
|
1206
|
-
this.inputText = computed(() => this._inputText() || '',
|
|
1207
|
-
...(ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []));
|
|
1183
|
+
this.inputText = computed(() => this._inputText() || '', ...(ngDevMode ? [{ debugName: "inputText" }] : []));
|
|
1208
1184
|
/**
|
|
1209
1185
|
* Computed signal indicating whether grouping is active.
|
|
1210
1186
|
* @hidden
|
|
1211
1187
|
*/
|
|
1212
|
-
this.isGroup = computed(() => !!(this.group() && this.groupKey()),
|
|
1213
|
-
...(ngDevMode ? [{ debugName: "isGroup" }] : /* istanbul ignore next */ []));
|
|
1188
|
+
this.isGroup = computed(() => !!(this.group() && this.groupKey()), ...(ngDevMode ? [{ debugName: "isGroup" }] : []));
|
|
1214
1189
|
/**
|
|
1215
1190
|
* Tracks whether the dropdown is currently open.
|
|
1216
1191
|
*/
|
|
@@ -1229,8 +1204,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1229
1204
|
*
|
|
1230
1205
|
* @hidden Internal writable signal for selected items
|
|
1231
1206
|
*/
|
|
1232
|
-
this._selectedItems = signal([],
|
|
1233
|
-
...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
|
|
1207
|
+
this._selectedItems = signal([], ...(ngDevMode ? [{ debugName: "_selectedItems" }] : []));
|
|
1234
1208
|
/**
|
|
1235
1209
|
* Internal writable signal storing the current input text.
|
|
1236
1210
|
*
|
|
@@ -1240,47 +1214,41 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1240
1214
|
*
|
|
1241
1215
|
* @hidden Internal writable signal for input text
|
|
1242
1216
|
*/
|
|
1243
|
-
this._inputText = signal('',
|
|
1244
|
-
...(ngDevMode ? [{ debugName: "_inputText" }] : /* istanbul ignore next */ []));
|
|
1217
|
+
this._inputText = signal('', ...(ngDevMode ? [{ debugName: "_inputText" }] : []));
|
|
1245
1218
|
/**
|
|
1246
1219
|
* Reference to the list component instance.
|
|
1247
1220
|
* @hidden
|
|
1248
1221
|
*/
|
|
1249
|
-
this.listComponent = viewChild(FD_LIST_COMPONENT,
|
|
1250
|
-
...(ngDevMode ? [{ debugName: "listComponent" }] : /* istanbul ignore next */ []));
|
|
1222
|
+
this.listComponent = viewChild(FD_LIST_COMPONENT, ...(ngDevMode ? [{ debugName: "listComponent" }] : []));
|
|
1251
1223
|
/**
|
|
1252
1224
|
* Collection of custom templates provided by content projection.
|
|
1253
1225
|
* @hidden
|
|
1254
1226
|
*/
|
|
1255
|
-
this.customTemplates = contentChildren(TemplateDirective,
|
|
1256
|
-
...(ngDevMode ? [{ debugName: "customTemplates" }] : /* istanbul ignore next */ []));
|
|
1227
|
+
this.customTemplates = contentChildren(TemplateDirective, ...(ngDevMode ? [{ debugName: "customTemplates" }] : []));
|
|
1257
1228
|
/**
|
|
1258
1229
|
* Template reference for the mobile mode control.
|
|
1259
1230
|
* @hidden
|
|
1260
1231
|
*/
|
|
1261
|
-
this.mobileControlTemplate = viewChild('mobileControlTemplate',
|
|
1262
|
-
...(ngDevMode ? [{ debugName: "mobileControlTemplate" }] : /* istanbul ignore next */ []));
|
|
1232
|
+
this.mobileControlTemplate = viewChild('mobileControlTemplate', ...(ngDevMode ? [{ debugName: "mobileControlTemplate" }] : []));
|
|
1263
1233
|
/**
|
|
1264
1234
|
* Template reference for the dropdown list.
|
|
1265
1235
|
* @hidden
|
|
1266
1236
|
*/
|
|
1267
|
-
this.listTemplate = viewChild('listTemplate',
|
|
1268
|
-
...(ngDevMode ? [{ debugName: "listTemplate" }] : /* istanbul ignore next */ []));
|
|
1237
|
+
this.listTemplate = viewChild('listTemplate', ...(ngDevMode ? [{ debugName: "listTemplate" }] : []));
|
|
1269
1238
|
/**
|
|
1270
1239
|
* Reference to the tokenizer component instance.
|
|
1271
1240
|
* @hidden
|
|
1272
1241
|
*/
|
|
1273
|
-
this._tokenizer = viewChild(TokenizerComponent,
|
|
1274
|
-
...(ngDevMode ? [{ debugName: "_tokenizer" }] : /* istanbul ignore next */ []));
|
|
1242
|
+
this._tokenizer = viewChild(TokenizerComponent, ...(ngDevMode ? [{ debugName: "_tokenizer" }] : []));
|
|
1275
1243
|
/**
|
|
1276
1244
|
* Reference to the input group element.
|
|
1277
1245
|
* @hidden
|
|
1278
1246
|
*/
|
|
1279
|
-
this._inputGroup = viewChild('inputGroup', { ...(ngDevMode ? { debugName: "_inputGroup" } :
|
|
1247
|
+
this._inputGroup = viewChild('inputGroup', { ...(ngDevMode ? { debugName: "_inputGroup" } : {}), read: ElementRef });
|
|
1280
1248
|
/**
|
|
1281
1249
|
* @hidden
|
|
1282
1250
|
*/
|
|
1283
|
-
this.items = viewChildren('item', { ...(ngDevMode ? { debugName: "items" } :
|
|
1251
|
+
this.items = viewChildren('item', { ...(ngDevMode ? { debugName: "items" } : {}), read: ElementRef });
|
|
1284
1252
|
/**
|
|
1285
1253
|
* Observable stream of the current language configuration.
|
|
1286
1254
|
* @hidden
|
|
@@ -1787,8 +1755,8 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1787
1755
|
}
|
|
1788
1756
|
});
|
|
1789
1757
|
}
|
|
1790
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1791
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1758
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.DynamicComponentService }, { token: i1.FocusTrapService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MultiComboboxComponent, isStandalone: true, selector: "fd-multi-combobox", inputs: { mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null }, byline: { classPropertyName: "byline", publicName: "byline", isSignal: true, isRequired: false, transformFunction: null }, bodyMaxWidth: { classPropertyName: "bodyMaxWidth", publicName: "bodyMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, entityClass: { classPropertyName: "entityClass", publicName: "entityClass", isSignal: true, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, secondaryKey: { classPropertyName: "secondaryKey", publicName: "secondaryKey", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryText: { classPropertyName: "showSecondaryText", publicName: "showSecondaryText", isSignal: true, isRequired: false, transformFunction: null }, secondaryTextAlignment: { classPropertyName: "secondaryTextAlignment", publicName: "secondaryTextAlignment", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, openDropdownOnAddOnClicked: { classPropertyName: "openDropdownOnAddOnClicked", publicName: "openDropdownOnAddOnClicked", isSignal: true, isRequired: false, transformFunction: null }, fillControlMode: { classPropertyName: "fillControlMode", publicName: "fillControlMode", isSignal: true, isRequired: false, transformFunction: null }, addonIconTitle: { classPropertyName: "addonIconTitle", publicName: "addonIconTitle", isSignal: true, isRequired: false, transformFunction: null }, invalidEntryMessage: { classPropertyName: "invalidEntryMessage", publicName: "invalidEntryMessage", isSignal: true, isRequired: false, transformFunction: null }, limitless: { classPropertyName: "limitless", publicName: "limitless", isSignal: true, isRequired: false, transformFunction: null }, lookupKey: { classPropertyName: "lookupKey", publicName: "lookupKey", isSignal: true, isRequired: false, transformFunction: null }, displayKey: { classPropertyName: "displayKey", publicName: "displayKey", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, invalidEntryDisplayTime: { classPropertyName: "invalidEntryDisplayTime", publicName: "invalidEntryDisplayTime", isSignal: true, isRequired: false, transformFunction: null }, matchingStrategy: { classPropertyName: "matchingStrategy", publicName: "matchingStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { limitless: "limitlessChange", selectionChange: "selectionChange", isOpenChange: "isOpenChange", addOnButtonClicked: "addOnButtonClicked", dataRequested: "dataRequested", dataReceived: "dataReceived" }, providers: [
|
|
1792
1760
|
CvaControl,
|
|
1793
1761
|
DynamicComponentService,
|
|
1794
1762
|
contentDensityObserverProviders(),
|
|
@@ -1800,9 +1768,9 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1800
1768
|
provide: MULTI_COMBOBOX_COMPONENT,
|
|
1801
1769
|
useExisting: MultiComboboxComponent
|
|
1802
1770
|
}
|
|
1803
|
-
], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, isSignal: true }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true, isSignal: true }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true, isSignal: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true, isSignal: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true, isSignal: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef, isSignal: true }], 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)=\"_setInputText($event); _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)=\"_setInputText($event); _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.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: 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", "externalHiddenCount"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused", "selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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", "searchResultsList"], 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", "scope"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "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 }); }
|
|
1771
|
+
], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, isSignal: true }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true, isSignal: true }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true, isSignal: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true, isSignal: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true, isSignal: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef, isSignal: true }], 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)=\"_setInputText($event); _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)=\"_setInputText($event); _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.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: 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", "externalHiddenCount"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused", "selectedChange"] }, { 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", "searchResultsList"], 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", "scope"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "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 }); }
|
|
1804
1772
|
}
|
|
1805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxComponent, decorators: [{
|
|
1806
1774
|
type: Component,
|
|
1807
1775
|
args: [{ selector: 'fd-multi-combobox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
|
1808
1776
|
{
|
|
@@ -1866,11 +1834,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1866
1834
|
* Use direct imports of components and directives.
|
|
1867
1835
|
*/
|
|
1868
1836
|
class MultiComboboxModule {
|
|
1869
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1870
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1871
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1838
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxModule, imports: [MultiComboboxComponent, SelectAllTogglerComponent, MultiAnnouncerDirective], exports: [MultiComboboxComponent, SelectAllTogglerComponent, MultiAnnouncerDirective] }); }
|
|
1839
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxModule, imports: [MultiComboboxComponent, SelectAllTogglerComponent] }); }
|
|
1872
1840
|
}
|
|
1873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxModule, decorators: [{
|
|
1874
1842
|
type: NgModule,
|
|
1875
1843
|
args: [{
|
|
1876
1844
|
imports: [MultiComboboxComponent, SelectAllTogglerComponent, MultiAnnouncerDirective],
|