@flywheel-io/vision 19.5.3 → 19.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,7 +16,6 @@ export declare class FwTypeaheadComponent implements ControlValueAccessor {
|
|
|
16
16
|
loading: import("@angular/core").ModelSignal<boolean>;
|
|
17
17
|
disabled: import("@angular/core").ModelSignal<boolean>;
|
|
18
18
|
touched: import("@angular/core").WritableSignal<boolean>;
|
|
19
|
-
hasAmbiguousInput: import("@angular/core").WritableSignal<boolean>;
|
|
20
19
|
setDisabledState(isDisabled: boolean): void;
|
|
21
20
|
writeValue(incomingValue: string[]): void;
|
|
22
21
|
onChange: (_: string[]) => void;
|
|
@@ -40,7 +39,6 @@ export declare class FwTypeaheadComponent implements ControlValueAccessor {
|
|
|
40
39
|
handleSearchChange(event: KeyboardEvent): void;
|
|
41
40
|
allowNew: import("@angular/core").InputSignal<boolean>;
|
|
42
41
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
43
|
-
errorText: import("@angular/core").WritableSignal<string>;
|
|
44
42
|
displayedPlaceholder: import("@angular/core").Signal<string>;
|
|
45
43
|
highlightPlaceholder: import("@angular/core").Signal<boolean>;
|
|
46
44
|
/**
|
|
@@ -1093,6 +1093,15 @@ class FwTooltipDirective {
|
|
|
1093
1093
|
nativeElement.addEventListener('mouseleave', () => {
|
|
1094
1094
|
this.hideTooltip();
|
|
1095
1095
|
});
|
|
1096
|
+
// Covers the case where a tooltip is on a <mat-option> inside a <mat-select>: clicking an option
|
|
1097
|
+
// closes the panel programmatically, so mouseleave never fires.
|
|
1098
|
+
const tagsToCloseFor = ['mat-option', 'mat-select', 'fw-menu-item'];
|
|
1099
|
+
const tagName = nativeElement.tagName.toLowerCase();
|
|
1100
|
+
if (tagsToCloseFor.includes(tagName)) {
|
|
1101
|
+
nativeElement.addEventListener('click', () => {
|
|
1102
|
+
this.hideTooltip();
|
|
1103
|
+
});
|
|
1104
|
+
}
|
|
1096
1105
|
});
|
|
1097
1106
|
this.openDelayTimer = 0;
|
|
1098
1107
|
// updates the tooltip panel's caret position if a fallback position is used
|
|
@@ -1308,6 +1317,9 @@ class FwAvatarListComponent {
|
|
|
1308
1317
|
const overflowingAvatars = avatarElements.toSpliced(0, visibleAvatars.length);
|
|
1309
1318
|
if (overflowingAvatars.length > 0) {
|
|
1310
1319
|
const lastVisibleAvatar = visibleAvatars[visibleAvatars.length - 1];
|
|
1320
|
+
if (!lastVisibleAvatar) {
|
|
1321
|
+
return;
|
|
1322
|
+
}
|
|
1311
1323
|
const enoughRoomForMoreText = (hostRect.right - lastVisibleAvatar.getBoundingClientRect().right) > (moreTextElement.offsetWidth);
|
|
1312
1324
|
if (!enoughRoomForMoreText) {
|
|
1313
1325
|
overflowingAvatars.push(lastVisibleAvatar);
|
|
@@ -9689,7 +9701,6 @@ class FwTypeaheadComponent {
|
|
|
9689
9701
|
this.loading = model(false);
|
|
9690
9702
|
this.disabled = model(false);
|
|
9691
9703
|
this.touched = signal(false);
|
|
9692
|
-
this.hasAmbiguousInput = signal(false);
|
|
9693
9704
|
this.onChange = (_) => {
|
|
9694
9705
|
};
|
|
9695
9706
|
this.onTouched = () => {
|
|
@@ -9712,7 +9723,6 @@ class FwTypeaheadComponent {
|
|
|
9712
9723
|
this.searchValueChanges$ = toObservable(this.searchValue);
|
|
9713
9724
|
this.allowNew = input(true);
|
|
9714
9725
|
this.placeholder = input('Enter tags...');
|
|
9715
|
-
this.errorText = signal('');
|
|
9716
9726
|
this.displayedPlaceholder = computed(() => {
|
|
9717
9727
|
if (this.selectType() === 'single') {
|
|
9718
9728
|
return this.value()[0] || this.placeholder();
|
|
@@ -9783,9 +9793,6 @@ class FwTypeaheadComponent {
|
|
|
9783
9793
|
this.handleOptionClick = (optionValue) => {
|
|
9784
9794
|
this.onTouched();
|
|
9785
9795
|
this.searchValue.set('');
|
|
9786
|
-
// Clear error state when an option is selected
|
|
9787
|
-
this.hasAmbiguousInput.set(false);
|
|
9788
|
-
this.errorText.set('');
|
|
9789
9796
|
this.focusInput();
|
|
9790
9797
|
this.addValue(optionValue);
|
|
9791
9798
|
};
|
|
@@ -9817,9 +9824,6 @@ class FwTypeaheadComponent {
|
|
|
9817
9824
|
}
|
|
9818
9825
|
this.addValue(newValue);
|
|
9819
9826
|
this.searchValue.set('');
|
|
9820
|
-
// Clear error state when Enter is pressed to commit input
|
|
9821
|
-
this.hasAmbiguousInput.set(false);
|
|
9822
|
-
this.errorText.set('');
|
|
9823
9827
|
},
|
|
9824
9828
|
'ArrowDown': () => {
|
|
9825
9829
|
this.moveFocused('down');
|
|
@@ -9873,11 +9877,6 @@ class FwTypeaheadComponent {
|
|
|
9873
9877
|
}
|
|
9874
9878
|
const rawInputValue = event.target.value;
|
|
9875
9879
|
this.searchValue.set(rawInputValue);
|
|
9876
|
-
// Clear error state when user starts typing or clears the input
|
|
9877
|
-
if (!rawInputValue.trim() || this.hasAmbiguousInput()) {
|
|
9878
|
-
this.hasAmbiguousInput.set(false);
|
|
9879
|
-
this.errorText.set('');
|
|
9880
|
-
}
|
|
9881
9880
|
}
|
|
9882
9881
|
closeChip(chipValue) {
|
|
9883
9882
|
const currentValue = this.value();
|
|
@@ -9899,8 +9898,14 @@ class FwTypeaheadComponent {
|
|
|
9899
9898
|
// Check if there's text in the search field that wasn't committed
|
|
9900
9899
|
const hasUncommittedText = this.searchValue().trim().length > 0;
|
|
9901
9900
|
if (hasUncommittedText) {
|
|
9902
|
-
|
|
9903
|
-
this.
|
|
9901
|
+
// in the single input case it's more intuitive to commit it
|
|
9902
|
+
if (this.allowNew() && this.selectType() === 'single') {
|
|
9903
|
+
this.addValue(this.searchValue());
|
|
9904
|
+
}
|
|
9905
|
+
// close the trigger first or it flashes the search change
|
|
9906
|
+
this.trigger().close();
|
|
9907
|
+
//clear the uncommitted text
|
|
9908
|
+
this.searchValue.set('');
|
|
9904
9909
|
}
|
|
9905
9910
|
}
|
|
9906
9911
|
/* eslint-enable */
|
|
@@ -9934,13 +9939,13 @@ class FwTypeaheadComponent {
|
|
|
9934
9939
|
newlyFocused.scrollIntoView();
|
|
9935
9940
|
}
|
|
9936
9941
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9937
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectType: { classPropertyName: "selectType", publicName: "selectType", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" }, properties: { "class.
|
|
9942
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectType: { classPropertyName: "selectType", publicName: "selectType", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" }, properties: { "class.fw-touched": "touched()" } }, providers: [
|
|
9938
9943
|
{
|
|
9939
9944
|
provide: NG_VALUE_ACCESSOR,
|
|
9940
9945
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9941
9946
|
multi: true,
|
|
9942
9947
|
},
|
|
9943
|
-
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n
|
|
9948
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu>\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["maxWidth", "value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$3.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9944
9949
|
}
|
|
9945
9950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9946
9951
|
type: Component,
|
|
@@ -9961,9 +9966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
9961
9966
|
multi: true,
|
|
9962
9967
|
},
|
|
9963
9968
|
], host: {
|
|
9964
|
-
'[class.errored]': 'hasAmbiguousInput()',
|
|
9965
9969
|
'[class.fw-touched]': 'touched()',
|
|
9966
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n
|
|
9970
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu>\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
|
|
9967
9971
|
}], propDecorators: { outsideClick: [{
|
|
9968
9972
|
type: HostListener,
|
|
9969
9973
|
args: ['document:click']
|