import { Directionality } from '@angular/cdk/bidi'; import { SelectionModel } from '@angular/cdk/collections'; import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay'; import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { AfterContentInit, ChangeDetectorRef, DestroyRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, Provider, QueryList, Renderer2, TemplateRef } from '@angular/core'; import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms'; import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y'; import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqVirtualOption } from '@koobiq/components/core'; import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field'; import { KbqTag } from '@koobiq/components/tags'; import { Observable, Subject } from 'rxjs'; import * as i0 from "@angular/core"; /** Change event object that is emitted when the select value has changed. */ export declare class KbqSelectChange { source: KbqSelect; value: any; constructor(source: KbqSelect, value: any); } /** Select panel width type. */ export type KbqSelectPanelWidth = 'auto' | number | null; /** Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token. */ export type KbqSelectOptions = Partial<{ /** * Width of the panel. If set to `auto`, the panel will match the trigger width. * If set to null or an empty string, the panel will grow to match the longest option's text. */ panelWidth: KbqSelectPanelWidth; /** * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored. */ panelMinWidth: Exclude; /** * Whether to enable hiding search by default if options is less than minimum. * * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value. * - number - will enables search hiding and uses value as min. * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD */ searchMinOptionsThreshold: 'auto' | number; }>; /** Injection token that can be used to provide the default options for the `kbq-select`. */ export declare const KBQ_SELECT_OPTIONS: InjectionToken; /** * Whether to enable hiding search by default if options is less than minimum. * * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value. * - number - will enables search hiding and uses value as min. * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD */ searchMinOptionsThreshold: "auto" | number; }>>; /** Utility provider for `KBQ_SELECT_OPTIONS`. */ export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider; /** Delay in milliseconds before displaying a result when there are no options. */ export declare const delayBeforeDisplayingResultWithoutOptions = 101; /** Minimum time in milliseconds to display the loading state. */ export declare const minimumTimeToDisplayLoading = 300; export declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl, CanUpdateErrorState { private readonly _changeDetectorRef; private readonly _ngZone; private readonly _renderer; defaultErrorStateMatcher: ErrorStateMatcher; elementRef: ElementRef; private overlayContainer; private readonly _dir; parentForm: NgForm; parentFormGroup: FormGroupDirective; private readonly parentFormField; ngControl: NgControl; private readonly scrollStrategyFactory; protected localeService?: KbqLocaleService | undefined; private readonly useLegacyValidation; /** @docs-private */ protected readonly destroyRef: DestroyRef; protected readonly isBrowser: boolean; protected readonly defaultOptions: Partial<{ /** * Width of the panel. If set to `auto`, the panel will match the trigger width. * If set to null or an empty string, the panel will grow to match the longest option's text. */ panelWidth: KbqSelectPanelWidth; /** * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored. */ panelMinWidth: Exclude; /** * Whether to enable hiding search by default if options is less than minimum. * * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value. * - number - will enables search hiding and uses value as min. * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD */ searchMinOptionsThreshold: "auto" | number; }> | null; private readonly window; /** Whether the component is in an error state. */ errorState: boolean; /** * Emits whenever the component state changes and should cause the parent * form-field to update. Implemented as part of `KbqFormFieldControl`. * @docs-private */ readonly stateChanges: Subject; /** A name for this control that can be used by `kbq-form-field`. */ controlType: string; hiddenItems: number; /** The last measured value for the trigger's client bounding rect. */ triggerRect: DOMRect; /** The cached font-size of the trigger element in pixels. */ triggerFontSize: number; /** Deals with the selection logic. Manages selected options and their states. */ selectionModel: SelectionModel; /** Previously selected options before the current selection was made. */ previousSelectionModelSelected: KbqOptionBase[]; /** Manages keyboard events for options in the panel. */ keyManager: ActiveDescendantKeyManager; /** The value of the select panel's transform-origin property for animations. */ transformOrigin: string; /** Emits when the panel element is finished transforming in. */ panelDoneAnimatingStream: Subject; /** Strategy that will be used to handle scrolling while the select panel is open. */ scrollStrategy: any; /** * The y-offset of the overlay panel in relation to the trigger's top start corner. * This must be adjusted to align the selected option text over the trigger text * when the panel opens. Will change based on the y-position of the selected option. */ offsetY: number; /** * This position config ensures that the top "start" corner of the overlay * is aligned with the top "start" of the origin by default (overlapping * the trigger completely). If the panel cannot fit below the trigger, it * will fall back to a position above the trigger. */ positions: ConnectedPosition[]; /** * Trigger - is a clickable field to open select dropdown panel */ trigger: ElementRef; /** Reference to the overlay panel element. */ panel: ElementRef; /** Reference to the container element that holds the options. */ optionsContainer: ElementRef; /** Reference to the CDK connected overlay directive. */ overlayDir: CdkConnectedOverlay; /** Reference to the optional footer element in the panel. */ footer?: ElementRef; /** Reference to the CDK virtual scroll directive for virtual scrolling support. */ cdkVirtualForOf?: CdkVirtualForOf; /** Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode. */ virtualScrollViewport?: CdkVirtualScrollViewport; /** Query list of tags displayed in multiple selection mode. */ tags: QueryList; /** User-supplied override of the trigger element for custom rendering. */ customTrigger: KbqSelectTrigger; /** User-supplied matcher component for custom value matching logic. */ customMatcher: KbqSelectMatcher; /** Custom template reference for rendering tag content. */ customTagTemplateRef: TemplateRef; /** Reference to the optional cleaner element for clearing selection. */ cleaner: KbqCleaner; /** All of the defined select options. */ options: QueryList; /** All of the defined groups of options. */ optionGroups: QueryList; /** Reference to the optional search component. */ search: KbqSelectSearch; /** Reference to the optional empty search result component. */ searchEmpty: KbqSelectSearchEmptyResult; /** Template string for hidden items text. Supports {{ number }} placeholder. */ hiddenItemsText: string; /** Determines whether preselected values are displayed. */ showPreselectedValues: boolean; /** * Specifies the maximum number of trigger values allowed. * This constant limits the size of the trigger values array to ensure performance * and prevent excessive memory usage. * A value of `0` indicates that there is no limit. */ triggerValuesLimit: number; /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */ panelClass: string | string[] | Set | { [key: string]: any; }; /** Classes to be passed to the overlay backdrop. */ backdropClass: string; /** Object used to control when error messages are shown. */ errorStateMatcher: ErrorStateMatcher; /** * Function used to sort the values in a select in multiple mode. * Follows the same logic as `Array.prototype.sort`. */ sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number; /** * Whether to use a multiline matcher or not. Default is false. * When true, allows multiple lines of text in the selected value display. */ multiline: boolean; /** * Controls when the search functionality is displayed based on the number of available options. * * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided. * @default undefined */ set searchMinOptionsThreshold(value: 'auto' | number | undefined); get searchMinOptionsThreshold(): number | undefined; private _searchMinOptionsThreshold; /** Combined stream of all of the child options' change events. */ readonly optionSelectionChanges: Observable; /** Event emitted when the select panel has been toggled. Emits true when opened, false when closed. */ readonly openedChange: EventEmitter; /** Event emitted before the select panel starts opening. */ readonly beforeOpened: import("@angular/core").OutputEmitterRef; /** Event emitted when the select has been opened. */ readonly openedStream: Observable; /** Event emitted when the select has been closed. */ readonly closedStream: Observable; /** Event emitted when the selected value has been changed by the user. */ readonly selectionChange: EventEmitter; /** * Event that emits whenever the raw value of the select changes. This is here primarily * to facilitate the two-way binding for the `value` input. * @docs-private */ readonly valueChange: EventEmitter; /** * Distance in pixels from the bottom of the options panel at which `scrolledToBottom` fires. * Default `0` — emits only when the panel is fully scrolled to the bottom. */ scrolledToBottomOffset: number; /** Emits when the options panel is scrolled to (or within `scrolledToBottomOffset` of) the bottom. */ readonly scrolledToBottom: EventEmitter; /** * Whether the overlay should have a backdrop. * When true, clicking the backdrop will close the select. */ get hasBackdrop(): boolean; set hasBackdrop(value: boolean); private _hasBackdrop; /** * Placeholder text to be shown when no value is selected. * Displayed in the trigger when the select is closed and no value is selected. */ get placeholder(): string; set placeholder(value: string); private _placeholder; /** * Whether the select is required. Affects validation and display of placeholder. */ get required(): boolean; set required(value: boolean); private _required; /** * Whether multiple options can be selected. * Note: This cannot be changed dynamically after initialization. */ get multiple(): boolean; set multiple(value: boolean); private _multiple; /** * Function to compare the option values with the selected values. * The first argument is a value from an option. * The second is a value from the selection. * Should return true if the values match. * Defaults to strict equality comparison. */ get compareWith(): (o1: any, o2: any) => boolean; set compareWith(fn: (o1: any, o2: any) => boolean); /** * Factory used to construct a `KbqVirtualOption` for selected values whose * `KbqOption` is not currently rendered (e.g. virtual scroll out of viewport, * programmatically set initial value, `showPreselectedValues`). * * Required when option values are objects so the trigger (and tags in * multiple mode) can render a human-readable label. Also lets consumers * customise per-value `disabled` state or any future `KbqVirtualOption` * fields without adding new `@Input`s. * * Defaults to `new KbqVirtualOption(value, this.disabled)`, which is correct * for primitive values where `value` itself is the display label. */ virtualOptionFactory?: (value: any) => KbqVirtualOption; /** * Function for handling the Ctrl + A (select all) keyboard combination. * By default, the internal handler selects all options. * @param event The keyboard event that triggered the handler. * @param select Reference to this select component. */ get selectAllHandler(): (event: KeyboardEvent, select: KbqSelect) => void; set selectAllHandler(fn: (event: KeyboardEvent, select: KbqSelect) => void); /** * Width of the panel. If set to `auto`, the panel will match the trigger width. * If set to null or an empty string, the panel will grow to match the longest option's text. */ panelWidth: KbqSelectPanelWidth; /** * Minimum width of the panel in pixels. * If minWidth is larger than window width, it will be ignored. */ panelMinWidth: Exclude; /** Value of the select control. Can be a single value or array of values for multiple selection. */ get value(): any; set value(newValue: any); private _value; /** * Unique identifier for the select component. * Auto-generates an ID if not provided. */ get id(): string; set id(value: string); private _id; /** * Sets the tabIndex of the select element. * Automatically set to -1 when disabled. */ get tabIndex(): number; set tabIndex(value: number); private _tabIndex; /** * Whether the select is disabled. * When disabled, the select cannot be opened and its value cannot be changed. */ get disabled(): boolean; set disabled(value: boolean); private _disabled; /** Whether the select is focused. */ get focused(): boolean; set focused(value: boolean); /** Whether the select panel is currently open. */ panelOpen: boolean; /** Whether virtual scrolling is enabled for the options panel. */ withVirtualScroll: boolean; private _focused; /** Whether the search returned no results. */ get isEmptySearchResult(): boolean; /** Whether the cleaner (clear button) should be shown. */ get canShowCleaner(): boolean; /** Returns the currently selected option(s). Single value or array for multiple selection. */ get selected(): KbqOptionBase | KbqOptionBase[]; /** Returns the display value for the trigger element. */ get triggerValue(): string; /** Returns all selected options in display order. */ get triggerValues(): KbqOptionBase[]; /** Whether no option is currently selected. */ get empty(): boolean; /** Whether there are no options available. */ get noOptions(): boolean; /** Returns the first selected option that is not disabled. */ get firstSelected(): KbqOptionBase | null; /** Whether the first selected option is filtered (not visible in the list). */ get firstFiltered(): boolean; /** @docs-private */ get colorForState(): KbqComponentColors; /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */ get multiSelection(): boolean; /** Subscription to the close event of the overlay. */ private closeSubscription; /** Subscription to the options panel scroll event used by `scrolledToBottom`. */ private scrollSubscription; /** The scroll position of the overlay panel, calculated to center the selected option. */ private scrollTop; /** Unique id for this input. Auto-incremented for each instance. */ private readonly uid; /** Subject that emits when the component visibility changes. */ private visibleChanges; /** Width of the overlay panel in pixels or as a string. */ protected overlayWidth: string | number; /** Minimum width of the overlay panel in pixels. */ protected overlayMinWidth: string | number; /** Origin element for the overlay panel positioning. */ protected overlayOrigin?: CdkOverlayOrigin | ElementRef; /** Flag indicating if the dropdown class has been added to the overlay container. */ private classAddedToOverlayContainer; private openPanelTimeout; constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined); /** Lifecycle hook called after component initialization. Initializes selection model and subscriptions. */ ngOnInit(): void; /** Lifecycle hook for change detection. Updates visibility and error state. */ ngDoCheck(): void; /** Lifecycle hook after content initialization. Sets up key manager and option subscriptions. */ ngAfterContentInit(): void; /** Lifecycle hook when component is destroyed. Cleans up subscriptions. */ ngOnDestroy(): void; /** Updates the error state based on the error state matcher. */ updateErrorState(): void; /** * Formats the hidden items text with the number of hidden items. * @param hiddenItemsText Template string with {{ number }} placeholder. * @param hiddenItems Number of hidden items to display. * @returns Formatted string with the number of hidden items. */ hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string; /** * Clears the current selection. * @param $event Mouse event to prevent default behavior. */ clearValue($event: any): void; /** `View -> model callback called when value changes` */ onChange: (value: any) => void; /** `View -> model callback called when select has been touched` */ onTouched: () => void; /** Resets the search component if present. */ resetSearch(): void; /** Toggles the overlay panel open or closed. */ toggle(): void; /** * Triggers the opening of the panel component. * If the component is disabled or the panel is already open, the call is ignored. * Otherwise, the (beforeOpened) event is emitted. * When no options are available, the panel is opened after a short delay; * if options exist, it opens immediately. */ open(): void; /** * Internal method to open the panel. Handles overlay positioning and sizing. * Sets up the overlay dimensions based on trigger size and configured options. */ openPanel(): void; /** Closes the overlay panel and focuses the host element. */ close(): void; /** * Sets the select's value. Part of the ControlValueAccessor interface * required to integrate with Angular's core forms API. * * @param value New value to be written to the model. */ writeValue(value: any): void; /** * Saves a callback function to be invoked when the select's value * changes from user input. Part of the ControlValueAccessor interface * required to integrate with Angular's core forms API. * * @param fn Callback to be triggered when the value changes. */ registerOnChange(fn: (value: any) => void): void; /** * Saves a callback function to be invoked when the select is blurred * by the user. Part of the ControlValueAccessor interface required * to integrate with Angular's core forms API. * * @param fn Callback to be triggered when the component has been touched. */ registerOnTouched(fn: () => {}): void; /** * Disables the select. Part of the ControlValueAccessor interface required * to integrate with Angular's core forms API. * * @param isDisabled Sets whether the component is disabled. */ setDisabledState(isDisabled: boolean): void; /** * Checks if the current direction is RTL (right-to-left). * @returns True if RTL mode is active, false otherwise. */ isRtl(): boolean; /** * Handles all keyboard events for the select. * Delegates to appropriate handler based on panel state. * @param event The keyboard event to handle. */ handleKeydown(event: KeyboardEvent): void; /** Handles focus event on the select element. */ onFocus(): void; /** * Calls the touched callback only if the panel is closed. Otherwise, the trigger will * "blur" to the panel when it opens, causing a false positive. */ onBlur(): void; /** * Callback that is invoked when the overlay panel has been attached. * Sets up position change subscription and closing actions. */ onAttached(): void; /** Returns the theme to be used on the panel based on parent form field color. */ getPanelTheme(): string; /** Focuses the select element. */ focus(): void; /** * Implemented as part of KbqFormFieldControl. * @docs-private */ onContainerClick(): void; /** * Handles removal of a matched item in the trigger. * @param option The option to remove from selection. * @param $event The mouse event that triggered the removal. */ onRemoveMatcherItem(option: KbqOptionBase, $event: any): void; /** * Calculates the number of hidden items in multiple selection mode. * Updates the hiddenItems property and triggers change detection. */ calculateHiddenItems: () => void; /** * Gets the height of a single option item. * @returns The height in pixels of the first option, or 0 if no options exist. */ getItemHeight(): number; /** * Handles click events on the select. * Closes the panel if click is inside the footer. * @param $event The mouse event to handle. */ handleClick($event: MouseEvent): void; /** @docs-private */ setSelectedOptionsByClick(option: KbqOption): void; /** @docs-private */ protected shouldShowSearch(): boolean; /** Updates locale parameters from the locale service. */ private updateLocaleParams; /** Checks if the component is currently visible in the viewport. */ private isVisible; /** Gets the current overlay position index in the container. */ private currentOverlayPosition; /** Gets the position index of modal overlay in the container. */ private modalOverlayPosition; /** * Creates an observable of actions that should close the select panel. * Includes outside pointer events and overlay detachments. */ private closingActions; /** Gets the height of the options container element. */ private getHeightOfOptionsContainer; /** Updates the keyboard manager scroll size based on options container height. */ private updateScrollSize; /** * Subscribes to scroll events of the options panel and emits `scrolledToBottom` * when the panel reaches `scrolledToBottomOffset` pixels from the bottom. * Re-subscribes on every panel attach; auto-unsubscribes when the panel closes * or the component is destroyed. */ private subscribeToScrolledToBottom; /** Calculates the total width of all selected items in the matcher. */ private getTotalItemsWidthInMatcher; /** * Calculates the width of a single item including margins. * @param element The DOM element to measure. * @returns Total width including margins and gap. */ private getItemWidth; /** Handles keyboard events while the select is closed. */ private handleClosedKeydown; /** Handles keyboard events when the select is open. */ private handleOpenKeydown; /** * Initializes the selection based on the current value. * Defers execution to avoid change detection errors. */ private initializeSelection; /** * Sets the selected option based on a value. * If no option can be found with the designated value, the select trigger is cleared. * @param value The value to select. Can be a single value or array for multiple selection. */ private setSelectionByValue; /** * Finds the option that corresponds to the given value. * @param value The value to find. * @returns The matching option or undefined if not found. */ private getCorrespondOption; /** * Finds and selects and option based on its value. * @returns Option that has the corresponding value. */ private selectValue; /** * Single entry point for building a `KbqVirtualOption` from a raw value. * Uses the consumer-provided `virtualOptionFactory` when set, otherwise * wraps the raw value with the select's current `disabled` state. */ private createVirtualOption; /** Sets up a key manager to listen to keyboard events on the overlay panel. */ private initKeyManager; /** Drops current option subscriptions and IDs and resets from scratch. */ private resetOptions; /** Invoked when an option is clicked. */ private onSelect; /** Sorts the selected values based on their order in the panel. */ private sortValues; /** Emits change event to set the model value. */ private propagateChanges; /** * Highlights the selected item. If no option is selected, it will highlight * the first item instead. */ private highlightCorrectOption; /** Scrolls the active option into view. */ private scrollActiveOptionIntoView; /** Gets how wide the overlay panel should be. */ private getOverlayWidth; /** Comparison function to specify which option is displayed. Defaults to object equality. */ private _compareWith; /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */ private _selectAllHandler; /** * Calculates the total width and count of visible items. * @returns Tuple of [totalVisibleItemsWidth, visibleItemsCount]. */ private getTotalVisibleItems; /** * Creates a hidden clone of the trigger element for width calculations. * @returns Clone of the trigger element positioned off-screen. */ private buildTriggerClone; /** Adds the dropdown class to the overlay container when first select opens. */ private addClassToOverlayContainer; /** Removes the dropdown class from the overlay container when select closes. */ private removeClassFromOverlayContainer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_multiline: unknown; static ngAcceptInputType_scrolledToBottomOffset: unknown; static ngAcceptInputType_multiple: unknown; static ngAcceptInputType_panelMinWidth: unknown; static ngAcceptInputType_tabIndex: unknown; static ngAcceptInputType_disabled: unknown; }