# Ignite UI for React v19.5.1 — Full API Reference

> Complete API reference for the Ignite UI for React package (19.5.1). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions.

Platform: React
Package: igniteui-react
Version: 19.5.1

## Classes

### [IgrAccordion](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrAccordion)
The Accordion is a container-based component that can house multiple expansion panels
and offers keyboard navigation.

- **singleExpand**: `boolean` — Allows only one panel to be expanded at a time.
- **panels**: `any` — Returns all of the accordions's direct igc-expansion-panel children.
- **hideAll**(): Promise<void> — Hides all of the child expansion panels' contents.
- **showAll**(): Promise<void> — Shows all of the child expansion panels' contents.

### [IgrAvatar](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrAvatar)
An avatar component is used as a representation of a user identity
typically in a user profile.

- **alt**: `string` — Alternative text for the image.
- **initials**: `string` — Initials to use as a fallback when no image is available.
- **shape**: `AvatarShape` — The shape of the avatar.
- **src**: `string` — The image source to use.

### [IgrBadge](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrBadge)
The badge is a component indicating a status on a related item or an area
where some active indication is required.

- **dot**: `boolean` — Sets whether to render a dot type badge.
When enabled, the badge appears as a small dot without any content.
- **outlined**: `boolean` — Sets whether to draw an outlined version of the badge.
- **shape**: `BadgeShape` — The shape of the badge.
- **variant**: `StyleVariant` — The type (style variant) of the badge.

### [IgrBanner](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrBanner)
The igc-banner component displays important and concise message(s) for a user to address, that is specific to a page or feature.

- **open**: `boolean` — Determines whether the banner is being shown/hidden.
- **hide**(): Promise<boolean> — Hides the banner if not already hidden. Returns true when the animation has completed.
- **show**(): Promise<boolean> — Shows the banner if not already shown. Returns true when the animation has completed.
- **toggle**(): Promise<boolean> — Toggles between shown/hidden state. Returns true when the animation has completed.

### [IgrButton](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrButton)
Represents a clickable button, used to submit forms or anywhere in a
document for accessible, standard button functionality.

- **disabled**: `boolean` — The disabled state of the component
- **download**: `string` — Prompts to save the linked URL instead of navigating to it.
- **href**: `string` — The URL the button points to.
- **rel**: `string` — The relationship of the linked URL.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
- **target**: `"_blank" | "_parent" | "_self" | "_top"` — Where to display the linked URL, as the name for a browsing context.
- **type**: `"reset" | "submit" | "button"` — The type of the button. Defaults to button.
- **variant**: `ButtonVariant` — Sets the variant of the button.
- **form**: `any` — Returns the HTMLFormElement associated with this element.
- **blur**(): void — Removes focus from the button.
- **click**(): void — Simulates a mouse click on the element
- **focus**(options?: FocusOptions): void — Sets focus in the button.

### [IgrButtonGroup](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrButtonGroup)
The igc-button-group groups a series of igc-toggle-buttons together, exposing features such as layout and selection.

- **alignment**: `ContentOrientation` — Sets the orientation of the buttons in the group.
- **disabled**: `boolean` — Disables all buttons inside the group.
- **selectedItems**: `string[]` — Gets/Sets the currently selected buttons (their values).
- **selection**: `ButtonGroupSelection` — Controls the mode of selection for the button group.

### [IgrCalendar](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCalendar)
Represents a calendar that lets users
to select a date value in a variety of different ways.

- **activeView**: `CalendarActiveView` — The current active view of the component.
- **formatOptions**: `Pick<DateTimeFormatOptions, "month" | "weekday">` — The options used to format the months and the weekdays in the calendar views.
- **headerOrientation**: `CalendarHeaderOrientation` — The orientation of the calendar header.
- **hideHeader**: `boolean` — Whether to render the calendar header part.
When the calendar selection is set to multiple the header is always hidden.
- **hideOutsideDays**: `boolean` — Whether to show the dates that do not belong to the current active month.
- **orientation**: `ContentOrientation` — The orientation of the calendar months when more than one month
is being shown.
- **visibleMonths**: `number` — The number of months displayed in the days view.

### [IgrCard](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCard)
A container component that wraps different elements related to a single subject.
The card component provides a flexible container for organizing content such as headers,
media, text content, and actions.

- **elevated**: `boolean` — Sets the card to have an elevated appearance with shadow.
When false, the card uses an outlined style with a border.

### [IgrCardActions](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCardActions)
A container component for card action items such as buttons or icon buttons.
Actions can be positioned at the start, center, or end of the container.

- **orientation**: `ContentOrientation` — The orientation of the actions layout.

### [IgrCardContent](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCardContent)
A container component for the card's main text content.
This component should be used within an igc-card element to display the primary content.


### [IgrCardHeader](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCardHeader)
A container component for the card's header section.
Displays header content including an optional thumbnail, title, subtitle, and additional content.


### [IgrCardMedia](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCardMedia)
A container component for card media content such as images, GIFs, or videos.
This component should be used within an igc-card element to display visual content.


### [IgrCarousel](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCarousel)
The igc-carousel presents a set of igc-carousel-slides by sequentially displaying a subset of one or more slides.

- **animationType**: `HorizontalTransitionAnimation` — The animation type.
- **disableLoop**: `boolean` — Whether the carousel should skip rotating to the first slide after it reaches the last.
- **disablePauseOnInteraction**: `boolean` — Whether the carousel should ignore use interactions and not pause on them.
- **hideIndicators**: `boolean` — Whether the carousel should render the indicator controls (dots).
- **hideNavigation**: `boolean` — Whether the carousel should skip rendering of the default navigation buttons.
- **indicatorsLabelFormat**: `string` — The format used to set the aria-label on the carousel indicators.
Instances of '{0}' will be replaced with the index of the corresponding slide.
- **indicatorsOrientation**: `CarouselIndicatorsOrientation` — Sets the orientation of the indicator controls (dots).
- **interval**: `number` — The duration in milliseconds between changing the active slide.
- **locale**: `string` — Gets/Sets the locale used for getting language, affecting resource strings.
- **maximumIndicatorsCount**: `number` — Controls the maximum indicator controls (dots) that can be shown. Default value is 10.
- **resourceStrings**: `ICarouselResourceStrings` — The resource strings for localization.
Currently only aria-label attributes are localized for the carousel.
- **slidesLabelFormat**: `string` — The format used to set the aria-label on the carousel slides and the text displayed
when the number of indicators is greater than tha maximum indicator count.
Instances of '{0}' will be replaced with the index of the corresponding slide.
Instances of '{1}' will be replaced with the total amount of slides.
- **vertical**: `boolean` — Whether the carousel has vertical alignment.
- **current**: `any` — The index of the current active slide.
- **isPaused**: `any` — Whether the carousel in in paused state.
- **isPlaying**: `any` — Whether the carousel is in playing state.
- **slides**: `any` — The slides of the carousel.
- **total**: `any` — The total number of slides.
- **next**(): Promise<boolean> — Switches to the next slide, runs any animations, and returns if the operation was successful.
- **pause**(): void — Pauses the carousel rotation of slides.
- **play**(): void — Resumes playing of the carousel slides.
- **prev**(): Promise<boolean> — Switches to the previous slide, runs any animations, and returns if the operation was successful.
- **select**(slide: IgcCarouselSlideComponent, animationDirection?: "next" | "prev"): Promise<boolean> — Switches to the passed-in slide, runs any animations, and returns if the operation was successful.
- **select**(index: number, animationDirection?: "next" | "prev"): Promise<boolean> — Switches to slide by index, runs any animations, and returns if the operation was successful.

### [IgrCarouselIndicator](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCarouselIndicator)
Used when a custom indicator needs to be passed to the igc-carousel component.

- **active**: `boolean`
- **index**: `number`

### [IgrCarouselSlide](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCarouselSlide)
A single content container within a set of containers used in the context of an igc-carousel.

- **active**: `boolean` — The current active slide for the carousel component.
- **previous**: `boolean`

### [IgrChat](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrChat)
A chat UI component for displaying messages, attachments, and input interaction.

- **draftMessage**: `any` — The chat message currently being composed but not yet sent.
Includes the draft text and any attachments.
- **messages**: `IgcChatMessage[]` — The list of chat messages currently displayed.
Use this property to set or update the message history.
- **options**: `IgcChatOptions` — Controls the chat behavior and appearance through a configuration object.
Use this to toggle UI options, provide suggestions, templates, etc.
- **resourceStrings**: `IgcChatResourceStrings` — The resource strings of the chat.
- **scrollToMessage**(messageId: string): void — Scrolls the view to a specific message by id.

### [IgrCheckbox](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCheckbox)
A check box allowing single values to be selected/deselected.

- **checked**: `boolean` — The checked state of the control.
- **indeterminate**: `boolean` — Draws the checkbox in indeterminate state.
- **labelPosition**: `ToggleLabelPosition` — The label position of the control.
- **value**: `string` — The value attribute of the control.
- **blur**(): void — Removes focus from the control.
- **click**(): void — Simulates a click on the control.
- **focus**(options?: FocusOptions): void — Sets focus on the control.

### [IgrChip](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrChip)
Chips help people enter information, make selections, filter content, or trigger actions.

- **disabled**: `boolean` — Sets the disabled state for the chip.
- **locale**: `string` — Gets/Sets the locale used for getting language, affecting resource strings.
- **removable**: `boolean` — Defines if the chip is removable or not.
- **resourceStrings**: `IChipResourceStrings` — The resource strings for localization.
Currently only aria-labels for the default select/remove icons are localized.
- **selectable**: `boolean` — Defines if the chip is selectable or not.
- **selected**: `boolean` — Defines if the chip is selected or not.
- **variant**: `StyleVariant` — A property that sets the color variant of the chip component.

### [IgrCircularGradient](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCircularGradient)
Used for defining gradient stops in the igc-circular-progress.
For each igc-circular-gradient defined as gradient slot of igc-circular-progress element would be created a SVG stop element.
The values passed as color, offset and opacity would be set as
stop-color, offset and stop-opacity of the SVG element without further validations.

- **color**: `string` — Defines the color of the gradient stop
- **offset**: `string` — Defines where the gradient stop is placed along the gradient vector
- **opacity**: `number` — Defines the opacity of the gradient stop

### [IgrCircularProgress](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCircularProgress)
A circular progress indicator used to express unspecified wait time or display
the length of a process.

- **animationDuration**: `number` — Animation duration in milliseconds.
- **hideLabel**: `boolean` — Shows/hides the label of the control.
- **indeterminate**: `boolean` — The indeterminate state of the control.
- **labelFormat**: `string` — Format string for the default label of the control.
Placeholders:
 {0} - current value of the control.
 {1} - max value of the control.
- **max**: `number` — Maximum value of the control.
- **value**: `number` — The value of the control.
- **variant**: `StyleVariant` — The variant of the control.

### [IgrCombo](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrCombo)
The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection.
In contrast to the Select component, the Combo component displays all options in a virtualized list of items,
meaning the combo box can simultaneously show thousands of options, where one or more options can be selected.
Additionally, users can create custom item templates, allowing for robust data visualization.
The Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more.

- **autofocus**: `boolean` — The autofocus attribute of the control.
- **autofocusList**: `boolean` — Focuses the list of options when the menu opens.
- **caseSensitiveIcon**: `boolean` — Enables the case sensitive search icon in the filtering input.
- **data**: `T[]` — The data source used to generate the list of options.
- **disableClear**: `boolean` — Hides the clear button.
- **disableFiltering**: `boolean` — Disables the filtering of the list of options.
- **displayKey**: `any` — The key in the data source used to display items in the list.
- **filteringOptions**: `FilteringOptions<T>` — An object that configures the filtering of the combo.
- **groupHeaderTemplate**: `ComboItemTemplate<T>` — The template used for the content of each combo group header.
- **groupKey**: `any` — The key in the data source used to group items in the list.
- **groupSorting**: `GroupingDirection` — Sorts the items in each group by ascending or descending order.
- **itemTemplate**: `ComboItemTemplate<T>` — The template used for the content of each combo item.
- **label**: `string` — The label attribute of the control.
- **locale**: `string` — Gets/Sets the locale used for getting language, affecting resource strings.
- **open**: `boolean` — Sets the open state of the component.
- **outlined**: `boolean` — The outlined attribute of the control.
- **placeholder**: `string` — The placeholder attribute of the control.
- **placeholderSearch**: `string` — The placeholder attribute of the search input.
- **resourceStrings**: `IComboResourceStrings` — The resource strings for localization.
- **singleSelect**: `boolean` — Enables single selection mode and moves item filtering to the main input.
- **value**: `ComboValue<T>[]` — Sets the value (selected items). The passed value must be a valid JSON array.
If the data source is an array of complex objects, the `valueKey` attribute must be set.
Note that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.
- **valueKey**: `any` — The key in the data source used when selecting items.
- **selection**: `any` — Returns the current selection as an array of objects as provided in the `data` source.
- **blur**(): void — Removes focus from the component.
- **deselect**(items?: Item<T> | Item<T>[]): void — Deselects option(s) in the list by either reference or valueKey.
If not argument is provided all items will be deselected.
- **focus**(options?: FocusOptions): void — Sets focus on the component.
- **hide**(): Promise<boolean> — Hides the list of options.
- **select**(items?: Item<T> | Item<T>[]): void — Selects option(s) in the list by either reference or valueKey.
If not argument is provided all items will be selected.
- **show**(): Promise<boolean> — Shows the list of options.
- **toggle**(): Promise<boolean> — Toggles the list of options.

### [IgrDatePicker](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDatePicker)
igc-date-picker is a feature rich component used for entering a date through manual text input or
choosing date values from a calendar dialog that pops up.

- **activeDate**: `Date` — Gets/Sets the date which is shown in the calendar picker and is highlighted.
By default it is the current date.
- **disabledDates**: `DateRangeDescriptor[]` — Gets/sets disabled dates.
- **displayFormat**: `string` — Format to display the value in when not editing.
Defaults to the locale format if not set.
- **headerOrientation**: `CalendarHeaderOrientation` — The orientation of the calendar header.
- **hideHeader**: `boolean` — Determines whether the calendar hides its header.
- **hideOutsideDays**: `boolean` — Controls the visibility of the dates that do not belong to the current month.
- **inputFormat**: `string` — The date format to apply on the input.
Defaults to the current locale Intl.DateTimeFormat
- **label**: `string` — The label of the datepicker.
- **locale**: `string` — Gets/Sets the locale used for formatting the display value.
- **max**: `Date` — The maximum value required for the date picker to remain valid.
- **min**: `Date` — The minimum value required for the date picker to remain valid.
- **mode**: `PickerMode` — Determines whether the calendar is opened in a dropdown or a modal dialog
- **nonEditable**: `boolean` — Whether to allow typing in the input.
- **open**: `boolean` — Sets the state of the datepicker dropdown.
- **orientation**: `ContentOrientation` — The orientation of the multiple months displayed in the calendar's days view.
- **outlined**: `boolean` — Whether the control will have outlined appearance.
- **placeholder**: `string` — The placeholder attribute of the control.
- **prompt**: `string` — The prompt symbol to use for unfilled parts of the mask.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **resourceStrings**: `IgcCalendarResourceStrings` — The resource strings for localization.
- **showWeekNumbers**: `boolean` — Whether to show the number of the week in the calendar.
- **specialDates**: `DateRangeDescriptor[]` — Gets/sets special dates.
- **value**: `Date` — The value of the picker
- **visibleMonths**: `number` — The number of months displayed in the calendar.
- **weekStart**: `WeekDays` — Sets the start day of the week for the calendar.
- **clear**(): void — Clears the input part of the component of any user input
- **select**(): void — Selects the text in the input of the component
- **setRangeText**(replacement: string, start: number, end: number, mode?: RangeTextSelectMode): void
- **setSelectionRange**(start: number, end: number, direction?: SelectionRangeDirection): void — Sets the text selection range in the input of the component
- **stepDown**(datePart?: DatePart, delta?: number): void — Decrements the passed in date part
- **stepUp**(datePart?: DatePart, delta?: number): void — Increments the passed in date part

### [IgrDateRangePicker](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDateRangePicker)
The igc-date-range-picker allows the user to select a range of dates.

- **activeDate**: `Date` — Gets/Sets the date which is shown in the calendar picker and is highlighted.
By default it is the current date.
- **customRanges**: `CustomDateRange[]` — Renders chips with custom ranges based on the elements of the array.
- **disabledDates**: `DateRangeDescriptor[]` — Gets/sets disabled dates.
- **displayFormat**: `string` — Format to display the value in when not editing.
Defaults to the locale format if not set.
- **headerOrientation**: `ContentOrientation` — The orientation of the calendar header.
- **hideHeader**: `boolean` — Determines whether the calendar hides its header.
- **hideOutsideDays**: `boolean` — Controls the visibility of the dates that do not belong to the current month.
- **inputFormat**: `string` — The date format to apply on the inputs.
Defaults to the current locale Intl.DateTimeFormat
- **label**: `string` — The label of the control (single input).
- **labelEnd**: `string` — The label attribute of the end input.
- **labelStart**: `string` — The label attribute of the start input.
- **locale**: `string` — The locale settings used to display the value.
- **max**: `Date` — The maximum value required for the date range picker to remain valid.
- **min**: `Date` — The minimum value required for the date range picker to remain valid.
- **mode**: `PickerMode` — Determines whether the calendar is opened in a dropdown or a modal dialog
- **nonEditable**: `boolean` — Whether to allow typing in the input.
- **orientation**: `ContentOrientation` — The orientation of the multiple months displayed in the calendar's days view.
- **outlined**: `boolean` — Whether the control will have outlined appearance.
- **placeholder**: `string` — The placeholder attribute of the control (single input).
- **placeholderEnd**: `string` — The placeholder attribute of the end input.
- **placeholderStart**: `string` — The placeholder attribute of the start input.
- **prompt**: `string` — The prompt symbol to use for unfilled parts of the mask.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **resourceStrings**: `IgcDateRangePickerResourceStrings` — The resource strings of the date range picker.
- **showWeekNumbers**: `boolean` — Whether to show the number of the week in the calendar.
- **specialDates**: `DateRangeDescriptor[]` — Gets/sets special dates.
- **usePredefinedRanges**: `boolean` — Whether the control will show chips with predefined ranges.
- **useTwoInputs**: `boolean` — Use two inputs to display the date range values. Makes the input editable in dropdown mode.
- **value**: `DateRangeValue` — The value of the picker
- **visibleMonths**: `number` — The number of months displayed in the calendar.
- **weekStart**: `WeekDays` — Sets the start day of the week for the calendar.
- **clear**(): void — Clears the input parts of the component of any user input
- **select**(value: DateRangeValue): void — Selects a date range value in the picker

### [IgrDateTimeInput](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDateTimeInput)
A date time input is an input field that lets you set and edit the date and time in a chosen input element
using customizable display and input formats.

- **displayFormat**: `string` — Format to display the value in when not editing.
Defaults to the locale format if not set.
- **inputFormat**: `string` — The date format to apply on the input.
- **locale**: `string` — Gets/Sets the locale used for formatting the display value.
- **max**: `Date` — The maximum value required for the input to remain valid.
- **min**: `Date` — The minimum value required for the input to remain valid.
- **spinDelta**: `DatePartDeltas` — Delta values used to increment or decrement each date part on step actions.
All values default to 1.
- **spinLoop**: `boolean` — Sets whether to loop over the currently spun segment.
- **value**: `Date` — The value of the input.
- **clear**(): void — Clears the input element of user input.
- **stepDown**(datePart?: DatePart, delta?: number): void — Decrements a date/time portion.
- **stepUp**(datePart?: DatePart, delta?: number): void — Increments a date/time portion.

### [IgrDialog](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDialog)
Represents a Dialog component.

- **closeOnOutsideClick**: `boolean` — Whether the dialog should be closed when clicking outside of it.
- **hideDefaultAction**: `boolean` — Whether to hide the default action button for the dialog.

When there is projected content in the footer slot this property
has no effect.
- **keepOpenOnEscape**: `boolean` — Whether the dialog should be kept open when pressing the 'Escape' button.
- **open**: `boolean` — Whether the dialog is opened.
- **returnValue**: `string` — Sets the return value for the dialog.
- **title**: `string` — Sets the title of the dialog.
- **hide**(): Promise<boolean> — Closes the dialog.
- **show**(): Promise<boolean> — Opens the dialog.
- **toggle**(): Promise<boolean> — Toggles the open state of the dialog.

### [IgrDivider](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDivider)
The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.

- **middle**: `boolean` — When set and inset is provided, it will shrink the divider line from both sides.
- **type**: `DividerType` — Whether to render a solid or a dashed divider line.
- **vertical**: `boolean` — Whether to render a vertical divider line.

### [IgrDropdown](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDropdown)
Represents a DropDown component.

- **distance**: `number` — The distance from the target element.
- **flip**: `boolean` — Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.
When true, once enough space is detected on its preferred side, it will flip back.
- **placement**: `PopoverPlacement` — The preferred placement of the component around the target element.
- **sameWidth**: `boolean` — Whether the dropdown's width should be the same as the target's one.
- **scrollStrategy**: `PopoverScrollStrategy` — Determines the behavior of the component during scrolling of the parent container.
- **groups**: `any` — Returns the group items of the dropdown.
- **items**: `any` — Returns the items of the dropdown.
- **selectedItem**: `any` — Returns the selected item from the dropdown or null.
- **clearSelection**(): void — Clears the current selection of the dropdown.
- **disconnectedCallback**(): void — Invoked when the component is removed from the document's DOM.

This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}


An element may be re-connected after being disconnected.
- **navigateTo**(value: string): IgcDropdownItemComponent — Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.
- **navigateTo**(index: number): IgcDropdownItemComponent — Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null.
- **select**(value: string): IgcDropdownItemComponent — Selects the item with the specified value. If it exists, returns the found item, otherwise - null.
- **select**(index: number): IgcDropdownItemComponent — Selects the item at the specified index. If it exists, returns the found item, otherwise - null.
- **show**(target?: string | HTMLElement): Promise<boolean> — Shows the component.
- **toggle**(target?: string | HTMLElement): Promise<boolean> — Toggles the open state of the component.

### [IgrDropdownGroup](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDropdownGroup)
A container for a group of igc-dropdown-item components.

- **items**: `IgcDropdownItemComponent[]` — All child igc-dropdown-items.

### [IgrDropdownHeader](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDropdownHeader)
Represents a header item in a igc-dropdown list.


### [IgrDropdownItem](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrDropdownItem)
Represents an item in a dropdown list.

- **active**: `boolean` — Whether the item is active.
- **disabled**: `boolean` — Whether the item is disabled.
- **selected**: `boolean` — Whether the item is selected.
- **value**: `string` — The current value of the item.
If not specified, the element's text content is used.

### [IgrExpansionPanel](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrExpansionPanel)
The Expansion Panel Component provides a way to display information in a toggleable way -
compact summary view containing title and description and expanded detail view containing
additional content to the summary header.

- **disabled**: `boolean` — Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.
- **indicatorPosition**: `ExpansionPanelIndicatorPosition` — The indicator position of the expansion panel.
- **open**: `boolean` — Indicates whether the contents of the control should be visible.
- **hide**(): Promise<boolean> — Hides the panel content.
- **show**(): Promise<boolean> — Shows the panel content.
- **toggle**(): Promise<boolean> — Toggles the panel open/close state.

### [IgrFileInput](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrFileInput)

- **accept**: `string` — The accept attribute of the control.
Defines the file types as a list of comma-separated values that the file input should accept.
- **autofocus**: `boolean` — The autofocus attribute of the control.
- **locale**: `string` — Gets/Sets the locale used for getting language, affecting resource strings.
- **multiple**: `boolean` — The multiple attribute of the control.
Used to indicate that a file input allows the user to select more than one file.
- **resourceStrings**: `IFileInputResourceStrings` — The resource strings for localization.
- **value**: `string` — The value of the control.
Similar to native file input, this property is read-only and cannot be set programmatically.
- **files**: `any` — Returns the list of selected files.

### [IgrGridLite](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrGridLite)
IgcGridLite is a web component for displaying data in a tabular format quick and easy.

Out of the box it provides row virtualization, sort and filter operations (client and server side),
the ability to template cells and headers and column hiding.

- **adoptRootStyles**: `boolean`
- **autoGenerate**: `boolean` — Whether the grid will try to "resolve" its column configuration based on the passed
data source.
- **data**: `T[]` — The data source for the grid.
- **dataPipelineConfiguration**: `DataPipelineConfiguration<T>` — Configuration object which controls remote data operations for the grid.
- **filterExpressions**: `FilterExpression<T>[]` — Set the filter state for the grid.
- **sortingExpressions**: `SortingExpression<T>[]` — Set the sort state for the grid.
- **sortingOptions**: `GridLiteSortingOptions` — Sort configuration property for the grid.
- **columns**: `any`
- **dataView**: `any` — Returns the state of the data source after sort/filter operations
have been applied.
- **rows**: `any` — Returns the collection of rendered row elements in the grid.
- **totalItems**: `any` — [object Object],[object Object],[object Object]
- **clearFilter**(key?: Keys<T>): void — Resets the current filter state of the control.
- **clearSort**(key?: Keys<T>): void — Resets the current sort state of the control.
- **filter**(config: FilterExpression<T> | FilterExpression<T>[]): void — Performs a filter operation in the grid based on the passed expression(s).
- **getColumn**(id: number | Keys<T>): ColumnConfiguration<T> — Returns a ColumnConfiguration for a given column.
- **navigateTo**(row: number, column?: Keys<T>, activate?: boolean): Promise<void> — Navigates to a position in the grid based on provided row index and column field.
- **sort**(expressions: SortingExpression<T> | SortingExpression<T>[]): void — Performs a sort operation in the grid based on the passed expression(s).

### [IgrGridLiteColumn](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrGridLiteColumn)

- **cellTemplate**: `any` — Custom cell template for the column.
- **dataType**: `"string" | "number" | "boolean"` — The data type of the column's values.
- **field**: `Keys<T>` — The field from the data for this column.
- **filterable**: `boolean` — Indicates whether the column is filterable.
- **filteringCaseSensitive**: `boolean` — Whether filter operations will be case sensitive.
- **header**: `string` — The header text of the column.
- **headerTemplate**: `any` — Custom header template for the column.
- **hidden**: `boolean` — Indicates whether the column is hidden.
- **resizable**: `boolean` — Indicates whether the column is resizable.
- **sortable**: `boolean` — Indicates whether the column is sortable.
- **sortConfiguration**: `ColumnSortConfiguration<T>` — Sort configuration for the column (e.g., custom comparer).
- **sortingCaseSensitive**: `boolean` — Whether sort operations will be case sensitive.
- **width**: `string` — The width of the column.

### [IgrIcon](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrIcon)
The icon component allows visualizing collections of pre-registered SVG icons.

- **collection**: `string` — The name of the registered collection for look up of icons.
- **mirrored**: `boolean` — Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.
- **name**: `string` — The name of the icon glyph to draw.

### [IgrIconButton](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrIconButton)

- **collection**: `string` — The name of the icon collection.
- **disabled**: `boolean` — The disabled state of the component
- **download**: `string` — Prompts to save the linked URL instead of navigating to it.
- **href**: `string` — The URL the button points to.
- **mirrored**: `boolean` — Whether to flip the icon button. Useful for RTL layouts.
- **name**: `string` — The name of the icon.
- **rel**: `string` — The relationship of the linked URL.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
- **target**: `"_blank" | "_parent" | "_self" | "_top"` — Where to display the linked URL, as the name for a browsing context.
- **type**: `"reset" | "submit" | "button"` — The type of the button. Defaults to button.
- **variant**: `IconButtonVariant` — The visual variant of the icon button.
- **form**: `any` — Returns the HTMLFormElement associated with this element.
- **blur**(): void — Removes focus from the button.
- **click**(): void — Simulates a mouse click on the element
- **focus**(options?: FocusOptions): void — Sets focus in the button.

### [IgrInput](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrInput)

- **autocomplete**: `string` — The autocomplete attribute of the control.
- **autofocus**: `boolean` — The autofocus attribute of the control.
- **inputMode**: `string` — The input mode attribute of the control.
See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
- **label**: `string` — The label for the control.
- **max**: `number` — The max attribute of the control.
- **maxLength**: `number` — The maximum string length of the control.
- **min**: `number` — The min attribute of the control.
- **minLength**: `number` — The minimum string length required by the control.
- **outlined**: `boolean` — Whether the control will have outlined appearance.
- **pattern**: `string` — The pattern attribute of the control.
- **placeholder**: `string` — The placeholder attribute of the control.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **step**: `number` — The step attribute of the control.
- **type**: `InputType` — The type attribute of the control.
- **validateOnly**: `boolean` — Enables validation rules to be evaluated without restricting user input. This applies to the maxLength property for
string-type inputs or allows spin buttons to exceed the predefined min/max limits for number-type inputs.
- **value**: `string` — The value of the control.
- **blur**(): void — Removes focus from the control.
- **focus**(options?: FocusOptions): void — Sets focus on the control.
- **select**(): void — Selects all the text inside the input.
- **setRangeText**(replacement: string, start?: number, end?: number, selectMode?: RangeTextSelectMode): void — Replaces the selected text in the input.
- **setSelectionRange**(start?: number, end?: number, direction?: SelectionRangeDirection): void — Sets the text selection range of the control
- **stepDown**(n?: number): void — Decrements the numeric value of the input by one or more steps.
- **stepUp**(n?: number): void — Increments the numeric value of the input by one or more steps.

### [IgrLinearProgress](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrLinearProgress)
A linear progress indicator used to express unspecified wait time or display
the length of a process.

- **animationDuration**: `number` — Animation duration in milliseconds.
- **hideLabel**: `boolean` — Shows/hides the label of the control.
- **indeterminate**: `boolean` — The indeterminate state of the control.
- **labelAlign**: `LinearProgressLabelAlign` — The position for the default label of the control.
- **labelFormat**: `string` — Format string for the default label of the control.
Placeholders:
 {0} - current value of the control.
 {1} - max value of the control.
- **max**: `number` — Maximum value of the control.
- **striped**: `boolean` — Sets the striped look of the control.
- **value**: `number` — The value of the control.
- **variant**: `StyleVariant` — The variant of the control.

### [IgrList](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrList)
Displays a collection of data items in a templatable list format.


### [IgrListHeader](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrListHeader)
Header list item.


### [IgrListItem](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrListItem)
The list-item component is a container
intended for row items in the list component.

- **selected**: `boolean` — Defines if the list item is selected or not.

### [IgrMaskInput](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrMaskInput)
A masked input is an input field where a developer can control user input and format the visible value,
based on configurable rules

- **label**: `string` — The label for the control.
- **mask**: `string` — The masked pattern of the component.
- **mask**: `string` — The masked pattern of the component.
- **outlined**: `boolean` — Whether the control will have outlined appearance.
- **placeholder**: `string` — The placeholder attribute of the control.
- **prompt**: `string` — The prompt symbol to use for unfilled parts of the mask pattern.
- **prompt**: `string` — The prompt symbol to use for unfilled parts of the mask pattern.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **value**: `string` — The value of the input.

Regardless of the currently set `value-mode`, an empty value will return an empty string.
- **valueMode**: `MaskInputValueMode` — Dictates the behavior when retrieving the value of the control:

- raw: Returns clean input (e.g. "5551234567")
- withFormatting: Returns with mask formatting (e.g. "(555) 123-4567")

Empty values always return an empty string, regardless of the value mode.
- **blur**(): void — Removes focus from the control.
- **focus**(options?: FocusOptions): void — Sets focus on the control.
- **isValidMaskPattern**(): boolean — Returns whether the current masked input is valid according to the mask pattern.
- **select**(): void — Selects all the text inside the input.
- **setRangeText**(replacement: string, start?: number, end?: number, selectMode?: RangeTextSelectMode): void — Replaces the selected text in the control and re-applies the mask
- **setSelectionRange**(start?: number, end?: number, direction?: SelectionRangeDirection): void — Sets the text selection range of the control

### [IgrNavbar](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrNavbar)
A navigation bar component is used to facilitate navigation through
a series of hierarchical screens within an app.


### [IgrNavDrawer](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrNavDrawer)
Represents a side navigation container that provides
quick access between views.

- **open**: `boolean` — Determines whether the drawer is opened.
- **position**: `NavDrawerPosition` — The position of the drawer.
- **hide**(): Promise<boolean> — Closes the drawer.
- **show**(): Promise<boolean> — Opens the drawer.
- **toggle**(): Promise<boolean> — Toggles the open state of the drawer.

### [IgrNavDrawerHeaderItem](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrNavDrawerHeaderItem)
A wrapper for navigation drawer's header.


### [IgrNavDrawerItem](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrNavDrawerItem)
Represents a navigation drawer item.

- **active**: `boolean` — Determines whether the drawer is active.
- **disabled**: `boolean` — Determines whether the drawer is disabled.

### [IgrRadio](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrRadio)

- **checked**: `boolean` — The checked state of the control.
- **labelPosition**: `ToggleLabelPosition` — The label position of the radio control.
- **required**: `boolean`
- **value**: `string` — The value attribute of the control.
- **blur**(): void — Removes focus from the radio control.
- **checkValidity**(): boolean — Checks for validity of the control and emits the invalid event if it invalid.
- **click**(): void — Simulates a click on the radio control.
- **focus**(options?: FocusOptions): void — Sets focus on the radio control.
- **reportValidity**(): boolean — Checks for validity of the control and shows the browser message if it invalid.
- **setCustomValidity**(message: string): void — Sets a custom validation message for the control.
As long as message is not empty, the control is considered invalid.

### [IgrRadioGroup](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrRadioGroup)
The igc-radio-group component unifies one or more igc-radio buttons.

- **alignment**: `ContentOrientation` — Alignment of the radio controls inside this group.
- **defaultValue**: `string`
- **name**: `string` — Gets/Sets the name for all child igc-radio components.
- **value**: `string` — Gets/Sets the checked igc-radio element that matches `value`

### [IgrRangeSlider](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrRangeSlider)
A range slider component used to select two numeric values within a range.

- **lower**: `number` — The current value of the lower thumb.
- **thumbLabelLower**: `string` — The aria label for the lower thumb.
- **thumbLabelUpper**: `string` — The aria label for the upper thumb.
- **upper**: `number` — The current value of the upper thumb.

### [IgrRating](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrRating)
Rating provides insight regarding others' opinions and experiences,
and can allow the user to submit a rating of their own

- **allowReset**: `boolean` — Whether to reset the rating when the user selects the same value.
- **hoverPreview**: `boolean` — Sets hover preview behavior for the component
- **label**: `string` — The label of the control.
- **max**: `number` — The maximum value for the rating.

If there are projected symbols, the maximum value will be resolved
based on the number of symbols.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **single**: `boolean` — Toggles single selection visual mode.
- **step**: `number` — The minimum value change allowed.

Valid values are in the interval between 0 and 1 inclusive.
- **value**: `number` — The current value of the component
- **valueFormat**: `string` — A format string which sets aria-valuetext. Instances of '{0}' will be replaced
with the current value of the control and instances of '{1}' with the maximum value for the control.

Important for screen-readers and useful for localization.
- **stepDown**(n?: number): void — Decrements the value of the control by n steps multiplied by
the step factor.
- **stepUp**(n?: number): void — Increments the value of the control by n steps multiplied by the
step factor.

### [IgrRatingSymbol](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrRatingSymbol)
Used when a custom icon/symbol/element needs to be passed to the igc-rating component.

- **connectedCallback**(): void — Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}


Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().

### [IgrRipple](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrRipple)
A ripple can be applied to an element to represent
interactive surface.


### [IgrSelect](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSelect)
Represents a control that provides a menu of options.

- **autofocus**: `boolean` — The autofocus attribute of the control.
- **distance**: `number` — The distance of the select dropdown from its input.
- **label**: `string` — The label attribute of the control.
- **outlined**: `boolean` — The outlined attribute of the control.
- **placeholder**: `string` — The placeholder attribute of the control.
- **placement**: `PopoverPlacement` — The preferred placement of the select dropdown around its input.
- **scrollStrategy**: `PopoverScrollStrategy` — Determines the behavior of the component during scrolling of the parent container.
- **value**: `string` — The value attribute of the control.
- **groups**: `any` — Returns the groups of the igc-select component.
- **items**: `any` — Returns the items of the igc-select component.
- **selectedItem**: `any` — Returns the selected item from the dropdown or null.
- **blur**(): void — Removes focus from the component.
- **clearSelection**(): void — Resets the current value and selection of the component.
- **focus**(options?: FocusOptions): void — Sets focus on the component.
- **navigateTo**(value: string): IgcSelectItemComponent — Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.
- **navigateTo**(index: number): IgcSelectItemComponent — Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null.
- **reportValidity**(): boolean — Checks the validity of the control and moves the focus to it if it is not valid.
- **select**(value: string): IgcSelectItemComponent — Selects the item with the specified value. If it exists, returns the found item, otherwise - null.
- **select**(index: number): IgcSelectItemComponent — Selects the item at the specified index. If it exists, returns the found item, otherwise - null.

### [IgrSelectGroup](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSelectGroup)

- **disabled**: `boolean` — Whether the group item and all its children are disabled.
- **items**: `IgcSelectItemComponent[]` — All child igc-select-items.

### [IgrSelectHeader](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSelectHeader)
Represents a header item in an igc-select component.


### [IgrSelectItem](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSelectItem)
Represents an item in a select list.

- **active**: `boolean` — Whether the item is disabled.
- **active**: `boolean` — Whether the item is active.
- **disabled**: `boolean` — Whether the item is disabled.
- **selected**: `boolean` — Whether the item is selected.
- **value**: `string` — The current value of the item.
If not specified, the element's text content is used.

### [IgrSlider](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSlider)
A slider component used to select numeric value within a range.

- **value**: `number` — The current value of the component.
- **stepDown**(stepDecrement?: number): void — Decrements the value of the slider by stepDecrement * step, where stepDecrement defaults to 1.
- **stepUp**(stepIncrement?: number): void — Increments the value of the slider by stepIncrement * step, where stepIncrement defaults to 1.

### [IgrSliderLabel](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSliderLabel)
Allows formatting the values of the slider as string values.
The text content of the slider labels is used for thumb and tick labels.


### [IgrSnackbar](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSnackbar)
A snackbar component is used to provide feedback about an operation
by showing a brief message at the bottom of the screen.

- **actionText**: `string` — The snackbar action button.

### [IgrStep](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrStep)
The step component is used within the igc-stepper element and it holds the content of each step.
It also supports custom indicators, title and subtitle.

- **active**: `boolean` — Gets/sets whether the step is activе.
- **complete**: `boolean` — Gets/sets whether the step is completed.
- **contentBody**: `HTMLElement`
- **disabled**: `boolean` — Gets/sets whether the step is interactable.
- **header**: `HTMLElement`
- **invalid**: `boolean` — Gets/sets whether the step is invalid.
- **optional**: `boolean` — Gets/sets whether the step is optional.
- **isAccessible**: `any`

### [IgrStepper](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrStepper)
IgxStepper provides a wizard-like workflow by dividing content into logical steps.

- **animationDuration**: `number` — The animation duration in either vertical or horizontal mode.
- **contentTop**: `boolean` — Get/Set whether the content is displayed above the steps.
- **horizontalAnimation**: `HorizontalTransitionAnimation` — The animation type when in horizontal mode.
- **linear**: `boolean` — Get/Set whether the stepper is linear.
- **orientation**: `StepperOrientation` — Gets/Sets the orientation of the stepper.
- **steps**: `IgcStepComponent[]` — Returns all of the stepper's steps.
- **stepType**: `StepperStepType` — Get/Set the type of the steps.
- **titlePosition**: `StepperTitlePosition` — Get/Set the position of the steps title.
- **verticalAnimation**: `StepperVerticalAnimation` — The animation type when in vertical mode.
- **connectedCallback**(): void — Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}


Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
- **navigateTo**(index: number): void — Activates the step at a given index.
- **next**(): void — Activates the next enabled step.
- **prev**(): void — Activates the previous enabled step.
- **reset**(): void — Resets the stepper to its initial state i.e. activates the first step.

### [IgrSwitch](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrSwitch)
Similar to a checkbox, a switch controls the state of a single setting on or off.

- **checked**: `boolean` — The checked state of the control.
- **labelPosition**: `ToggleLabelPosition` — The label position of the control.
- **value**: `string` — The value attribute of the control.
- **blur**(): void — Removes focus from the control.
- **click**(): void — Simulates a click on the control.
- **focus**(options?: FocusOptions): void — Sets focus on the control.

### [IgrTab](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTab)
A tab element slotted into an igc-tabs container.

- **disabled**: `boolean` — Determines whether the tab is disabled.
- **label**: `string` — The tab item label.
- **selected**: `boolean` — Determines whether the tab is selected.

### [IgrTabs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTabs)
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

The <igc-tabs> component allows the user to navigate between multiple <igc-tab> elements.
It supports keyboard navigation and provides API methods to control the selected tab.

- **activation**: `TabsActivation` — Determines the tab activation. When set to auto,
the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys
and the corresponding panel is displayed.
When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
- **alignment**: `TabsAlignment` — Sets the alignment for the tab headers
- **selected**: `any` — Returns the currently selected tab label or IDREF if no label property is set.
- **tabs**: `any` — Returns the direct `igc-tab` elements that are children of this element.
- **select**(id: string): void — Selects the specified tab and displays the corresponding panel.
- **select**(ref: IgcTabComponent): void — Selects the specified tab and displays the corresponding panel.

### [IgrTextarea](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTextarea)
This element represents a multi-line plain-text editing control,
useful when you want to allow users to enter a sizeable amount of free-form text,
for example a comment on a review or feedback form.

- **autocapitalize**: `string` — Controls whether and how text input is automatically capitalized as it is entered/edited by the user.

[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
- **autocomplete**: `string` — Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,
as well as guidance to the browser as to the type of information expected in the field.
Refer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.
- **inputMode**: `string` — Hints at the type of data that might be entered by the user while editing the element or its contents.
This allows a browser to display an appropriate virtual keyboard.

[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
- **label**: `string` — The label for the control.
- **maxLength**: `number` — The maximum number of characters (UTF-16 code units) that the user can enter.
If this value isn't specified, the user can enter an unlimited number of characters.
- **minLength**: `number` — The minimum number of characters (UTF-16 code units) required that the user should enter.
- **outlined**: `boolean` — Whether the control will have outlined appearance.
- **placeholder**: `string` — The placeholder attribute of the control.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **resize**: `TextareaResize` — Controls whether the control can be resized.
When auto is set, the control will try to expand and fit its content.
- **rows**: `number` — The number of visible text lines for the control. If it is specified, it must be a positive integer.
If it is not specified, the default value is 3.
- **spellcheck**: `boolean` — Controls whether the element may be checked for spelling errors.
- **validateOnly**: `boolean` — Enables validation rules to be evaluated without restricting user input. This applies to the maxLength property
when it is defined.
- **value**: `string` — The value of the component
- **wrap**: `"off" | "hard" | "soft"` — Indicates how the control should wrap the value for form submission.
Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
for explanation of the available values.
- **scrollTo**(options?: ScrollToOptions): void — [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo)
- **scrollTo**(x: number, y: number): void
- **select**(): void — Selects all text within the control.
- **setRangeText**(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void — Replaces the selected text in the control.
- **setSelectionRange**(start: number, end: number, direction?: SelectionRangeDirection): void — Sets the text selection range of the control

### [IgrThemeProvider](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrThemeProvider)
A theme provider component that uses Lit context to provide theme information
to descendant components.

This component allows you to scope a theme to a specific part of the page.
All library components within this provider will use the specified theme
instead of the global theme.

- **theme**: `Theme` — The theme to provide to descendant components.
- **variant**: `ThemeVariant` — The theme variant to provide to descendant components.

### [IgrTile](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTile)
The tile component is used within the igc-tile-manager as a container
for displaying various types of information.

- **_tileContent**: `HTMLElement`
- **colSpan**: `number` — The number of columns the tile will span.
- **colStart**: `number` — The starting column for the tile.
- **disableFullscreen**: `boolean` — Whether to disable the rendering of the tile fullscreen-action slot and its
default fullscreen action button.
- **disableMaximize**: `boolean` — Whether to disable the rendering of the tile maximize-action slot and its
default maximize action button.
- **disableResize**: `boolean` — Indicates whether to disable tile resize behavior regardless
ot its tile manager parent settings.
- **maximized**: `boolean` — Indicates whether the tile occupies all available space within the layout.
- **position**: `number` — Gets/sets the tile's visual position in the layout.
Corresponds to the CSS `order` property.
- **rowSpan**: `number` — The number of rows the tile will span.
- **rowStart**: `number` — The starting row for the tile.
- **fullscreen**: `any` — Indicates whether the tile occupies the whole screen.

### [IgrTileManager](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTileManager)
The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.

- **columnCount**: `number` — Sets the number of columns for the tile manager.
Setting value <= than zero will trigger a responsive layout.
- **dragMode**: `TileManagerDragMode` — Whether drag and drop operations are enabled.
- **gap**: `string` — Sets the gap size between tiles in the tile manager.
- **minColumnWidth**: `string` — Sets the minimum width for a column unit in the tile manager.
- **minRowHeight**: `string` — Sets the minimum height for a row unit in the tile manager.
- **resizeMode**: `TileManagerResizeMode` — Whether resize operations are enabled.
- **tiles**: `any` — Gets the tiles sorted by their position in the layout.
- **loadLayout**(data: string): void — Restores a previously serialized state produced by saveLayout.
- **saveLayout**(): string — Returns the properties of the current tile collections as a JSON payload.

### [IgrToast](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrToast)
A toast component is used to show a notification

- **displayTime**: `number` — Determines the duration in ms in which the component will be visible.
- **keepOpen**: `boolean` — Determines whether the component should close after the displayTime is over.
- **open**: `boolean` — Whether the component is in shown state.
- **position**: `AbsolutePosition` — Sets the position of the component in the viewport.
- **hide**(): Promise<boolean> — Closes the component.
- **show**(): Promise<boolean> — Opens the component.
- **toggle**(): Promise<boolean> — Toggles the open state of the component.

### [IgrToggleButton](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrToggleButton)
The igc-toggle-button wraps a native button element and exposes additional value and selected properties.
It is used in the context of an igc-button-group to facilitate the creation of group/toolbar like UX behaviors.

- **disabled**: `boolean` — Determines whether the button is disabled.
- **selected**: `boolean` — Determines whether the button is selected.
- **value**: `string` — The value attribute of the control.
- **blur**(): void — Removes focus from the button.
- **click**(): void — Simulates a mouse click on the element.
- **focus**(options?: FocusOptions): void — Sets focus on the button.

### [IgrTooltip](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTooltip)
Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).
It offers features such as placement customization, delays, sticky mode, and animations.

- **anchor**: `string | Element` — An element instance or an IDREF to use as the anchor for the tooltip.
- **hideDelay**: `number` — Specifies the number of milliseconds that should pass before hiding the tooltip.
- **hideTriggers**: `string` — Which event triggers will hide the tooltip.
Expects a comma separate string of different event triggers.
- **message**: `string` — Specifies a plain text as tooltip content.
- **offset**: `number` — The offset of the tooltip from the anchor in pixels.
- **open**: `boolean` — Whether the tooltip is showing.
- **placement**: `PopoverPlacement` — Where to place the floating element relative to the parent anchor element.
- **showDelay**: `number` — Specifies the number of milliseconds that should pass before showing the tooltip.
- **showTriggers**: `string` — Which event triggers will show the tooltip.
Expects a comma separate string of different event triggers.
- **sticky**: `boolean` — Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
- **withArrow**: `boolean` — Whether to render an arrow indicator for the tooltip.
- **hide**(): Promise<boolean> — Hides the tooltip if not already hidden.
- **show**(target?: string | Element): Promise<boolean> — Shows the tooltip if not already showing.
 If a target is provided, sets it as a transient anchor.
- **toggle**(): Promise<boolean> — Toggles the tooltip between shown/hidden state

### [IgrTree](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTree)
The tree allows users to represent hierarchical data in a tree-view structure,
maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.

- **locale**: `string` — Gets/Sets the locale used for getting language, affecting resource strings.
- **resourceStrings**: `ITreeResourceStrings` — The resource strings for localization.
Currently only aria-labels of the default expand/collapse icons are localized for the tree item.
- **selection**: `TreeSelection` — The selection state of the tree.
- **singleBranchExpand**: `boolean` — Whether a single or multiple of a parent's child items can be expanded.
- **toggleNodeOnClick**: `boolean` — Whether clicking over nodes will change their expanded state or not.
- **items**: `any` — Returns all of the tree's items.
- **collapse**(items?: IgcTreeItemComponent[]): void — Collapses all of the passed items.
If no items are passed, collapses ALL items.
- **connectedCallback**(): void — Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}


Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
- **deselect**(items?: IgcTreeItemComponent[]): void — Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection.
- **expand**(items?: IgcTreeItemComponent[]): void — Expands all of the passed items.
If no items are passed, expands ALL items.
- **expandToItem**(item: IgcTreeItemComponent): void
- **select**(items?: IgcTreeItemComponent[]): void — Select all items if the items collection is empty. Otherwise, select the items in the items collection.

### [IgrTreeItem](https://www.infragistics.com/api/react/igniteui-react/19.5.1/classes/IgrTreeItem)
The tree-item component represents a child item of the tree component or another tree item.

- **active**: `boolean` — Marks the item as the tree's active item.
- **disabled**: `boolean` — Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.
- **expanded**: `boolean` — The tree item expansion state.
- **label**: `string` — The tree item label.
- **level**: `number` — The depth of the item, relative to the root.
- **loading**: `boolean` — To be used for load-on-demand scenarios in order to specify whether the item is loading data.
- **parent**: `IgcTreeItemComponent` — The parent item of the current tree item (if any)
- **selected**: `boolean` — The tree item selection state.
- **tree**: `IgcTreeComponent` — A reference to the tree the item is a part of.
- **value**: `any` — The value entry that the tree item is visualizing. Required for searching through items.
- **path**: `any` — The full path to the tree item, starting from the top-most ancestor.
- **collapse**(): void — Collapses the tree item.
- **collapseWithEvent**(): Promise<void> — Collapses the tree item.
- **connectedCallback**(): void — Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}


Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
- **disconnectedCallback**(): void — Invoked when the component is removed from the document's DOM.

This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}


An element may be re-connected after being disconnected.
- **expand**(): void — Expands the tree item.
- **expandWithEvent**(): Promise<void> — Expands the tree item.
- **getChildren**(options?: any): IgcTreeItemComponent[] — Returns a collection of child items.
If the parameter value is true returns all tree item's direct children,
otherwise - only the direct children.
- **toggle**(): void — Toggles tree item expansion state.

## Interfaces

### [BaseColumnConfiguration](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/BaseColumnConfiguration)
Configuration object for grid columns.

- **cellTemplate?**: `any` — Cell template callback.
- **dataType?**: `DataType` — The type of data this column will reference.

Affects the default filter operands if the column is with filtering enabled.
- **field**: `K` — The field from the data for this column.
- **filterable?**: `boolean` — Whether the column can be filtered.
- **filteringCaseSensitive?**: `boolean` — Whether the filter operations will be case sensitive.
- **header?**: `string` — Optional text to display in the column header. By default, the column field is used
to render the header text.
- **headerTemplate?**: `any` — Header template callback.
- **hidden?**: `boolean` — Whether the column is hidden or not.
- **resizable?**: `boolean` — Whether the the column can be resized or not.
- **sortable?**: `boolean` — Whether the column can be sorted.
- **sortConfiguration?**: `ColumnSortConfiguration<T, K>` — Sort configuration options for the column (e.g., custom comparer).
- **sortingCaseSensitive?**: `boolean` — Whether the sort operations will be case sensitive.
- **width?**: `string` — Width for the current column.

Accepts most CSS units for controlling width.

### [BaseColumnSortConfiguration](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/BaseColumnSortConfiguration)
Extended sort configuration for a column.

- **comparer?**: `SortComparer<T, K>` — Custom comparer function for sort operations for this column.

### [BaseFilterExpression](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/BaseFilterExpression)
Represents a filter operation for a given column.

- **caseSensitive?**: `boolean` — Whether the sort operation should be case sensitive.
- **condition**: `FilterOperation<PropertyType<T, K>> | OperandKeys<PropertyType<T, K>>` — The filter function which will be executed against the data records.
- **criteria?**: `FilterCriteria` — Dictates how this expression should resolve in the filter operation in relation to
other expressions.
- **key**: `K` — The target column for the filter operation.
- **searchTerm?**: `PropertyType<T, K>` — The filtering value used in the filter condition function.

### [BaseIgcCellContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/BaseIgcCellContext)
Context object for the row cell template callback.

- **column**: `ColumnConfiguration<T, K>` — The current configuration for the column.
- **parent**: `IgcGridLiteCell<T>` — The cell element parent of the template.
- **row**: `IgcGridLiteRow<T>` — The row element containing the cell.
- **value**: `PropertyType<T, K>` — The value from the data source for this cell.

### [BaseSortingExpression](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/BaseSortingExpression)
Represents a sort operation for a given column.

- **caseSensitive?**: `boolean` — Whether the sort operation should be case sensitive.
- **comparer?**: `SortComparer<T, K>` — Custom comparer function for this operation.
- **direction**: `SortingDirection` — Sort direction for this operation.
- **key**: `K` — The target column.

### [ChatAttachmentRenderContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ChatAttachmentRenderContext)
The context object for renderers that deal with a specific attachment within a message.
It extends the message context with the attachment data.

- **attachment**: `IgcChatMessageAttachment` — The specific attachment being rendered.

### [ChatInputRenderContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ChatInputRenderContext)
The context object for renderers that deal with the chat input area.
It extends the base context with input-specific properties.

- **attachments**: `IgcChatMessageAttachment[]` — The list of attachments currently in the input area.
- **value**: `string` — The current value of the input field.

### [ChatMessageRenderContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ChatMessageRenderContext)
The context object for renderers that deal with a specific chat message.
It extends the base context with the message data.

- **message**: `IgcChatMessage` — The specific chat message being rendered.

### [ChatRenderContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ChatRenderContext)
The base context object passed to custom renderer functions, containing the chat component instance.

- **instance**: `IgcChatComponent` — The instance of the IgcChatComponent.

### [ChatRenderers](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ChatRenderers)
A collection of optional rendering functions that allow for custom UI rendering.
Each property is a function that takes a context object and returns a template result.

- **attachment?**: `ChatTemplateRenderer<ChatAttachmentRenderContext>` — Custom renderer for a single chat message attachment.
- **attachmentContent?**: `ChatTemplateRenderer<ChatAttachmentRenderContext>` — Custom renderer for the content of an attachment.
- **attachmentHeader?**: `ChatTemplateRenderer<ChatAttachmentRenderContext>` — Custom renderer for the header of an attachment.
- **fileUploadButton?**: `ChatTemplateRenderer<ChatRenderContext>` — Custom renderer for the file upload button in the input area.
- **input?**: `ChatTemplateRenderer<ChatInputRenderContext>` — Custom renderer for the main chat input field.
- **inputActions?**: `ChatTemplateRenderer<ChatRenderContext>` — Custom renderer for the actions container within the input area.
- **inputActionsEnd?**: `ChatTemplateRenderer<ChatRenderContext>` — Custom renderer for the actions at the end of the input area.
- **inputActionsStart?**: `ChatTemplateRenderer<ChatRenderContext>` — Custom renderer for the actions at the start of the input area.
- **inputAttachments?**: `ChatTemplateRenderer<ChatInputRenderContext>` — Custom renderer for the attachment previews within the input field.
- **message?**: `ChatTemplateRenderer<ChatMessageRenderContext>` — Custom renderer for an entire chat message bubble.
- **messageActions?**: `ChatTemplateRenderer<ChatMessageRenderContext>` — Custom renderer for message-specific actions (e.g., reply or delete buttons).
- **messageAttachments?**: `ChatTemplateRenderer<ChatMessageRenderContext>` — Custom renderer for the attachments associated with a message.
- **messageContent?**: `ChatTemplateRenderer<ChatMessageRenderContext>` — Custom renderer for the main text and content of a message.
- **messageHeader?**: `ChatTemplateRenderer<ChatMessageRenderContext>` — Custom renderer for the header of a message, including sender and timestamp.
- **sendButton?**: `ChatTemplateRenderer<ChatRenderContext>` — Custom renderer for the message send button.
- **suggestionPrefix?**: `ChatTemplateRenderer<ChatRenderContext>` — Custom renderer for the prefix text shown before suggestions.

### [ComboTemplateProps](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ComboTemplateProps)

- **item**: `T`

### [CustomDateRange](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/CustomDateRange)

- **dateRange**: `DateRangeValue`
- **label**: `string`

### [CustomEvent](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/CustomEvent)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent)

- **detail**: `T` — Returns any custom data event was created with. Typically used for synthetic events.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)

### [DataPipelineConfiguration](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/DataPipelineConfiguration)
Configuration for customizing the various data operations of the grid.

- **filter?**: `DataPipelineHook<T>` — Hook for customizing filter operations.
- **sort?**: `DataPipelineHook<T>` — Hook for customizing sort operations.

### [DatePartDeltas](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/DatePartDeltas)

- **date?**: `number`
- **hours?**: `number`
- **minutes?**: `number`
- **month?**: `number`
- **seconds?**: `number`
- **year?**: `number`

### [DateRangeDescriptor](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/DateRangeDescriptor)

- **dateRange?**: `Date[]`
- **type**: `DateRangeType`

### [DateRangeValue](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/DateRangeValue)

- **end**: `Date`
- **start**: `Date`

### [FilteringOptions](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/FilteringOptions)

- **caseSensitive?**: `boolean`
- **filterKey**: `any`
- **matchDiacritics?**: `boolean`

### [FilterOperation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/FilterOperation)

- **label?**: `string`
- **logic**: `FilterOperationLogic<T>`
- **name**: `string`
- **unary**: `boolean`

### [GridLiteSortingOptions](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/GridLiteSortingOptions)
Configures the sort behavior for the grid.

- **mode**: `"multiple" | "single"` — The sorting mode - either 'single' or 'multiple' column sorting.

### [ICalendarResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ICalendarResourceStrings)

- **calendar_first_picker_of?**: `string`
- **calendar_multi_selection?**: `string`
- **calendar_next_month?**: `string`
- **calendar_next_year?**: `string`
- **calendar_next_years?**: `string`
- **calendar_previous_month?**: `string`
- **calendar_previous_year?**: `string`
- **calendar_previous_years?**: `string`
- **calendar_range_end?**: `string`
- **calendar_range_label_end?**: `string`
- **calendar_range_label_start?**: `string`
- **calendar_range_placeholder?**: `string`
- **calendar_range_selection?**: `string`
- **calendar_range_start?**: `string`
- **calendar_select_date?**: `string`
- **calendar_select_month?**: `string`
- **calendar_select_year?**: `string`
- **calendar_selected_month_is?**: `string`
- **calendar_single_selection?**: `string`
- **calendar_singular_multi_selection?**: `string`
- **calendar_singular_range_selection?**: `string`
- **calendar_singular_single_selection?**: `string`

### [ICarouselResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ICarouselResourceStrings)

- **carousel_next_slide?**: `string`
- **carousel_of?**: `string`
- **carousel_previous_slide?**: `string`
- **carousel_slide?**: `string`

### [IChipResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IChipResourceStrings)

- **chip_remove?**: `string`
- **chip_select?**: `string`

### [IComboResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IComboResourceStrings)

- **combo_addCustomValues_placeholder?**: `string`
- **combo_aria_label_no_options?**: `string`
- **combo_aria_label_options?**: `string`
- **combo_clearItems_placeholder?**: `string`
- **combo_empty_message?**: `string`
- **combo_filter_search_placeholder?**: `string`

### [IconMeta](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IconMeta)

- **collection**: `string`
- **external?**: `boolean`
- **name**: `string`

### [IDateRangePickerResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IDateRangePickerResourceStrings)

- **date_range_picker_cancel_button?**: `string`
- **date_range_picker_currentMonth?**: `string`
- **date_range_picker_date_separator?**: `string`
- **date_range_picker_done_button?**: `string`
- **date_range_picker_last30Days?**: `string`
- **date_range_picker_last7Days?**: `string`
- **date_range_picker_yearToDate?**: `string`

### [IFileInputResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IFileInputResourceStrings)

- **file_input_placeholder?**: `string`
- **file_input_upload_button?**: `string`

### [IgrActiveStepChangedEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrActiveStepChangedEventArgsDetail)

- **index**: `number`

### [IgrActiveStepChangingEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrActiveStepChangingEventArgsDetail)

- **newIndex**: `number`
- **oldIndex**: `number`

### [IgrCalendarResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrCalendarResourceStrings)

- **endDate**: `string`
- **nextMonth**: `string`
- **nextYear**: `string`
- **nextYears**: `string`
- **previousMonth**: `string`
- **previousYear**: `string`
- **previousYears**: `string`
- **selectDate**: `string`
- **selectedDate**: `string`
- **selectMonth**: `string`
- **selectRange**: `string`
- **selectYear**: `string`
- **startDate**: `string`
- **weekLabel**: `string`

### [IgrChatMessage](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrChatMessage)
Represents a single chat message in the conversation.

- **attachments?**: `IgcChatMessageAttachment[]` — Optional list of attachments associated with the message,
such as images, files, or links.
- **id**: `string` — A unique identifier for the message.
- **reactions?**: `string[]` — Optional list of reactions associated with the message.
- **sender**: `string` — The identifier or name of the sender of the message.
- **text**: `string` — The textual content of the message.
- **timestamp?**: `string` — The timestamp indicating when the message was sent.

### [IgrChatMessageAttachment](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrChatMessageAttachment)
Represents an attachment associated with a chat message.

- **file?**: `File` — The actual File object, if the attachment was provided locally (e.g. via upload).
- **id**: `string` — A unique identifier for the attachment.
- **name**: `string` — The display name of the attachment (e.g. file name).
- **thumbnail?**: `string` — Optional URL to a thumbnail preview of the attachment (e.g. for images or videos).
- **type?**: `string` — The MIME type or a custom type identifier for the attachment (e.g. "image/png", "pdf", "audio").
- **url?**: `string` — The URL from which the attachment can be downloaded or viewed.
Typically used for attachments stored on a server or CDN.

### [IgrChatMessageReaction](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrChatMessageReaction)
Represents a user's reaction to a specific chat message.

- **message**: `IgcChatMessage` — The chat message that the reaction is associated with.
- **reaction**: `string` — The string representation of the reaction, such as an emoji or a string;

### [IgrChatResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrChatResourceStrings)

- **attachmentLabel**: `string`
- **attachmentsListLabel**: `string`
- **messageCopied**: `string`
- **reactionCopy**: `string`
- **reactionDislike**: `string`
- **reactionLike**: `string`
- **reactionRegenerate**: `string`
- **suggestionsHeader**: `string`

### [IgrCheckboxChangeEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrCheckboxChangeEventArgsDetail)

- **checked**: `boolean`
- **value?**: `string`

### [IgrComboChangeEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrComboChangeEventArgsDetail)

- **items**: `T[]`
- **newValue**: `ComboValue<T>[]`
- **type**: `ComboChangeType`

### [IgrDateRangePickerResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrDateRangePickerResourceStrings)

- **cancel**: `string`
- **currentMonth**: `string`
- **done**: `string`
- **last30Days**: `string`
- **last7Days**: `string`
- **separator**: `string`
- **yearToDate**: `string`

### [IgrFilteredEvent](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrFilteredEvent)
Event object for the filtered event of the grid.

- **key**: `Keys<T>` — The target column for the filter operation.
- **state**: `FilterExpression<T>[]` — The filter state of the column after the operation.

### [IgrFilteringEvent](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrFilteringEvent)
Event object for the filtering event of the grid.

- **expressions**: `FilterExpression<T>[]` — The filter expression(s) to apply.
- **key**: `Keys<T>` — The target column for the filter operation.
- **type**: `"remove" | "add" | "modify"` — The type of modification which will be applied to the filter
state of the column.

### [IgrHeaderContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrHeaderContext)
Context object for the column header template callback.

- **column**: `ColumnConfiguration<T, any> | ColumnConfiguration<T, Exclude<any & string, any>> | ColumnConfiguration<T, Exclude<any, any>>` — The current configuration for the column.
- **parent**: `IgcGridLiteHeader<T>` — The header element parent of the template.

### [IgrRadioChangeEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrRadioChangeEventArgsDetail)

- **checked**: `boolean`
- **value?**: `string`

### [IgrRangeSliderValueEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrRangeSliderValueEventArgsDetail)

- **lower**: `number`
- **upper**: `number`

### [IgrTileChangeStateEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrTileChangeStateEventArgsDetail)

- **state**: `boolean`
- **tile**: `IgcTileComponent`

### [IgrTreeSelectionEventArgsDetail](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/IgrTreeSelectionEventArgsDetail)

- **newSelection**: `IgcTreeItemComponent[]`

### [ITreeResourceStrings](https://www.infragistics.com/api/react/igniteui-react/19.5.1/interfaces/ITreeResourceStrings)

- **collapse?**: `string`
- **expand?**: `string`

## Enumerations

### [DatePart](https://www.infragistics.com/api/react/igniteui-react/19.5.1/enums/DatePart)
Date Part Classes Module

This module provides structured classes for date/time parts used in date-time input.
Each part type has its own class with specific validation and spin behavior.

Classes are private to this module - only types and factory function are exported.

- **AmPm** = "amPm"
- **Date** = "date"
- **Hours** = "hours"
- **Minutes** = "minutes"
- **Month** = "month"
- **Seconds** = "seconds"
- **Year** = "year"

### [DateRangeType](https://www.infragistics.com/api/react/igniteui-react/19.5.1/enums/DateRangeType)

- **After** = 0
- **Before** = 1
- **Between** = 2
- **Specific** = 3
- **Weekdays** = 4
- **Weekends** = 5

## Type Aliases

### [AbsolutePosition](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/AbsolutePosition)
`"bottom" | "middle" | "top"`

### [AvatarShape](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/AvatarShape)
`"square" | "circle" | "rounded"`

### [BadgeShape](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/BadgeShape)
`"rounded" | "square"`

### [BaseSortComparer](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/BaseSortComparer)
`any`
Custom comparer function for a given column used when sorting is performed.

### [ButtonGroupSelection](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ButtonGroupSelection)
`"single" | "single-required" | "multiple"`

### [ButtonVariant](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ButtonVariant)
`"contained" | "flat" | "outlined" | "fab"`

### [CalendarActiveView](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/CalendarActiveView)
`"days" | "months" | "years"`

### [CalendarHeaderOrientation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/CalendarHeaderOrientation)
`"horizontal" | "vertical"`

### [CalendarSelection](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/CalendarSelection)
`"single" | "multiple" | "range"`

### [CarouselIndicatorsOrientation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/CarouselIndicatorsOrientation)
`"end" | "start"`

### [ChatSuggestionsPosition](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ChatSuggestionsPosition)
`"below-input" | "below-messages"`
A string literal type defining the two possible positions for chat suggestions.

### [ChatTemplateRenderer](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ChatTemplateRenderer)
`any`
A generic type for a function that serves as a custom renderer.
It takes a context object of type T and returns a template result.

### [ColumnConfiguration](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ColumnConfiguration)
`any`
See BaseColumnConfiguration for the full documentation.

### [ColumnSortConfiguration](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ColumnSortConfiguration)
`any`
See BaseColumnSortConfiguration for the full documentation.

### [ComboItemTemplate](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ComboItemTemplate)
`any`

### [ContentOrientation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ContentOrientation)
`"horizontal" | "vertical"`

### [DataPipelineHook](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/DataPipelineHook)
`any`
Callback function for customizing data operations in the grid.

### [DataPipelineParams](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/DataPipelineParams)
`any`
The parameters passed to a DataPipelineHook callback.

### [DataType](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/DataType)
`"number" | "string" | "boolean"`
The data for the current column.

### [DividerType](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/DividerType)
`"solid" | "dashed"`

### [ExpansionPanelIndicatorPosition](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ExpansionPanelIndicatorPosition)
`"start" | "end" | "none"`

### [FilterCriteria](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/FilterCriteria)
`"and" | "or"`
Controls how a data record should resolve in a filter operation:
 - 'and' - the record must pass all the conditions.
 - 'or'  - the record must pass at least one condition.

### [FilterExpression](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/FilterExpression)
`any`
See BaseFilterExpression for the full documentation.

### [FilterOperationLogic](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/FilterOperationLogic)
`any`

### [GroupingDirection](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/GroupingDirection)
`"asc" | "desc" | "none"`

### [HorizontalTransitionAnimation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/HorizontalTransitionAnimation)
`"slide" | "fade" | "none"`

### [IconButtonVariant](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IconButtonVariant)
`"contained" | "flat" | "outlined"`

### [IgrActiveStepChangedEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrActiveStepChangedEventArgs)
`CustomEvent<IgrActiveStepChangedEventArgsDetail>`

### [IgrActiveStepChangingEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrActiveStepChangingEventArgs)
`CustomEvent<IgrActiveStepChangingEventArgsDetail>`

### [IgrCellContext](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrCellContext)
`any`
See BaseIgcCellContext for the full documentation.

### [IgrChatOptions](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrChatOptions)
`any`
Configuration options for customizing the behavior and appearance of the chat component.

### [IgrCheckboxChangeEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrCheckboxChangeEventArgs)
`CustomEvent<IgrCheckboxChangeEventArgsDetail>`

### [IgrComboChangeEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrComboChangeEventArgs)
`CustomEvent<IgrComboChangeEventArgsDetail>`

### [IgrRadioChangeEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrRadioChangeEventArgs)
`CustomEvent<IgrRadioChangeEventArgsDetail>`

### [IgrRangeSliderValueEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrRangeSliderValueEventArgs)
`CustomEvent<IgrRangeSliderValueEventArgsDetail>`

### [IgrTileChangeStateEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrTileChangeStateEventArgs)
`CustomEvent<IgrTileChangeStateEventArgsDetail>`

### [IgrTreeSelectionEventArgs](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/IgrTreeSelectionEventArgs)
`CustomEvent<IgrTreeSelectionEventArgsDetail>`

### [InputType](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/InputType)
`"text" | "email" | "number" | "password" | "search" | "tel" | "url"`

### [Keys](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/Keys)
`FlatKeys<T> | NestedKeys<T>`
Helper type for resolving keys of type T.

### [LinearProgressLabelAlign](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/LinearProgressLabelAlign)
`"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"`

### [MaskInputValueMode](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/MaskInputValueMode)
`"raw" | "withFormatting"`

### [NavDrawerPosition](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/NavDrawerPosition)
`"start" | "end" | "top" | "bottom" | "relative"`

### [OperandKeys](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/OperandKeys)
`any`

### [PickerMode](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/PickerMode)
`"dropdown" | "dialog"`

### [PopoverPlacement](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/PopoverPlacement)
`"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"`
Describes the preferred placement of a toggle component.

### [PopoverScrollStrategy](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/PopoverScrollStrategy)
`"scroll" | "block" | "close"`

### [PropertyType](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/PropertyType)
`any`
Helper type for resolving types of type T.

### [RangeTextSelectMode](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/RangeTextSelectMode)
`"preserve" | "select" | "start" | "end"`

### [SelectionRangeDirection](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SelectionRangeDirection)
`"none" | "backward" | "forward"`

### [SliderTickLabelRotation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SliderTickLabelRotation)
`0 | 90 | -90`

### [SliderTickOrientation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SliderTickOrientation)
`"end" | "mirror" | "start"`

### [SortComparer](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SortComparer)
`any`
See BaseSortComparer for the full documentation.

### [SortingDirection](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SortingDirection)
`"ascending" | "descending" | "none"`
Sort direction for a given sort expression.

### [SortingExpression](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SortingExpression)
`any`
See BaseSortingExpression for the full documentation.

### [SortState](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/SortState)
`Map<Keys<T>, SortingExpression<T>>`
Represents the sort state of the grid.

### [StepperOrientation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/StepperOrientation)
`"horizontal" | "vertical"`

### [StepperStepType](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/StepperStepType)
`"full" | "indicator" | "title"`

### [StepperTitlePosition](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/StepperTitlePosition)
`"auto" | "bottom" | "top" | "end" | "start"`

### [StepperVerticalAnimation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/StepperVerticalAnimation)
`"grow" | "fade" | "none"`

### [StyleVariant](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/StyleVariant)
`"primary" | "info" | "success" | "warning" | "danger"`

### [TabsActivation](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/TabsActivation)
`"auto" | "manual"`

### [TabsAlignment](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/TabsAlignment)
`"start" | "end" | "center" | "justify"`

### [TextareaResize](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/TextareaResize)
`"vertical" | "auto" | "none"`

### [Theme](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/Theme)
`"material" | "bootstrap" | "indigo" | "fluent"`

### [ThemeVariant](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ThemeVariant)
`"light" | "dark"`

### [TileManagerDragMode](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/TileManagerDragMode)
`"none" | "tile-header" | "tile"`

### [TileManagerResizeMode](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/TileManagerResizeMode)
`"none" | "hover" | "always"`

### [ToggleLabelPosition](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/ToggleLabelPosition)
`"after" | "before"`

### [TreeSelection](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/TreeSelection)
`"none" | "multiple" | "cascade"`

### [WeekDays](https://www.infragistics.com/api/react/igniteui-react/19.5.1/types/WeekDays)
`"sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday"`

## Functions

### [configureTheme](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/configureTheme)
`configureTheme(t: Theme, v?: ThemeVariant): void`
Allows the global configuration of the active theme.

Usage:
  import { configureTheme } from 'igniteui-webcomponents';

 configureTheme('material', 'light');

### [registerI18n](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/registerI18n)
`registerI18n(resourceStrings: IResourceStrings, locale: string): void`
Register resources for a specific locale.

### [registerIcon](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/registerIcon)
`registerIcon(name: string, url: string, collection?: string): Promise<void>`
Registers an icon by fetching it from a URL.

### [registerIconFromText](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/registerIconFromText)
`registerIconFromText(name: string, iconText: string, collection?: string): void`
Registers an icon from SVG text content.

### [setCurrentI18n](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/setCurrentI18n)
`setCurrentI18n(locale: string): void`
Set the current locale of all Ignite UI components.

### [setIconRef](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/setIconRef)
`setIconRef(name: string, collection: string, icon: IconMeta): void`
Sets an icon reference/alias that points to another icon.

### [θaddAdoptedStylesController](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/θaddAdoptedStylesController)
`θaddAdoptedStylesController(host: ReactiveControllerHost & LitElement): AdoptedStylesController`
Creates and attaches an AdoptedStylesController to a Lit component.

### [θaddThemingController](https://www.infragistics.com/api/react/igniteui-react/19.5.1/functions/θaddThemingController)
`θaddThemingController(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig): ThemingController`
Adds theming controller to the host component.

## Variables

### [BooleanOperands](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/BooleanOperands)
`Readonly<FilterOperands<boolean, BooleanKeys>>`

### [CalendarResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/CalendarResourceStringsEN)
`ICalendarResourceStrings`
English resource strings for Ignite UI Calendar

### [CarouselResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/CarouselResourceStringsEN)
`ICarouselResourceStrings`
English resource strings for Ignite UI Carousel

### [ChipResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/ChipResourceStringsEN)
`IChipResourceStrings`
English resource strings for Ignite UI Chip

### [ComboResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/ComboResourceStringsEN)
`IComboResourceStrings`
English resource strings for Ignite UI Combo

### [DateRangePickerResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/DateRangePickerResourceStringsEN)
`IDateRangePickerResourceStrings`
English resource strings for Ignite UI Date Range Picker

### [FileInputResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/FileInputResourceStringsEN)
`IFileInputResourceStrings`
English resource strings for Ignite UI File Input

### [IgrCalendarResourceStringEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/IgrCalendarResourceStringEN)
`IgcCalendarResourceStrings`

### [IgrChatResourceStringEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/IgrChatResourceStringEN)
`IgcChatResourceStrings`

### [IgrDateRangePickerResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/IgrDateRangePickerResourceStringsEN)
`IgcDateRangePickerResourceStrings`

### [NumberOperands](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/NumberOperands)
`Readonly<FilterOperands<number, NumberKeys>>`

### [StringOperands](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/StringOperands)
`Readonly<FilterOperands<string, StringKeys>>`

### [TreeResourceStringsEN](https://www.infragistics.com/api/react/igniteui-react/19.5.1/variables/TreeResourceStringsEN)
`ITreeResourceStrings`
English resource strings for Ignite UI Tree
