@fundamental-ngx/core 0.43.52 → 0.43.54
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/combobox.component.d.ts +0 -2
- package/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.d.ts +3 -1
- package/esm2020/combobox/combobox.component.mjs +1 -7
- package/esm2020/datetime-picker/datetime-picker.component.mjs +8 -4
- package/esm2020/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.mjs +8 -4
- package/esm2020/list/list-navigation-item/list-navigation-item.component.mjs +5 -2
- package/esm2020/multi-combobox/multi-combobox.component.mjs +3 -8
- package/esm2020/multi-input/multi-input.component.mjs +5 -15
- package/esm2020/popover/popover.component.mjs +14 -2
- package/esm2020/token/tokenizer.component.mjs +39 -13
- package/fesm2015/fundamental-ngx-core-combobox.mjs +0 -6
- package/fesm2015/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-datetime-picker.mjs +7 -3
- package/fesm2015/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-dynamic-page.mjs +7 -3
- package/fesm2015/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-list.mjs +4 -1
- package/fesm2015/fundamental-ngx-core-list.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-multi-combobox.mjs +2 -7
- package/fesm2015/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-multi-input.mjs +4 -14
- package/fesm2015/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-popover.mjs +13 -1
- package/fesm2015/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-token.mjs +41 -15
- package/fesm2015/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-combobox.mjs +0 -6
- package/fesm2020/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-datetime-picker.mjs +7 -3
- package/fesm2020/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-dynamic-page.mjs +7 -3
- package/fesm2020/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-list.mjs +4 -1
- package/fesm2020/fundamental-ngx-core-list.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-multi-combobox.mjs +2 -7
- package/fesm2020/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-multi-input.mjs +4 -14
- package/fesm2020/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-popover.mjs +13 -1
- package/fesm2020/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-token.mjs +38 -14
- package/fesm2020/fundamental-ngx-core-token.mjs.map +1 -1
- package/fundamental-ngx-core-v0.43.54.tgz +0 -0
- package/multi-input/multi-input.component.d.ts +1 -5
- package/package.json +3 -3
- package/popover/popover.component.d.ts +2 -0
- package/schematics/add-dependencies/index.js +4 -4
- package/token/tokenizer.component.d.ts +13 -3
- package/fundamental-ngx-core-v0.43.52.tgz +0 -0
|
@@ -25,7 +25,7 @@ import { TokenizerComponent, TokenModule } from '@fundamental-ngx/core/token';
|
|
|
25
25
|
import * as i13 from '@fundamental-ngx/i18n';
|
|
26
26
|
import { I18nModule } from '@fundamental-ngx/i18n';
|
|
27
27
|
import { __awaiter, __decorate, __metadata } from 'tslib';
|
|
28
|
-
import { SPACE, ENTER, DOWN_ARROW, UP_ARROW,
|
|
28
|
+
import { SPACE, ENTER, DOWN_ARROW, UP_ARROW, TAB } from '@angular/cdk/keycodes';
|
|
29
29
|
import { BehaviorSubject, Subscription, combineLatest } from 'rxjs';
|
|
30
30
|
import { takeUntil, distinctUntilChanged, map, first, startWith } from 'rxjs/operators';
|
|
31
31
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
@@ -204,7 +204,6 @@ function isOptionItem(candidate) {
|
|
|
204
204
|
function isOptionItemBase(candidate) {
|
|
205
205
|
return typeof candidate === 'object' && candidate !== null && 'value' in candidate && 'label' in candidate;
|
|
206
206
|
}
|
|
207
|
-
let uniqueHiddenLabel = 0;
|
|
208
207
|
/**
|
|
209
208
|
* Input field with multiple selection enabled. Should be used when a user can select between a
|
|
210
209
|
* limited number of pre-defined options with a filter-enabled context.
|
|
@@ -365,10 +364,6 @@ class MultiInputComponent {
|
|
|
365
364
|
this.open = false;
|
|
366
365
|
/** Whether to display the addon button. */
|
|
367
366
|
this.displayAddonButton = true;
|
|
368
|
-
/** @hidden */
|
|
369
|
-
this._tokenCountHiddenLabel = `fd-multi-input-token-count-id-${uniqueHiddenLabel++}`;
|
|
370
|
-
/** token count hidden label */
|
|
371
|
-
this.tokenHiddenId = this._tokenCountHiddenLabel;
|
|
372
367
|
/** Event emitted, when the multi input's popover body is opened or closed */
|
|
373
368
|
this.openChange = new EventEmitter();
|
|
374
369
|
/** Emits event when the addon button is clicked. */
|
|
@@ -596,9 +591,6 @@ class MultiInputComponent {
|
|
|
596
591
|
else if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, ENTER])) {
|
|
597
592
|
this.openChangeHandle(true);
|
|
598
593
|
}
|
|
599
|
-
else if (KeyUtil.isKeyCode(event, ESCAPE)) {
|
|
600
|
-
this.openChangeHandle(false);
|
|
601
|
-
}
|
|
602
594
|
else if (KeyUtil.isKeyCode(event, TAB) && this.open) {
|
|
603
595
|
this._close();
|
|
604
596
|
}
|
|
@@ -835,7 +827,7 @@ class MultiInputComponent {
|
|
|
835
827
|
}
|
|
836
828
|
}
|
|
837
829
|
MultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.DynamicComponentService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i2$1.RtlService, optional: true }, { token: i2$1.FocusTrapService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
838
|
-
MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", addonIconTitle: "addonIconTitle", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", optionItemIdentifier: "optionItemIdentifier", newTokenValidateFn: "newTokenValidateFn", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", byline: "byline", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton", addOnButtonAriaLabel: "addOnButtonAriaLabel"
|
|
830
|
+
MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", addonIconTitle: "addonIconTitle", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", optionItemIdentifier: "optionItemIdentifier", newTokenValidateFn: "newTokenValidateFn", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", byline: "byline", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton", addOnButtonAriaLabel: "addOnButtonAriaLabel" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
|
|
839
831
|
{
|
|
840
832
|
provide: NG_VALUE_ACCESSOR,
|
|
841
833
|
useExisting: forwardRef(() => MultiInputComponent),
|
|
@@ -844,7 +836,7 @@ MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
844
836
|
MenuKeyboardService,
|
|
845
837
|
registerFormItemControl(MultiInputComponent),
|
|
846
838
|
contentDensityObserverProviders()
|
|
847
|
-
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n <div class=\"fd-multi-input fd-multi-input-custom\">\n <div class=\"fd-multi-input-field\">\n <ng-container\n [ngTemplateOutlet]=\"control\"\n [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n *ngIf=\"mobile\"\n ></ng-container>\n\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n *ngIf=\"!mobile\"\n [isOpen]=\"open\"\n (isOpenChange)=\"openChangeHandle($event)\"\n (input)=\"!open && openChangeHandle(true)\"\n [triggers]=\"[]\"\n [maxWidth]=\"_popoverMaxWidth\"\n [disabled]=\"disabled\"\n [fillControlMode]=\"fillControlMode\"\n class=\"fd-multi-input-popover-custom\"\n >\n <fd-popover-control>\n <form (submit)=\"_onSubmit()\">\n <ng-container\n *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n ></ng-container>\n </form>\n </fd-popover-control>\n\n <fd-popover-body\n [attr.aria-hidden]=\"!open\"\n [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n >\n <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n\n <ng-template #control let-showAddonButton=\"displayAddonButton\">\n <fd-input-group\n class=\"fd-multi-input-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"showAddonButton\"\n [disabled]=\"disabled\"\n [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n [isControl]=\"true\"\n [glyph]=\"showAddonButton ? glyph : ''\"\n (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n [iconTitle]=\"addonIconTitle\"\n [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n >\n <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n 'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n }}</span>\n <fd-tokenizer\n #tokenizer\n [compactCollapse]=\"compactCollapse\"\n [open]=\"open\"\n [tokenizerFocusable]=\"false\"\n (moreClickedEvent)=\"_moreClicked()\"\n class=\"fd-multi-input-tokenizer-custom\"\n tabindex=\"-1\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n >\n <fd-token\n *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n [disabled]=\"disabled\"\n (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n (onRemove)=\"_onTokenClick(option, false)\"\n >\n <span [innerHtml]=\"option.label\"></span>\n </fd-token>\n\n <input\n type=\"text\"\n class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n autocomplete=\"off\"\n fd-form-control\n fd-input-group-input\n fdkAutoComplete\n (onComplete)=\"_handleComplete($event)\"\n #searchInputElement\n [displayFn]=\"displayFn\"\n [matcher]=\"typeAheadMatcher\"\n [inputText]=\"_searchTermCtrl.value || ''\"\n [options]=\"dropdownValues\"\n [enable]=\"!includes && autoComplete && !mobile\"\n [placeholder]=\"placeholder\"\n [formControl]=\"_searchTermCtrl\"\n [attr.aria-required]=\"required\"\n [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n [attr.aria-describedby]=\"tokenHiddenId\"\n (keydown)=\"_handleInputKeydown($event)\"\n [attr.id]=\"inputId\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"tokenizer._hideTokens()\"\n [attr.title]=\"title\"\n />\n </fd-tokenizer>\n </fd-input-group>\n </ng-template>\n\n <ng-template #list>\n <ul\n *ngIf=\"viewModel.displayedOptions.length\"\n fd-list\n class=\"fd-multi-input-menu-overflow\"\n [selection]=\"true\"\n [mobileMode]=\"mobile\"\n [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n [byline]=\"byline\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [style.min-width]=\"'100%'\"\n (keydown.tab)=\"_close()\"\n aria-multiselectable=\"true\"\n >\n <li\n *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n fd-list-item\n [attr.aria-label]=\"option.label\"\n (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n [selected]=\"!!option.isSelected\"\n >\n <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n <!-- TODO -->\n </fd-checkbox>\n\n <ng-container\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n\n <li\n *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n fd-list-item\n class=\"fd-multi-input-show-all\"\n (keyDown)=\"_showAllKeyDown($event)\"\n (click)=\"_showAllClicked($event)\"\n >\n <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n </li>\n </ul>\n </ng-template>\n\n <ng-template let-option=\"option\" #itemSource>\n <span\n *ngIf=\"!itemTemplate\"\n fd-list-title\n [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n fdkTruncatedTitle\n ></span>\n\n <ng-container *ngIf=\"itemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.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: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.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: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "directive", type: i12.MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: i2$1.TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
839
|
+
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n <div class=\"fd-multi-input fd-multi-input-custom\">\n <div class=\"fd-multi-input-field\">\n <ng-container\n [ngTemplateOutlet]=\"control\"\n [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n *ngIf=\"mobile\"\n ></ng-container>\n\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n *ngIf=\"!mobile\"\n [isOpen]=\"open\"\n (isOpenChange)=\"openChangeHandle($event)\"\n (input)=\"!open && openChangeHandle(true)\"\n [triggers]=\"[]\"\n [maxWidth]=\"_popoverMaxWidth\"\n [disabled]=\"disabled\"\n [fillControlMode]=\"fillControlMode\"\n class=\"fd-multi-input-popover-custom\"\n >\n <fd-popover-control>\n <form (submit)=\"_onSubmit()\">\n <ng-container\n *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n ></ng-container>\n </form>\n </fd-popover-control>\n\n <fd-popover-body\n [attr.aria-hidden]=\"!open\"\n [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n >\n <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n\n <ng-template #control let-showAddonButton=\"displayAddonButton\">\n <fd-input-group\n class=\"fd-multi-input-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"showAddonButton\"\n [disabled]=\"disabled\"\n [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n [isControl]=\"true\"\n [glyph]=\"showAddonButton ? glyph : ''\"\n (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n [iconTitle]=\"addonIconTitle\"\n [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n >\n <fd-tokenizer\n #tokenizer\n [compactCollapse]=\"compactCollapse\"\n [open]=\"open\"\n [tokenizerFocusable]=\"false\"\n (moreClickedEvent)=\"_moreClicked()\"\n class=\"fd-multi-input-tokenizer-custom\"\n tabindex=\"-1\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n >\n <fd-token\n *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n [disabled]=\"disabled\"\n (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n (onRemove)=\"_onTokenClick(option, false)\"\n >\n <span [innerHtml]=\"option.label\"></span>\n </fd-token>\n\n <input\n type=\"text\"\n class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n autocomplete=\"off\"\n fd-form-control\n fd-input-group-input\n fdkAutoComplete\n (onComplete)=\"_handleComplete($event)\"\n #searchInputElement\n [displayFn]=\"displayFn\"\n [matcher]=\"typeAheadMatcher\"\n [inputText]=\"_searchTermCtrl.value || ''\"\n [options]=\"dropdownValues\"\n [enable]=\"!includes && autoComplete && !mobile\"\n [placeholder]=\"placeholder\"\n [formControl]=\"_searchTermCtrl\"\n [attr.aria-required]=\"required\"\n [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n (keydown)=\"_handleInputKeydown($event)\"\n [attr.id]=\"inputId\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"tokenizer._hideTokens()\"\n [attr.title]=\"title\"\n />\n </fd-tokenizer>\n </fd-input-group>\n </ng-template>\n\n <ng-template #list>\n <ul\n *ngIf=\"viewModel.displayedOptions.length\"\n fd-list\n class=\"fd-multi-input-menu-overflow\"\n [selection]=\"true\"\n [mobileMode]=\"mobile\"\n [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n [byline]=\"byline\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [style.min-width]=\"'100%'\"\n (keydown.tab)=\"_close()\"\n (keydown.escape)=\"_close()\"\n aria-multiselectable=\"true\"\n >\n <li\n *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n fd-list-item\n [attr.aria-label]=\"option.label\"\n (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n [selected]=\"!!option.isSelected\"\n >\n <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n <!-- TODO -->\n </fd-checkbox>\n\n <ng-container\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n\n <li\n *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n fd-list-item\n class=\"fd-multi-input-show-all\"\n (keyDown)=\"_showAllKeyDown($event)\"\n (click)=\"_showAllClicked($event)\"\n >\n <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n </li>\n </ul>\n </ng-template>\n\n <ng-template let-option=\"option\" #itemSource>\n <span\n *ngIf=\"!itemTemplate\"\n fd-list-title\n [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n fdkTruncatedTitle\n ></span>\n\n <ng-container *ngIf=\"itemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.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: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.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: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "directive", type: i12.MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: i2$1.TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
848
840
|
__decorate([
|
|
849
841
|
applyCssClass,
|
|
850
842
|
__metadata("design:type", Function),
|
|
@@ -862,7 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
862
854
|
MenuKeyboardService,
|
|
863
855
|
registerFormItemControl(MultiInputComponent),
|
|
864
856
|
contentDensityObserverProviders()
|
|
865
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n <div class=\"fd-multi-input fd-multi-input-custom\">\n <div class=\"fd-multi-input-field\">\n <ng-container\n [ngTemplateOutlet]=\"control\"\n [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n *ngIf=\"mobile\"\n ></ng-container>\n\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n *ngIf=\"!mobile\"\n [isOpen]=\"open\"\n (isOpenChange)=\"openChangeHandle($event)\"\n (input)=\"!open && openChangeHandle(true)\"\n [triggers]=\"[]\"\n [maxWidth]=\"_popoverMaxWidth\"\n [disabled]=\"disabled\"\n [fillControlMode]=\"fillControlMode\"\n class=\"fd-multi-input-popover-custom\"\n >\n <fd-popover-control>\n <form (submit)=\"_onSubmit()\">\n <ng-container\n *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n ></ng-container>\n </form>\n </fd-popover-control>\n\n <fd-popover-body\n [attr.aria-hidden]=\"!open\"\n [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n >\n <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n\n <ng-template #control let-showAddonButton=\"displayAddonButton\">\n <fd-input-group\n class=\"fd-multi-input-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"showAddonButton\"\n [disabled]=\"disabled\"\n [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n [isControl]=\"true\"\n [glyph]=\"showAddonButton ? glyph : ''\"\n (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n [iconTitle]=\"addonIconTitle\"\n [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n >\n <
|
|
857
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n <div class=\"fd-multi-input fd-multi-input-custom\">\n <div class=\"fd-multi-input-field\">\n <ng-container\n [ngTemplateOutlet]=\"control\"\n [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n *ngIf=\"mobile\"\n ></ng-container>\n\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list\"\n *ngIf=\"!mobile\"\n [isOpen]=\"open\"\n (isOpenChange)=\"openChangeHandle($event)\"\n (input)=\"!open && openChangeHandle(true)\"\n [triggers]=\"[]\"\n [maxWidth]=\"_popoverMaxWidth\"\n [disabled]=\"disabled\"\n [fillControlMode]=\"fillControlMode\"\n class=\"fd-multi-input-popover-custom\"\n >\n <fd-popover-control>\n <form (submit)=\"_onSubmit()\">\n <ng-container\n *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n ></ng-container>\n </form>\n </fd-popover-control>\n\n <fd-popover-body\n [attr.aria-hidden]=\"!open\"\n [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n >\n <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n\n <ng-template #control let-showAddonButton=\"displayAddonButton\">\n <fd-input-group\n class=\"fd-multi-input-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"showAddonButton\"\n [disabled]=\"disabled\"\n [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n [isControl]=\"true\"\n [glyph]=\"showAddonButton ? glyph : ''\"\n (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n [iconTitle]=\"addonIconTitle\"\n [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n >\n <fd-tokenizer\n #tokenizer\n [compactCollapse]=\"compactCollapse\"\n [open]=\"open\"\n [tokenizerFocusable]=\"false\"\n (moreClickedEvent)=\"_moreClicked()\"\n class=\"fd-multi-input-tokenizer-custom\"\n tabindex=\"-1\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n >\n <fd-token\n *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n [disabled]=\"disabled\"\n (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n (onRemove)=\"_onTokenClick(option, false)\"\n >\n <span [innerHtml]=\"option.label\"></span>\n </fd-token>\n\n <input\n type=\"text\"\n class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n autocomplete=\"off\"\n fd-form-control\n fd-input-group-input\n fdkAutoComplete\n (onComplete)=\"_handleComplete($event)\"\n #searchInputElement\n [displayFn]=\"displayFn\"\n [matcher]=\"typeAheadMatcher\"\n [inputText]=\"_searchTermCtrl.value || ''\"\n [options]=\"dropdownValues\"\n [enable]=\"!includes && autoComplete && !mobile\"\n [placeholder]=\"placeholder\"\n [formControl]=\"_searchTermCtrl\"\n [attr.aria-required]=\"required\"\n [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n (keydown)=\"_handleInputKeydown($event)\"\n [attr.id]=\"inputId\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"tokenizer._hideTokens()\"\n [attr.title]=\"title\"\n />\n </fd-tokenizer>\n </fd-input-group>\n </ng-template>\n\n <ng-template #list>\n <ul\n *ngIf=\"viewModel.displayedOptions.length\"\n fd-list\n class=\"fd-multi-input-menu-overflow\"\n [selection]=\"true\"\n [mobileMode]=\"mobile\"\n [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n [byline]=\"byline\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [style.min-width]=\"'100%'\"\n (keydown.tab)=\"_close()\"\n (keydown.escape)=\"_close()\"\n aria-multiselectable=\"true\"\n >\n <li\n *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n fd-list-item\n [attr.aria-label]=\"option.label\"\n (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n [selected]=\"!!option.isSelected\"\n >\n <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n <!-- TODO -->\n </fd-checkbox>\n\n <ng-container\n [ngTemplateOutlet]=\"itemSource\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n\n <li\n *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n fd-list-item\n class=\"fd-multi-input-show-all\"\n (keyDown)=\"_showAllKeyDown($event)\"\n (click)=\"_showAllClicked($event)\"\n >\n <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n </li>\n </ul>\n </ng-template>\n\n <ng-template let-option=\"option\" #itemSource>\n <span\n *ngIf=\"!itemTemplate\"\n fd-list-title\n [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n fdkTruncatedTitle\n ></span>\n\n <ng-container *ngIf=\"itemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"] }]
|
|
866
858
|
}], ctorParameters: function () {
|
|
867
859
|
return [{ type: i1$1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.DynamicComponentService }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i2$1.RtlService, decorators: [{
|
|
868
860
|
type: Optional
|
|
@@ -949,8 +941,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
949
941
|
type: Input
|
|
950
942
|
}], addOnButtonAriaLabel: [{
|
|
951
943
|
type: Input
|
|
952
|
-
}], tokenHiddenId: [{
|
|
953
|
-
type: Input
|
|
954
944
|
}], openChange: [{
|
|
955
945
|
type: Output
|
|
956
946
|
}], addOnButtonClicked: [{
|