/** * Copyright Aquera Inc 2025 * * This source code is licensed under the BSD-3-Clause license found in the * LICENSE file in the root directory of this source tree. */ import '../nile-icon'; import '../nile-popup/nile-popup'; import '../nile-tag/nile-tag'; import '../nile-checkbox/nile-checkbox'; import '../nile-loader/nile-loader'; import NileElement from '../internal/nile-element'; import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; import type { NileFormControl } from '../internal/nile-element'; import type NilePopup from '../nile-popup/nile-popup'; import type { VirtualOption, RenderItemConfig } from './types.js'; /** * Nile Virtual Select component. * * @tag nile-virtual-select * */ /** * @summary Virtual select component for handling large datasets with virtual scrolling. * @status stable * @since 2.0 * * @dependency nile-icon * @dependency nile-popup * @dependency nile-tag * @dependency nile-checkbox * * @slot label - The input's label. Alternatively, you can use the `label` attribute. * @slot prefix - Used to prepend a presentational icon or similar element to the combobox. * @slot clear-icon - An icon to use in lieu of the default clear icon. * @slot expand-icon - The icon to show when the control is expanded and collapsed. * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * * @event nile-change - Emitted when the control's value changes. * @event nile-clear - Emitted when the control's value is cleared. * @event nile-input - Emitted when the control receives input. * @event nile-focus - Emitted when the control gains focus. * @event nile-blur - Emitted when the control loses focus. * @event nile-show - Emitted when the select's menu opens. * @event nile-after-show - Emitted after the select's menu opens and all animations are complete. * @event nile-hide - Emitted when the select's menu closes. * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete. * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality. * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information. * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container. * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced). * * @csspart form-control - The form control that wraps the label, input, and help text. * @csspart form-control-label - The label's wrapper. * @csspart form-control-input - The select's wrapper. * @csspart form-control-help-text - The help text's wrapper. * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button. * @csspart prefix - The container that wraps the prefix slot. * @csspart display-input - The element that displays the selected option's label, an `` element. * @csspart listbox - The listbox container where options are slotted. * @csspart tags - The container that houses option tags when `multiple` is used. * @csspart tag - The individual tags that represent each multiselect option. * @csspart clear-button - The clear button. * @csspart expand-icon - The container that wraps the expand icon. * @csspart footer - The footer container with show selected and clear all options. */ export declare class NileVirtualSelect extends NileElement implements NileFormControl { static styles: CSSResultGroup; private readonly formControlController; private readonly hasSlotController; private readonly portalManager; popup: NilePopup; combobox: HTMLElement; displayInput: HTMLInputElement; valueInput: HTMLInputElement; virtualizedContainer: HTMLElement; private hasFocus; displayLabel: string; selectedOptions: VirtualOption[]; oldValue: string | string[]; private scrollTimeout; private scrolling; private visibilityManager?; /** The name of the select, submitted as a name/value pair with form data. */ name: string; /** Array of all option items for virtual scrolling */ data: any; /** Original unfiltered option items for search functionality */ private originalOptionItems; /** * The current value of the select. When `multiple` is enabled, the value will be an array of selected values. */ value: string | string[]; /** The default value of the form control. Primarily used for resetting the form control. */ defaultValue: string | string[]; /** The select's size. */ size: 'small' | 'medium' | 'large'; /** Placeholder text to show as a hint when the select is empty. */ placeholder: string; /** Enable automatic resizing of tags area */ autoResize: boolean; /** Current search value */ searchValue: string; /** Enable search functionality */ searchEnabled: boolean; enableVisibilityEffect: boolean; /** Search input placeholder */ internalSearchPlaceHolder: string; /** Disable local search filtering */ disableLocalSearch: boolean; /** Show loading state */ optionsLoading: boolean; /** Show loading state using nile-loader */ loading: boolean; /** Allows more than one option to be selected. */ multiple: boolean; /** Help text */ helpText: string; /** Error message */ errorMessage: string; /** Sets the input to a warning state */ warning: boolean; /** Sets the input to an error state */ error: boolean; /** Sets the input to a success state */ success: boolean; /** Disables the select control. */ disabled: boolean; /** Adds a clear button when the select is not empty. */ clearable: boolean; /** The select's open state. */ open: boolean; /** * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */ hoist: boolean; /** Draws a filled select. */ filled: boolean; /** Draws a pill-style select with rounded edges. */ pill: boolean; /** The select's label. If you need to display HTML, use the `label` slot instead. */ label: string; /** * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox * inside of the viewport. */ placement: 'top' | 'bottom'; /** * By default, form controls are associated with the nearest containing `