@flywheel-io/vision 1.7.2 → 1.7.3

package/fesm2020/flywheel-io-vision.mjs

@@ -3547,18 +3547,24 @@ class FwMenuSubItemComponent {
         this.variant = 'default';
     }
     handleClick(evt) {
-        evt.stopPropagation();
-        if (!this.disabled) {
-            if (this.href) {
-                if (this.target) {
-                    // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
-                    window.open(this.href, this.target).focus();
-                }
-                else {
-                    window.location.href = this.href;
-                }
+        if (this.disabled) {
+            evt.stopPropagation();
+            return;
+        }
+        if (this.href) {
+            if (this.target) {
+                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                window.open(this.href, this.target).focus();
+            }
+            else {
+                window.location.href = this.href;
             }
+            evt.stopPropagation();
+            return;
+        }
+        if (this.value) {
             this.click.emit(this.value);
+            evt.stopPropagation();
         }
     }
 }
@@ -3750,18 +3756,24 @@ class FwMenuItemComponent {
         this.updateLayout();
     }
     handleClick(evt) {
-        evt.stopPropagation();
-        if (!this.disabled) {
-            if (this.href) {
-                if (this.target) {
-                    // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
-                    window.open(this.href, this.target).focus();
-                }
-                else {
-                    window.location.href = this.href;
-                }
+        if (this.disabled) {
+            evt.stopPropagation();
+            return;
+        }
+        if (this.href) {
+            if (this.target) {
+                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                window.open(this.href, this.target).focus();
+            }
+            else {
+                window.location.href = this.href;
             }
+            evt.stopPropagation();
+            return;
+        }
+        if (this.value) {
             this.click.emit(this.value);
+            evt.stopPropagation();
         }
     }
 }
@@ -4947,6 +4959,7 @@ class FwMultiSelectMenuComponent {
         this.focused = 0;
         this.touched = false;
         this._isOpen = false;
+        this._value = [];
         this.onTouched = () => {
         };
     }
@@ -4963,12 +4976,6 @@ class FwMultiSelectMenuComponent {
         return this._value;
     }
     set value(newValue) {
-        if (newValue && newValue.length > 0) {
-            this._valueType = typeof newValue[0];
-        }
-        else {
-            this._valueType = typeof newValue;
-        }
         this.updateValue(newValue);
     }
     registerOnChange(fn) {
@@ -4999,7 +5006,11 @@ class FwMultiSelectMenuComponent {
             if (this.options && this.options.length === 0) {
                 this.options = [];
                 this.menuItems.forEach(item => {
-                    const opt = { value: item.value, label: item.title, icon: item.icon };
+                    const opt = {
+                        value: item.value,
+                        label: item.title,
+                        icon: item.icon,
+                    };
                     this.options.push(opt);
                     if (this.selectedValues.indexOf(item.value.toString()) >= 0) {
                         this.selectedOptions.push(opt);
@@ -5015,7 +5026,7 @@ class FwMultiSelectMenuComponent {
         this.touched = true;
     }
     handleClose(chip) {
-        this.value.splice(this.value.indexOf(chip), 1);
+        this.value.splice(this.value.indexOf(chip[this.valueProperty]), 1);
         this.updateValue(this.value);
         this.trigger.close();
     }
@@ -5055,7 +5066,6 @@ class FwMultiSelectMenuComponent {
         }
     }
     updateValue(value) {
-        this._value = value;
         this.selectedValues = [];
         this.selectedOptions = [];
         if (value) {
@@ -5077,6 +5087,7 @@ class FwMultiSelectMenuComponent {
                 }
             });
         }
+        this._value = this.selectedValues;
         this.updateFilteredItems();
         if (this.onChange) {
             this.onChange(value);
@@ -5106,49 +5117,60 @@ class FwMultiSelectMenuComponent {
         }
     }
     handleKeyDown(event) {
-        if (event.key === 'Backspace') {
-            if (this.value.length > 0 && event.target['value'].length === 0) {
-                this.value.splice(this.value.length - 1, 1);
-                this.updateValue(this.value);
+        if (this.trigger.isOpen()) {
+            if (event.key === 'ArrowDown') {
+                this.moveFocused('down');
             }
-        }
-        else if (event.key === 'ArrowDown') {
-            this.moveFocused('down');
-        }
-        else if (event.key === 'ArrowUp') {
-            this.moveFocused('up');
-        }
-        else if (this.trigger.isOpen() && event.key === 'Tab') {
-            this.trigger.close();
-        }
-        else if (this.trigger.isOpen() && event.key === 'Escape') {
-            this.trigger.close();
-        }
-    }
-    handleKeyUp(event) {
-        if (event.key === 'Enter') {
-            if (this.filteredOptions.length > this.focused) {
-                if (!this.value.includes(this.filteredOptions[this.focused])) {
-                    const newValue = [...this.value, this.filteredOptions[this.focused]];
-                    this.updateValue(newValue);
+            else if (event.key === 'ArrowUp') {
+                this.moveFocused('up');
+            }
+            else if (event.key === 'Tab') {
+                this.trigger.close();
+                if (event.target) {
+                    event.target['value'] = '';
+                }
+                this.filteredOptions = this.options;
+            }
+            else if (event.key === 'Escape') {
+                this.trigger.close();
+                if (event.target) {
+                    event.target['value'] = '';
+                }
+                this.filteredOptions = this.options;
+            }
+            else if (event.key === 'Enter') {
+                if (this.filteredOptions.length > this.focused) {
+                    if (!this.value.includes(this.filteredOptions[this.focused])) {
+                        const newValue = [...this.value, this.filteredOptions[this.focused][this.valueProperty]];
+                        if (event.target) {
+                            event.target['value'] = '';
+                        }
+                        this.filteredOptions = this.options;
+                        this.updateValue(newValue);
+                        if (this.closeOnSelect) {
+                            setTimeout(() => {
+                                this.trigger.close();
+                            }, 0);
+                        }
+                        else {
+                            setTimeout(() => {
+                                this.trigger.open();
+                            }, 0);
+                        }
+                    }
                 }
             }
-            event.target['value'] = '';
         }
         else {
-            this.trigger.open();
-            setTimeout(() => {
-                if (this.renderedMenuItems) {
-                    this.renderedMenuItems.forEach(rmi => {
-                        rmi.focused = false;
-                    });
-                    const item = this.renderedMenuItems.get(this.focused);
-                    if (item) {
-                        item.focused = true;
-                    }
+            if (event.key === 'Backspace') {
+                if (this.value.length > 0 && event.target['value'].length === 0) {
+                    this.value.splice(this.value.length - 1, 1);
+                    this.updateValue(this.value);
                 }
-            }, 200);
+            }
         }
+    }
+    handleInput(event) {
         if (event.target['value'].length > 0) {
             this.filteredOptions = this.options.filter(option => {
                 if (option[this.titleProperty].toLowerCase().includes(event.target['value'].toLowerCase())) {
@@ -5158,14 +5180,15 @@ class FwMultiSelectMenuComponent {
                     return false;
                 }
             });
-            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
-                this.moveFocused('zero');
-            }
         }
         else {
             this.filteredOptions = this.options;
             this.updateFilteredItems();
         }
+        if (!this.trigger.isOpen()) {
+            this.trigger.open();
+        }
+        this.moveFocused('zero');
     }
 }
 FwMultiSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -5175,7 +5198,7 @@ FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions; index as $index\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n            [multiSelect]=\"true\"\n            [showCheckbox]=\"useCheckbox\"\n            [focused]=\"focused===$index\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-multi-select', providers: [
@@ -5184,7 +5207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
+                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions; index as $index\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n            [multiSelect]=\"true\"\n            [showCheckbox]=\"useCheckbox\"\n            [focused]=\"focused===$index\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click']
@@ -5390,11 +5413,21 @@ class FwSelectMenuComponent {
             if (this.inFocusOpen) {
                 if (event.key === 'ArrowDown') {
                     this.moveFocused('down');
-                    this.updateValue(this.options[this.focused]);
+                    if (this._valueType === 'object') {
+                        this.updateValue(this.options[this.focused]);
+                    }
+                    else {
+                        this.updateValue(this.options[this.focused][this.valueProperty]);
+                    }
                 }
                 if (event.key === 'ArrowUp') {
                     this.moveFocused('up');
-                    this.updateValue(this.options[this.focused]);
+                    if (this._valueType === 'object') {
+                        this.updateValue(this.options[this.focused]);
+                    }
+                    else {
+                        this.updateValue(this.options[this.focused][this.valueProperty]);
+                    }
                 }
                 if (event.key === 'Tab') {
                     this.trigger.close();
@@ -5422,6 +5455,13 @@ class FwSelectMenuComponent {
                 this.updateValue(this.preFocusValue);
             }
         }
+        else {
+            if (this.showReset) {
+                if (event.key === 'Escape') {
+                    this.handleReset();
+                }
+            }
+        }
     }
     updateValue(value) {
         this._value = value;
@@ -5461,7 +5501,12 @@ class FwSelectMenuComponent {
     }
     handleReset() {
         if (this.showReset) {
-            this.updateValue('');
+            if (this._valueType === 'object') {
+                this.updateValue(null);
+            }
+            else {
+                this.updateValue('');
+            }
         }
     }
 }
@@ -7409,9 +7454,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwWrappedInputComponent {
+    get classes() {
+        return [
+            'fw-wrapped-input',
+        ].join(' ');
+    }
+    ;
+}
+FwWrappedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwWrappedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, 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-phone-input, fw-textarea-input, fw-select, fw-multi-select\"></ng-content>\n</div>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}\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: "14.3.0", 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-phone-input, fw-textarea-input, fw-select, fw-multi-select\"></ng-content>\n</div>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }] } });
+
+class FwWrappedInputModule {
+}
+FwWrappedInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwWrappedInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputModule, declarations: [FwWrappedInputComponent], imports: [CommonModule,
+        FwFormHeadingModule], exports: [FwWrappedInputComponent] });
+FwWrappedInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputModule, imports: [CommonModule,
+        FwFormHeadingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwFormHeadingModule,
+                    ],
+                    exports: [
+                        FwWrappedInputComponent,
+                    ],
+                    declarations: [
+                        FwWrappedInputComponent,
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, LayoutWidth, MinimalTranslationService, TranslationService, allIcons, genId, genMessageId };
+export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MinimalTranslationService, TranslationService, allIcons, genId, genMessageId };
 //# sourceMappingURL=flywheel-io-vision.mjs.map