# Ignite UI for Web Components vlatest — Full API Reference

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

Platform: Web Components
Package: igniteui-webcomponents
Version: latest

## Classes

### [IgcAccordionComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcAccordionComponent)
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.
- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **panels**: `IgcExpansionPanelComponent[]` — 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.

### [IgcAvatarComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcAvatarComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcBadgeComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBadgeComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcBannerComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBannerComponent)
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.
- static readonly **tagName**: `"igc-banner"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **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.

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

- **variant**: `ButtonVariant` — Sets the variant of the button.

### [IgcButtonGroupComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcButtonGroupComponent)
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.
- **selection**: `ButtonGroupSelection` — Controls the mode of selection for the button group.
- static readonly **tagName**: `"igc-button-group"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **selectedItems**: `string[]` — Gets/Sets the currently selected buttons (their values).

### [IgcCalendarComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCalendarComponent)
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<Intl.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.
- static readonly **tagName**: `"igc-calendar"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

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

### [IgcCardActionsComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCardActionsComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcCardComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCardComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcCardContentComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCardContentComponent)
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.

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcCardMediaComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCardMediaComponent)
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.

- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcCarouselComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCarouselComponent)
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.
- **indicatorsOrientation**: `CarouselIndicatorsOrientation` — Sets the orientation of the indicator controls (dots).
- **interval**: `number | undefined` — The duration in milliseconds between changing the active slide.
- **maximumIndicatorsCount**: `number` — Controls the maximum indicator controls (dots) that can be shown. Default value is 10.
- **vertical**: `boolean` — Whether the carousel has vertical alignment.
- static readonly **tagName**: `"igc-carousel"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **current**: `number` — The index of the current active slide.
- **indicatorsLabelFormat**: `string`
- **isPaused**: `boolean` — Whether the carousel in in paused state.
- **isPlaying**: `boolean` — Whether the carousel is in playing state.
- **locale**: `string`
- **resourceStrings**: `ICarouselResourceStrings`
- **slides**: `IgcCarouselSlideComponent[]` — The slides of the carousel.
- **slidesLabelFormat**: `string`
- **total**: `number` — 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?: "prev" | "next"): Promise<boolean> — Switches to the passed-in slide, runs any animations, and returns if the operation was successful.
- **select**(index: number, animationDirection?: "prev" | "next"): Promise<boolean> — Switches to slide by index, runs any animations, and returns if the operation was successful.

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

- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **connectedCallback**(): void

### [IgcCarouselSlideComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCarouselSlideComponent)
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.
- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **connectedCallback**(): void

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

- **resourceStrings**: `IgcChatResourceStrings` — The resource strings of the chat.
- static readonly **tagName**: `"igc-chat"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **draftMessage**: `any`
- **messages**: `IgcChatMessage[]`
- **options**: `IgcChatOptions`
- **scrollToMessage**(messageId: string): void — Scrolls the view to a specific message by id.

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

- **indeterminate**: `boolean` — Draws the checkbox in indeterminate state.

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

- **disabled**: `boolean` — Sets the disabled state for the chip.
- **removable**: `boolean` — Defines if the chip is removable or not.
- **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.
- static readonly **tagName**: `"igc-chip"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **locale**: `string`
- **resourceStrings**: `IChipResourceStrings`

### [IgcCircularGradientComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcCircularGradientComponent)
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

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcComboComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcComboComponent)
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.
- **disableClear**: `boolean` — Hides the clear button.
- **groupHeaderTemplate**: `ComboItemTemplate<T>` — The template used for the content of each combo group header.
- **itemTemplate**: `ComboItemTemplate<T>` — The template used for the content of each combo item.
- **label**: `string` — The label attribute of the control.
- **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.
- static readonly **tagName**: `"igc-combo"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **data**: `T[]`
- **disableFiltering**: `boolean`
- **displayKey**: `any | undefined`
- **filteringOptions**: `Partial<FilteringOptions<T>>`
- **groupKey**: `any | undefined`
- **groupSorting**: `GroupingDirection`
- **locale**: `string`
- **placeholderSearch**: `string`
- **resourceStrings**: `IComboResourceStrings`
- **selection**: `T[]` — Returns the current selection as an array of objects as provided in the data source.
- **singleSelect**: `boolean`
- **value**: `ComboValue<T>[]` — Returns the current selection as a list of comma separated values,
represented by the value key, when provided.
- **valueKey**: `any | undefined`
- **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.

### [IgcDatePickerComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcDatePickerComponent)
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.

- **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.
- **label**: `string` — The label of the datepicker.
- **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.
- **showWeekNumbers**: `boolean` — Whether to show the number of the week in the calendar.
- **specialDates**: `DateRangeDescriptor[]` — Gets/sets special dates.
- **visibleMonths**: `number` — The number of months displayed in the calendar.
- **weekStart**: `WeekDays` — Sets the start day of the week for the calendar.
- static readonly **tagName**: `"igc-date-picker"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **activeDate**: `string | Date | null | undefined`
- **disabledDates**: `DateRangeDescriptor[]`
- **displayFormat**: `string`
- **inputFormat**: `string`
- **locale**: `string`
- **max**: `string | Date | null | undefined`
- **min**: `string | Date | null | undefined`
- **resourceStrings**: `IgcCalendarResourceStrings`
- **value**: `string | Date | null | undefined`
- **clear**(): void — Clears the input part of the component of any user input
- **select**(): void — Selects the text in the input of the component
- **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

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

- **customRanges**: `CustomDateRange[]` — Renders chips with custom ranges based on the elements of the array.
- **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.
- **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.
- **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.
- **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.
- **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.
- **weekStart**: `WeekDays` — Sets the start day of the week for the calendar.
- static readonly **tagName**: `"igc-date-range-picker"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **activeDate**: `string | Date | null | undefined`
- **disabledDates**: `DateRangeDescriptor[]`
- **displayFormat**: `string`
- **inputFormat**: `string`
- **locale**: `string`
- **max**: `string | Date | null | undefined`
- **min**: `string | Date | null | undefined`
- **placeholder**: `string`
- **resourceStrings**: `IgcDateRangePickerResourceStrings`
- **value**: `string | DateRangeValue | null | undefined`
- **visibleMonths**: `number` — The number of months displayed in the calendar.
- **clear**(): void — Clears the input parts of the component of any user input
- **select**(value: DateRangeValue | null): void — Selects a date range value in the picker

### [IgcDateTimeInputComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcDateTimeInputComponent)
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.

- **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.
- static readonly **tagName**: `"igc-date-time-input"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **displayFormat**: `string`
- **inputFormat**: `string`
- **locale**: `string`
- **max**: `string | Date | null | undefined`
- **min**: `string | Date | null | undefined`
- **value**: `Date | null` — The value attribute of the control.
Type varies based on the input type and can be string, Date or null.
- **clear**(): void — Clears the input element of user input.
- **hasDateParts**(): boolean — Checks whether the current format includes date parts (day, month, year).
- **hasTimeParts**(): boolean — Checks whether the current format includes time parts (hours, minutes, seconds).
- **stepDown**(datePart?: DatePart, delta?: number): void — Decrements a date/time portion.
- **stepUp**(datePart?: DatePart, delta?: number): void — Increments a date/time portion.

### [IgcDialogComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcDialogComponent)
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.
- static readonly **tagName**: `"igc-dialog"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **hide**(): Promise<boolean> — Closes the dialog.
- **show**(): Promise<boolean> — Opens the dialog.
- **toggle**(): Promise<boolean> — Toggles the open state of the dialog.

### [IgcDividerComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcDividerComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **vertical**: `boolean`

### [IgcDropdownComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcDropdownComponent)
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.
- static readonly **tagName**: `"igc-dropdown"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **groups**: `IgcDropdownGroupComponent[]` — Returns the group items of the dropdown.
- **items**: `IgcDropdownItemComponent[]` — Returns the items of the dropdown.
- **selectedItem**: `IgcDropdownItemComponent | null` — 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 | null — Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.
- **navigateTo**(index: number): IgcDropdownItemComponent | null — Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null.
- **select**(value: string): IgcDropdownItemComponent | null — Selects the item with the specified value. If it exists, returns the found item, otherwise - null.
- **select**(index: number): IgcDropdownItemComponent | null — 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.

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

- **items**: `IgcDropdownItemComponent[]` — All child igc-dropdown-items.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcDropdownItemComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcDropdownItemComponent)
Represents an item in a dropdown list.

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcExpansionPanelComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcExpansionPanelComponent)
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.
- static readonly **tagName**: `"igc-expansion-panel"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **connectedCallback**(): void
- **hide**(): Promise<boolean> — Hides the panel content.
- **show**(): Promise<boolean> — Shows the panel content.
- **toggle**(): Promise<boolean> — Toggles the panel open/close state.

### [IgcFileInputComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcFileInputComponent)

- **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.
- **multiple**: `boolean` — The multiple attribute of the control.
Used to indicate that a file input allows the user to select more than one file.
- static readonly **tagName**: `"igc-file-input"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **files**: `FileList` — Returns the list of selected files.
- **locale**: `string`
- **resourceStrings**: `IFileInputResourceStrings`
- **value**: `string` — The value attribute of the control.
Type varies based on the input type and can be string, Date or null.

### [IgcHighlightComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcHighlightComponent)
The highlight component provides efficient searching and highlighting of text
projected into it via its default slot. It uses the native CSS Custom Highlight API
to apply highlight styles to matched text nodes without modifying the DOM.

The component supports case-sensitive matching, programmatic navigation between
matches, and automatic scroll-into-view of the active match.

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **caseSensitive**: `boolean`
- **current**: `number` — The zero-based index of the currently active (focused) match. Returns 0 when there are no matches.
- **searchText**: `string`
- **size**: `number` — The total number of matches found for the current searchText. Returns 0 when there are no matches or searchText is empty.
- **next**(options?: HighlightNavigation): void — Moves the active highlight to the next match.
Wraps around to the first match after the last one.
- **previous**(options?: HighlightNavigation): void — Moves the active highlight to the previous match.
Wraps around to the last match when going back from the first one.
- **search**(): void — Re-runs the highlight search based on the current searchText and caseSensitive values.

Call this method after the slotted content changes dynamically (e.g. after lazy loading
or programmatic DOM mutations) to ensure all matches are up to date.
- **setActive**(index: number, options?: HighlightNavigation): void — Moves the active highlight to the match at the specified zero-based index.

### [IgcIconButtonComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcIconButtonComponent)

- **collection**: `string` — The name of the icon collection.
- **mirrored**: `boolean` — Whether to flip the icon button. Useful for RTL layouts.
- **name**: `string` — The name of the icon.
- **variant**: `IconButtonVariant` — The visual variant of the icon button.

### [IgcIconComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcIconComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **connectedCallback**(): void
- **disconnectedCallback**(): void

### [IgcInputComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcInputComponent)

- **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)
- **readOnly**: `boolean` — Makes the control a readonly field.
- **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.
- **max**: `number | undefined`
- **maxLength**: `number | undefined`
- **min**: `number | undefined`
- **minLength**: `number | undefined`
- **pattern**: `string | undefined`
- **step**: `number | undefined`
- **value**: `string` — The value attribute of the control.
Type varies based on the input type and can be string, Date or null.
- **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.

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

- **labelAlign**: `LinearProgressLabelAlign` — The position for the default label of the control.
- **striped**: `boolean` — Sets the striped look of the control.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcListHeaderComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcListHeaderComponent)
Header list item.

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcListItemComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcListItemComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

- **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.
- **mask**: `string` — The masked pattern of the component.
- **prompt**: `string` — The prompt symbol to use for unfilled parts of the mask pattern.
- **value**: `string` — The value attribute of the control.
Type varies based on the input type and can be string, Date or null.
- **isValidMaskPattern**(): boolean — Returns whether the current masked input is valid according to the mask pattern.

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcNavDrawerComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcNavDrawerComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **hide**(): Promise<boolean> — Closes the drawer.
- **show**(): Promise<boolean> — Opens the drawer.
- **toggle**(): Promise<boolean> — Toggles the open state of the drawer.

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcNavDrawerItemComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcNavDrawerItemComponent)
Represents a navigation drawer item.

- **active**: `boolean` — Determines whether the drawer is active.
- **disabled**: `boolean` — Determines whether the drawer is disabled.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcRadioComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRadioComponent)

- **labelPosition**: `ToggleLabelPosition` — The label position of the radio control.
- static readonly **tagName**: `"igc-radio"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **checked**: `boolean`
- **required**: `boolean` — When set, makes the component a required field for validation.
- **value**: `string`
- **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.

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

- **alignment**: `ContentOrientation` — Alignment of the radio controls inside this group.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **name**: `string`
- **value**: `string`

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

- **thumbLabelLower**: `string` — The aria label for the lower thumb.
- **thumbLabelUpper**: `string` — The aria label for the upper thumb.
- static readonly **tagName**: `"igc-range-slider"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **lower**: `number`
- **upper**: `number`

### [IgcRatingComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent)
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.
- **readOnly**: `boolean` — Makes the control a readonly field.
- **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.
- static readonly **tagName**: `"igc-rating"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **max**: `number`
- **single**: `boolean`
- **step**: `number`
- **value**: `number`
- **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.

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **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().

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

- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcSelectComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcSelectComponent)
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.
- static readonly **tagName**: `"igc-select"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **groups**: `IgcSelectGroupComponent[]` — Returns the groups of the igc-select component.
- **items**: `IgcSelectItemComponent[]` — Returns the items of the igc-select component.
- **selectedItem**: `IgcSelectItemComponent | null` — Returns the selected item from the dropdown or null.
- **value**: `string | undefined`
- **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 | null — Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.
- **navigateTo**(index: number): IgcSelectItemComponent | null — 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 | null — Selects the item with the specified value. If it exists, returns the found item, otherwise - null.
- **select**(index: number): IgcSelectItemComponent | null — Selects the item at the specified index. If it exists, returns the found item, otherwise - null.

### [IgcSelectGroupComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcSelectGroupComponent)

- **disabled**: `boolean` — Whether the group item and all its children are disabled.
- **items**: `IgcSelectItemComponent[]` — All child igc-select-items.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcSelectItemComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcSelectItemComponent)
Represents an item in a select list.

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **active**: `boolean` — Whether the item is active.

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

- static readonly **tagName**: `"igc-slider"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **value**: `number`
- **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.

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

- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcSnackbarComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcSnackbarComponent)
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.
- static readonly **tagName**: `"igc-snackbar"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

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

### [IgcSplitterComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcSplitterComponent)
The igc-splitter component provides a resizable split-pane layout that divides the view
into two panels — *start* and *end* — separated by a draggable bar.

Panels can be resized by dragging the bar, using keyboard shortcuts, or collapsed/expanded
using the built-in collapse buttons or the programmatic toggle() API.
Nested splitters are supported for more complex layouts.

- **disableCollapse**: `boolean` — When true, prevents the user from collapsing either pane.
This also hides the expand/collapse buttons on the splitter bar.
- **disableResize**: `boolean` — When true, prevents the user from resizing the panes by dragging the splitter bar or using keyboard shortcuts.
This also hides the drag handle on the splitter bar.
- **hideCollapseButtons**: `boolean` — When true, hides the expand/collapse buttons on the splitter bar.

Note that the buttons will also be hidden if disable-collapse is true or
if a pane is currently collapsed.
- **hideDragHandle**: `boolean` — When true, hides the drag handle on the splitter bar.

Note that the drag handle will also be hidden if disable-resize is true.
- **orientation**: `SplitterOrientation` — The orientation of the splitter, which determines the direction of resizing and collapsing.
- static readonly **tagName**: `"igc-splitter"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **endMaxSize**: `string | undefined`
- **endMinSize**: `string | undefined`
- **endSize**: `string | undefined`
- **startMaxSize**: `string | undefined`
- **startMinSize**: `string | undefined`
- **startSize**: `string | undefined`
- **toggle**(position: PanePosition): void — Toggles the collapsed state of the specified pane.

### [IgcStepComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcStepComponent)
A step component used within an igc-stepper to represent an individual step in a wizard-like workflow.

- **active**: `boolean` — Whether the step is active.

Active steps are styled with an active state and their content is visible.
- **complete**: `boolean` — Whether the step is completed.
- **disabled**: `boolean` — Whether the step is disabled.

Disabled steps are styled with a disabled state and are not interactive.
- **invalid**: `boolean` — Whether the step is invalid.

Invalid steps are styled with an error state and are not
interactive when the stepper is in linear mode.
- **optional**: `boolean` — Whether the step is optional.

Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.
if optional step is invalid the user could still move to the next step.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcStepperComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcStepperComponent)
A stepper component that provides a wizard-like workflow by dividing content into logical steps.

- **animationDuration**: `number` — The animation duration in either vertical or horizontal mode in milliseconds.
- **contentTop**: `boolean` — Whether the content is displayed above the steps.
- **horizontalAnimation**: `HorizontalTransitionAnimation` — The animation type when in horizontal mode.
- **linear**: `boolean` — Whether the stepper is linear.
- **orientation**: `StepperOrientation` — The orientation of the stepper.
- **stepType**: `StepperStepType` — The visual type of the steps.
- **titlePosition**: `StepperTitlePosition` — The position of the steps title.
- **verticalAnimation**: `StepperVerticalAnimation` — The animation type when in vertical mode.
- static readonly **tagName**: `"igc-stepper"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **steps**: `any` — Returns all of the stepper's steps.
- **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.

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


### [IgcTabComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcTabComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **connectedCallback**(): void

### [IgcTabsComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcTabsComponent)
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
- static readonly **tagName**: `"igc-tabs"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **selected**: `string` — Returns the currently selected tab label or IDREF if no label property is set.
- **tabs**: `IgcTabComponent[]` — Returns the direct igc-tab elements that are children of this element.
- **connectedCallback**(): void
- **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.

### [IgcTextareaComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcTextareaComponent)
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.
- **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.
- static readonly **tagName**: `"igc-textarea"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **value**: `string`
- **scrollTo**(options?: ScrollToOptions): void — The **scrollTo()** method of the Element interface scrolls to a particular set of coordinates inside a given element.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo)
- **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

### [IgcThemeProviderComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcThemeProviderComponent)
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.
- static **styles**: `CSSResult` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

- **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.
- static readonly **tagName**: `"igc-tile"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **colSpan**: `number`
- **colStart**: `number | null`
- **fullscreen**: `boolean` — Indicates whether the tile occupies the whole screen.
- **maximized**: `boolean`
- **position**: `number`
- **rowSpan**: `number`
- **rowStart**: `number | null`
- **connectedCallback**(): void

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **columnCount**: `number`
- **dragMode**: `TileManagerDragMode`
- **gap**: `string | undefined`
- **minColumnWidth**: `string | undefined`
- **minRowHeight**: `string | undefined`
- **resizeMode**: `TileManagerResizeMode`
- **tiles**: `IgcTileComponent[]` — 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.

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

- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

### [IgcToggleButtonComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcToggleButtonComponent)
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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **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.

### [IgcTooltipComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcTooltipComponent)
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.
- **message**: `string` — Specifies a plain text as tooltip content.
- **offset**: `number` — The offset of the tooltip from the anchor in pixels.
- **placement**: `PopoverPlacement` — Where to place the floating element relative to the parent anchor element.
- **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.
- static readonly **tagName**: `"igc-tooltip"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **hideDelay**: `number`
- **hideTriggers**: `string`
- **open**: `boolean`
- **showDelay**: `number`
- **showTriggers**: `string`
- **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

### [IgcTreeComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcTreeComponent)
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.

- **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.
- static readonly **tagName**: `"igc-tree"` — The **tagName** read-only property of the Element interface returns the tag name of the element on which it's called.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)
- **items**: `IgcTreeItemComponent[]` — Returns all of the tree's items.
- **locale**: `string`
- **resourceStrings**: `ITreeResourceStrings`
- **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.
- **select**(items?: IgcTreeItemComponent[]): void — Select all items if the items collection is empty. Otherwise, select the items in the items collection.

### [IgcTreeItemComponent](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcTreeItemComponent)
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 | null` — 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.
- static **styles**: `CSSResult[]` — Array of styles to apply to the element. The styles should be defined
using the css tag function, via constructible stylesheets, or
imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.

To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
- **path**: `IgcTreeItemComponent[]` — The full path to the tree item, starting from the top-most ancestor.
- **collapse**(): 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.
- **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

### [ChatAttachmentRenderContext](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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/webcomponents/igniteui-webcomponents/latest/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/webcomponents/igniteui-webcomponents/latest/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/webcomponents/igniteui-webcomponents/latest/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/webcomponents/igniteui-webcomponents/latest/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.

### [IgcChatComponentEventMap](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/interfaces/IgcChatComponentEventMap)
Defines the custom events dispatched by the <igc-chat> component.

- **igcAttachmentAdded**: `CustomEvent<IgcChatMessageAttachment[]>` — Dispatched when attachment(s) are added either through drag & drop or through
the default file input.
- **igcAttachmentClick**: `CustomEvent<IgcChatMessageAttachment>` — Dispatched when a chat message attachment is clicked.
- **igcAttachmentDrag**: `CustomEvent<void>` — Dispatched during an attachment drag operation.
- **igcAttachmentDrop**: `CustomEvent<void>` — Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).
- **igcAttachmentRemoved**: `CustomEvent<IgcChatMessageAttachment>` — Dispatched when an attachment is removed by the user.
- **igcInputBlur**: `CustomEvent<void>` — Dispatched when the chat input field loses focus.
- **igcInputChange**: `CustomEvent<string>` — Dispatched when the content of the chat input changes.
- **igcInputFocus**: `CustomEvent<void>` — Dispatched when the chat input field gains focus.
- **igcMessageCreated**: `CustomEvent<IgcChatMessage>` — Dispatched when a new chat message is created (sent).
- **igcMessageReact**: `CustomEvent<IgcChatMessageReaction>` — Dispatched when a message is reacted to.
- **igcTypingChange**: `CustomEvent<boolean>` — Dispatched when the typing status changes (e.g., user starts or stops typing).

### [IgcChatMessage](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/interfaces/IgcChatMessage)
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.

### [IgcChatMessageAttachment](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/interfaces/IgcChatMessageAttachment)
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.

### [IgcChatMessageReaction](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/interfaces/IgcChatMessageReaction)
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;

## Enumerations

### [DatePart](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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"

## Type Aliases

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

### [ChatTemplateRenderer](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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.

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

### [PopoverPlacement](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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.

## Functions

### [configureTheme](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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');

### [registerIcon](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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/webcomponents/igniteui-webcomponents/latest/functions/registerIconFromText)
`registerIconFromText(name: string, iconText: string, collection: string): void`
Registers an icon from SVG text content.

### [setIconRef](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/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/webcomponents/igniteui-webcomponents/latest/functions/θaddAdoptedStylesController)
`θaddAdoptedStylesController(host: ReactiveControllerHost & LitElement): AdoptedStylesController`
Creates and attaches an AdoptedStylesController to a Lit component.

### [θaddThemingController](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/functions/θaddThemingController)
`θaddThemingController(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig): ThemingController`
Creates and attaches a ThemingController to the given host element.

This is the preferred way to add theming support to a component. The controller
is registered with the host's reactive controller lifecycle and automatically
resolves the active theme from an ancestor <igc-theme-provider> context or
falls back to the application-wide theme set via configureTheme().
