/** * Copyright Aquera Inc 2023 * * 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 NileElement from '../internal/nile-element'; import type { CSSResultGroup, PropertyValues } from 'lit'; import type { NileFormControl } from '../internal/nile-element'; import type NileOption from '../nile-option/nile-option'; import type NilePopup from '../nile-popup/nile-popup'; import type { RenderItemConfig } from '../nile-virtual-select/types.js'; import '../nile-virtual-select/nile-virtual-select'; /** * Nile icon component. * * @tag nile-select * */ /** * @summary Selects allow you to choose items from a menu of predefined options. * @status stable * @since 2.0 * * @dependency nile-icon * @dependency nile-popup * @dependency nile-tag * @dependency nile-virtual-select * * @slot - The listbox options. Must be `` elements. You can use `` to group items visually. * @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. Rotates on open and close. * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * @slot pre-footer - Content to display at the bottom of the dropdown listbox. Useful for action buttons like "Create New". In multi-select mode, appears above the "Show Selected" / "Clear All" bar. * * @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 listbox. The event payload includes scroll position information. * @event nile-scroll-start - Emitted when the user starts scrolling within the listbox. * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the listbox (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 `multiselect` is used. * @csspart tag - The individual tags that represent each multiselect option. * @csspart tag__base - The tag's base part. * @csspart tag__content - The tag's content part. * @csspart tag__remove-button - The tag's remove button. * @csspart tag__remove-button__base - The tag's remove button base part. * @csspart clear-button - The clear button. * @csspart expand-icon - The container that wraps the expand icon. * @csspart custom-footer - The container that wraps the custom footer slot content. * @csspart footer-area - The sticky wrapper around the custom footer and the built-in multi-select footer. */ export declare class NileSelect extends NileElement implements NileFormControl { static styles: CSSResultGroup; private formControlController; private virtualScrollHelper; private readonly portalManager; private readonly hasSlotController; private typeToSelectString; private typeToSelectTimeout; private scrollTimeout; private scrolling; private options; private resizeController?; private visibilityManager?; popup: NilePopup; combobox: HTMLSlotElement; displayInput: HTMLInputElement; valueInput: HTMLInputElement; listbox: HTMLSlotElement; private hasFocus; displayLabel: string; currentOption: NileOption; selectedOptions: NileOption[]; oldValue: string | string[]; /** The name of the select, submitted as a name/value pair with form data. */ name: string; /** * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the * value will be a space-delimited list of values based on the options selected. */ 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; /** Placeholder text to show as a hint when the select is empty. */ searchValue: string; searchEnabled: boolean; internalSearchPlaceHolder: string; enableVisibilityEffect: boolean; blockValueChange: boolean; disableLocalSearch: boolean; optionsLoading: boolean; noWidthSync: boolean; /** * When true, the listbox will be appended to the document body instead of the parent container. * This is useful when the parent has overflow: hidden, clip-path, or transform applied. */ portal: boolean; /** Allows more than one option to be selected. */ multiple: boolean | string; helpText: string; help_text: string; autoResize: boolean; errorMessage: string; /** Sets the input to a warning state, changing its visual appearance. */ warning: boolean; /** Sets the input to an error state, changing its visual appearance. */ error: boolean; /** Sets the input to a success state, changing its visual appearance. */ success: boolean; /** * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to * indicate the number of additional items that are selected. Set to 0 to remove the limit. */ maxOptionsVisible: number; /** Disables the select control. */ disabled: boolean; /** Adds a clear button when the select is not empty. */ clearable: boolean; /** * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can * use the `show()` and `hide()` methods and this attribute will reflect 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 `
` element. This attribute allows you * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in * the same document or shadow root for this to work. */ form: string; /** The select's required attribute. */ required: boolean; showSelected: boolean; oldMaxOptionsVisible: number; enableTabClose: boolean; showNoResults: boolean; noResultsMessage: string; /** Enhanced configuration for rendering items with support for display text, value, and search text */ renderItemConfig?: RenderItemConfig; data: any; enableVirtualScroll: boolean; /** To enable the group header in the select */ enableGroupHeader: boolean; /** To auto focus the search input when the select is opened */ autoFocusSearch: boolean; /** loading indicator for virtual select */ loading: boolean; stickyHeader: boolean; descriptionSearchEnabled: boolean; enableDescription: boolean; allowHtmlLabel: boolean; /** Gets the validity state object */ get validity(): ValidityState; /** Gets the validation message */ get validationMessage(): string; constructor(); connectedCallback(): void; disconnectedCallback(): void; private setupResizeObserver; protected updated(_changedProperties: PropertyValues): void; protected firstUpdated(_changedProperties: PropertyValues): void; setCheckBoxInOption(checked: boolean): void; setEnableDescriptionInOptions(): void; private addOpenListeners; private removeOpenListeners; private handleFocus; private handleBlur; private handleDocumentFocusIn; private updateGroupStickyOffsets; /** * Handles the click event on the footer. * @param event - The click event. */ private handleFooterClick; private handlePreFooterClick; /** * Toggles the display of selected options in the dropdown * @param event - the event object */ toggleShowSelected(event: Event): void; /** * Deselects all options and updates the value, selectedOptions, and displayLabel properties accordingly */ unSlectAll(): void; private handleDocumentKeyDown; private handleDocumentMouseDown; private handleWindowResize; private handleWindowScroll; private handleLabelClick; private handleComboboxMouseDown; private handleComboboxKeyDown; private handleClearClick; private handleClearMouseDown; handleOptionClick(event: MouseEvent): void; private applyStickyToGroups; private handleDefaultSlotChange; private handleTagRemove; private getAllOptions; private getOptionPrefix; private getFirstOption; private setCurrentOption; private setSelectedOptions; private toggleOptionSelection; private selectionChanged; handleSearchFocus(): void; handleSearchBlur(): void; handleSearchChange(e: any): void; handleScroll(e: Event): void; filterOptions(searchValue: string): NileOption[]; private handleInvalid; handleDisabledChange(): void; handleValueChange(): void; handlePortalAppendChange(): void; handleOpenChange(): Promise; private getAllGroupAttributes; getUniqueGroupNames(arr: NileOption[]): string[]; handleGroupSearchChange(): void; handleGroupShowSelected(): void; /** Shows the listbox. */ show(): Promise; /** Hides the listbox. */ hide(): Promise; /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */ checkValidity(): boolean; /** Gets the associated form, if one exists. */ getForm(): HTMLFormElement | null; /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity(): boolean; /** Sets a custom validation message. Pass an empty string to restore validity. */ setCustomValidity(message: string): void; /** Sets focus on the control. */ focus(options?: FocusOptions): void; /** Removes focus from the control. */ blur(): void; onInputChange(event: Event): void; calculateWidthOfSelectTagsDiv(): number | undefined; calculateTotalWidthOfTags(): void; handleInputAfterInit(): void; render(): any; nileInput(value: any): void; nileChange(value: any): void; } export default NileSelect; declare global { interface HTMLElementTagNameMap { 'nile-select': NileSelect; } }