@fundamental-ngx/platform 0.43.54 → 0.43.56
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/esm2020/form/combobox/combobox/combobox.component.mjs +11 -3
- package/esm2020/form/form-group/form-field/form-field.component.mjs +14 -3
- package/fesm2015/fundamental-ngx-platform-form.mjs +23 -4
- package/fesm2015/fundamental-ngx-platform-form.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-platform-form.mjs +23 -4
- package/fesm2020/fundamental-ngx-platform-form.mjs.map +1 -1
- package/form/combobox/combobox/combobox.component.d.ts +3 -1
- package/form/form-group/form-field/form-field.component.d.ts +2 -0
- package/fundamental-ngx-platform-v0.43.56.tgz +0 -0
- package/package.json +4 -4
- package/schematics/ng-add/index.js +1 -1
- package/fundamental-ngx-platform-v0.43.54.tgz +0 -0
|
@@ -800,6 +800,17 @@ class FormFieldComponent {
|
|
|
800
800
|
return typeof hintOptions === 'string';
|
|
801
801
|
}
|
|
802
802
|
/** @hidden */
|
|
803
|
+
_getLabelledBy() {
|
|
804
|
+
let retVal = 'fdp-form-label-' + this.id;
|
|
805
|
+
if (this.hasErrors() && this.groupedErrors.length > 0) {
|
|
806
|
+
retVal = retVal + ' fdp-form-message-grouped-errors-' + this.id;
|
|
807
|
+
}
|
|
808
|
+
if (this.groupedErrors.length === 0 && this.hasErrors() && this.i18Strings) {
|
|
809
|
+
retVal = retVal + ' fdp-form-message-error-' + this.id;
|
|
810
|
+
}
|
|
811
|
+
return retVal;
|
|
812
|
+
}
|
|
813
|
+
/** @hidden */
|
|
803
814
|
_validateErrorHandler() {
|
|
804
815
|
if (this._editable &&
|
|
805
816
|
this.control &&
|
|
@@ -938,10 +949,10 @@ class FormFieldComponent {
|
|
|
938
949
|
}
|
|
939
950
|
}
|
|
940
951
|
FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupContainer, optional: true }, { token: i1.FormFieldGroup, optional: true }, { token: RESPONSIVE_BREAKPOINTS_CONFIG, optional: true }, { token: i1.ResponsiveBreakpointsService }, { token: FDP_FORM_FIELD_HINT_OPTIONS_DEFAULT }, { token: FDP_FORM_FIELD_HINT_LAYOUT_CONFIG }, { token: FormFieldLayoutService, self: true }, { token: FormFieldLayoutService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
941
|
-
FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormFieldComponent, selector: "fdp-form-field", inputs: { label: "label", id: "id", hintPlacement: "hintPlacement", hint: "hint", labelLayout: "labelLayout", noLabelLayout: "noLabelLayout", validators: "validators", rank: "rank", placeholder: "placeholder", column: "column", columnLayout: "columnLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", i18Strings: "i18Strings", required: "required", editable: "editable", columns: "columns", disabled: "disabled", colon: "colon", formGroupContainer: "formGroupContainer" }, outputs: { onChange: "onChange", onColumnChange: "onColumnChange" }, providers: [formFieldProvider$1, formGroupChildProvider$2, FormFieldLayoutService], queries: [{ propertyName: "formFieldExtras", first: true, predicate: FormFieldControlExtrasComponent, descendants: true, read: ElementRef }, { propertyName: "_errorDirectiveQuery", predicate: FormFieldErrorDirective }], viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true, static: true }, { propertyName: "labelCol", first: true, predicate: ["labelCol"], descendants: true }, { propertyName: "inputMessageGroup", first: true, predicate: InputMessageGroupWithTemplate, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template #renderer>\n <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n <div\n class=\"fd-col\"\n #labelCol\n [class]=\"_labelColumnLayoutClass\"\n *ngIf=\"!noLabelLayout\"\n [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n >\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n </div>\n <span aria-hidden=\"true\" style=\"display: none\" [id]=\"'fdp-form-hint-' + id\">\n <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n {{ hintOptions.content }}\n </ng-container>\n <ng-template #hintTemplate>\n <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n </ng-template>\n </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n <fdp-input-message-group
|
|
952
|
+
FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormFieldComponent, selector: "fdp-form-field", inputs: { label: "label", id: "id", hintPlacement: "hintPlacement", hint: "hint", labelLayout: "labelLayout", noLabelLayout: "noLabelLayout", validators: "validators", rank: "rank", placeholder: "placeholder", column: "column", columnLayout: "columnLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", i18Strings: "i18Strings", required: "required", editable: "editable", columns: "columns", disabled: "disabled", colon: "colon", formGroupContainer: "formGroupContainer" }, outputs: { onChange: "onChange", onColumnChange: "onColumnChange" }, providers: [formFieldProvider$1, formGroupChildProvider$2, FormFieldLayoutService], queries: [{ propertyName: "formFieldExtras", first: true, predicate: FormFieldControlExtrasComponent, descendants: true, read: ElementRef }, { propertyName: "_errorDirectiveQuery", predicate: FormFieldErrorDirective }], viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true, static: true }, { propertyName: "labelCol", first: true, predicate: ["labelCol"], descendants: true }, { propertyName: "inputMessageGroup", first: true, predicate: InputMessageGroupWithTemplate, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template #renderer>\n <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n <div\n class=\"fd-col\"\n #labelCol\n [class]=\"_labelColumnLayoutClass\"\n *ngIf=\"!noLabelLayout\"\n [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n >\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n </div>\n <span aria-hidden=\"true\" style=\"display: none\" [id]=\"'fdp-form-hint-' + id\">\n <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n {{ hintOptions.content }}\n </ng-container>\n <ng-template #hintTemplate>\n <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n </ng-template>\n </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n <fdp-input-message-group class=\"fd-col\" [class]=\"_fieldColumnLayoutClass\" [attr.aria-labelledby]=\"_getLabelledBy()\">\n <!--\n Todo: we should extend this on FormGroup Level and have error trigger strategy that will be applied to\n all the field e.g.: [triggers]=\"['mouseenter', 'mouseleave']\"\n -->\n\n <ng-template #triggerItem>\n <ng-content></ng-content>\n </ng-template>\n\n <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n <fd-form-message\n *ngFor=\"let error of groupedErrors\"\n [type]=\"error.directive.type\"\n [attr.id]=\"'fdp-form-message-grouped-errors-' + id\"\n >\n <ng-template\n [ngIf]=\"error.directive._headingTemplateRef\"\n [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n >\n </ng-template>\n <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n <br />\n </ng-container>\n <ng-template\n [ngIf]=\"error.directive._descriptionTemplateRef\"\n [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n >\n </ng-template>\n </fd-form-message>\n </ng-container>\n\n <fd-form-message\n *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\"\n type=\"error\"\n [attr.id]=\"'fdp-form-message-error-' + id\"\n >\n <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n </ng-container>\n </fd-form-message>\n </fdp-input-message-group>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-container *ngIf=\"hintTarget === 'label'; else withoutHint\">\n <label\n [id]=\"'fdp-form-label-' + id\"\n [required]=\"editable && required\"\n fd-form-label\n [inlineHelpContent]=\"hintOptions.content\"\n [inlineHelpBodyPlacement]=\"hintOptions.placement || 'top'\"\n [inlineHelpPlacement]=\"hintOptions.position || 'after'\"\n [inlineHelpGlyph]=\"hintOptions.glyph || ''\"\n [inlineHelpTriggers]=\"hintOptions.trigger || []\"\n [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n [colon]=\"colon\"\n >\n <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n </label>\n </ng-container>\n <ng-template #withoutHint>\n <label\n [id]=\"'fdp-form-label-' + id\"\n [required]=\"editable && required\"\n fd-form-label\n [colon]=\"colon\"\n [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n >\n <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n </label>\n </ng-template>\n</ng-template>\n\n<ng-template #gapTemplate>\n <ng-container *ngIf=\"hintTarget === 'input' && hintOptions.content; else withoutHint\">\n <div class=\"fd-col fd-form-field-inline-help-container\" [class]=\"_gapColumnLayoutClass\">\n <span fd-link [undecorated]=\"true\">\n <fd-icon\n [fd-inline-help]=\"hintOptions.content\"\n [glyph]=\"hintOptions.glyph\"\n [placement]=\"hintOptions.placement || null\"\n [triggers]=\"hintOptions.trigger || []\"\n tabindex=\"0\"\n >\n </fd-icon>\n </span>\n </div>\n </ng-container>\n <ng-template #withoutHint>\n <div class=\"fd-col\" [class]=\"_gapColumnLayoutClass\"></div>\n </ng-template>\n</ng-template>\n", styles: [".fd-form-label__wrapper{display:flex;width:100%;white-space:nowrap}.fd-form-field-inline-help-container{overflow:visible!important}.fd-form-field-inline-help-container [class*=sap-icon]{margin:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "directive", type: i5.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: InputMessageGroupWithTemplate, selector: "fdp-input-message-group" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
942
953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
943
954
|
type: Component,
|
|
944
|
-
args: [{ selector: 'fdp-form-field', changeDetection: ChangeDetectionStrategy.OnPush, providers: [formFieldProvider$1, formGroupChildProvider$2, FormFieldLayoutService], template: "<ng-template #renderer>\n <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n <div\n class=\"fd-col\"\n #labelCol\n [class]=\"_labelColumnLayoutClass\"\n *ngIf=\"!noLabelLayout\"\n [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n >\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n </div>\n <span aria-hidden=\"true\" style=\"display: none\" [id]=\"'fdp-form-hint-' + id\">\n <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n {{ hintOptions.content }}\n </ng-container>\n <ng-template #hintTemplate>\n <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n </ng-template>\n </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n <fdp-input-message-group
|
|
955
|
+
args: [{ selector: 'fdp-form-field', changeDetection: ChangeDetectionStrategy.OnPush, providers: [formFieldProvider$1, formGroupChildProvider$2, FormFieldLayoutService], template: "<ng-template #renderer>\n <div [horizontal]=\"true\" fd-form-item class=\"fd-row\">\n <div\n class=\"fd-col\"\n #labelCol\n [class]=\"_labelColumnLayoutClass\"\n *ngIf=\"!noLabelLayout\"\n [style.margin-bottom.px]=\"_controlExtrasHeightPx\"\n >\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"withFormMessage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"gapTemplate\"></ng-container>\n </div>\n <span aria-hidden=\"true\" style=\"display: none\" [id]=\"'fdp-form-hint-' + id\">\n <ng-container *ngIf=\"isStringHint(hintOptions.content); else hintTemplate\">\n {{ hintOptions.content }}\n </ng-container>\n <ng-template #hintTemplate>\n <ng-template [ngTemplateOutlet]=\"$any(hintOptions.content)\"></ng-template>\n </ng-template>\n </span>\n</ng-template>\n\n<ng-template #withFormMessage>\n <fdp-input-message-group class=\"fd-col\" [class]=\"_fieldColumnLayoutClass\" [attr.aria-labelledby]=\"_getLabelledBy()\">\n <!--\n Todo: we should extend this on FormGroup Level and have error trigger strategy that will be applied to\n all the field e.g.: [triggers]=\"['mouseenter', 'mouseleave']\"\n -->\n\n <ng-template #triggerItem>\n <ng-content></ng-content>\n </ng-template>\n\n <ng-container *ngIf=\"hasErrors() && groupedErrors.length > 0\">\n <fd-form-message\n *ngFor=\"let error of groupedErrors\"\n [type]=\"error.directive.type\"\n [attr.id]=\"'fdp-form-message-grouped-errors-' + id\"\n >\n <ng-template\n [ngIf]=\"error.directive._headingTemplateRef\"\n [ngTemplateOutlet]=\"error.directive._headingTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n >\n </ng-template>\n <ng-container *ngIf=\"error.directive._headingTemplateRef && error.directive._descriptionTemplateRef\">\n <br />\n </ng-container>\n <ng-template\n [ngIf]=\"error.directive._descriptionTemplateRef\"\n [ngTemplateOutlet]=\"error.directive._descriptionTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error.error, label: label }\"\n >\n </ng-template>\n </fd-form-message>\n </ng-container>\n\n <fd-form-message\n *ngIf=\"groupedErrors.length === 0 && hasErrors() && i18Strings\"\n type=\"error\"\n [attr.id]=\"'fdp-form-message-error-' + id\"\n >\n <ng-container *ngTemplateOutlet=\"i18Strings; context: { $implicit: control?.ngControl?.errors }\">\n </ng-container>\n </fd-form-message>\n </fdp-input-message-group>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-container *ngIf=\"hintTarget === 'label'; else withoutHint\">\n <label\n [id]=\"'fdp-form-label-' + id\"\n [required]=\"editable && required\"\n fd-form-label\n [inlineHelpContent]=\"hintOptions.content\"\n [inlineHelpBodyPlacement]=\"hintOptions.placement || 'top'\"\n [inlineHelpPlacement]=\"hintOptions.position || 'after'\"\n [inlineHelpGlyph]=\"hintOptions.glyph || ''\"\n [inlineHelpTriggers]=\"hintOptions.trigger || []\"\n [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n [colon]=\"colon\"\n >\n <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n </label>\n </ng-container>\n <ng-template #withoutHint>\n <label\n [id]=\"'fdp-form-label-' + id\"\n [required]=\"editable && required\"\n fd-form-label\n [colon]=\"colon\"\n [alignLabelEnd]=\"!!(isHorizontal$ | async)\"\n >\n <span [id]=\"'fdp-form-label-content-' + id\">{{ label }}</span>\n </label>\n </ng-template>\n</ng-template>\n\n<ng-template #gapTemplate>\n <ng-container *ngIf=\"hintTarget === 'input' && hintOptions.content; else withoutHint\">\n <div class=\"fd-col fd-form-field-inline-help-container\" [class]=\"_gapColumnLayoutClass\">\n <span fd-link [undecorated]=\"true\">\n <fd-icon\n [fd-inline-help]=\"hintOptions.content\"\n [glyph]=\"hintOptions.glyph\"\n [placement]=\"hintOptions.placement || null\"\n [triggers]=\"hintOptions.trigger || []\"\n tabindex=\"0\"\n >\n </fd-icon>\n </span>\n </div>\n </ng-container>\n <ng-template #withoutHint>\n <div class=\"fd-col\" [class]=\"_gapColumnLayoutClass\"></div>\n </ng-template>\n</ng-template>\n", styles: [".fd-form-label__wrapper{display:flex;width:100%;white-space:nowrap}.fd-form-field-inline-help-container{overflow:visible!important}.fd-form-field-inline-help-container [class*=sap-icon]{margin:0}\n"] }]
|
|
945
956
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.FormGroupContainer, decorators: [{
|
|
946
957
|
type: Optional
|
|
947
958
|
}] }, { type: i1.FormFieldGroup, decorators: [{
|
|
@@ -6624,6 +6635,14 @@ class ComboboxComponent extends BaseCombobox {
|
|
|
6624
6635
|
}
|
|
6625
6636
|
this.isOpenChangeHandle(false);
|
|
6626
6637
|
}
|
|
6638
|
+
/** @hidden */
|
|
6639
|
+
_getLabelledBy() {
|
|
6640
|
+
let retVal = this.ariaLabelledBy;
|
|
6641
|
+
if (this.stateMessage) {
|
|
6642
|
+
retVal = retVal + ' fdp-list-message-combobox-state-message-' + this.id;
|
|
6643
|
+
}
|
|
6644
|
+
return retVal;
|
|
6645
|
+
}
|
|
6627
6646
|
/** @hidden if not selected update model */
|
|
6628
6647
|
_checkAndUpdate(modelValue) {
|
|
6629
6648
|
if (this.isSelectedOptionItem(modelValue)) {
|
|
@@ -6662,13 +6681,13 @@ ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
|
|
|
6662
6681
|
ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "fdp-combobox", outputs: { selectionChange: "selectionChange" }, providers: [
|
|
6663
6682
|
{ provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
|
|
6664
6683
|
contentDensityObserverProviders()
|
|
6665
|
-
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate : { count: count }\n }}\n </ng-container>\n </div>\n <fd-form-message\n *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list {{ !!stateMessage && 'fdp-combobox__list--message' }}\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n (keydown.escape)=\"_close()\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i10.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i7$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole", "preventClick"], outputs: ["keyDown"] }, { kind: "directive", type: i7$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7$1.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i7$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: i4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i4.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i3$2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i5$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6684
|
+
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getLabelledBy()\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate : { count: count }\n }}\n </ng-container>\n </div>\n <fd-form-message\n *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list {{ !!stateMessage && 'fdp-combobox__list--message' }}\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n (keydown.escape)=\"_close()\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i10.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i7$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole", "preventClick"], outputs: ["keyDown"] }, { kind: "directive", type: i7$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7$1.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i7$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: i4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i4.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i3$2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i5$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6666
6685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
6667
6686
|
type: Component,
|
|
6668
6687
|
args: [{ selector: 'fdp-combobox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
6669
6688
|
{ provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
|
|
6670
6689
|
contentDensityObserverProviders()
|
|
6671
|
-
], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"
|
|
6690
|
+
], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getLabelledBy()\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate : { count: count }\n }}\n </ng-container>\n </div>\n <fd-form-message\n *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list {{ !!stateMessage && 'fdp-combobox__list--message' }}\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n (keydown.escape)=\"_close()\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
|
|
6672
6691
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
|
|
6673
6692
|
type: Optional
|
|
6674
6693
|
}, {
|