@fundamental-ngx/core 0.58.2 → 0.58.4
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.
|
@@ -768,7 +768,7 @@ class ComboboxComponent {
|
|
|
768
768
|
provide: FD_COMBOBOX_COMPONENT,
|
|
769
769
|
useExisting: ComboboxComponent
|
|
770
770
|
}
|
|
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"], outputs: ["ariaHiddenChange"] }, { 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]=\"'coreCombobox.clearButtonTitle' | fdTranslate\"\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"], outputs: ["ariaHiddenChange"] }, { 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 }); }
|
|
772
772
|
}
|
|
773
773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
774
774
|
type: Component,
|
|
@@ -812,7 +812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
812
812
|
FdTranslatePipe,
|
|
813
813
|
ListGroupPipe,
|
|
814
814
|
TruncatedTitleDirective
|
|
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=\"
|
|
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]=\"'coreCombobox.clearButtonTitle' | fdTranslate\"\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"] }]
|
|
816
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: [{
|
|
817
817
|
type: Input
|
|
818
818
|
}], inputId: [{
|