@fundamental-ngx/core 0.58.0-rc.56 → 0.58.0-rc.58
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/combobox/index.d.ts
CHANGED
|
@@ -292,6 +292,8 @@ declare class ComboboxComponent<T = any> implements ComboboxInterface, SingleDro
|
|
|
292
292
|
/** @hidden */
|
|
293
293
|
get _customRenderer(): Nullable<TemplateRef<ComboboxItemDirectiveContext<T>>>;
|
|
294
294
|
/** @hidden */
|
|
295
|
+
_itemMousedown: boolean;
|
|
296
|
+
/** @hidden */
|
|
295
297
|
private _subscriptions;
|
|
296
298
|
/** @hidden */
|
|
297
299
|
private _value;
|
|
@@ -314,7 +316,9 @@ declare class ComboboxComponent<T = any> implements ComboboxInterface, SingleDro
|
|
|
314
316
|
/** @hidden */
|
|
315
317
|
onItemKeyDownHandler(event: KeyboardEvent, value: any): void;
|
|
316
318
|
/** @hidden */
|
|
317
|
-
|
|
319
|
+
onItemFocused(value: any): void;
|
|
320
|
+
/** @hidden */
|
|
321
|
+
onMenuClickHandler(value: any, shouldClosePopover?: boolean): void;
|
|
318
322
|
/** Handle dialog dismissing, closes popover and sets backup data. */
|
|
319
323
|
dialogDismiss(term: any): void;
|
|
320
324
|
/** Handle dialog approval, closes popover and propagates data changes. */
|
|
@@ -332,6 +332,8 @@ class ComboboxComponent {
|
|
|
332
332
|
/** @hidden */
|
|
333
333
|
this.clearInputBtnFocused = false;
|
|
334
334
|
/** @hidden */
|
|
335
|
+
this._itemMousedown = false;
|
|
336
|
+
/** @hidden */
|
|
335
337
|
this._subscriptions = new Subscription();
|
|
336
338
|
/** @hidden */
|
|
337
339
|
this.onChange = () => { };
|
|
@@ -415,15 +417,23 @@ class ComboboxComponent {
|
|
|
415
417
|
/** @hidden */
|
|
416
418
|
onItemKeyDownHandler(event, value) {
|
|
417
419
|
if (KeyUtil.isKeyCode(event, ENTER) || KeyUtil.isKeyCode(event, SPACE)) {
|
|
420
|
+
this._itemMousedown = true;
|
|
418
421
|
event.preventDefault();
|
|
419
422
|
this.onMenuClickHandler(value);
|
|
420
423
|
}
|
|
421
424
|
}
|
|
422
425
|
/** @hidden */
|
|
423
|
-
|
|
426
|
+
onItemFocused(value) {
|
|
427
|
+
if (!this._itemMousedown && !this.mobile) {
|
|
428
|
+
this.onMenuClickHandler(value, false);
|
|
429
|
+
}
|
|
430
|
+
this._itemMousedown = false;
|
|
431
|
+
}
|
|
432
|
+
/** @hidden */
|
|
433
|
+
onMenuClickHandler(value, shouldClosePopover = true) {
|
|
424
434
|
if (value || value === 0) {
|
|
425
435
|
const index = this.dropdownValues.findIndex((_value) => _value === value);
|
|
426
|
-
this._handleClickActions(value);
|
|
436
|
+
this._handleClickActions(value, shouldClosePopover);
|
|
427
437
|
this.filterHighlight = false;
|
|
428
438
|
this.itemClicked.emit({ item: value, index });
|
|
429
439
|
}
|
|
@@ -649,8 +659,8 @@ class ComboboxComponent {
|
|
|
649
659
|
return contentArray || [];
|
|
650
660
|
}
|
|
651
661
|
/** @hidden */
|
|
652
|
-
_handleClickActions(term) {
|
|
653
|
-
if (this.closeOnSelect) {
|
|
662
|
+
_handleClickActions(term, shouldClosePopover = true) {
|
|
663
|
+
if (this.closeOnSelect && shouldClosePopover) {
|
|
654
664
|
this.isOpenChangeHandle(false);
|
|
655
665
|
}
|
|
656
666
|
if (this.fillOnSelect) {
|
|
@@ -662,7 +672,9 @@ class ComboboxComponent {
|
|
|
662
672
|
this._propagateChange();
|
|
663
673
|
}
|
|
664
674
|
}
|
|
665
|
-
|
|
675
|
+
if (shouldClosePopover) {
|
|
676
|
+
this.handleSearchTermChange();
|
|
677
|
+
}
|
|
666
678
|
}
|
|
667
679
|
/** @hidden */
|
|
668
680
|
_getOptionObjectByDisplayedValue(displayValue) {
|
|
@@ -756,7 +768,7 @@ class ComboboxComponent {
|
|
|
756
768
|
provide: FD_COMBOBOX_COMPONENT,
|
|
757
769
|
useExisting: ComboboxComponent
|
|
758
770
|
}
|
|
759
|
-
], queries: [{ propertyName: "_comboboxItemRenderer", first: true, predicate: ComboboxItemDirective, descendants: true }, { propertyName: "listMessages", predicate: FD_LIST_MESSAGE_DIRECTIVE }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [scrollStrategy]=\"_repositionScrollStrategy\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readOnly\"\n [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n [style.width]=\"width && '100%'\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"!displayedValues.length\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n @if (!_customRenderer) {\n <span\n fd-list-title\n fdTruncatedTitle\n [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n >\n </span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_customRenderer\"\n [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template #mobileTemplate>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n [button]=\"showDropdownButton\"\n [glyph]=\"showDropdownButton ? glyphValue : null\"\n [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [isControl]=\"true\"\n [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n [showFocus]=\"!clearInputBtnFocused\"\n [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n (click)=\"mobile && isOpenChangeHandle(true)\"\n >\n <input\n #searchInputElement\n fdkAutoComplete\n fd-input-group-input\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n [attr.aria-required]=\"required\"\n [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n [enable]=\"autoComplete && !mobile\"\n [displayFn]=\"displayFn\"\n [options]=\"dropdownValues\"\n [inputText]=\"inputText\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [attr.aria-readonly]=\"readOnly\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [(ngModel)]=\"inputText\"\n (onComplete)=\"handleAutoComplete($event)\"\n (keydown)=\"onInputKeydownHandler($event)\"\n (paste)=\"onInputKeydownHandler('fromPaste')\"\n (ngModelChange)=\"handleSearchTermChange()\"\n (blur)=\"handleBlur()\"\n />\n @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n <span\n class=\"fd-input-group__addon fd-input-group__addon--button\"\n [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n >\n <button\n fd-button\n class=\"fd-input-group__button\"\n type=\"button\"\n [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n title=\"Clear input\"\n [class.fd-shellbar__button]=\"inShellbar\"\n [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n (focus)=\"clearInputBtnFocus()\"\n (blur)=\"clearInputBtnBlur()\"\n (click)=\"_handleClearSearchTerm()\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </span>\n }\n </fd-input-group>\n <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n {{ displayedValues.length || 0 }} result list items\n </div>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n class=\"fd-combobox-custom-list\"\n [dropdownMode]=\"true\"\n [id]=\"comboboxId + '-result'\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"comboboxId + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [hasMessage]=\"listMessages && listMessages.length > 0\"\n [byline]=\"byline\"\n [tabindex]=\"0\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n >\n <ng-content></ng-content>\n @if (groupFn) {\n @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\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.key\"\n >\n <span fd-list-title>{{ group.key }}</span>\n </li>\n @for (term of group.value; track $index; let index = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n ariaRole=\"option\"\n [attr.aria-placeholder]=\"group.key\"\n [attr.aria-setsize]=\"group.value.length\"\n [attr.aria-posinset]=\"index + 1\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n class=\"fd-combobox-list-item\"\n [selected]=\"isSelected(term)\"\n [value]=\"term\"\n (keydown)=\"onItemKeyDownHandler($event, term)\"\n (click)=\"onMenuClickHandler(term)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ term: term }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (term of displayedValues; track $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n class=\"fd-combobox-list-item\"\n [selected]=\"isSelected(term)\"\n (keydown)=\"onItemKeyDownHandler($event, term)\"\n (click)=\"onMenuClickHandler(term)\"\n [value]=\"term\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ term: term }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { 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: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { 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: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
771
|
+
], queries: [{ propertyName: "_comboboxItemRenderer", first: true, predicate: ComboboxItemDirective, descendants: true }, { propertyName: "listMessages", predicate: FD_LIST_MESSAGE_DIRECTIVE }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [scrollStrategy]=\"_repositionScrollStrategy\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readOnly\"\n [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n [style.width]=\"width && '100%'\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"!displayedValues.length\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n @if (!_customRenderer) {\n <span\n fd-list-title\n fdTruncatedTitle\n [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n >\n </span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_customRenderer\"\n [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template #mobileTemplate>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n [button]=\"showDropdownButton\"\n [glyph]=\"showDropdownButton ? glyphValue : null\"\n [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [isControl]=\"true\"\n [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n [showFocus]=\"!clearInputBtnFocused\"\n [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n (click)=\"mobile && isOpenChangeHandle(true)\"\n >\n <input\n #searchInputElement\n fdkAutoComplete\n fd-input-group-input\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n [attr.aria-required]=\"required\"\n [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n [enable]=\"autoComplete && !mobile\"\n [displayFn]=\"displayFn\"\n [options]=\"dropdownValues\"\n [inputText]=\"inputText\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [attr.aria-readonly]=\"readOnly\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [(ngModel)]=\"inputText\"\n (onComplete)=\"handleAutoComplete($event)\"\n (keydown)=\"onInputKeydownHandler($event)\"\n (paste)=\"onInputKeydownHandler('fromPaste')\"\n (ngModelChange)=\"handleSearchTermChange()\"\n (blur)=\"handleBlur()\"\n />\n @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n <span\n class=\"fd-input-group__addon fd-input-group__addon--button\"\n [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n >\n <button\n fd-button\n class=\"fd-input-group__button\"\n type=\"button\"\n [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n title=\"Clear input\"\n [class.fd-shellbar__button]=\"inShellbar\"\n [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n (focus)=\"clearInputBtnFocus()\"\n (blur)=\"clearInputBtnBlur()\"\n (click)=\"_handleClearSearchTerm()\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </span>\n }\n </fd-input-group>\n <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n {{ displayedValues.length || 0 }} result list items\n </div>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n class=\"fd-combobox-custom-list\"\n [dropdownMode]=\"true\"\n [id]=\"comboboxId + '-result'\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"comboboxId + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [hasMessage]=\"listMessages && listMessages.length > 0\"\n [byline]=\"byline\"\n [tabindex]=\"0\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n >\n <ng-content></ng-content>\n @if (groupFn) {\n @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\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.key\"\n >\n <span fd-list-title>{{ group.key }}</span>\n </li>\n @for (term of group.value; track $index; let index = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n ariaRole=\"option\"\n [attr.aria-placeholder]=\"group.key\"\n [attr.aria-setsize]=\"group.value.length\"\n [attr.aria-posinset]=\"index + 1\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n class=\"fd-combobox-list-item\"\n [selected]=\"isSelected(term)\"\n [value]=\"term\"\n (keydown)=\"onItemKeyDownHandler($event, term)\"\n (mousedown)=\"_itemMousedown = true\"\n (click)=\"onMenuClickHandler(term)\"\n (focus)=\"onItemFocused(term)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ term: term }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (term of displayedValues; track $index) {\n <li\n fd-list-item\n ariaRole=\"option\"\n [tabindex]=\"0\"\n class=\"fd-combobox-list-item\"\n [selected]=\"isSelected(term)\"\n (keydown)=\"onItemKeyDownHandler($event, term)\"\n (mousedown)=\"_itemMousedown = true\"\n (click)=\"onMenuClickHandler(term)\"\n [value]=\"term\"\n (focus)=\"onItemFocused(term)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ term: term }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { 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: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { 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: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
760
772
|
}
|
|
761
773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
762
774
|
type: Component,
|
|
@@ -800,7 +812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
800
812
|
FdTranslatePipe,
|
|
801
813
|
ListGroupPipe,
|
|
802
814
|
TruncatedTitleDirective
|
|
803
|
-
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [scrollStrategy]=\"_repositionScrollStrategy\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readOnly\"\n [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n [style.width]=\"width && '100%'\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"!displayedValues.length\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n @if (!_customRenderer) {\n <span\n fd-list-title\n fdTruncatedTitle\n [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n >\n </span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_customRenderer\"\n [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template #mobileTemplate>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n [button]=\"showDropdownButton\"\n [glyph]=\"showDropdownButton ? glyphValue : null\"\n [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [isControl]=\"true\"\n [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n [showFocus]=\"!clearInputBtnFocused\"\n [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n (click)=\"mobile && isOpenChangeHandle(true)\"\n >\n <input\n #searchInputElement\n fdkAutoComplete\n fd-input-group-input\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-
|
|
815
|
+
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [scrollStrategy]=\"_repositionScrollStrategy\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readOnly\"\n [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n [style.width]=\"width && '100%'\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"!displayedValues.length\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n @if (!_customRenderer) {\n <span\n fd-list-title\n fdTruncatedTitle\n [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n >\n </span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_customRenderer\"\n [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template #mobileTemplate>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n [button]=\"showDropdownButton\"\n [glyph]=\"showDropdownButton ? glyphValue : null\"\n [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [isControl]=\"true\"\n [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n [showFocus]=\"!clearInputBtnFocused\"\n [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n (click)=\"mobile && isOpenChangeHandle(true)\"\n >\n <input\n #searchInputElement\n fdkAutoComplete\n fd-input-group-input\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n [attr.aria-required]=\"required\"\n [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n [enable]=\"autoComplete && !mobile\"\n [displayFn]=\"displayFn\"\n [options]=\"dropdownValues\"\n [inputText]=\"inputText\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [attr.aria-readonly]=\"readOnly\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [(ngModel)]=\"inputText\"\n (onComplete)=\"handleAutoComplete($event)\"\n (keydown)=\"onInputKeydownHandler($event)\"\n (paste)=\"onInputKeydownHandler('fromPaste')\"\n (ngModelChange)=\"handleSearchTermChange()\"\n (blur)=\"handleBlur()\"\n />\n @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n <span\n class=\"fd-input-group__addon fd-input-group__addon--button\"\n [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n >\n <button\n fd-button\n class=\"fd-input-group__button\"\n type=\"button\"\n [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n title=\"Clear input\"\n [class.fd-shellbar__button]=\"inShellbar\"\n [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n (focus)=\"clearInputBtnFocus()\"\n (blur)=\"clearInputBtnBlur()\"\n (click)=\"_handleClearSearchTerm()\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </span>\n }\n </fd-input-group>\n <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n {{ displayedValues.length || 0 }} result list items\n </div>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n class=\"fd-combobox-custom-list\"\n [dropdownMode]=\"true\"\n [id]=\"comboboxId + '-result'\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"comboboxId + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [hasMessage]=\"listMessages && listMessages.length > 0\"\n [byline]=\"byline\"\n [tabindex]=\"0\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n >\n <ng-content></ng-content>\n @if (groupFn) {\n @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\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.key\"\n >\n <span fd-list-title>{{ group.key }}</span>\n </li>\n @for (term of group.value; track $index; let index = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n ariaRole=\"option\"\n [attr.aria-placeholder]=\"group.key\"\n [attr.aria-setsize]=\"group.value.length\"\n [attr.aria-posinset]=\"index + 1\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n class=\"fd-combobox-list-item\"\n [selected]=\"isSelected(term)\"\n [value]=\"term\"\n (keydown)=\"onItemKeyDownHandler($event, term)\"\n (mousedown)=\"_itemMousedown = true\"\n (click)=\"onMenuClickHandler(term)\"\n (focus)=\"onItemFocused(term)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ term: term }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (term of displayedValues; track $index) {\n <li\n fd-list-item\n ariaRole=\"option\"\n [tabindex]=\"0\"\n class=\"fd-combobox-list-item\"\n [selected]=\"isSelected(term)\"\n (keydown)=\"onItemKeyDownHandler($event, term)\"\n (mousedown)=\"_itemMousedown = true\"\n (click)=\"onMenuClickHandler(term)\"\n [value]=\"term\"\n (focus)=\"onItemFocused(term)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ term: term }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"] }]
|
|
804
816
|
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i2.DynamicComponentService }, { type: i2.FocusTrapService }, { type: i3.ContentDensityObserver }], propDecorators: { comboboxId: [{
|
|
805
817
|
type: Input
|
|
806
818
|
}], inputId: [{
|