@flywheel-io/vision 19.5.2 → 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.
|
@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
export declare class FwMenuCloseTriggersDirective {
|
|
5
5
|
triggers?: QueryList<CdkMenuTrigger>;
|
|
6
6
|
private _isOpen;
|
|
7
|
+
private elementRef;
|
|
7
8
|
outsideClick(event: MouseEvent): void;
|
|
8
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuCloseTriggersDirective, never>;
|
|
9
10
|
static ɵdir: i0.ɵɵDirectiveDeclaration<FwMenuCloseTriggersDirective, "[fwMenuCloseTriggers]", never, {}, {}, ["triggers"], never, true, never>;
|
|
@@ -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);
|
|
@@ -4955,14 +4967,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4955
4967
|
class FwMenuCloseTriggersDirective {
|
|
4956
4968
|
constructor() {
|
|
4957
4969
|
this._isOpen = false;
|
|
4970
|
+
this.elementRef = inject(ElementRef);
|
|
4958
4971
|
}
|
|
4959
4972
|
outsideClick(event) {
|
|
4960
4973
|
const target = event.target;
|
|
4961
|
-
//
|
|
4962
|
-
|
|
4974
|
+
// Find the fw-menu-container that contains our host element (parent menu context).
|
|
4975
|
+
// ng-container produces a comment node which has no .closest(), so fall back to parentElement.
|
|
4976
|
+
const hostNode = this.elementRef.nativeElement;
|
|
4977
|
+
const hostElement = hostNode.nodeType === Node.ELEMENT_NODE
|
|
4978
|
+
? hostNode
|
|
4979
|
+
: hostNode.parentElement;
|
|
4980
|
+
const hostParentMenuContainer = hostElement?.closest?.('fw-menu-container') ?? null;
|
|
4981
|
+
// Click is inside our child menu only when it lands in a fw-menu-container
|
|
4982
|
+
// that is different from the one our host lives in (i.e. not the parent menu).
|
|
4983
|
+
const clickedMenuContainer = target.closest('fw-menu-container');
|
|
4984
|
+
const clickedInsideThisMenu = clickedMenuContainer !== null && clickedMenuContainer !== hostParentMenuContainer;
|
|
4963
4985
|
// Check is clicked on trigger
|
|
4964
4986
|
const clickedOnTrigger = target.closest('[cdkMenuTriggerFor]') !== null;
|
|
4965
|
-
if (!
|
|
4987
|
+
if (!clickedInsideThisMenu && !clickedOnTrigger && this._isOpen && this.triggers?.length > 0) {
|
|
4966
4988
|
// Close menu if click outside menu and trigger
|
|
4967
4989
|
this.triggers.forEach(trigger => {
|
|
4968
4990
|
trigger.close();
|
|
@@ -9679,7 +9701,6 @@ class FwTypeaheadComponent {
|
|
|
9679
9701
|
this.loading = model(false);
|
|
9680
9702
|
this.disabled = model(false);
|
|
9681
9703
|
this.touched = signal(false);
|
|
9682
|
-
this.hasAmbiguousInput = signal(false);
|
|
9683
9704
|
this.onChange = (_) => {
|
|
9684
9705
|
};
|
|
9685
9706
|
this.onTouched = () => {
|
|
@@ -9702,7 +9723,6 @@ class FwTypeaheadComponent {
|
|
|
9702
9723
|
this.searchValueChanges$ = toObservable(this.searchValue);
|
|
9703
9724
|
this.allowNew = input(true);
|
|
9704
9725
|
this.placeholder = input('Enter tags...');
|
|
9705
|
-
this.errorText = signal('');
|
|
9706
9726
|
this.displayedPlaceholder = computed(() => {
|
|
9707
9727
|
if (this.selectType() === 'single') {
|
|
9708
9728
|
return this.value()[0] || this.placeholder();
|
|
@@ -9773,9 +9793,6 @@ class FwTypeaheadComponent {
|
|
|
9773
9793
|
this.handleOptionClick = (optionValue) => {
|
|
9774
9794
|
this.onTouched();
|
|
9775
9795
|
this.searchValue.set('');
|
|
9776
|
-
// Clear error state when an option is selected
|
|
9777
|
-
this.hasAmbiguousInput.set(false);
|
|
9778
|
-
this.errorText.set('');
|
|
9779
9796
|
this.focusInput();
|
|
9780
9797
|
this.addValue(optionValue);
|
|
9781
9798
|
};
|
|
@@ -9807,9 +9824,6 @@ class FwTypeaheadComponent {
|
|
|
9807
9824
|
}
|
|
9808
9825
|
this.addValue(newValue);
|
|
9809
9826
|
this.searchValue.set('');
|
|
9810
|
-
// Clear error state when Enter is pressed to commit input
|
|
9811
|
-
this.hasAmbiguousInput.set(false);
|
|
9812
|
-
this.errorText.set('');
|
|
9813
9827
|
},
|
|
9814
9828
|
'ArrowDown': () => {
|
|
9815
9829
|
this.moveFocused('down');
|
|
@@ -9863,11 +9877,6 @@ class FwTypeaheadComponent {
|
|
|
9863
9877
|
}
|
|
9864
9878
|
const rawInputValue = event.target.value;
|
|
9865
9879
|
this.searchValue.set(rawInputValue);
|
|
9866
|
-
// Clear error state when user starts typing or clears the input
|
|
9867
|
-
if (!rawInputValue.trim() || this.hasAmbiguousInput()) {
|
|
9868
|
-
this.hasAmbiguousInput.set(false);
|
|
9869
|
-
this.errorText.set('');
|
|
9870
|
-
}
|
|
9871
9880
|
}
|
|
9872
9881
|
closeChip(chipValue) {
|
|
9873
9882
|
const currentValue = this.value();
|
|
@@ -9889,8 +9898,14 @@ class FwTypeaheadComponent {
|
|
|
9889
9898
|
// Check if there's text in the search field that wasn't committed
|
|
9890
9899
|
const hasUncommittedText = this.searchValue().trim().length > 0;
|
|
9891
9900
|
if (hasUncommittedText) {
|
|
9892
|
-
|
|
9893
|
-
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('');
|
|
9894
9909
|
}
|
|
9895
9910
|
}
|
|
9896
9911
|
/* eslint-enable */
|
|
@@ -9924,13 +9939,13 @@ class FwTypeaheadComponent {
|
|
|
9924
9939
|
newlyFocused.scrollIntoView();
|
|
9925
9940
|
}
|
|
9926
9941
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9927
|
-
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: [
|
|
9928
9943
|
{
|
|
9929
9944
|
provide: NG_VALUE_ACCESSOR,
|
|
9930
9945
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9931
9946
|
multi: true,
|
|
9932
9947
|
},
|
|
9933
|
-
], 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 }); }
|
|
9934
9949
|
}
|
|
9935
9950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9936
9951
|
type: Component,
|
|
@@ -9951,9 +9966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
9951
9966
|
multi: true,
|
|
9952
9967
|
},
|
|
9953
9968
|
], host: {
|
|
9954
|
-
'[class.errored]': 'hasAmbiguousInput()',
|
|
9955
9969
|
'[class.fw-touched]': 'touched()',
|
|
9956
|
-
}, 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"] }]
|
|
9957
9971
|
}], propDecorators: { outsideClick: [{
|
|
9958
9972
|
type: HostListener,
|
|
9959
9973
|
args: ['document:click']
|