@flywheel-io/vision 21.3.0 → 21.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "21.3.0",
+  "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

@@ -1098,6 +1098,7 @@ interface CustomSection {
     description?: string | null;
     key: string;
     fields: CustomField[];
+    visible?: RulesLogic[];
 }
 interface CustomForm {
     fields: (CustomField | CustomSection)[];
@@ -1127,10 +1128,12 @@ declare class FwFormRendererComponent {
     private readonly submitted;
     private readonly hideByKey;
     private readonly requiredByKey;
+    private readonly hideSectionByKey;
     private readonly expandedSectionKeys;
     structuredItems: _angular_core.Signal<(CustomField | CustomSection)[]>;
     isHidden(field: CustomField): boolean;
     isRequired(field: CustomField): boolean;
+    isSectionHidden(section: CustomSection): boolean;
     isSection(item: CustomField | CustomSection): item is CustomSection;
     isSectionExpanded(section: CustomSection): boolean;
     onSectionToggle(section: CustomSection, expanded: boolean): void;
@@ -1143,6 +1146,7 @@ declare class FwFormRendererComponent {
     private destroyRef;
     private currentKeys;
     private currentFields;
+    private currentSections;
     private readonly formRebuilt$;
     constructor();
     private flattenFields;
@@ -1165,6 +1169,12 @@ declare class FwFormRendererComponent {
     private validateFields;
     private isEmpty;
     private evaluateRule;
+    /**
+     * Evaluates hide/requiredWhenVisible for every field and hide for every section. A hidden
+     * section forces every one of its descendant fields hidden too, overriding whatever those
+     * fields' own `visible` logic would otherwise evaluate to.
+     */
+    private computeVisibility;
     private normalizeValues;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwFormRendererComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwFormRendererComponent, "fw-form-renderer", never, { "formData": { "alias": "formData"; "required": false; "isSignal": true; }; "sectionBorder": { "alias": "sectionBorder"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "statusChange": "statusChange"; }, never, never, true, never>;
@@ -1803,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;
@@ -1830,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>;
 }
 
 /**
@@ -2199,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.
@@ -2235,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);
@@ -2242,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;
@@ -2298,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>;
 }
 
 /**
@@ -2944,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>;
 }
 
@@ -3008,6 +3039,11 @@ declare class FwTypeaheadComponent implements ControlValueAccessor {
     loading: _angular_core.ModelSignal<boolean>;
     disabled: _angular_core.ModelSignal<boolean>;
     touched: _angular_core.WritableSignal<boolean>;
+    /**
+     * Text to display when there are no results to show in the dropdown. This is only shown when `allowNew` is false
+     * @default "No results found"
+     */
+    emptyText: _angular_core.InputSignal<string>;
     setDisabledState(isDisabled: boolean): void;
     writeValue(incomingValue: string[]): void;
     onChange: (_: string[]) => void;
@@ -3062,7 +3098,7 @@ declare class FwTypeaheadComponent implements ControlValueAccessor {
     setFocusByValue(value: string): void;
     private moveFocused;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwTypeaheadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwTypeaheadComponent, "fw-typeahead", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "optionsInput": { "alias": "options"; "required": false; "isSignal": true; }; "maxOptionsHeight": { "alias": "maxOptionsHeight"; "required": false; "isSignal": true; }; "minOptionsHeight": { "alias": "minOptionsHeight"; "required": false; "isSignal": true; }; "optionsWidth": { "alias": "optionsWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "selectType": { "alias": "selectType"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "allowNew": { "alias": "allowNew"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "loading": "loadingChange"; "disabled": "disabledChange"; "value": "valueChange"; "searchValue": "searchValueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwTypeaheadComponent, "fw-typeahead", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "optionsInput": { "alias": "options"; "required": false; "isSignal": true; }; "maxOptionsHeight": { "alias": "maxOptionsHeight"; "required": false; "isSignal": true; }; "minOptionsHeight": { "alias": "minOptionsHeight"; "required": false; "isSignal": true; }; "optionsWidth": { "alias": "optionsWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "selectType": { "alias": "selectType"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "allowNew": { "alias": "allowNew"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "loading": "loadingChange"; "disabled": "disabledChange"; "value": "valueChange"; "searchValue": "searchValueChange"; }, never, never, true, never>;
 }
 
 /**