igniteui-webcomponents/web-types.json

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

{
    "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
    "name": "igniteui-webcomponents",
    "version": "0.0.0",
    "description-markup": "markdown",    "contributions": {
      "html": {
        "elements": [{"name":"igc-button","description":"Represents a clickable button, used to submit forms or anywhere in a\ndocument for accessible, standard button functionality.\n\nThe button supports multiple visual variants, can render as an anchor\n(`<a>`) element when the `href` attribute is set, and is fully\nform-associated, acting as a native `submit` or `reset` control.\n---\n\n\n### **Events:**\n \n\n### **Slots:**\n - _default_ - Renders the label of the button.\n- **prefix** - Renders content before the label of the button.\n- **suffix** - Renders content after the label of the button.\n\n### **CSS Parts:**\n - **base** - The native button element of the igc-button component.\n- **prefix** - The prefix container of the igc-button component.\n- **suffix** - The suffix container of the igc-button component.","doc-url":"","attributes":[{"name":"variant","description":"The variant of the button which determines its visual appearance.\n- `contained` – filled background; highest visual emphasis (default).\n- `outlined` – transparent background with a visible border.\n- `flat` – no background or border; lowest visual emphasis.\n- `fab` – floating action button shape; typically used for primary actions.","value":{"type":"ButtonVariant","default":"'contained'"}},{"name":"type","description":"The type of the button, which determines its behavior and semantics.\n- `'button'` – no default action; useful for custom JavaScript handlers.\n- `'submit'` – submits the associated form when clicked.\n- `'reset'` – resets the associated form fields to their initial values.\n\nIgnored when the button is rendered as a link (i.e. `href` is set).","value":{"type":"'button' | 'reset' | 'submit'","default":"'button'"}},{"name":"href","description":"The URL the button points to. When set, the component renders as an\n`<a>` element instead of a `<button>`, enabling navigation on click.\nUse together with `target`, `download`, and `rel` for full anchor semantics.","value":{"type":"string | undefined"}},{"name":"download","description":"Prompts the browser to download the linked resource rather than navigating\nto it. The optional value is used as the suggested file name.\nOnly effective when `href` is set.","value":{"type":"string | undefined"}},{"name":"target","description":"Where to open the linked document. Only effective when `href` is set.\n- `'_self'` – current browsing context (default browser behavior).\n- `'_blank'` – new tab or window.\n- `'_parent'` – parent browsing context; falls back to `_self` if none.\n- `'_top'` – top-level browsing context; falls back to `_self` if none.","value":{"type":"'_blank' | '_parent' | '_self' | '_top' | undefined"}},{"name":"rel","description":"The relationship between the current document and the linked URL.\nAccepts a space-separated list of link types (e.g. `'noopener noreferrer'`).\nOnly effective when `href` is set. When `target=\"_blank\"` is used,\nsetting `rel=\"noopener noreferrer\"` is strongly recommended for security.","value":{"type":"string | undefined"}},{"name":"disabled","description":"When set, the button will be disabled and non-interactive.","value":{"type":"boolean","default":"false"}},{"name":"command","description":"The command to invoke on the target element specified by `commandfor`.\nPart of the [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) API.\nCustom commands must start with two dashes (e.g. `'--my-command'`).","value":{"type":"string | undefined"}},{"name":"commandfor","description":"The ID of the target element for the invoker command.\nPart of the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API).","value":{"type":"string | null"}}],"slots":[{"name":"","description":"Renders the label of the button."},{"name":"prefix","description":"Renders content before the label of the button."},{"name":"suffix","description":"Renders content after the label of the button."}],"events":[],"js":{"properties":[{"name":"variant","description":"The variant of the button which determines its visual appearance.\n- `contained` – filled background; highest visual emphasis (default).\n- `outlined` – transparent background with a visible border.\n- `flat` – no background or border; lowest visual emphasis.\n- `fab` – floating action button shape; typically used for primary actions.","type":"ButtonVariant"},{"name":"type","description":"The type of the button, which determines its behavior and semantics.\n- `'button'` – no default action; useful for custom JavaScript handlers.\n- `'submit'` – submits the associated form when clicked.\n- `'reset'` – resets the associated form fields to their initial values.\n\nIgnored when the button is rendered as a link (i.e. `href` is set).","type":"'button' | 'reset' | 'submit'"},{"name":"href","description":"The URL the button points to. When set, the component renders as an\n`<a>` element instead of a `<button>`, enabling navigation on click.\nUse together with `target`, `download`, and `rel` for full anchor semantics.","type":"string | undefined"},{"name":"download","description":"Prompts the browser to download the linked resource rather than navigating\nto it. The optional value is used as the suggested file name.\nOnly effective when `href` is set.","type":"string | undefined"},{"name":"target","description":"Where to open the linked document. Only effective when `href` is set.\n- `'_self'` – current browsing context (default browser behavior).\n- `'_blank'` – new tab or window.\n- `'_parent'` – parent browsing context; falls back to `_self` if none.\n- `'_top'` – top-level browsing context; falls back to `_self` if none.","type":"'_blank' | '_parent' | '_self' | '_top' | undefined"},{"name":"rel","description":"The relationship between the current document and the linked URL.\nAccepts a space-separated list of link types (e.g. `'noopener noreferrer'`).\nOnly effective when `href` is set. When `target=\"_blank\"` is used,\nsetting `rel=\"noopener noreferrer\"` is strongly recommended for security.","type":"string | undefined"},{"name":"disabled","description":"When set, the button will be disabled and non-interactive.","type":"boolean"},{"name":"command","description":"The command to invoke on the target element specified by `commandfor`.\nPart of the [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) API.\nCustom commands must start with two dashes (e.g. `'--my-command'`).","type":"string | undefined"},{"name":"commandfor","description":"The ID of the target element for the invoker command.\nPart of the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API).","type":"string | null"},{"name":"commandForElement","description":"The target element for the invoker command. Resolved from the `commandfor` ID.","type":"Element | null"},{"name":"form","description":"The `<form>` element the button is associated with.\nResolved through the standard form-association mechanism — either the\nclosest ancestor `<form>` or the form referenced by the button's `form`\nattribute. Returns `null` when no form is associated.\nRelevant only when `type` is `'submit'` or `'reset'`.","type":"HTMLFormElement | null"}],"events":[]}},{"name":"igc-icon","description":"The icon component allows visualizing collections of pre-registered SVG icons.\n---\n","doc-url":"","attributes":[{"name":"name","description":"The name of the icon glyph to draw.","value":{"type":"string","default":"''"}},{"name":"collection","description":"The name of the registered collection for look up of icons.","value":{"type":"string","default":"'default'"}},{"name":"mirrored","description":"Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.","value":{"type":"boolean","default":"false"}}],"events":[],"js":{"properties":[{"name":"name","description":"The name of the icon glyph to draw.","type":"string"},{"name":"collection","description":"The name of the registered collection for look up of icons.","type":"string"},{"name":"mirrored","description":"Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.","type":"boolean"}],"events":[]}},{"name":"igc-validator","description":"\n---\n\n\n### **CSS Parts:**\n - **helper-text** - The base wrapper\n- **validation-message** - The validation error message container\n- **validation-icon** - The validation error icon","doc-url":"","attributes":[{"name":"invalid","description":"Whether the container is in an invalid state.\n\nThis is reflected from the target's `invalid` property,\nand is used to determine whether to render the validation message slots.","value":{"type":"boolean","default":"false"}}],"events":[],"js":{"properties":[{"name":"invalid","description":"Whether the container is in an invalid state.\n\nThis is reflected from the target's `invalid` property,\nand is used to determine whether to render the validation message slots.","type":"boolean"},{"name":"target","description":"The form control whose validity state is being rendered. The target's `invalid`\nproperty is reflected to the container, and its validity state is used to\ndetermine which validation message slots to render.","type":"IgcFormControl"}],"events":[]}},{"name":"igc-file-input","description":"\n---\n\n\n### **Events:**\n - **igcChange** - Emitted when the control's checked state changes.\n- **igcCancel** - Emitted when the control's file picker dialog is canceled.\n\n### **Slots:**\n - **prefix** - Renders content before the input.\n- **suffix** - Renders content after input.\n- **helper-text** - Renders content below the input.\n- **file-selector-text** - Renders content for the browse button when input type is file.\n- **file-missing-text** - Renders content when input type is file and no file is chosen.\n- **value-missing** - Renders content when the required validation fails.\n- **custom-error** - Renders content when setCustomValidity(message) is set.\n- **invalid** - Renders content when the component is in invalid state (validity.valid = false).\n\n### **CSS Parts:**\n - **container** - The main wrapper that holds all main input elements.\n- **input** - The native input element.\n- **label** - The native label element.\n- **file-names** - The file names wrapper when input type is 'file'.\n- **file-selector-button** - The browse button when input type is 'file'.\n- **prefix** - The prefix wrapper.\n- **suffix** - The suffix wrapper.\n- **helper-text** - The helper text wrapper.","doc-url":"","attributes":[{"name":"value","description":"The value of the control.\nSimilar to native file input, this property is read-only and cannot be set programmatically.","value":{"type":"string"}},{"name":"locale","description":"Gets/Sets the locale used for getting language, affecting resource strings.","value":{"type":"string"}},{"name":"multiple","description":"The multiple attribute of the control.\nUsed to indicate that a file input allows the user to select more than one file.","value":{"type":"boolean","default":"false"}},{"name":"accept","description":"The accept attribute of the control.\nDefines the file types as a list of comma-separated values that the file input should accept.","value":{"type":"string","default":"''"}},{"name":"autofocus","description":"The autofocus attribute of the control.","value":{"type":"boolean"}},{"name":"required","description":"When set, makes the component a required field for validation.","value":{"type":"boolean","default":"false"}},{"name":"name","description":"The name attribute of the control.","value":{"type":"string"}},{"name":"disabled","description":"The disabled state of the component.","value":{"type":"boolean","default":"false"}},{"name":"invalid","description":"Sets the control into invalid state (visual state only).","value":{"type":"boolean","default":"false"}},{"name":"outlined","description":"Whether the control will have outlined appearance.","value":{"type":"boolean","default":"false"}},{"name":"placeholder","description":"The placeholder attribute of the control.","value":{"type":"string"}},{"name":"label","description":"The label for the control.","value":{"type":"string"}}],"slots":[{"name":"prefix","description":"Renders content before the input."},{"name":"suffix","description":"Renders content after input."},{"name":"helper-text","description":"Renders content below the input."},{"name":"file-selector-text","description":"Renders content for the browse button when input type is file."},{"name":"file-missing-text","description":"Renders content when input type is file and no file is chosen."},{"name":"value-missing","description":"Renders content when the required validation fails."},{"name":"custom-error","description":"Renders content when setCustomValidity(message) is set."},{"name":"invalid","description":"Renders content when the component is in invalid state (validity.valid = false)."}],"events":[{"name":"igcChange","description":"Emitted when the control's checked state changes."},{"name":"igcCancel","description":"Emitted when the control's file picker dialog is canceled."}],"js":{"properties":[{"name":"value","description":"The value of the control.\nSimilar to native file input, this property is read-only and cannot be set programmatically.","type":"string"},{"name":"resourceStrings","description":"The resource strings for localization.","type":"IFileInputResourceStrings"},{"name":"locale","description":"Gets/Sets the locale used for getting language, affecting resource strings.","type":"string"},{"name":"multiple","description":"The multiple attribute of the control.\nUsed to indicate that a file input allows the user to select more than one file.","type":"boolean"},{"name":"accept","description":"The accept attribute of the control.\nDefines the file types as a list of comma-separated values that the file input should accept.","type":"string"},{"name":"autofocus","description":"The autofocus attribute of the control.","type":"boolean"},{"name":"files","description":"Returns the list of selected files.","type":"FileList"},{"name":"required","description":"When set, makes the component a required field for validation.","type":"boolean"},{"name":"defaultValue","type":"unknown"},{"name":"name","description":"The name attribute of the control.","type":"string"},{"name":"disabled","description":"The disabled state of the component.","type":"boolean"},{"name":"invalid","description":"Sets the control into invalid state (visual state only).","type":"boolean"},{"name":"form","description":"Returns the HTMLFormElement associated with this element.","type":"HTMLFormElement | null"},{"name":"validity","description":"Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation.","type":"ValidityState"},{"name":"validationMessage","description":"A string containing the validation message of this element.","type":"string"},{"name":"willValidate","description":"A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation.","type":"boolean"},{"name":"outlined","description":"Whether the control will have outlined appearance.","type":"boolean"},{"name":"placeholder","description":"The placeholder attribute of the control.","type":"string"},{"name":"label","description":"The label for the control.","type":"string"}],"events":[{"name":"igcChange","description":"Emitted when the control's checked state changes."},{"name":"igcCancel","description":"Emitted when the control's file picker dialog is canceled."}]}},{"name":"igc-avatar","description":"An avatar component is used as a representation of a user identity\ntypically in a user profile.\n---\n\n\n### **Slots:**\n - _default_ - Renders an icon inside the default slot.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the avatar.\n- **initials** - The initials wrapper of the avatar.\n- **image** - The image wrapper of the avatar.\n- **icon** - The icon wrapper of the avatar.","doc-url":"","attributes":[{"name":"src","description":"The image source to use.","value":{"type":"string | undefined"}},{"name":"alt","description":"Alternative text for the image.","value":{"type":"string | undefined"}},{"name":"initials","description":"Initials to use as a fallback when no image is available.","value":{"type":"string | undefined"}},{"name":"shape","description":"The shape of the avatar.","value":{"type":"AvatarShape","default":"'square'"}}],"slots":[{"name":"","description":"Renders an icon inside the default slot."}],"events":[],"js":{"properties":[{"name":"src","description":"The image source to use.","type":"string | undefined"},{"name":"alt","description":"Alternative text for the image.","type":"string | undefined"},{"name":"initials","description":"Initials to use as a fallback when no image is available.","type":"string | undefined"},{"name":"shape","description":"The shape of the avatar.","type":"AvatarShape"}],"events":[]}},{"name":"igc-expansion-panel","description":"The Expansion Panel Component provides a way to display information in a toggleable way -\ncompact summary view containing title and description and expanded detail view containing\nadditional content to the summary header.\n---\n\n\n### **Events:**\n - **igcOpening** - Emitted before opening the expansion panel.\n- **igcOpened** - Emitted after the expansion panel is opened.\n- **igcClosing** - Emitted before closing the expansion panel.\n- **igcClosed** - Emitted after the expansion panel is closed.\n\n### **Slots:**\n - _default_ - renders the default content of the panel\n- **title** - renders the title of the panel's header\n- **subtitle** - renders the subtitle of the panel's header\n- **indicator** - renders the expand/collapsed indicator\n- **indicator-expanded** - renders the expanded state of the indicator\n\n### **CSS Parts:**\n - **header** - The container of the expansion indicator, title and subtitle.\n- **title** -  The title container.\n- **subtitle** - The subtitle container.\n- **indicator** - The indicator container.\n- **content** - The expansion panel's content wrapper.","doc-url":"","attributes":[{"name":"open","description":"Indicates whether the contents of the control should be visible.","value":{"type":"boolean","default":"false"}},{"name":"disabled","description":"Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.","value":{"type":"boolean","default":"false"}},{"name":"indicator-position","description":"The indicator position of the expansion panel.","value":{"type":"ExpansionPanelIndicatorPosition","default":"'start'"}}],"slots":[{"name":"","description":"renders the default content of the panel"},{"name":"title","description":"renders the title of the panel's header"},{"name":"subtitle","description":"renders the subtitle of the panel's header"},{"name":"indicator","description":"renders the expand/collapsed indicator"},{"name":"indicator-expanded","description":"renders the expanded state of the indicator"}],"events":[{"name":"igcOpening","description":"Emitted before opening the expansion panel."},{"name":"igcOpened","description":"Emitted after the expansion panel is opened."},{"name":"igcClosing","description":"Emitted before closing the expansion panel."},{"name":"igcClosed","description":"Emitted after the expansion panel is closed."}],"js":{"properties":[{"name":"open","description":"Indicates whether the contents of the control should be visible.","type":"boolean"},{"name":"disabled","description":"Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.","type":"boolean"},{"name":"indicatorPosition","description":"The indicator position of the expansion panel.","type":"ExpansionPanelIndicatorPosition"}],"events":[{"name":"igcOpening","description":"Emitted before opening the expansion panel."},{"name":"igcOpened","description":"Emitted after the expansion panel is opened."},{"name":"igcClosing","description":"Emitted before closing the expansion panel."},{"name":"igcClosed","description":"Emitted after the expansion panel is closed."}]}},{"name":"igc-accordion","description":"The Accordion is a container-based component that can house multiple expansion panels\nand offers keyboard navigation.\n---\n\n\n### **Slots:**\n - _default_ - Renders the expansion panels inside default slot.","doc-url":"","attributes":[{"name":"single-expand","description":"Allows only one panel to be expanded at a time.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"Renders the expansion panels inside default slot."}],"events":[],"js":{"properties":[{"name":"singleExpand","description":"Allows only one panel to be expanded at a time.","type":"boolean"},{"name":"panels","description":"Returns all of the accordions's direct igc-expansion-panel children.","type":"IgcExpansionPanelComponent[]"}],"events":[]}},{"name":"igc-badge","description":"The badge is a component indicating a status on a related item or an area\nwhere some active indication is required.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for the badge content.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the badge.\n- **icon** - The icon container, present when an igc-icon element is slotted.","doc-url":"","attributes":[{"name":"variant","description":"The type (style variant) of the badge.","value":{"type":"StyleVariant","default":"'primary'"}},{"name":"outlined","description":"Sets whether to draw an outlined version of the badge.","value":{"type":"boolean","default":"false"}},{"name":"shape","description":"The shape of the badge.","value":{"type":"BadgeShape","default":"'rounded'"}},{"name":"dot","description":"Sets whether to render a dot type badge.\nWhen enabled, the badge appears as a small dot without any content.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"Default slot for the badge content."}],"events":[],"js":{"properties":[{"name":"variant","description":"The type (style variant) of the badge.","type":"StyleVariant"},{"name":"outlined","description":"Sets whether to draw an outlined version of the badge.","type":"boolean"},{"name":"shape","description":"The shape of the badge.","type":"BadgeShape"},{"name":"dot","description":"Sets whether to render a dot type badge.\nWhen enabled, the badge appears as a small dot without any content.","type":"boolean"}],"events":[]}},{"name":"igc-banner","description":"A non-modal notification banner that displays important, concise messages\nrequiring user acknowledgement.\n\nThe banner slides into view with an animated grow transition and renders\ninline, pushing the surrounding page content rather than overlaying it.\n\nThe component integrates with the\n[Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\nan Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` /\n`\"--toggle\"` and `commandfor` pointing to this element will call the\ncorresponding method declaratively without any JavaScript.\n---\n\n\n### **Events:**\n - **igcClosing** - Emitted just before the banner closes in response to the default action button being clicked. Cancelable — call `event.preventDefault()` to abort the closing sequence.\n- **igcClosed** - Emitted after the banner has fully closed and its exit animation has completed.\n\n### **Slots:**\n - _default_ - The banner message text content.\n- **prefix** - An icon or illustration rendered to the left of the message. Useful for reinforcing the message type (info, warning, success, etc.).\n- **actions** - Custom action elements rendered in the banner's action area. When provided, replaces the default \"OK\" dismiss button.\n\n### **CSS Parts:**\n - **base** - The root wrapper element of the banner.\n- **spacer** - The inner wrapper that controls the spacing around the banner content.\n- **message** - The container that holds the illustration and text content.\n- **illustration** - The container for the prefix slot (icon/illustration).\n- **content** - The container for the default message slot.\n- **actions** - The container for the action buttons slot.","doc-url":"","attributes":[{"name":"open","description":"Whether the banner is open.\n\nSetting this property programmatically will immediately show or hide the\nbanner without animation and without emitting close events.\nPrefer the `show()`, `hide()`, and `toggle()` methods for animated\ntransitions.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"The banner message text content."},{"name":"prefix","description":"An icon or illustration rendered to the left of the message. Useful for reinforcing the message type (info, warning, success, etc.)."},{"name":"actions","description":"Custom action elements rendered in the banner's action area. When provided, replaces the default \"OK\" dismiss button."}],"events":[{"name":"igcClosing","description":"Emitted just before the banner closes in response to the default action button being clicked. Cancelable — call `event.preventDefault()` to abort the closing sequence."},{"name":"igcClosed","description":"Emitted after the banner has fully closed and its exit animation has completed."}],"js":{"properties":[{"name":"open","description":"Whether the banner is open.\n\nSetting this property programmatically will immediately show or hide the\nbanner without animation and without emitting close events.\nPrefer the `show()`, `hide()`, and `toggle()` methods for animated\ntransitions.","type":"boolean"}],"events":[{"name":"igcClosing","description":"Emitted just before the banner closes in response to the default action button being clicked. Cancelable — call `event.preventDefault()` to abort the closing sequence."},{"name":"igcClosed","description":"Emitted after the banner has fully closed and its exit animation has completed."}]}},{"name":"igc-toggle-button","description":"The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.\nIt is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.\n---\n\n\n### **Slots:**\n - **Renders** - the label/content of the button.\n\n### **CSS Parts:**\n - **toggle** - The native button element.","doc-url":"","attributes":[{"name":"value","description":"The value attribute of the control.","value":{"type":"string"}},{"name":"selected","description":"Determines whether the button is selected.","value":{"type":"boolean","default":"false"}},{"name":"disabled","description":"Determines whether the button is disabled.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"Renders","description":"the label/content of the button."}],"events":[],"js":{"properties":[{"name":"value","description":"The value attribute of the control.","type":"string"},{"name":"selected","description":"Determines whether the button is selected.","type":"boolean"},{"name":"disabled","description":"Determines whether the button is disabled.","type":"boolean"}],"events":[]}},{"name":"igc-button-group","description":"The `igc-button-group` groups a series of `igc-toggle-button`s together, exposing features such as layout and selection.\n---\n\n\n### **Events:**\n - **igcSelect** - Emitted when a button is selected through user interaction.\n- **igcDeselect** - Emitted when a button is deselected through user interaction.\n\n### **Slots:**\n - _default_ - Renders `igc-toggle-button` component.\n\n### **CSS Parts:**\n - **group** - The button group container.","doc-url":"","attributes":[{"name":"disabled","description":"Disables all buttons inside the group.","value":{"type":"boolean","default":"false"}},{"name":"alignment","description":"Sets the orientation of the buttons in the group.","value":{"type":"ContentOrientation","default":"'horizontal'"}},{"name":"selection","description":"Controls the mode of selection for the button group.","value":{"type":"ButtonGroupSelection","default":"'single'"}},{"name":"selectedItems","description":"Gets/Sets the currently selected buttons (their values).","value":{"type":"string[]"}}],"slots":[{"name":"","description":"Renders `igc-toggle-button` component."}],"events":[{"name":"igcSelect","description":"Emitted when a button is selected through user interaction."},{"name":"igcDeselect","description":"Emitted when a button is deselected through user interaction."}],"js":{"properties":[{"name":"disabled","description":"Disables all buttons inside the group.","type":"boolean"},{"name":"alignment","description":"Sets the orientation of the buttons in the group.","type":"ContentOrientation"},{"name":"selection","description":"Controls the mode of selection for the button group.","type":"ButtonGroupSelection"},{"name":"selectedItems","description":"Gets/Sets the currently selected buttons (their values).","type":"string[]"}],"events":[{"name":"igcSelect","description":"Emitted when a button is selected through user interaction."},{"name":"igcDeselect","description":"Emitted when a button is deselected through user interaction."}]}},{"name":"igc-days-view","description":"Instantiate a days view as a separate component in the calendar.\n---\n\n\n### **Events:**\n - **igcActiveDateChange** - Emitted when the active date changes.\n- **igcRangePreviewDateChange** - Emitted when the range preview date changes.\n\n### **CSS Parts:**\n - **days-row** - The days row container.\n- **label** - The label container.\n- **label-inner** - The inner label container.\n- **week-number** - The week number container.\n- **week-number-inner** - The inner week number container.","doc-url":"","attributes":[{"name":"hide-leading-days","description":"Whether to show leading days which do not belong to the current month.","value":{"type":"boolean","default":"false"}},{"name":"hide-trailing-days","description":"Whether to show trailing days which do not belong to the current month.","value":{"type":"boolean","default":"false"}},{"name":"week-day-format","description":"The format of the days. Defaults to narrow.","value":{"type":"'long' | 'short' | 'narrow'","default":"'narrow'"}},{"name":"active","description":"The active state of the component.","value":{"type":"boolean","default":"false"}},{"name":"value","description":"The current value of the calendar.\nUsed when selection is set to single","value":{"type":"Date | null"}},{"name":"values","description":"The current values of the calendar.\nUsed when selection is set to multiple of range.","value":{"type":"Date[]"}},{"name":"selection","description":"Sets the type of selection in the component.","value":{"type":"CalendarSelection","default":"'single'"}},{"name":"show-week-numbers","description":"Whether to show the week numbers.","value":{"type":"boolean","default":"false"}},{"name":"week-start","description":"Gets/Sets the first day of the week.","value":{"type":"WeekDays","default":"'sunday'"}},{"name":"locale","description":"Gets/Sets the locale used for formatting and displaying the dates in the component.","value":{"type":"string"}},{"name":"active-date","description":"Get/Set the date which is shown in view and is highlighted. By default it is the current date.","value":{"type":"Date"}}],"events":[{"name":"igcActiveDateChange","description":"Emitted when the active date changes."},{"name":"igcRangePreviewDateChange","description":"Emitted when the range preview date changes."}],"js":{"properties":[{"name":"active","description":"The active state of the component.","type":"boolean"},{"name":"hideLeadingDays","description":"Whether to show leading days which do not belong to the current month.","type":"boolean"},{"name":"hideTrailingDays","description":"Whether to show trailing days which do not belong to the current month.","type":"boolean"},{"name":"rangePreviewDate","description":"The range preview date.","type":"Date | undefined"},{"name":"weekDayFormat","description":"The format of the days. Defaults to narrow.","type":"'long' | 'short' | 'narrow'"},{"name":"value","description":"The current value of the calendar.\nUsed when selection is set to single","type":"Date | null"},{"name":"values","description":"The current values of the calendar.\nUsed when selection is set to multiple of range.","type":"Date[]"},{"name":"activeDate","description":"Get/Set the date which is shown in view and is highlighted. By default it is the current date.","type":"Date"},{"name":"selection","description":"Sets the type of selection in the component.","type":"CalendarSelection"},{"name":"showWeekNumbers","description":"Whether to show the week numbers.","type":"boolean"},{"name":"weekStart","description":"Gets/Sets the first day of the week.","type":"WeekDays"},{"name":"locale","description":"Gets/Sets the locale used for formatting and displaying the dates in the component."},{"name":"resourceStrings","description":"The resource strings for localization.","type":"IgcCalendarResourceStrings &\n    ICalendarResourceStrings"},{"name":"specialDates","description":"Gets/Sets the special dates for the component.","type":"DateRangeDescriptor[] | undefined"},{"name":"disabledDates","description":"Gets/Sets the disabled dates for the component.","type":"DateRangeDescriptor[] | undefined"}],"events":[{"name":"igcActiveDateChange","description":"Emitted when the active date changes."},{"name":"igcRangePreviewDateChange","description":"Emitted when the range preview date changes."}]}},{"name":"igc-months-view","description":"Instantiate a months view as a separate component in the calendar.\n---\n\n\n### **Events:**\n \n\n### **CSS Parts:**\n - **months-row** - The months row container.\n- **month** - The month container.\n- **month-inner** - The inner month container.","doc-url":"","attributes":[{"name":"locale","description":"Sets the locale used for formatting and displaying the dates.","value":{"type":"string","default":"'en'"}},{"name":"month-format","description":"The format of the month. Defaults to long.","value":{"type":"'numeric' | '2-digit' | 'long' | 'short' | 'narrow'","default":"'long'"}}],"events":[],"js":{"properties":[{"name":"value","description":"Тhe current value of the calendar.","type":"Date"},{"name":"locale","description":"Sets the locale used for formatting and displaying the dates.","type":"string"},{"name":"monthFormat","description":"The format of the month. Defaults to long.","type":"'numeric' | '2-digit' | 'long' | 'short' | 'narrow'"}],"events":[]}},{"name":"igc-years-view","description":"Instantiate a years view as a separate component in the calendar.\n---\n\n\n### **Events:**\n \n\n### **CSS Parts:**\n - **years-row** - The years row container.\n- **year** - The year container.\n- **year-inner** - The inner year container.","doc-url":"","attributes":[{"name":"years-per-page","description":"Sets how many years are displayed on a single page.","value":{"type":"number","default":"15"}}],"events":[],"js":{"properties":[{"name":"value","description":"Тhe current value of the calendar.","type":"Date"},{"name":"yearsPerPage","description":"Sets how many years are displayed on a single page.","type":"number"}],"events":[]}},{"name":"igc-calendar","description":"Represents a calendar that lets users\nto select a date value in a variety of different ways.\n---\n\n\n### **Events:**\n - **igcChange** - Emitted when calendar changes its value.\n\n### **Slots:**\n - _default_ - The default slot for the calendar.\n- **title** - Renders the title of the calendar header.\n- **header-date** - Renders content instead of the current date/range in the calendar header.\n\n### **CSS Parts:**\n - **header** - The header element of the calendar.\n- **header-title** - The header title element of the calendar.\n- **header-date** - The header date element of the calendar.\n- **content** - The content element which contains the views and navigation elements of the calendar.\n- **content-vertical** - The content element which contains the views and navigation elements of the calendar in vertical orientation.\n- **navigation** - The navigation container element of the calendar.\n- **months-navigation** - The months navigation button element of the calendar.\n- **years-navigation** - The years navigation button element of the calendar.\n- **years-range** - The years range element of the calendar.\n- **navigation-buttons** - The navigation buttons container of the calendar.\n- **navigation-button** - Previous/next navigation button of the calendar.\n- **days-view-container** - The days view container element of the calendar.\n- **days-view** - Days view element of the calendar.\n- **months-view** - The months view element of the calendar.\n- **years-view** - The years view element of the calendar.\n- **days-row** - Days row element of the calendar.\n- **label** - Week header label element of the calendar.\n- **week-number** - Week number element of the calendar.\n- **week-number-inner** - Week number inner element of the calendar.\n- **date** - Date element of the calendar.\n- **date-inner** - Date inner element of the calendar.\n- **first** - The first selected date element of the calendar in range selection.\n- **last** - The last selected date element of the calendar in range selection.\n- **inactive** - Inactive date element of the calendar.\n- **hidden** - Hidden date element of the calendar.\n- **weekend** - Weekend date element of the calendar.\n- **range** - Range selected element of the calendar.\n- **special** - Special date element of the calendar.\n- **disabled** - Disabled date element of the calendar.\n- **single** - Single selected date element of the calendar.\n- **preview** - Range selection preview date element of the calendar.\n- **month** - Month element of the calendar.\n- **month-inner** - Month inner element of the calendar.\n- **year** - Year element of the calendar.\n- **year-inner** - Year inner element of the calendar.\n- **selected** - Indicates selected state. Applies to date, month and year elements of the calendar.\n- **current** - Indicates current state. Applies to date, month and year elements of the calendar.","doc-url":"","attributes":[{"name":"hide-outside-days","description":"Whether to show the dates that do not belong to the current active month.","value":{"type":"boolean","default":"false"}},{"name":"hide-header","description":"Whether to render the calendar header part.\nWhen the calendar selection is set to `multiple` the header is always hidden.","value":{"type":"boolean","default":"false"}},{"name":"header-orientation","description":"The orientation of the calendar header.","value":{"type":"CalendarHeaderOrientation","default":"'horizontal'"}},{"name":"orientation","description":"The orientation of the calendar months when more than one month\nis being shown.","value":{"type":"ContentOrientation","default":"'horizontal'"}},{"name":"visible-months","description":"The number of months displayed in the days view.","value":{"type":"number","default":"1"}},{"name":"active-view","description":"The current active view of the component.","value":{"type":"CalendarActiveView","default":"'days'"}},{"name":"value","description":"The current value of the calendar.\nUsed when selection is set to single","value":{"type":"Date | null"}},{"name":"values","description":"The current values of the calendar.\nUsed when selection is set to multiple of range.","value":{"type":"Date[]"}},{"name":"selection","description":"Sets the type of selection in the component.","value":{"type":"CalendarSelection","default":"'single'"}},{"name":"show-week-numbers","description":"Whether to show the week numbers.","value":{"type":"boolean","default":"false"}},{"name":"week-start","description":"Gets/Sets the first day of the week.","value":{"type":"WeekDays","default":"'sunday'"}},{"name":"locale","description":"Gets/Sets the locale used for formatting and displaying the dates in the component.","value":{"type":"string"}},{"name":"active-date","description":"Get/Set the date which is shown in view and is highlighted. By default it is the current date.","value":{"type":"Date"}}],"slots":[{"name":"","description":"The default slot for the calendar."},{"name":"title","description":"Renders the title of the calendar header."},{"name":"header-date","description":"Renders content instead of the current date/range in the calendar header."}],"events":[{"name":"igcChange","description":"Emitted when calendar changes its value."}],"js":{"properties":[{"name":"hideOutsideDays","description":"Whether to show the dates that do not belong to the current active month.","type":"boolean"},{"name":"hideHeader","description":"Whether to render the calendar header part.\nWhen the calendar selection is set to `multiple` the header is always hidden.","type":"boolean"},{"name":"headerOrientation","description":"The orientation of the calendar header.","type":"CalendarHeaderOrientation"},{"name":"orientation","description":"The orientation of the calendar months when more than one month\nis being shown.","type":"ContentOrientation"},{"name":"visibleMonths","description":"The number of months displayed in the days view.","type":"number"},{"name":"activeView","description":"The current active view of the component.","type":"CalendarActiveView"},{"name":"formatOptions","description":"The options used to format the months and the weekdays in the calendar views.","type":"Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'>"},{"name":"value","description":"The current value of the calendar.\nUsed when selection is set to single","type":"Date | null"},{"name":"values","description":"The current values of the calendar.\nUsed when selection is set to multiple of range.","type":"Date[]"},{"name":"activeDate","description":"Get/Set the date which is shown in view and is highlighted. By default it is the current date.","type":"Date"},{"name":"selection","description":"Sets the type of selection in the component.","type":"CalendarSelection"},{"name":"showWeekNumbers","description":"Whether to show the week numbers.","type":"boolean"},{"name":"weekStart","description":"Gets/Sets the first day of the week.","type":"WeekDays"},{"name":"locale","description":"Gets/Sets the locale used for formatting and displaying the dates in the component."},{"name":"resourceStrings","description":"The resource strings for localization.","type":"IgcCalendarResourceStrings &\n    ICalendarResourceStrings"},{"name":"specialDates","description":"Gets/Sets the special dates for the component.","type":"DateRangeDescriptor[] | undefined"},{"name":"disabledDates","description":"Gets/Sets the disabled dates for the component.","type":"DateRangeDescriptor[] | undefined"}],"events":[{"name":"igcChange","description":"Emitted when calendar changes its value."}]}},{"name":"igc-card-actions","description":"A container component for card action items such as buttons or icon buttons.\nActions can be positioned at the start, center, or end of the container.\n---\n\n\n### **Slots:**\n - **start** - Renders items at the beginning of the actions area.\n- _default_ - Renders items in the center of the actions area.\n- **end** - Renders items at the end of the actions area.","doc-url":"","attributes":[{"name":"orientation","description":"The orientation of the actions layout.","value":{"type":"ContentOrientation","default":"'horizontal'"}}],"slots":[{"name":"start","description":"Renders items at the beginning of the actions area."},{"name":"","description":"Renders items in the center of the actions area."},{"name":"end","description":"Renders items at the end of the actions area."}],"events":[],"js":{"properties":[{"name":"orientation","description":"The orientation of the actions layout.","type":"ContentOrientation"}],"events":[]}},{"name":"igc-card-content","description":"A container component for the card's main text content.\nThis component should be used within an igc-card element to display the primary content.\n---\n\n\n### **Slots:**\n - _default_ - Renders the card text content (e.g., paragraphs, lists).","doc-url":"","attributes":[],"slots":[{"name":"","description":"Renders the card text content (e.g., paragraphs, lists)."}],"events":[],"js":{"properties":[],"events":[]}},{"name":"igc-card-header","description":"A container component for the card's header section.\nDisplays header content including an optional thumbnail, title, subtitle, and additional content.\n---\n\n\n### **Slots:**\n - **thumbnail** - Renders header media such as an icon or small image.\n- **title** - Renders the card title (typically a heading element).\n- **subtitle** - Renders the card subtitle (typically a smaller heading or text).\n- _default_ - Renders additional content displayed next to the title area.\n\n### **CSS Parts:**\n - **header** - The card header text container.\n- **title** - The title slot wrapper.\n- **subtitle** - The subtitle slot wrapper.","doc-url":"","attributes":[],"slots":[{"name":"thumbnail","description":"Renders header media such as an icon or small image."},{"name":"title","description":"Renders the card title (typically a heading element)."},{"name":"subtitle","description":"Renders the card subtitle (typically a smaller heading or text)."},{"name":"","description":"Renders additional content displayed next to the title area."}],"events":[],"js":{"properties":[],"events":[]}},{"name":"igc-card-media","description":"A container component for card media content such as images, GIFs, or videos.\nThis component should be used within an igc-card element to display visual content.\n---\n\n\n### **Slots:**\n - _default_ - Renders the card media content (e.g., img, video elements).","doc-url":"","attributes":[],"slots":[{"name":"","description":"Renders the card media content (e.g., img, video elements)."}],"events":[],"js":{"properties":[],"events":[]}},{"name":"igc-card","description":"A container component that wraps different elements related to a single subject.\nThe card component provides a flexible container for organizing content such as headers,\nmedia, text content, and actions.\n---\n\n\n### **Slots:**\n - _default_ - Renders the card content. Typically contains igc-card-header, igc-card-media, igc-card-content, and igc-card-actions.","doc-url":"","attributes":[{"name":"elevated","description":"Sets the card to have an elevated appearance with shadow.\nWhen false, the card uses an outlined style with a border.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"Renders the card content. Typically contains igc-card-header, igc-card-media, igc-card-content, and igc-card-actions."}],"events":[],"js":{"properties":[{"name":"elevated","description":"Sets the card to have an elevated appearance with shadow.\nWhen false, the card uses an outlined style with a border.","type":"boolean"}],"events":[]}},{"name":"igc-toast","description":"A toast component is used to show a brief, non-interactive notification.\n\nThe component integrates with the\n[Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\nan Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` /\n`\"--toggle\"` and `commandfor` pointing to this element will call the\ncorresponding method declaratively without any JavaScript.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for the toast content.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the toast.","doc-url":"","attributes":[{"name":"open","description":"Whether the component is in shown state.","value":{"type":"boolean","default":"false"}},{"name":"display-time","description":"Determines the duration in milliseconds in which the component will be visible.","value":{"type":"number","default":"4000"}},{"name":"keep-open","description":"Determines whether the component should close after the `displayTime` is over.","value":{"type":"boolean","default":"false"}},{"name":"position","description":"Sets the position of the component in the viewport.\n\n`bottom` - positions the component at the bottom. This is the default.\n`middle` - positions the component at the center.\n`top` - positions the component at the top.","value":{"type":"AbsolutePosition","default":"'bottom'"}},{"name":"positioning","description":"Sets the positioning strategy of the component.\n\n`viewport` - positions the component relative to the viewport, ignoring any ancestor elements. This is the default behavior.\n`container` - positions the component relative to the nearest visible ancestor. In this mode, the component will be constrained within the bounding box of the ancestor and will be positioned according to the `position` attribute.","value":{"type":"NotificationPositioning","default":"'viewport'"}}],"slots":[{"name":"","description":"Default slot for the toast content."}],"events":[],"js":{"properties":[{"name":"open","description":"Whether the component is in shown state.","type":"boolean"},{"name":"displayTime","description":"Determines the duration in milliseconds in which the component will be visible.","type":"number"},{"name":"keepOpen","description":"Determines whether the component should close after the `displayTime` is over.","type":"boolean"},{"name":"position","description":"Sets the position of the component in the viewport.\n\n`bottom` - positions the component at the bottom. This is the default.\n`middle` - positions the component at the center.\n`top` - positions the component at the top.","type":"AbsolutePosition"},{"name":"positioning","description":"Sets the positioning strategy of the component.\n\n`viewport` - positions the component relative to the viewport, ignoring any ancestor elements. This i