@testgorilla/tgo-ui 9.1.0 → 9.2.0

package/components/filter-button/index.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
-import { OnChanges, EventEmitter, ElementRef, QueryList, ChangeDetectorRef, SimpleChanges } from '@angular/core';
-import { FocusableOption, FocusKeyManager } from '@angular/cdk/a11y';
+import { OnChanges, EventEmitter, ElementRef, ChangeDetectorRef, DestroyRef, SimpleChanges } from '@angular/core';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i6 from '@testgorilla/tgo-ui/components/button';
 import { ButtonIconPosition } from '@testgorilla/tgo-ui/components/button';
 import * as i5 from '@testgorilla/tgo-ui/components/core';
@@ -29,6 +29,13 @@ interface OptionChangeEvent {
     option: FilterButtonOption;
 }
 
+type FilterButtonRow = {
+    kind: 'header';
+    title: string;
+} | {
+    kind: 'option';
+    option: FilterButtonOption;
+};
 declare class FilterButtonComponent implements OnChanges {
     private readonly defaultAppTheme;
     private readonly cdr;
@@ -131,11 +138,15 @@ declare class FilterButtonComponent implements OnChanges {
      */
     applicationTheme: ApplicationTheme;
     overlayContainer: ElementRef<HTMLElement>;
-    filterOptions: QueryList<FocusableOption>;
+    viewport?: CdkVirtualScrollViewport;
+    /** Must match the `.item` height in the SCSS — the fixed-size viewport relies on it. */
+    readonly ITEM_SIZE = 48;
+    readonly MAX_LIST_HEIGHT = 290;
     isOpen: _angular_core.WritableSignal<boolean>;
     displayedLabel: _angular_core.WritableSignal<string>;
     tooltip: _angular_core.WritableSignal<string>;
     search: _angular_core.WritableSignal<string>;
+    activeIndex: _angular_core.WritableSignal<number>;
     showTooltip: {
         [key: string]: boolean;
     };
@@ -146,20 +157,30 @@ declare class FilterButtonComponent implements OnChanges {
         labelNumber?: number;
         icon?: IconName;
     }[]>;
+    flatOptions: _angular_core.Signal<FilterButtonRow[]>;
+    optionCount: _angular_core.Signal<number>;
+    activeOption: _angular_core.Signal<FilterButtonOption | undefined>;
+    activePosition: _angular_core.Signal<number>;
+    listHeight: _angular_core.Signal<number>;
+    protected trackByRow: (_index: number, row: FilterButtonRow) => string;
     readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
-    protected keyManager: FocusKeyManager<FocusableOption>;
     protected translationContext: string;
-    constructor(defaultAppTheme: ApplicationTheme, cdr: ChangeDetectorRef);
+    private readonly searchInput$;
+    constructor(defaultAppTheme: ApplicationTheme, cdr: ChangeDetectorRef, destroyRef: DestroyRef);
     ngOnChanges(changes: SimpleChanges): void;
     clearValue(): void;
     outsideClick(): void;
     toggle(): void;
     isSelected(value?: FilterValue): boolean;
     optionChanged(selected: boolean, option: FilterButtonOption): void;
+    onSearchChange(value: string): void;
     keyDownHandler(ev: KeyboardEvent): void;
     onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void;
+    private firstOptionIndex;
+    private moveActive;
+    private toggleActiveOption;
     private updateLabel;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterButtonComponent, [{ optional: true; }, null]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterButtonComponent, [{ optional: true; }, null, null]>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterButtonComponent, "ui-filter-button", never, { "label": { "alias": "label"; "required": false; }; "message": { "alias": "message"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "allowClear": { "alias": "allowClear"; "required": false; }; "singleSelection": { "alias": "singleSelection"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "changed": "changed"; "optionChange": "optionChange"; }, never, never, true, never>;
 }