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 | undefined"}},{"name":"alt","description":"Alternative text for the image.","value":{"type":"string | undefined"}},{"name":"initials","description":"Initials to use as a fallback when no image is available.","value":{"type":"string | undefined"}},{"name":"shape","description":"The shape of the avatar.","value":{"type":"AvatarShape","default":"'square'"}}],"slots":[{"name":"","description":"Renders an icon inside the default slot."}],"events":[],"js":{"properties":[{"name":"src","description":"The image source to use.","type":"string | undefined"},{"name":"alt","description":"Alternative text for the image.","type":"string | undefined"},{"name":"initials","description":"Initials to use as a fallback when no image is available.","type":"string | undefined"},{"name":"shape","description":"The shape of the avatar.","type":"AvatarShape"}],"events":[]}},{"name":"igc-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-expansion-panel","description":"The Expansion Panel Component provides a way to display information in a toggleable way -\ncompact summary view containing title and description and expanded detail view containing\nadditional content to the summary header.\n---\n\n\n### **Events:**\n - **igcOpening** - Emitted before opening the expansion panel.\n- **igcOpened** - Emitted after the expansion panel is opened.\n- **igcClosing** - Emitted before closing the expansion panel.\n- **igcClosed** - Emitted after the expansion panel is closed.\n\n### **Slots:**\n - _default_ - renders the default content of the panel\n- **title** - renders the title of the panel's header\n- **subtitle** - renders the subtitle of the panel's header\n- **indicator** - renders the expand/collapsed indicator\n- **indicator-expanded** - renders the expanded state of the indicator\n\n### **CSS Parts:**\n - **header** - The container of the expansion indicator, title and subtitle.\n- **title** -  The title container.\n- **subtitle** - The subtitle container.\n- **indicator** - The indicator container.\n- **content** - The expansion panel's content wrapper.","doc-url":"","attributes":[{"name":"open","description":"Indicates whether the contents of the control should be visible.","value":{"type":"boolean","default":"false"}},{"name":"disabled","description":"Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.","value":{"type":"boolean","default":"false"}},{"name":"indicator-position","description":"The indicator position of the expansion panel.","value":{"type":"ExpansionPanelIndicatorPosition","default":"'start'"}}],"slots":[{"name":"","description":"renders the default content of the panel"},{"name":"title","description":"renders the title of the panel's header"},{"name":"subtitle","description":"renders the subtitle of the panel's header"},{"name":"indicator","description":"renders the expand/collapsed indicator"},{"name":"indicator-expanded","description":"renders the expanded state of the indicator"}],"events":[{"name":"igcOpening","description":"Emitted before opening the expansion panel."},{"name":"igcOpened","description":"Emitted after the expansion panel is opened."},{"name":"igcClosing","description":"Emitted before closing the expansion panel."},{"name":"igcClosed","description":"Emitted after the expansion panel is closed."}],"js":{"properties":[{"name":"open","description":"Indicates whether the contents of the control should be visible.","type":"boolean"},{"name":"disabled","description":"Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.","type":"boolean"},{"name":"indicatorPosition","description":"The indicator position of the expansion panel.","type":"ExpansionPanelIndicatorPosition"}],"events":[{"name":"igcOpening","description":"Emitted before opening the expansion panel."},{"name":"igcOpened","description":"Emitted after the expansion panel is opened."},{"name":"igcClosing","description":"Emitted before closing the expansion panel."},{"name":"igcClosed","description":"Emitted after the expansion panel is closed."}]}},{"name":"igc-accordion","description":"The Accordion is a container-based component that can house multiple expansion panels\nand offers keyboard navigation.\n---\n\n\n### **Slots:**\n - _default_ - Renders the expansion panels inside default slot.","doc-url":"","attributes":[{"name":"single-expand","description":"Allows only one panel to be expanded at a time.","value":{"type":"boolean","default":"false"}}],"slots":[{"name":"","description":"Renders the expansion panels inside default slot."}],"events":[],"js":{"properties":[{"name":"singleExpand","description":"Allows only one panel to be expanded at a time.","type":"boolean"},{"name":"panels","description":"Returns all of the accordions's direct igc-expansion-panel children.","type":"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":"BadgeShape","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":"BadgeShape"}],"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":"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-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"}],"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":"ContentOrientation","default":"'horizontal'"}},{"name":"selection","description":"Controls the mode of selection for the button group.","value":{"type":"ButtonGroupSelection","default":"'single'"}},{"name":"selectedItems","description":"Gets/Sets the currently selected buttons (their values).","value":{"type":"string[]"}}],"slots":[{"name":"","description":"Renders `igc-toggle-button` component."}],"events":[{"name":"igcSelect","description":"Emitted when a button is selected through user interaction."},{"name":"igcDeselect","description":"Emitted when a button is deselected through user interaction."}],"js":{"properties":[{"name":"disabled","description":"Disables all buttons inside the group.","type":"boolean"},{"name":"alignment","description":"Sets the orientation of the buttons in the group.","type":"ContentOrientation"},{"name":"selection","description":"Controls the mode of selection for the button group.","type":"ButtonGroupSelection"},{"name":"selectedItems","description":"Gets/Sets the currently selected buttons (their values).","type":"string[]"}],"events":[{"name":"igcSelect","description":"Emitted when a button is selected through user interaction."},{"name":"igcDeselect","description":"Emitted when a button is deselected through user interaction."}]}},{"name":"igc-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 element.\n- **date** - The calendar date element.\n- **date-inner** - The calendar date inner element.\n- **first** - The calendar first selected date element in range selection.\n- **last** - The calendar last selected date element in range selection.\n- **inactive** - The calendar inactive date element.\n- **hidden** - The calendar hidden date element.\n- **weekend** - The calendar weekend date element.\n- **range** - The calendar range selected element.\n- **special** - The calendar special date element.\n- **disabled** - The calendar disabled date element.\n- **single** - The calendar single selected date element.\n- **preview** - The calendar range selection preview date element.\n- **month** - The calendar month element.\n- **month-inner** - The calendar month inner element.\n- **year** - The calendar year element.\n- **year-inner** - The calendar year inner element.\n- **selected** - The calendar selected state for element(s). Applies to date, month and year elements.\n- **current** - The calendar current state for element(s). Applies to date, month and year elements.","doc-url":"","attributes":[{"name":"mode","description":"Determines whether the calendar is opened in a dropdown or a modal dialog","value":{"type":"PickerMode","default":"'dropdown'"}},{"name":"use-two-inputs","description":"Use two inputs to display the date range values. Makes the input editable in dropdown mode.","value":{"type":"boolean","default":"false"}},{"name":"usePredefinedRanges","description":"Whether the control will show chips with predefined ranges.","value":{"type":"boolean","default":"false"}},{"name":"locale","description":"The locale settings used to display the value.","val