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-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"}},{"name":"alt","description":"Alternative text for the image.","value":{"type":"string"}},{"name":"initials","description":"Initials to use as a fallback when no image is available.","value":{"type":"string"}},{"name":"shape","description":"The shape of the avatar.","value":{"type":"'circle' | 'rounded' | 'square'","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"},{"name":"alt","description":"Alternative text for the image.","type":"string"},{"name":"initials","description":"Initials to use as a fallback when no image is available.","type":"string"},{"name":"shape","description":"The shape of the avatar.","type":"'circle' | 'rounded' | 'square'"},{"name":"role","type":"string"},{"name":"ariaLabel","type":"string"}],"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.\nDefaults to `default`.","value":{"type":"string","default":"'default'"}},{"name":"mirrored","description":"Whether to flip the icon. Useful for RTL 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.\nDefaults to `default`.","type":"string"},{"name":"mirrored","description":"Whether to flip the icon. Useful for RTL layouts.","type":"boolean"},{"name":"role","type":"string"},{"name":"onThemeChanged"}],"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":"'start' | 'end' | 'none'","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":"'start' | 'end' | 'none'"}],"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":"Array<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.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the badge.","doc-url":"","attributes":[{"name":"variant","description":"The type of 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":"'rounded' | 'square'","default":"'rounded'"}}],"slots":[{"name":"","description":"Default slot for the badge."}],"events":[],"js":{"properties":[{"name":"variant","description":"The type of 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":"'rounded' | 'square'"},{"name":"role","type":"string"}],"events":[]}},{"name":"igc-button","description":"Represents a clickable button, used to submit forms or anywhere in a\ndocument for accessible, standard button functionality.\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":"Sets the variant of the button.","value":{"type":"'flat' | 'contained' | 'outlined' | 'fab'","default":"'contained'"}},{"name":"type","description":"The type of the button. Defaults to `button`.","value":{"type":"'button' | 'reset' | 'submit'","default":"'button'"}},{"name":"href","description":"The URL the button points to.","value":{"type":"string"}},{"name":"download","description":"Prompts to save the linked URL instead of navigating to it.","value":{"type":"string"}},{"name":"target","description":"Where to display the linked URL, as the name for a browsing context.","value":{"type":"'_blank' | '_parent' | '_self' | '_top' | undefined"}},{"name":"rel","description":"The relationship of the linked URL.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","value":{"type":"string"}},{"name":"disabled","description":"The disabled state of the component","value":{"type":"boolean"}}],"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":"Sets the variant of the button.","type":"'flat' | 'contained' | 'outlined' | 'fab'"},{"name":"type","description":"The type of the button. Defaults to `button`.","type":"'button' | 'reset' | 'submit'"},{"name":"href","description":"The URL the button points to.","type":"string"},{"name":"download","description":"Prompts to save the linked URL instead of navigating to it.","type":"string"},{"name":"target","description":"Where to display the linked URL, as the name for a browsing context.","type":"'_blank' | '_parent' | '_self' | '_top' | undefined"},{"name":"rel","description":"The relationship of the linked URL.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","type":"string"},{"name":"disabled","description":"The disabled state of the component","type":"boolean"},{"name":"form","description":"Returns the HTMLFormElement associated with this element."}],"events":[]}},{"name":"igc-banner","description":"The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature.\n---\n\n\n### **Events:**\n - **igcClosing** - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.\n- **igcClosed** - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.\n\n### **Slots:**\n - _default_ - Renders the text content of the banner message.\n- **prefix** - Renders additional content at the start of the message block.\n- **actions** - Renders any action elements.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the banner component.\n- **spacer** - The inner wrapper that sets the space around the banner.\n- **message** - The part that holds the text and the illustration.\n- **illustration** - The part that holds the banner icon/illustration.\n- **content** - The part that holds the banner text content.\n- **actions** - The part that holds the banner action buttons.","doc-url":"","attributes":[{"name":"open","description":"Determines whether the banner is being shown/hidden.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"Renders the text content of the banner message."},{"name":"prefix","description":"Renders additional content at the start of the message block."},{"name":"actions","description":"Renders any action elements."}],"events":[{"name":"igcClosing","description":"Emitted before closing the banner - when a user interacts (click) with the default action of the banner."},{"name":"igcClosed","description":"Emitted after the banner is closed - when a user interacts (click) with the default action of the banner."}],"js":{"properties":[{"name":"open","description":"Determines whether the banner is being shown/hidden.","type":"boolean"},{"name":"role","type":"string"},{"name":"ariaLive","type":"string"}],"events":[{"name":"igcClosing","description":"Emitted before closing the banner - when a user interacts (click) with the default action of the banner."},{"name":"igcClosed","description":"Emitted after the banner is closed - when a user interacts (click) with the default action of the banner."}]}},{"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":"'horizontal' | 'vertical'","default":"'horizontal'"}},{"name":"selection","description":"Controls the mode of selection for the button group.","value":{"type":"'single' | 'single-required' | 'multiple'","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":"'horizontal' | 'vertical'"},{"name":"selection","description":"Controls the mode of selection for the button group.","type":"'single' | 'single-required' | 'multiple'"},{"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 | undefined"}},{"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":"'single' | 'multiple' | 'range'","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","default":"'en'"}},{"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."},{"name":"resourceStrings","description":"The resource strings."},{"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 | undefined"},{"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":"'single' | 'multiple' | 'range'"},{"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.","type":"string"},{"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."},{"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."},{"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\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- **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":"'vertical' | 'horizontal'","default":"'horizontal'"}},{"name":"orientation","description":"The orientation of the calendar months when more than one month\nis being shown.","value":{"type":"'vertical' | 'horizontal'","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":"'days' | 'months' | 'years'","default":"'days'"}},{"name":"value","description":"The current value of the calendar.\nUsed when selection is set to single","value":{"type":"Date | undefined"}},{"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":"'single' | 'multiple' | 'range'","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","default":"'en'"}},{"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."}],"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":"'vertical' | 'horizontal'"},{"name":"orientation","description":"The orientation of the calendar months when more than one month\nis being shown.","type":"'vertical' | 'horizontal'"},{"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":"'days' | 'months' | 'years'"},{"name":"formatOptions","description":"The options used to format the months and the weekdays in the calendar views.","type":"Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'>"},{"name":"resourceStrings","description":"The resource strings for localization."},{"name":"value","description":"The current value of the calendar.\nUsed when selection is set to single","type":"Date | undefined"},{"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":"'single' | 'multiple' | 'range'"},{"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.","type":"string"},{"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 for card action items like buttons\n---\n\n\n### **Slots:**\n - **start** - Renders items at the beginning of actions area\n- _default_ - Renders items at the middle of actions area\n- **end** - Renders items at the end of actions area","doc-url":"","attributes":[{"name":"orientation","description":"The orientation of the actions.","value":{"type":"'vertical' | 'horizontal'","default":"'horizontal'"}}],"slots":[{"name":"start","description":"Renders items at the beginning of actions area"},{"name":"","description":"Renders items at the middle of actions area"},{"name":"end","description":"Renders items at the end of actions area"}],"events":[],"js":{"properties":[{"name":"orientation","description":"The orientation of the actions.","type":"'vertical' | 'horizontal'"}],"events":[]}},{"name":"igc-card-content","description":"A container for card's text content\n---\n\n\n### **Slots:**\n - _default_ - Renders the card text content","doc-url":"","attributes":[],"slots":[{"name":"","description":"Renders the card text content"}],"events":[],"js":{"properties":[],"events":[]}},{"name":"igc-card-header","description":"A container for card's header\n---\n\n\n### **Slots:**\n - **thumbnail** - Renders header media like icon\n- **title** - Renders the card title\n- **subtitle** - Renders the card subtitle\n- _default_ - Renders content next to the card title\n\n### **CSS Parts:**\n - **header** - The card header container","doc-url":"","attributes":[],"slots":[{"name":"thumbnail","description":"Renders header media like icon"},{"name":"title","description":"Renders the card title"},{"name":"subtitle","description":"Renders the card subtitle"},{"name":"","description":"Renders content next to the card title"}],"events":[],"js":{"properties":[],"events":[]}},{"name":"igc-card-media","description":"A container for card's media - could be an image, gif, video\n---\n\n\n### **Slots:**\n - _default_ - Renders the card media content","doc-url":"","attributes":[],"slots":[{"name":"","description":"Renders the card media content"}],"events":[],"js":{"properties":[],"events":[]}},{"name":"igc-card","description":"A container which wraps different elements related to a single subject\n---\n\n\n### **Slots:**\n - _default_ - Renders card content","doc-url":"","attributes":[{"name":"elevated","description":"Sets card elevated style, otherwise card looks outlined.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"Renders card content"}],"events":[],"js":{"properties":[{"name":"elevated","description":"Sets card elevated style, otherwise card looks outlined.","type":"boolean"}],"events":[]}},{"name":"igc-checkbox","description":"A check box allowing single values to be selected/deselected.\n---\n\n\n### **Events:**\n - **igcChange** - Emitted when the control's checked state changes.\n\n### **Slots:**\n - _default_ - The checkbox label.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the checkbox.\n- **control** - The checkbox input element.\n- **label** - The checkbox label.\n- **indicator** - The checkbox indicator icon.","doc-url":"","attributes":[{"name":"indeterminate","description":"Draws the checkbox in indeterminate state.","value":{"type":"boolean","default":"false"}},{"name":"required","description":"Makes the control a required field in a form context.","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":"Control the validity of the control.","value":{"type":"boolean","default":"false"}},{"name":"value","description":"The value attribute of the control.","value":{"type":"string"}},{"name":"checked","description":"The checked state of the control.","value":{"type":"boolean"}},{"name":"label-position","description":"The label position of the control.","value":{"type":"'before' | 'after'","default":"'after'"}}],"slots":[{"name":"","description":"The checkbox label."}],"events":[{"name":"igcChange","description":"Emitted when the control's checked state changes."}],"js":{"properties":[{"name":"indeterminate","description":"Draws the checkbox in indeterminate state.","type":"boolean"},{"name":"required","description":"Makes the control a required field in a form context.","type":"boolean"},{"name":"name","description":"The name attribute of the control.","type":"string"},{"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":"disabled","description":"The disabled state of the component","type":"boolean"},{"name":"invalid","description":"Control the validity of the control.","type":"boolean"},{"name":"value","description":"The value attribute of the control.","type":"string"},{"name":"checked","description":"The checked state of the control.","type":"boolean"},{"name":"labelPosition","description":"The label position of the control.","type":"'before' | 'after'"}],"events":[{"name":"igcChange","description":"Emitted when the control's checked state changes."}]}},{"name":"igc-circular-gradient","description":"Used for defining gradient stops in the igc-circular-progress.\nFor each `igc-circular-gradient` defined as `gradient` slot of `igc-circular-progress` element would be created a SVG stop element.\nThe values passed as `color`, `offset` and `opacity` would be set as\n`stop-color`, `offset` and `stop-opacity` of the SVG element without further validations.\n---\n","doc-url":"","attributes":[{"name":"offset","description":"Defines where the gradient stop is placed along the gradient vector","value":{"type":"string","default":"'0%'"}},{"name":"color","description":"Defines the color of the gradient stop","value":{"type":"string","default":"'black'"}},{"name":"opacity","description":"Defines the opacity of the gradient stop","value":{"type":"number","default":"1"}}],"events":[],"js":{"properties":[{"name":"offset","description":"Defines where the gradient stop is placed along the gradient vector","type":"string"},{"name":"color","description":"Defines the color of the gradient stop","type":"string"},{"name":"opacity","description":"Defines the opacity of the gradient stop","type":"number"}],"events":[]}},{"name":"igc-circular-progress","description":"A circular progress indicator used to express unspecified wait time or display\nthe length of a process.\n---\n\n\n### **Slots:**\n - _default_ - The text area container.\n- **gradient** - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n\n### **CSS Parts:**\n - **svg** - The igc-circular-progress SVG element.\n- **gradient_start** - The igc-circular-progress linear-gradient start color.\n- **gradient_end** - The igc-circular-progress linear-gradient end color.\n- **track** - The igc-circular-progress ring track area.\n- **fill** - The igc-circular-progress indicator area.\n- **label** - The igc-circular-progress label.\n- **value** - The igc-circular-progress label value.\n- **indeterminate** - The igc-circular-progress indeterminate state.\n- **primary** - The igc-circular-progress primary state.\n- **danger** - The igc-circular-progress error state.\n- **warning** - The igc-circular-progress warning state.\n- **info** - The igc-circular-progress info state.\n- **success** - The igc-circular-progress success state.","doc-url":"","attributes":[{"name":"max","description":"Maximum value of the control.","value":{"type":"number","default":"100"}},{"name":"value","description":"The value of the control.","value":{"type":"number","default":"0"}},{"name":"variant","description":"The variant of the control.","value":{"type":"StyleVariant","default":"'primary'"}},{"name":"animation-duration","description":"Animation duration in milliseconds.","value":{"type":"number","default":"500"}},{"name":"indeterminate","description":"The indeterminate state of the control.","value":{"type":"boolean","default":"false"}},{"name":"hide-label","description":"Shows/hides the label of the control.","value":{"type":"boolean","default":"false"}},{"name":"label-format","description":"Format string for the default label of the control.\nPlaceholders:\n {0} - current value of the control.\n {1} - max value of the control.","value":{"type":"string"}}],"slots":[{"name":"","description":"The text area container."},{"name":"gradient","description":"Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements."}],"events":[],"js":{"properties":[{"name":"max","description":"Maximum value of the control.","type":"number"},{"name":"value","description":"The value of the control.","type":"number"},{"name":"variant","description":"The variant of the control.","type":"StyleVariant"},{"name":"animationDuration","description":"Animation duration in milliseconds.","type":"number"},{"name":"indeterminate","description":"The indeterminate state of the control.","type":"boolean"},{"name":"hideLabel","description":"Shows/hides the label of the control.","type":"boolean"},{"name":"labelFormat","description":"Format string for the default label of the control.\nPlaceholders:\n {0} - current value of the control.\n {1} - max value of the control.","type":"string"},{"name":"role","type":"string"},{"name":"ariaValueMin","type":"string"}],"events":[]}},{"name":"igc-chip","description":"Chips help people enter information, make selections, filter content, or trigger actions.\n---\n\n\n### **Events:**\n - **igcRemove** - Emits an event when the chip component is removed. Returns the removed chip component.\n- **igcSelect** - Emits event when the chip component is selected/deselected and any related animations and transitions also end.\n\n### **Slots:**\n - _default_ - Renders the chip data.\n- **prefix** - Renders content before the data of the chip.\n- **suffix** - Renders content after the data of the chip.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the chip.\n- **prefix** - The prefix container of the chip.\n- **suffix** - The suffix container of the chip.","doc-url":"","attributes":[{"name":"disabled","description":"Sets the disabled state for the chip.","value":{"type":"boolean","default":"false"}},{"name":"removable","description":"Defines if the chip is removable or not.","value":{"type":"boolean","default":"false"}},{"name":"selectable","description":"Defines if the chip is selectable or not.","value":{"type":"boolean","default":"false"}},{"name":"selected","description":"Defines if the chip is selected or not.","value":{"type":"boolean","default":"false"}},{"name":"variant","description":"A property that sets the color variant of the chip component.","value":{"type":"StyleVariant"}}],"slots":[{"name":"","description":"Renders the chip data."},{"name":"prefix","description":"Renders content before the data of the chip."},{"name":"suffix","description":"Renders content after the data of the chip."}],"events":[{"name":"igcRemove","description":"Emits an event when the chip component is removed. Returns the removed chip component."},{"name":"igcSelect","description":"Emits event when the chip component is selected/deselected and any related animations and transitions also end."}],"js":{"properties":[{"name":"disabled","description":"Sets the disabled state for the chip.","type":"boolean"},{"name":"removable","description":"Defines if the chip is removable or not.","type":"boolean"},{"name":"selectable","description":"Defines if the chip is selectable or not.","type":"boolean"},{"name":"selected","description":"Defines if the chip is selected or not.","type":"boolean"},{"name":"variant","description":"A property that sets the color variant of the chip component.","type":"StyleVariant"}],"events":[{"name":"igcRemove","description":"Emits an event when the chip component is removed. Returns the removed chip component."},{"name":"igcSelect","description":"Emits event when the chip component is selected/deselected and any related animations and transitions also end."}]}},{"name":"igc-input","description":"\n---\n\n\n### **Events:**\n - **igcInput** - Emitted when the control input receives user input.\n- **igcChange** - Emitted when the control's checked state changes.\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\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- **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.","value":{"type":"string"}},{"name":"type","description":"The type attribute of the control.","value":{"type":"| 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'","default":"'text'"}},{"name":"inputmode","description":"The input mode attribute of the control.\nSee [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)","value":{"type":"string"}},{"name":"pattern","description":"The pattern attribute of the control.","value":{"type":"string"}},{"name":"minlength","description":"The minimum string length required by the control.","value":{"type":"number"}},{"name":"maxlength","description":"The maximum string length of the control.","value":{"type":"number"}},{"name":"min","description":"The min attribute of the control.","value":{"type":"number | string"}},{"name":"max","description":"The max attribute of the control.","value":{"type":"number | string"}},{"name":"step","description":"The step attribute of the control.","value":{"type":"number"}},{"name":"autofocus","description":"The autofocus attribute of the control.","value":{"type":"boolean"}},{"name":"autocomplete","description":"The autocomplete attribute of the control.","value":{"type":"string"}},{"name":"validate-only","description":"Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\nstring-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.","value":{"type":"boolean","default":"false"}},{"name":"required","description":"Makes the control a required field in a form context.","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":"Control the validity of the control.","value":{"type":"boolean","default":"false"}},{"name":"outlined","description":"Whether the control will have outlined appearance.","value":{"type":"boolean","default":"false"}},{"name":"readonly","description":"Makes the control a readonly field.","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."}],"events":[{"name":"igcInput","description":"Emitted when the control input receives user input."},{"name":"igcChange","description":"Emitted when the control's checked state changes."}],"js":{"properties":[{"name":"value","description":"The value of the control.","type":"string | Date | null"},{"name":"type","description":"The type attribute of the control.","type":"| 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'"},{"name":"inputMode","description":"The input mode attribute of the control.\nSee [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)","type":"string"},{"name":"pattern","description":"The pattern attribute of the control.","type":"string"},{"name":"minLength","description":"The minimum string length required by the control.","type":"number"},{"name":"maxLength","description":"The maximum string length of the control.","type":"number"},{"name":"min","description":"The min attribute of the control.","type":"number | string"},{"name":"max","description":"The max attribute of the control.","type":"number | string"},{"name":"step","description":"The step attribute of the control.","type":"number"},{"name":"autofocus","description":"The autofocus attribute of the control.","type":"boolean"},{"name":"autocomplete","description":"The autocomplete attribute of the control.","type":"string"},{"name":"validateOnly","description":"Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\nstring-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.","type":"boolean"},{"name":"required","description":"Makes the control a required field in a form context.","type":"boolean"},{"name":"name","description":"The name attribute of the control.","type":"string"},{"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":"disabled","description":"The disabled state of the component","type":"boolean"},{"name":"invalid","description":"Control the validity of the control.","type":"boolean"},{"name":"outlined","description":"Whether the control will have outlined appearance.","type":"boolean"},{"name":"readOnly","description":"Makes the control a readonly field.","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":"igcInput","description":"Emitted when the control input receives user input."},{"name":"igcChange","description":"Emitted when the control's checked state changes."}]}},{"name":"igc-popover","description":"\n---\n\n\n### **Slots:**\n - _default_ - Content of the popover.\n- **anchor** - The element the popover will be anchored to.\n\n### **CSS Parts:**\n - **container** - The container wrapping the slotted content in the popover.","doc-url":"","attributes":[{"name":"anchor","description":"Pass an IDREF or an DOM element reference to use as the\nanchor target for the floating element.","value":{"type":"Element | string | undefined"}},{"name":"flip","description":"When enabled this changes the placement of the floating element in order to keep it\nin view along the main axis.","value":{"type":"boolean","default":"false"}},{"name":"offset","description":"Placement modifier which translates the floating element along the main axis.","value":{"type":"number","default":"0"}},{"name":"open","description":"The visibility state of the popover component.","value":{"type":"boolean","default":"false"}},{"name":"placement","description":"Where to place the floating element relative to the parent anchor element.","value":{"type":"IgcPlacement","default":"'bottom-start'"}},{"name":"same-width","description":"When enabled the floating element will match the width of its parent anchor element.","value":{"type":"boolean