@flywheel-io/vision 21.3.1 → 21.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "21.3.1",
+  "version": "21.4.0",
   "description": "Flywheel UI elements provided as Angular components and native web components",
   "author": "Flywheel",
   "license": "MIT",

package/types/flywheel-io-vision.d.ts

@@ -1813,6 +1813,7 @@ declare class FwMenuContainerComponent implements AfterViewInit {
     readonly focusFilterOnMount: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     readonly offset: _angular_core.InputSignal<string>;
     emptyText: _angular_core.InputSignal<string>;
+    readonly disableWrapperScroll: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     filteredMenuItems: FwMenuItemComponent[];
     filteredMenuItemChange: _angular_core.OutputEmitterRef<FwMenuItemComponent[]>;
     private defaultFilterFn;
@@ -1840,7 +1841,7 @@ declare class FwMenuContainerComponent implements AfterViewInit {
     handleFilterInput(event: Event): void;
     onFilterChange(filter: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwMenuContainerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container, fw-menu-filter", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; "focusFilterOnMount": { "alias": "focusFilterOnMount"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "additionalMenuItems": { "alias": "additionalMenuItems"; "required": false; "isSignal": true; }; "additionalGroups": { "alias": "additionalGroups"; "required": false; "isSignal": true; }; "additionalSeparators": { "alias": "additionalSeparators"; "required": false; "isSignal": true; }; "keyHandler": { "alias": "keyHandler"; "required": false; "isSignal": true; }; }, { "filteredMenuItemChange": "filteredMenuItemChange"; "filterChanged": "filterChanged"; }, ["menu", "childMenuItems", "childSeparators", "childGroups"], [".filter-content", "*", "custom-menu-items"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container, fw-menu-filter", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; "focusFilterOnMount": { "alias": "focusFilterOnMount"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disableWrapperScroll": { "alias": "disableWrapperScroll"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "additionalMenuItems": { "alias": "additionalMenuItems"; "required": false; "isSignal": true; }; "additionalGroups": { "alias": "additionalGroups"; "required": false; "isSignal": true; }; "additionalSeparators": { "alias": "additionalSeparators"; "required": false; "isSignal": true; }; "keyHandler": { "alias": "keyHandler"; "required": false; "isSignal": true; }; }, { "filteredMenuItemChange": "filteredMenuItemChange"; "filterChanged": "filterChanged"; }, ["menu", "childMenuItems", "childSeparators", "childGroups"], [".filter-content", "*", "custom-menu-items"], true, never>;
 }
 
 /**
@@ -2209,9 +2210,17 @@ declare class FwSelectMenuComponent implements OnInit, OnDestroy, ControlValueAc
     maxOptionsHeight: _angular_core.InputSignal<string>;
     size: _angular_core.InputSignal<"large" | "medium" | "small">;
     placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Renders the `options` list in a `cdk-virtual-scroll-viewport` instead of one `fw-menu-item` per
+     * option, so opening the panel stays fast with large option sets.
+     * ! WARNING ! only works with the `options` input, not with content-projected menu items
+     */
+    virtualScroll: _angular_core.InputSignal<boolean>;
+    virtualScrollItemSize: _angular_core.InputSignal<number>;
     trigger: CdkMenuTrigger;
     textInput: FwTextInputComponent;
     menu: _angular_core.Signal<FwMenuComponent>;
+    private virtualScrollViewport;
     /**
      * The control itself, which is only as wide as `width()`. The host element is a block element and
      * so can be considerably wider, and a click in that gap is an outside click.
@@ -2245,6 +2254,14 @@ declare class FwSelectMenuComponent implements OnInit, OnDestroy, ControlValueAc
      * ! WARNING ! only works with content-projected menu items, does not work with the `options` input
      */
     filterFn: _angular_core.InputSignal<MenuFilterFn>;
+    /**
+     * Height of the virtual-scroll viewport. Capped at `maxOptionsHeight()`, minus the filter box's
+     * height (64px) when `showFilter()` is on since the filter box sits above the viewport inside the
+     * same fixed-height panel. Below that cap, the viewport sizes down to fit the actual item count
+     * (via CSS `min()`, since `maxOptionsHeight()` can be any CSS length) so a short options list
+     * doesn't leave empty space under it.
+     */
+    virtualScrollViewportHeight: _angular_core.Signal<string>;
     inputDisplayValue: _angular_core.Signal<string>;
     get value(): any;
     set value(newValue: any);
@@ -2252,6 +2269,10 @@ declare class FwSelectMenuComponent implements OnInit, OnDestroy, ControlValueAc
     constructor();
     ngOnInit(): void;
     private findRenderedMenuItem;
+    trackByTrackingId: (_index: number, item: {
+        trackingId: string;
+    }) => string;
+    private scrollOptionIntoView;
     selectTitle: _angular_core.WritableSignal<string>;
     private subscribeToMenuItems;
     private menuItemsWatcher;
@@ -2308,7 +2329,7 @@ declare class FwSelectMenuComponent implements OnInit, OnDestroy, ControlValueAc
     onFilterChanged(value: string): void;
     onInputChange(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwSelectMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwSelectMenuComponent, "fw-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "valueProperty": { "alias": "valueProperty"; "required": false; "isSignal": true; }; "useFullOptionAsValue": { "alias": "useFullOptionAsValue"; "required": false; "isSignal": true; }; "titleProperty": { "alias": "titleProperty"; "required": false; "isSignal": true; }; "iconProperty": { "alias": "iconProperty"; "required": false; "isSignal": true; }; "staticIcon": { "alias": "staticIcon"; "required": false; "isSignal": true; }; "descriptionProperty": { "alias": "descriptionProperty"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "showReset": { "alias": "showReset"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errored": { "alias": "errored"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "optionsWidth": { "alias": "optionsWidth"; "required": false; "isSignal": true; }; "minOptionsHeight": { "alias": "minOptionsHeight"; "required": false; "isSignal": true; }; "maxOptionsHeight": { "alias": "maxOptionsHeight"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueDisplayFn": { "alias": "valueDisplayFn"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "disabled": "disabledChange"; "change": "change"; "filterChanged": "filterChanged"; }, ["menuItems", "menuItemGroups", "menuSeparators"], ["[fw-menu-item, fw-menu-separator, fw-menu-item-group]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwSelectMenuComponent, "fw-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "valueProperty": { "alias": "valueProperty"; "required": false; "isSignal": true; }; "useFullOptionAsValue": { "alias": "useFullOptionAsValue"; "required": false; "isSignal": true; }; "titleProperty": { "alias": "titleProperty"; "required": false; "isSignal": true; }; "iconProperty": { "alias": "iconProperty"; "required": false; "isSignal": true; }; "staticIcon": { "alias": "staticIcon"; "required": false; "isSignal": true; }; "descriptionProperty": { "alias": "descriptionProperty"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "showReset": { "alias": "showReset"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errored": { "alias": "errored"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "optionsWidth": { "alias": "optionsWidth"; "required": false; "isSignal": true; }; "minOptionsHeight": { "alias": "minOptionsHeight"; "required": false; "isSignal": true; }; "maxOptionsHeight": { "alias": "maxOptionsHeight"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "valueDisplayFn": { "alias": "valueDisplayFn"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "disabled": "disabledChange"; "change": "change"; "filterChanged": "filterChanged"; }, ["menuItems", "menuItemGroups", "menuSeparators"], ["[fw-menu-item, fw-menu-separator, fw-menu-item-group]"], true, never>;
 }
 
 /**
@@ -2954,7 +2975,7 @@ declare class FwTextAreaInputComponent implements ControlValueAccessor {
  */
 declare class FwTextAreaInputModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwTextAreaInputModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FwTextAreaInputModule, never, [typeof i1.CommonModule, typeof i2.ReactiveFormsModule, typeof i3$1.TextFieldModule, typeof FwIconModule, typeof FwTextAreaInputComponent], [typeof FwTextAreaInputComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FwTextAreaInputModule, never, [typeof i1.CommonModule, typeof i2.ReactiveFormsModule, typeof i3$1.TextFieldModule, typeof FwTextAreaInputComponent], [typeof FwTextAreaInputComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FwTextAreaInputModule>;
 }