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---\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":"ButtonVariant","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 | undefined"}},{"name":"download","description":"Prompts to save the linked URL instead of navigating to it.","value":{"type":"string | undefined"}},{"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 | undefined"}},{"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":"ButtonVariant"},{"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 | undefined"},{"name":"download","description":"Prompts to save the linked URL instead of navigating to it.","type":"string | undefined"},{"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 | undefined"},{"name":"disabled","description":"The disabled state of the component","type":"boolean"},{"name":"form","description":"Returns the HTMLFormElement associated with this element.","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.\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"}],"events":[]}},{"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","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 | 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.","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- **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","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."},{"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":"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 | 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.","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-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","value":{"type":"boolean","default":"false"}}],"events":[],"js":{"properties":[{"name":"invalid","type":"boolean"},{"name":"target","type":"IgcFormControl"}],"events":[]}},{"name":"igc-date-time-input","description":"A date time input is an input field that lets you set and edit the date and time in a chosen input element\nusing customizable display and input formats.\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- **value-missing** - Renders content when the required validation fails.\n- **range-overflow** - Renders content when the max validation fails.\n- **range-underflow** - Renders content when the min 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- **prefix** - The prefix wrapper.\n- **suffix** - The suffix wrapper.\n- **helper-text** - The helper text wrapper.","doc-url":"","attributes":[{"name":"input-format","description":"The date format to apply on the input.","value":{"type":"string"}},{"name":"value","description":"The value of the input.","value":{"type":"Date | null"}},{"name":"min","description":"The minimum value required for the input to remain valid.","value":{"type":"Date | null"}},{"name":"max","description":"The maximum value required for the input to remain valid.","value":{"type":"Date | null"}},{"name":"display-format","description":"Format to display the value in when not editing.\nDefaults to the input format if not set.","value":{"type":"string"}},{"name":"spin-loop","description":"Sets whether to loop over the currently spun segment.","value":{"type":"boolean","default":"true"}},{"name":"locale","description":"The locale settings used to display the value.","value":{"type":"string","default":"'en'"}},{"name":"prompt","description":"The prompt symbol to use for unfilled parts of the mask.","value":{"type":"string"}},{"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":"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."},{"name":"value-missing","description":"Renders content when the required validation fails."},{"name":"range-overflow","description":"Renders content when the max validation fails."},{"name":"range-underflow","description":"Renders content when the min 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":"igcInput","description":"Emitted when the control input receives user input."},{"name":"igcChange","description":"Emitted when the control's checked state changes."}],"js":{"properties":[{"name":"inputFormat","description":"The date format to apply on the input.","type":"string"},{"name":"value","description":"The value of the input.","type":"string | Date | null"},{"name":"min","description":"The minimum value required for the input to remain valid.","type":"Date | null"},{"name":"max","description":"The maximum value required for the input to remain valid.","type":"Date | null"},{"name":"displayFormat","description":"Format to display the value in when not editing.\nDefaults to the input format if not set.","type":"string"},{"name":"spinDelta","description":"Delta values used to increment or decrement each date part on step actions.\nAll values default to `1`.","type":"DatePartDeltas"},{"name":"spinLoop","description":"Sets whether to loop over the currently spun segment.","type":"boolean"},{"name":"locale","description":"The locale settings used to display the value.","type":"string"},{"name":"prompt","description":"The prompt symbol to use for unfilled parts of the mask.","type":"string"},{"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":"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-dialog","description":"Represents a Dialog component.\n---\n\n\n### **Events:**\n - **igcClosing** - Emitter just before the dialog is closed. Cancelable.\n- **igcClosed** - Emitted after closing the dialog.\n\n### **Slots:**\n - _default_ - Renders content inside the default slot of the dialog.\n- **title** - Renders content in the title slot of the dialog header.\n- **message** - Renders the message content of the dialog.\n- **footer** - Renders content in the dialog footer.\n\n### **CSS Parts:**\n - **base** - The base wrapper of the dialog.\n- **title** - The title container of the dialog.\n- **footer** - The footer container of the dialog.\n- **overlay** - The backdrop overlay of the dialog.","doc-url":"","attributes":[{"name":"keep-open-on-escape","description":"Whether the dialog should be kept open when pressing the 'Escape' button.","value":{"type":"boolean","default":"false"}},{"name":"close-on-outside-click","description":"Whether the dialog should be closed when clicking outside of it.","value":{"type":"boolean","default":"false"}},{"name":"hide-default-action","description":"Whether to hide the default action button for the dialog.\n\nWhen there is projected content in the `footer` slot this property\nhas no effect.","value":{"type":"boolean","default":"false"}},{"name":"open","description":"Whether the dialog is opened.","value":{"type":"boolean","default":"false"}},{"name":"title","description":"Sets the title of the dialog.","value":{"type":"string"}}],"slots":[{"name":"","description":"Renders content inside the default slot of the dialog."},{"name":"title","description":"Renders content in the title slot of the dialog header."},{"name":"message","description":"Renders the message content of the dialog."},{"name":"footer","description":"Renders content in the dialog footer."}],"events":[{"name":"igcClosing","description":"Emitter just before the dialog is closed. Cancelable."},{"name":"igcClosed","description":"Emitted after closing the dialog."}],"js":{"properties":[{"name":"keepOpenOnEscape","description":"Whether the dialog should be kept open when pressing the 'Escape' button.","type":"boolean"},{"name":"closeOnOutsideClick","description":"Whether the dialog should be closed when clicking outside of it.","type":"boolean"},{"name":"hideDefaultAction","description":"Whether to hide the default action button for the dialog.\n\nWhen there is projected content in the `footer` slot this property\nhas no effect.","type":"boolean"},{"name":"open","description":"Whether the dialog is opened.","type":"boolean"},{"name":"title","description":"Sets the title of the dialog.","type":"string"},{"name":"returnValue","description":"Sets the return value for the dialog.","type":"string"}],"events":[{"name":"igcClosing","description":"Emitter just before the dialog is closed. Cancelable."},{"name":"igcClosed","description":"Emitted after closing the dialog."}]}},{"name":"igc-focus-trap","description":"\n---\n\n\n### **Slots:**\n - _default_ - The content of the focus trap component","doc-url":"","attributes":[{"name":"disabled","description":"Whether to manage focus state for the slotted children.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"The content of the focus trap component"}],"events":[],"js":{"properties":[{"name":"disabled","description":"Whether to manage focus state for the slotted children.","type":"boolean"},{"name":"focused","description":"Whether focus in currently inside the trap component."},{"name":"focusableElements","description":"An array of focusable elements including elements in Shadow roots"}],"events":[]}},{"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- **value-missing** - Renders content when the required validation fails.\n- **type-mismatch** - Renders content when the a type url/email input pattern validation fails.\n- **pattern-mismatch** - Renders content when the pattern validation fails.\n- **too-long** - Renders content when the maxlength validation fails.\n- **too-short** - Renders content when the minlength validation fails.\n- **range-overflow** - Renders content when the max validation fails.\n- **range-underflow** - Renders content when the min validation fails.\n- **step-mismatch** - Renders content when the step 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- **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":"InputType","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 | undefined"}},{"name":"minlength","description":"The minimum string length required by the control.","value":{"type":"number | undefined"}},{"name":"maxlength","description":"The maximum string length of the control.","value":{"type":"number | undefined"}},{"name":"min","description":"The min attribute of the control.","value":{"type":"number | undefined"}},{"name":"max","description":"The max attribute of the control.","value":{"type":"number | undefined"}},{"name":"step","description":"The step attribute of the control.","value":{"type":"number | undefined"}},{"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":"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":"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."},{"name":"value-missing","description":"Renders content when the required validation fails."},{"name":"type-mismatch","description":"Renders content when the a type url/email input pattern validation fails."},{"name":"pattern-mismatch","description":"Renders content when the pattern validation fails."},{"name":"too-long","description":"Renders content when the maxlength validation fails."},{"name":"too-short","description":"Renders content when the minlength validation fails."},{"name":"range-overflow","description":"Renders content when the max validation fails."},{"name":"range-underflow","description":"Renders content when the min validation fails."},{"name":"step-mismatch","description":"Renders content when the step 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":"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":"InputType"},{"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 | undefined"},{"name":"minLength","description":"The minimum string length required by the control.","type":"number | undefined"},{"name":"maxLength","description":"The maximum string length of the control.","type":"number | undefined"},{"name":"min","description":"The min attribute of the control.","type":"number | undefined"},{"name":"max","description":"The max attribute of the control.","type":"number | undefined"},{"name":"step","description":"The step attribute of the control.","type":"number | undefined"},{"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":"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":"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":"arrow-offset","description":"Additional offset to apply to the arrow element if enabled.","value":{"type":"number","default":"0"}},{"name":"inline","description":"Improves positioning for inline reference elements that span over multiple lines.\nUseful for tooltips or similar components.","value":{"type":"boolean","default":"false"}},{"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":"PopoverPlacement","default":"'bottom-start'"}},{"name":"same-width","description":"When enabled the floating element will match the width of its parent anchor element.","value":{"type":"boolean","default":"false"}},{"name":"shift","description":"When enabled this tries to shift the floating element along the main axis\nkeeping it in view, preventing overflow while maintaining the desired placement.","value":{"type":"boolean","default":"false"}},{"name":"shift-padding","description":"Virtual padding for the resolved overflow detection offsets in pixels.","value":{"type":"number","default":"0"}}],"slots":[{"name":"","description":"Content of the popover."},{"name":"anchor","description":"The element the popover will be anchored to."}],"events":[],"js":{"properties":[{"name":"anchor","description":"Pass an IDREF or an DOM element reference to use as the\nanchor target for the floating element.","type":"Element | string | undefined"},{"name":"arrow","description":"Element to render as an \"arrow\" element for the current popover.","type":"HTMLElement | null"},{"name":"arrowOffset","description":"Additional offset to apply to the arrow element if enabled.","type":"number"},{"name":"inline","description":"Improves positioning for inline reference elements that span over multiple lines.\nUseful for tooltips or similar components.","type":"boolean"},{"name":"flip","description":"When enabled this changes the placement of the floating element in order to keep it\nin view along the main axis.","type":"boolean"},{"name":"offset","description":"Placement modifier which translates the floating element along the main axis.","type":"number"},{"name":"open","description":"The visibility state of the popover component.","type":"boolean"},{"name":"placement","description":"Where to place the floating element relative to the parent anchor element.","type":"PopoverPlacement"},{"name":"sameWidth","description":"When enabled the floating element will match the width of its parent anchor element.","type":"boolean"},{"name":"shift","description":"When enabled this tries to shift the floating element along the main axis\nkeeping it in view, preventing overflow while maintaining the desired placement.","type":"boolean"},{"name":"shiftPadding","description":"Virtual padding for the resolved overflow detection offsets in pixels.","type":"number"}],"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 content in the default slot of the chip.\n- **prefix** - Renders content at the start of the chip, before the default content.\n- **suffix** - Renders content at the end of the chip after the default content.\n- **select** - Content to render when the chip in selected state.\n- **remove** - Content to override the default remove chip icon.\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 content in the default slot of the chip."},{"name":"prefix","description":"Renders content at the start of the chip, before the default content."},{"name":"suffix","description":"Renders content at the end of the chip after the default content."},{"name":"select","description":"Content to render when the chip in selected state."},{"name":"remove","description":"Content to override the default remove chip icon."}],"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-predefined-ranges-area","description":"The predefined ranges area component is used within the `igc-date-range picker` element and it\ndisplays a set of chips with predefined date ranges. The component allows users to quickly select\na predefined date range value. Users can also provide custom ranges to be displayed as chips.\n---\n\n\n### **Events:**\n - **igcRangeSelect**","doc-url":"","attributes":[{"name":"use-predefined-ranges","description":"Whether the control will show chips with predefined ranges.","value":{"type":"boolean","default":"false"}}],"events":[{"name":"igcRangeSelect","type":"CustomEvent"}],"js":{"properties":[{"name":"usePredefinedRanges","description":"Whether the control will show chips with predefined ranges.","type":"boolean"},{"name":"customRanges","description":"Renders chips with custom ranges based on the elements of the array.","type":"CustomDateRange[]"},{"name":"resourceStrings","description":"The resource strings of the date range area component.","type":"IgcDateRangePickerResourceStrings"}],"events":[{"name":"igcRangeSelect","type":"CustomEvent"}]}},{"name":"igc-date-range-picker","description":"The igc-date-range-picker allows the user to select a range of dates.\n---\n\n\n### **Events:**\n - **igcOpening** - Emitted just before the calendar dropdown is shown.\n- **igcOpened** - Emitted after the calendar dropdown is shown.\n- **igcClosing** - Emitted just before the calendar dropdown is hidden.\n- **igcClosed** - Emitted after the calendar dropdown is hidden.\n- **igcChange** - Emitted when the user modifies and commits the elements's value.\n- **igcInput** - Emitted when when the user types in the element.\n\n### **Slots:**\n - **prefix** - Renders content before the input (single input).\n- **prefix-start** - Renders content before the start input (two inputs).\n- **prefix-end** - Renders content before the end input (two inputs).\n- **suffix** - Renders content after the input (single input).\n- **suffix-start** - Renders content after the start input (single input).\n- **suffix-end** - Renders content after the end input (single input).\n- **helper-text** - Renders content below the input.\n- **bad-input** - Renders content when the value is in the disabledDates ranges.\n- **value-missing** - Renders content when the required validation fails.\n- **range-overflow** - Renders content when the max validation fails.\n- **range-underflow** - Renders content when the min 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- **title** - Renders content in the calendar title.\n- **header-date** - Renders content instead of the current date/range in the calendar header.\n- **clear-icon** - Renders a clear icon template.\n- **clear-icon-start** - Renders a clear icon template for the start input (two inputs).\n- **clear-icon-end** - Renders a clear icon template for the end input (two inputs).\n- **calendar-icon** - Renders the icon/content for the calendar picker.\n- **calendar-icon-start** - Renders the icon/content for the calendar picker for the start input (two inputs).\n- **calendar-icon-end** - Renders the icon/content for the calendar picker for the end input (two inputs).\n- **calendar-icon-open** - Renders the icon/content for the picker in open state.\n- **calendar-icon-open-start** - Renders the icon/content for the picker in open state for the start input (two inputs).\n- **calendar-icon-open-end** - Renders the icon/content for the picker in open state for the end input (two inputs).\n- **actions** - Renders content in the action part of the picker in open state.\n- **separator** - Renders the separator element between the two inputs.\n\n### **CSS Parts:**\n - **separator** - The separator element between the two inputs.\n- **ranges** - The wrapper that renders the custom and predefined ranges.\n- **label** - The label wrapper that renders content above the target input.\n- **calendar-icon** - The calendar icon wrapper for closed state (single input).\n- **calendar-icon-start** - The calendar icon wrapper for closed state for the start input (two inputs).\n- **calendar-icon-end** - The calendar icon wrapper for closed state for the end input (two inputs).\n- **calendar-icon-open** - The calendar icon wrapper for opened state (single input).\n- **calendar-icon-open-start** - The calendar icon wrapper for opened state for the start input (two inputs).\n- **calendar-icon-open-end** - The calendar icon wrapper for opened state for the end input (two inputs).\n- **clear-icon** - The clear icon wrapper (single input).\n- **clear-icon-start** - The clear icon wrapper for the start input (two inputs).\n- **clear-icon-end** - The clear icon wrapper for the end input (two inputs).\n- **actions** - The wrapper for the custom actions area.\n- **clear-icon** - The clear icon wrapper.\n- **input** - The native input element.\n- **prefix** - The prefix wrapper.\n- **suffix** - The suffix wrapper.\n- **helper-text** - The helper-text wrapper that renders content below the target input.\n- **header** - The calendar header element.\n- **header-title** - The calendar header title element.\n- **header-date** - The calendar header date element.\n- **calendar-content** - The calendar content element which contains the views and navigation elements.\n- **navigation** - The calendar navigation container element.\n- **months-navigation** - The calendar months navigation button element.\n- **years-navigation** - The calendar years navigation button element.\n- **years-range** - The calendar years range element.\n- **navigation-buttons** - The calendar navigation buttons container.\n- **navigation-button** - The calendar previous/next navigation button.\n- **days-view-container** - The calendar days view container element.\n- **days-view** - The calendar days view element.\n- **months-view** - The calendar months view element.\n- **years-view** - The calendar years view element.\n- **days-row** - The calendar days row element.\n- **calendar-label** - The calendar week header label element.\n- **week-number** - The calendar week number element.\n- **week-number-inner** - The calendar week number inner elem