@flywheel-io/vision 2.4.5 → 2.5.0

package/fesm2022/flywheel-io-vision.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, signal, effect, inject, ChangeDetectorRef, output, contentChildren, Host, viewChild, ViewChildren, Self } from '@angular/core';
+import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, signal, effect, inject, ChangeDetectorRef, output, contentChildren, Host, viewChild, ViewChildren, Self, ElementRef, viewChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -9,7 +9,7 @@ import * as i1$2 from '@angular/cdk/dialog';
 import { Dialog, DEFAULT_DIALOG_CONFIG, DIALOG_SCROLL_STRATEGY, DialogModule } from '@angular/cdk/dialog';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
-import { of, BehaviorSubject, Subscription, min } from 'rxjs';
+import { of, BehaviorSubject, Subscription, min, startWith, tap, switchMap, map } from 'rxjs';
 import { parseISO, isBefore, isSameDay, isAfter } from 'date-fns';
 import { isValidPhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import { trigger, state, transition, style, animate } from '@angular/animations';
@@ -22,6 +22,7 @@ export { CdkTableModule } from '@angular/cdk/table';
 import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 
 class FwIconComponent {
     get style() {
@@ -4216,7 +4217,7 @@ class FwPopoverComponent {
         };
         this.registerEventListeners = effect(() => {
             const trigger = this.trigger();
-            if (!this.trigger) {
+            if (!trigger) {
                 return;
             }
             if (this.action === 'mouseenter' && !trigger.onmouseenter) {
@@ -5225,7 +5226,7 @@ class FwPaginatorComponent {
         this.selectorTitle = 'Items per page:';
         this.page = new EventEmitter();
         this.pages = [];
-        this.pagesTrackByFn = (index, page) => page.pageIndex;
+        this.pagesTrackByFn = (_, page) => page.pageIndex;
     }
     ngOnChanges(changes) {
         if (changes.pageIndex || changes.maxPagesShown || changes.length || changes.pageSize) {
@@ -5470,7 +5471,7 @@ class FwMultiSelectMenuComponent {
             this.displayedOptions().forEach((item, index) => {
                 item.focused = index === this.focusedIndex();
             });
-        });
+        }, { allowSignalWrites: true });
         /* eslint-disable @typescript-eslint/naming-convention, @rx-angular/prefer-no-layout-sensitive-apis */
         this.keyboardActionMap = {
             'ArrowDown': () => {
@@ -5554,7 +5555,7 @@ class FwMultiSelectMenuComponent {
                 icon: newMenuItem.icon,
             };
             this.options.push(newOption);
-            newMenuItem.mouseEnterHandler.set((event, item) => {
+            newMenuItem.mouseEnterHandler.set((_, item) => {
                 this.setFocusedIndex(item);
             });
             // add click listener
@@ -8426,16 +8427,294 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+// the nature of this component is to handle a complex layout issue so disabling this lint rule
+/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
+class FwChipListComponent {
+    constructor() {
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.hostElement = inject(ElementRef);
+        this.childChipElementRefs = contentChildren(FwChipComponent, { read: ElementRef });
+        this.moreText = viewChild.required('moreText');
+        this.hiddenElementCount = signal(0);
+        this.hiddenChips = signal([]);
+        this.hiddenLabels = computed(() => {
+            return this.hiddenChips().map(chip => {
+                // this relies on the dom shape of the chip, might be fragile
+                const contentSpan = chip.querySelector('span');
+                return contentSpan.innerText;
+            }).join(', ');
+        });
+        this.childrenChanged = effect(() => {
+            this.childChipElementRefs();
+            this.calcChipOverflow();
+        }, { allowSignalWrites: true });
+        this.resizeObserver = new ResizeObserver(() => {
+            this.calcChipOverflow();
+        });
+    }
+    ngOnInit() {
+        this.resizeObserver.observe(this.hostElement.nativeElement);
+    }
+    calcChipOverflow() {
+        const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
+        const chipElements = this.childChipElementRefs().map(ref => ref.nativeElement);
+        const moreTextElement = this.moreText().nativeElement;
+        chipElements.forEach(chip => chip.classList.remove('hidden'));
+        moreTextElement.classList.remove('hidden');
+        const visibleChips = chipElements.filter(chip => {
+            const chipRect = chip.getBoundingClientRect();
+            return !(chipRect.right > hostRect.right || chipRect.bottom > hostRect.bottom);
+        });
+        const overflowChips = chipElements.toSpliced(0, visibleChips.length);
+        if (overflowChips.length > 0) {
+            const lastVisibleChip = visibleChips[visibleChips.length - 1];
+            const enoughRoomForMoreText = (hostRect.right - lastVisibleChip.getBoundingClientRect().right) > (moreTextElement.offsetWidth);
+            if (!enoughRoomForMoreText) {
+                overflowChips.push(lastVisibleChip);
+            }
+            this.hiddenChips.set(overflowChips);
+            overflowChips.forEach(hiddenChip => {
+                hiddenChip.classList.add('hidden');
+            });
+        }
+        else {
+            this.moreText().nativeElement.classList.add('hidden');
+        }
+        this.changeDetector.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwChipListComponent, isStandalone: true, selector: "fw-chip-list", queries: [{ propertyName: "childChipElementRefs", predicate: FwChipComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n<fw-tooltip [title]=\"hiddenLabels()\">\n  <p #moreText> +{{hiddenChips().length}} more </p>\n</fw-tooltip>\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start;max-height:28px;overflow:hidden}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwChipModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-chip-list', standalone: true, imports: [
+                        FwChipModule,
+                        FwTooltipModule,
+                    ], template: "<ng-content></ng-content>\n<fw-tooltip [title]=\"hiddenLabels()\">\n  <p #moreText> +{{hiddenChips().length}} more </p>\n</fw-tooltip>\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start;max-height:28px;overflow:hidden}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"] }]
+        }] });
+
+/**
+ * Component for having a user select multiple values while also allowing arbitrary values to be added
+ * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-typeahead--docs)
+ */
+class FwTypeaheadComponent {
+    constructor() {
+        this.trigger = viewChild(CdkMenuTrigger);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.loading = model(false);
+        this.disabled = model(false);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.value = model([]);
+        this.optionsInput = input([], { alias: 'options' });
+        this.maxOptionsHeight = input('400px');
+        this.minOptionsHeight = input('0px');
+        this.optionsWidth = input('');
+        this.notifyOnValueChanges = effect(() => {
+            this.onChange(this.value());
+        });
+        this.searchValue = model('');
+        this.searchValueChanges$ = toObservable(this.searchValue);
+        this.allowNew = input(true);
+        this.placeholder = input('Enter tags...');
+        this.options$ = this.searchValueChanges$.pipe(startWith(''), tap(() => this.loading.set(true)), switchMap(searchString => {
+            if (typeof this.optionsInput() === 'function') {
+                const fetchingFunction = this.optionsInput();
+                return fetchingFunction(searchString);
+            }
+            const filteredStaticOptions$ = of(this.optionsInput()).pipe(map(options => options.filter(opt => opt.toLowerCase().includes(searchString.toLowerCase()))));
+            return filteredStaticOptions$;
+        }), map(options => {
+            return options.filter(option => {
+                const alreadySelected = this.value().find(val => val.toLowerCase() === option.toLowerCase());
+                return !alreadySelected;
+            });
+        }), tap(() => this.loading.set(false)));
+        this.optionsSignal = toSignal(this.options$);
+        this.displayNewOption = computed(() => {
+            const newValue = this.searchValue();
+            if (!newValue) {
+                return false;
+            }
+            const directMatch = this.optionsSignal()?.includes?.(newValue);
+            const loading = this.loading();
+            const alreadySelected = Boolean(this.value().find(val => val.toLowerCase() === newValue.toLowerCase()));
+            return this.allowNew() && !alreadySelected && (!directMatch || loading);
+        });
+        this.addValue = (newValue) => {
+            this.value.update(prevValue => [
+                ...prevValue || [],
+                newValue,
+            ]);
+        };
+        this.handleOptionClick = (optionValue) => {
+            this.onTouched();
+            this.addValue(optionValue);
+            this.focusInput();
+            this.searchValue.set('');
+        };
+        this.resetFocusOnOptionsChange = effect(() => {
+            if (this.displayedOptions() || this.searchValue()) {
+                this.focusedIndex.set(0);
+            }
+        }, { allowSignalWrites: true });
+        this.displayedOptions = viewChildren(FwMenuItemComponent);
+        this.focusedIndex = signal(0);
+        this.focusedOption = computed(() => {
+            const options = this.displayedOptions();
+            const focused = this.focusedIndex();
+            const onlyOne = options.length === 1;
+            return onlyOne ? this.searchValue() : options[focused]?.value;
+        });
+        this.inputRef = viewChild.required('input');
+        /* eslint-disable @typescript-eslint/naming-convention */
+        this.keyHandlerMap = {
+            'Enter': () => {
+                this.onTouched();
+                const newValue = this.focusedOption() || this.searchValue();
+                const duplicate = this.value().find(val => val.toLowerCase() === newValue.toLowerCase());
+                if (!newValue || duplicate) {
+                    return;
+                }
+                this.addValue(newValue);
+                this.searchValue.set('');
+            },
+            'ArrowDown': () => {
+                this.moveFocused('down');
+            },
+            'ArrowUp': () => {
+                this.moveFocused('up');
+            },
+            'Backspace': () => {
+                const searchIsEmpty = !this.searchValue(); // any falsy value is empty
+                if (searchIsEmpty && this.value()?.length > 0) {
+                    this.closeChip(this.value()[this.value().length - 1]);
+                }
+                return !searchIsEmpty;
+            },
+            'Tab': () => {
+                if (this.trigger().isOpen) {
+                    this.trigger().close();
+                }
+            },
+        };
+    }
+    outsideClick() {
+        this.onTouched();
+        this.trigger().close();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    writeValue(incomingValue) {
+        this.value.set(incomingValue);
+    }
+    registerOnChange(onChangeFn) {
+        this.onChange = onChangeFn;
+    }
+    registerOnTouched(onTouchedFn) {
+        this.onTouched = onTouchedFn;
+    }
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    handleSearchChange(event) {
+        if (this.trigger().closed) {
+            this.trigger().open();
+        }
+        const value = event.target.value;
+        this.searchValue.set(value);
+    }
+    closeChip(chipValue) {
+        const currentValue = this.value();
+        const newValue = currentValue.filter(val => val !== chipValue);
+        this.value.set(newValue);
+        this.focusInput();
+        this.changeDetector.detectChanges();
+    }
+    focusInput(e = null) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        e?.stopImmediatePropagation();
+        this.inputRef().nativeElement.focus();
+    }
+    /* eslint-enable */
+    handleKey(e) {
+        const handler = this.keyHandlerMap[e.key];
+        handler?.(e);
+    }
+    setFocusByValue(value) {
+        const options = this.displayedOptions();
+        const foundIndex = options.findIndex(opt => opt.value === value);
+        const finalIndex = foundIndex === -1 ? 0 : foundIndex;
+        this.focusedIndex.set(finalIndex);
+    }
+    moveFocused(direction) {
+        const options = this.displayedOptions();
+        const index = this.focusedIndex();
+        const clampIndex = (n) => {
+            if (n < 0) {
+                return options.length - 1;
+            }
+            else if (n >= options.length) {
+                return 0;
+            }
+            return n;
+        };
+        const indexChange = direction === 'up' ? -1 : 1;
+        const newIndex = clampIndex(index + indexChange);
+        this.focusedIndex.set(newIndex);
+        const newlyFocused = this.displayedOptions()[this.focusedIndex()];
+        // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+        newlyFocused.scrollIntoView();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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 }, 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)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FwTypeaheadComponent),
+                multi: true,
+            },
+        ], 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\n  (click)=\"focusInput($event)\"\n  class=\"input-container\"\n  [ngClass]=\"{ 'disabled': disabled() }\"\n  [cdkMenuTriggerFor]=\"menuContent\"\n  fwMenuRegister\n  #inputContainer>\n  <fw-chip-list class=\"chips\">\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  <input\n    test-id=\"typeahead-input\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"searchValue()\"\n    (keyup)=\"handleSearchChange($event)\"\n    (keydown)=\"handleKey($event)\"\n    #input\n    type=\"text\"\n  />\n  @if(loading()) {\n    <fw-progress-spinner size=\"small\"/>\n  }\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 optionsSignal(); 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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}: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,:host.ng-touched.ng-invalid .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: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "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", "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"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$4.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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-typeahead', standalone: true, imports: [
+                        FwTextInputModule,
+                        FwChipModule,
+                        ReactiveFormsModule,
+                        FwMenuModule,
+                        CdkMenuModule,
+                        MenuRegisterDirective,
+                        FwProgressModule,
+                        FwChipListComponent,
+                        NgClass,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FwTypeaheadComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  (click)=\"focusInput($event)\"\n  class=\"input-container\"\n  [ngClass]=\"{ 'disabled': disabled() }\"\n  [cdkMenuTriggerFor]=\"menuContent\"\n  fwMenuRegister\n  #inputContainer>\n  <fw-chip-list class=\"chips\">\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  <input\n    test-id=\"typeahead-input\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"searchValue()\"\n    (keyup)=\"handleSearchChange($event)\"\n    (keydown)=\"handleKey($event)\"\n    #input\n    type=\"text\"\n  />\n  @if(loading()) {\n    <fw-progress-spinner size=\"small\"/>\n  }\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 optionsSignal(); 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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}: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,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
+        }], propDecorators: { outsideClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class FwWrappedInputComponent {
     constructor() {
         this.class = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description", helperText: "helperText", errorText: "errorText" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n  <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description", helperText: "helperText", errorText: "errorText" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n  <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwWrappedInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n  <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"] }]
+            args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n  <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -8476,5 +8755,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
+export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
 //# sourceMappingURL=flywheel-io-vision.mjs.map