igniteui-webcomponents 3.2.0 → 3.3.1

package/custom-elements.json

@@ -1,6 +1,47 @@
 {
   "version": "experimental",
   "tags": [
+    {
+      "name": "igc-accordion",
+      "path": "./src/components/accordion/accordion.ts",
+      "description": "The Accordion is a container-based component that can house multiple expansion panels\nand offers keyboard navigation.",
+      "attributes": [
+        {
+          "name": "single-expand",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-accordion\"",
+          "default": "\"igc-accordion\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "singleExpand",
+          "attribute": "single-expand",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "panels",
+          "description": "Returns all of the accordions's direct igc-expansion-panel children.",
+          "type": "IgcExpansionPanelComponent[]"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders the expansion panels inside default slot."
+        }
+      ]
+    },
     {
       "name": "igc-avatar",
       "path": "./src/components/avatar/avatar.ts",
@@ -853,6 +894,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-days-view\"",
+          "default": "\"igc-days-view\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -1007,6 +1053,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-months-view\"",
+          "default": "\"igc-months-view\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -1061,6 +1112,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-years-view\"",
+          "default": "\"igc-years-view\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -1717,6 +1773,302 @@
         }
       ]
     },
+    {
+      "name": "igc-date-time-input",
+      "path": "./src/components/date-time-input/date-time-input.ts",
+      "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.",
+      "attributes": [
+        {
+          "name": "input-format",
+          "description": "The date format to apply on the input.",
+          "type": "string"
+        },
+        {
+          "name": "min-value",
+          "description": "The minimum value required for the input to remain valid.",
+          "type": "Date | null"
+        },
+        {
+          "name": "max-value",
+          "description": "The maximum value required for the input to remain valid.",
+          "type": "Date | null"
+        },
+        {
+          "name": "display-format",
+          "description": "Format to display the value in when not editing.\nDefaults to the input format if not set.",
+          "type": "string"
+        },
+        {
+          "name": "spin-loop",
+          "description": "Sets whether to loop over the currently spun segment.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "locale",
+          "description": "The locale settings used to display the value.",
+          "type": "string",
+          "default": "\"en\""
+        },
+        {
+          "name": "prompt",
+          "description": "The prompt symbol to use for unfilled parts of the mask.",
+          "type": "string"
+        },
+        {
+          "name": "invalid",
+          "description": "Controls the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "The value of the input.",
+          "type": "Date | null"
+        },
+        {
+          "name": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "outlined",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "required",
+          "description": "Makes the control a required field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the control a disabled field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the control a readonly field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "The placeholder attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "The label for the control.",
+          "type": "string"
+        },
+        {
+          "name": "size",
+          "description": "Determines the size of the component.",
+          "type": "\"small\" | \"medium\" | \"large\"",
+          "default": "\"medium\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-date-time-input\"",
+          "default": "\"igc-date-time-input\""
+        },
+        {
+          "name": "inputFormat",
+          "attribute": "input-format",
+          "description": "The date format to apply on the input.",
+          "type": "string"
+        },
+        {
+          "name": "minValue",
+          "attribute": "min-value",
+          "description": "The minimum value required for the input to remain valid.",
+          "type": "Date | null"
+        },
+        {
+          "name": "maxValue",
+          "attribute": "max-value",
+          "description": "The maximum value required for the input to remain valid.",
+          "type": "Date | null"
+        },
+        {
+          "name": "displayFormat",
+          "attribute": "display-format",
+          "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",
+          "attribute": "spin-loop",
+          "description": "Sets whether to loop over the currently spun segment.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "locale",
+          "attribute": "locale",
+          "description": "The locale settings used to display the value.",
+          "type": "string",
+          "default": "\"en\""
+        },
+        {
+          "name": "prompt",
+          "attribute": "prompt",
+          "description": "The prompt symbol to use for unfilled parts of the mask.",
+          "type": "string"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Controls the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value of the input.",
+          "type": "Date | null"
+        },
+        {
+          "name": "dir",
+          "attribute": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "outlined",
+          "attribute": "outlined",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Makes the control a disabled field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Makes the control a readonly field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "The placeholder attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "The label for the control.",
+          "type": "string"
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "Determines the size of the component.",
+          "type": "\"small\" | \"medium\" | \"large\"",
+          "default": "\"medium\""
+        }
+      ],
+      "events": [
+        {
+          "name": "igcInput",
+          "description": "Emitted when the control input receives user input."
+        },
+        {
+          "name": "igcChange",
+          "description": "Emitted when the control's checked state changes."
+        },
+        {
+          "name": "igcFocus",
+          "description": "Emitted when the control gains focus."
+        },
+        {
+          "name": "igcBlur",
+          "description": "Emitted when the control loses focus."
+        }
+      ],
+      "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."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "container",
+          "description": "The main wrapper that holds all main input elements."
+        },
+        {
+          "name": "input",
+          "description": "The native input element."
+        },
+        {
+          "name": "label",
+          "description": "The native label element."
+        },
+        {
+          "name": "prefix",
+          "description": "The prefix wrapper."
+        },
+        {
+          "name": "suffix",
+          "description": "The suffix wrapper."
+        },
+        {
+          "name": "helper-text",
+          "description": "The helper text wrapper."
+        }
+      ]
+    },
     {
       "name": "igc-dropdown-group",
       "path": "./src/components/dropdown/dropdown-group.ts",
@@ -2299,12 +2651,6 @@
       "name": "igc-input",
       "path": "./src/components/input/input.ts",
       "attributes": [
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
         {
           "name": "type",
           "description": "The type attribute of the control.",
@@ -2368,6 +2714,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
         {
           "name": "name",
           "description": "The name attribute of the control.",
@@ -2415,16 +2767,9 @@
       ],
       "properties": [
         {
-          "name": "tagName",
-          "type": "\"igc-input\"",
-          "default": "\"igc-input\""
-        },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
+          "name": "tagName",
+          "type": "\"igc-input\"",
+          "default": "\"igc-input\""
         },
         {
           "name": "type",
@@ -2506,6 +2851,13 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "dir",
+          "attribute": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -2749,18 +3101,6 @@
       "path": "./src/components/mask-input/mask-input.ts",
       "description": "A masked input is an input field where a developer can control user input and format the visible value,\nbased on configurable rules",
       "attributes": [
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "\"ltr\" | \"rtl\" | \"auto\"",
-          "default": "\"auto\""
-        },
-        {
-          "name": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "value-mode",
           "description": "Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.",
@@ -2777,11 +3117,23 @@
           "description": "The prompt symbol to use for unfilled parts of the mask.",
           "type": "string"
         },
+        {
+          "name": "invalid",
+          "description": "Controls the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "description": "The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.",
           "type": "string"
         },
+        {
+          "name": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
         {
           "name": "name",
           "description": "The name attribute of the control.",
@@ -2833,20 +3185,6 @@
           "type": "\"igc-mask-input\"",
           "default": "\"igc-mask-input\""
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "\"ltr\" | \"rtl\" | \"auto\"",
-          "default": "\"auto\""
-        },
-        {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "valueMode",
           "attribute": "value-mode",
@@ -2866,6 +3204,13 @@
           "description": "The prompt symbol to use for unfilled parts of the mask.",
           "type": "string"
         },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Controls the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -2877,6 +3222,13 @@
           "description": "The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.",
           "type": "string"
         },
+        {
+          "name": "dir",
+          "attribute": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -3769,12 +4121,35 @@
           "name": "tagName",
           "type": "\"igc-rating-symbol\"",
           "default": "\"igc-rating-symbol\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"styles\"]"
         }
       ],
       "slots": [
         {
           "name": "",
-          "description": "Default slot for projected symbols/icons."
+          "description": "Default slot for projected full symbols/icons."
+        },
+        {
+          "name": "empty",
+          "description": "Default slot for projected empty symbols/icons."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "symbol",
+          "description": "The symbol wrapping container."
+        },
+        {
+          "name": "full",
+          "description": "The full symbol wrapping container."
+        },
+        {
+          "name": "empty",
+          "description": "The empty symbol wrapping container."
         }
       ]
     },
@@ -3795,12 +4170,6 @@
           "type": "number",
           "default": "1"
         },
-        {
-          "name": "symbol",
-          "description": "The symbol which the rating will display.",
-          "type": "string",
-          "default": "\"⭐\""
-        },
         {
           "name": "name",
           "description": "The name attribute of the control",
@@ -3840,6 +4209,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "single",
+          "description": "Toggles single selection visual mode.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
@@ -3872,13 +4247,6 @@
           "type": "number",
           "default": "1"
         },
-        {
-          "name": "symbol",
-          "attribute": "symbol",
-          "description": "The symbol which the rating will display.",
-          "type": "string",
-          "default": "\"⭐\""
-        },
         {
           "name": "name",
           "attribute": "name",
@@ -3925,6 +4293,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "single",
+          "attribute": "single",
+          "description": "Toggles single selection visual mode.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "attribute": "size",
@@ -3943,6 +4318,28 @@
           "description": "Emitted when hover is enabled and the user mouses over a symbol of the rating."
         }
       ],
+      "cssProperties": [
+        {
+          "name": "--symbol-size",
+          "description": "The size of the symbols."
+        },
+        {
+          "name": "--symbol-full-color",
+          "description": "The color of the filled symbol."
+        },
+        {
+          "name": "--symbol-empty-color",
+          "description": "The color of the empty symbol."
+        },
+        {
+          "name": "--symbol-full-filter",
+          "description": "The filter(s) used for the filled symbol."
+        },
+        {
+          "name": "--symbol-empty-filter",
+          "description": "The filter(s) used for the empty symbol."
+        }
+      ],
       "cssParts": [
         {
           "name": "base",
@@ -3953,28 +4350,24 @@
           "description": "The label part."
         },
         {
-          "name": "symbol",
-          "description": "The part for a single symbol."
-        },
-        {
-          "name": "fraction",
-          "description": "The part for the selected symbols."
+          "name": "value-label",
+          "description": "The value label part."
         },
         {
-          "name": "symbols-wrapper",
-          "description": "The wrapper that holds all symbols."
+          "name": "symbols",
+          "description": "A wrapper for all rating symbols."
         },
         {
-          "name": "large",
-          "description": "A part responsible for the symbols size."
+          "name": "symbol",
+          "description": "The part of the encapsulated default symbol."
         },
         {
-          "name": "medium",
-          "description": "A part responsible for the symbols size."
+          "name": "full",
+          "description": "The part of the encapsulated full symbols."
         },
         {
-          "name": "small",
-          "description": "A part responsible for the symbols size."
+          "name": "empty",
+          "description": "The part of the encapsulated empty symbols."
         }
       ]
     },
@@ -4738,6 +5131,215 @@
         }
       ]
     },
+    {
+      "name": "igc-tab-panel",
+      "path": "./src/components/tabs/tab-panel.ts",
+      "description": "Represents the content of a tab",
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-tab-panel\"",
+          "default": "\"igc-tab-panel\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders the content."
+        }
+      ]
+    },
+    {
+      "name": "igc-tab",
+      "path": "./src/components/tabs/tab.ts",
+      "description": "Represents the tab header.",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The id of the tab panel which will be controlled by the tab.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "selected",
+          "description": "Determines whether the tab is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Determines whether the tab is disabled.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-tab\"",
+          "default": "\"igc-tab\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "panel",
+          "attribute": "panel",
+          "description": "The id of the tab panel which will be controlled by the tab.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Determines whether the tab is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Determines whether the tab is disabled.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "prefix",
+          "description": "Renders before the tab header content."
+        },
+        {
+          "name": "",
+          "description": "Renders the tab header content."
+        },
+        {
+          "name": "suffix",
+          "description": "Renders after the tab header content."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "content",
+          "description": "The content wrapper."
+        },
+        {
+          "name": "prefix",
+          "description": "The prefix wrapper."
+        },
+        {
+          "name": "suffix",
+          "description": "The suffix wrapper."
+        }
+      ]
+    },
+    {
+      "name": "igc-tabs",
+      "path": "./src/components/tabs/tabs.ts",
+      "description": "Represents tabs component",
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "Sets the alignment for the tab headers",
+          "type": "\"start\" | \"end\" | \"center\" | \"justify\"",
+          "default": "\"start\""
+        },
+        {
+          "name": "activation",
+          "description": "Determines the tab activation. When set to auto,\nthe tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\nand the corresponding panel is displayed.\nWhen set to manual, the tab is only focused. The selection happens after pressing Space or Enter.",
+          "type": "\"auto\" | \"manual\"",
+          "default": "\"auto\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-tabs\"",
+          "default": "\"igc-tabs\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "selected",
+          "description": "Returns the currently selected tab.",
+          "type": "string"
+        },
+        {
+          "name": "alignment",
+          "attribute": "alignment",
+          "description": "Sets the alignment for the tab headers",
+          "type": "\"start\" | \"end\" | \"center\" | \"justify\"",
+          "default": "\"start\""
+        },
+        {
+          "name": "activation",
+          "attribute": "activation",
+          "description": "Determines the tab activation. When set to auto,\nthe tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\nand the corresponding panel is displayed.\nWhen set to manual, the tab is only focused. The selection happens after pressing Space or Enter.",
+          "type": "\"auto\" | \"manual\"",
+          "default": "\"auto\""
+        }
+      ],
+      "events": [
+        {
+          "name": "igcChange",
+          "description": "Emitted when the selected tab changes."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders the tab header."
+        },
+        {
+          "name": "panel",
+          "description": "Renders the tab content."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "headers",
+          "description": "The wrapper of the tabs including the headers content and the scroll buttons."
+        },
+        {
+          "name": "headers-content",
+          "description": "The container for the tab headers."
+        },
+        {
+          "name": "headers-wrapper",
+          "description": "The wrapper for the tab headers and the selected indicator."
+        },
+        {
+          "name": "headers-scroll",
+          "description": "The container for the headers."
+        },
+        {
+          "name": "selected-indicator",
+          "description": "The selected indicator."
+        },
+        {
+          "name": "start-scroll-button",
+          "description": "The start scroll button displayed when the tabs overflow."
+        },
+        {
+          "name": "end-scroll-button",
+          "description": "The end scroll button displayed when the tabs overflow."
+        },
+        {
+          "name": "content",
+          "description": "The container for the tabs content."
+        }
+      ]
+    },
     {
       "name": "igc-toast",
       "path": "./src/components/toast/toast.ts",