igniteui-webcomponents 3.1.0 → 3.2.0

package/custom-elements.json

@@ -2064,6 +2064,118 @@
         }
       ]
     },
+    {
+      "name": "igc-expansion-panel",
+      "path": "./src/components/expansion-panel/expansion-panel.ts",
+      "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.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether the contents of the control should be visible.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "indicator-position",
+          "description": "The indicator position of the expansion panel.",
+          "type": "\"start\" | \"end\" | \"none\"",
+          "default": "\"start\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-expansion-panel\"",
+          "default": "\"igc-expansion-panel\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "open",
+          "attribute": "open",
+          "description": "Indicates whether the contents of the control should be visible.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "indicatorPosition",
+          "attribute": "indicator-position",
+          "description": "The indicator position of the expansion panel.",
+          "type": "\"start\" | \"end\" | \"none\"",
+          "default": "\"start\""
+        }
+      ],
+      "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."
+        }
+      ],
+      "slots": [
+        {
+          "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"
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "header",
+          "description": "The container of the expansion indicator, title and subtitle."
+        },
+        {
+          "name": "title",
+          "description": "The title container."
+        },
+        {
+          "name": "subtitle",
+          "description": "The subtitle container."
+        },
+        {
+          "name": "indicator",
+          "description": "The indicator container."
+        },
+        {
+          "name": "content",
+          "description": "The expansion panel's content wrapper."
+        }
+      ]
+    },
     {
       "name": "igc-form",
       "path": "./src/components/form/form.ts",
@@ -2202,7 +2314,7 @@
         {
           "name": "inputmode",
           "description": "The input mode attribute of the control.",
-          "type": "\"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"none\" | \"txt\" | \"decimal\""
+          "type": "\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"txt\" | \"decimal\""
         },
         {
           "name": "pattern",
@@ -2325,7 +2437,7 @@
           "name": "inputmode",
           "attribute": "inputmode",
           "description": "The input mode attribute of the control.",
-          "type": "\"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"none\" | \"txt\" | \"decimal\""
+          "type": "\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"txt\" | \"decimal\""
         },
         {
           "name": "pattern",
@@ -2632,6 +2744,251 @@
         }
       ]
     },
+    {
+      "name": "igc-mask-input",
+      "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.",
+          "type": "\"raw\" | \"withFormatting\"",
+          "default": "\"raw\""
+        },
+        {
+          "name": "mask",
+          "description": "The mask pattern to apply on the input.",
+          "type": "string"
+        },
+        {
+          "name": "prompt",
+          "description": "The prompt symbol to use for unfilled parts of the mask.",
+          "type": "string"
+        },
+        {
+          "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": "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-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",
+          "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.",
+          "type": "\"raw\" | \"withFormatting\"",
+          "default": "\"raw\""
+        },
+        {
+          "name": "mask",
+          "attribute": "mask",
+          "description": "The mask pattern to apply on the input.",
+          "type": "string"
+        },
+        {
+          "name": "prompt",
+          "attribute": "prompt",
+          "description": "The prompt symbol to use for unfilled parts of the mask.",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "value",
+          "attribute": "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": "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 receives user input"
+        },
+        {
+          "name": "igcChange",
+          "description": "Emitted when an alteration of the control's value is committed by the user"
+        },
+        {
+          "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 the 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-nav-drawer-header-item",
       "path": "./src/components/nav-drawer/nav-drawer-header-item.ts",
@@ -4438,6 +4795,279 @@
     {
       "name": "test-popper",
       "path": "./src/components/toggle/toggle.spec.ts"
+    },
+    {
+      "name": "igc-tree-item",
+      "path": "./src/components/tree/tree-item.ts",
+      "description": "The tree-item component represents a child item of the tree component or another tree item.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The tree item label.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "expanded",
+          "description": "The tree item expansion state.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "active",
+          "description": "Marks the item as the tree's active item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "description": "The tree item selection state.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "loading",
+          "description": "To be used for load-on-demand scenarios in order to specify whether the item is loading data.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "The value entry that the tree item is visualizing. Required for searching through items.",
+          "default": "\"undefined\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "tree",
+          "description": "A reference to the tree the item is a part of.",
+          "type": "IgcTreeComponent | undefined"
+        },
+        {
+          "name": "parent",
+          "description": "The parent item of the current tree item (if any)",
+          "type": "IgcTreeItemComponent | null"
+        },
+        {
+          "name": "level",
+          "description": "The depth of the item, relative to the root.",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "The tree item label.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "The tree item expansion state.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "active",
+          "attribute": "active",
+          "description": "Marks the item as the tree's active item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "The tree item selection state.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "loading",
+          "attribute": "loading",
+          "description": "To be used for load-on-demand scenarios in order to specify whether the item is loading data.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value entry that the tree item is visualizing. Required for searching through items.",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "path",
+          "description": "The full path to the tree item, starting from the top-most ancestor.",
+          "type": "IgcTreeItemComponent[]"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders nested tree-item component."
+        },
+        {
+          "name": "label",
+          "description": "Renders the tree item container."
+        },
+        {
+          "name": "indicator",
+          "description": "Renders the expand indicator container."
+        },
+        {
+          "name": "loading",
+          "description": "Renders the tree item loading indicator container."
+        },
+        {
+          "name": "indentation",
+          "description": "Renders the container (by default the space) before the tree item."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "wrapper",
+          "description": "The wrapper for the tree item."
+        },
+        {
+          "name": "selected",
+          "description": "Indicates selected state. Applies to `wrapper`."
+        },
+        {
+          "name": "focused",
+          "description": "Indicates focused state. Applies to `wrapper`."
+        },
+        {
+          "name": "active",
+          "description": "Indicates an active state. Applies to `wrapper`."
+        },
+        {
+          "name": "indicator",
+          "description": "The expand indicator of the tree item."
+        },
+        {
+          "name": "label",
+          "description": "The tree item content."
+        },
+        {
+          "name": "text",
+          "description": "The tree item displayed text."
+        },
+        {
+          "name": "select",
+          "description": "The checkbox of the tree item when selection is enabled."
+        }
+      ]
+    },
+    {
+      "name": "igc-tree",
+      "path": "./src/components/tree/tree.ts",
+      "description": "The tree allows users to represent hierarchical data in a tree-view structure,\nmaintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.",
+      "attributes": [
+        {
+          "name": "single-branch-expand",
+          "description": "Whether a single or multiple of a parent's child items can be expanded.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection",
+          "description": "The selection state of the tree.",
+          "type": "\"multiple\" | \"none\" | \"cascade\"",
+          "default": "\"none\""
+        },
+        {
+          "name": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
+        {
+          "name": "size",
+          "description": "Determines the size of the component.",
+          "type": "\"small\" | \"medium\" | \"large\"",
+          "default": "\"large\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "singleBranchExpand",
+          "attribute": "single-branch-expand",
+          "description": "Whether a single or multiple of a parent's child items can be expanded.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection",
+          "attribute": "selection",
+          "description": "The selection state of the tree.",
+          "type": "\"multiple\" | \"none\" | \"cascade\"",
+          "default": "\"none\""
+        },
+        {
+          "name": "dir",
+          "attribute": "dir",
+          "description": "The direction attribute of the control.",
+          "type": "Direction",
+          "default": "\"auto\""
+        },
+        {
+          "name": "items",
+          "description": "Returns all of the tree's items.",
+          "type": "IgcTreeItemComponent[]"
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "Determines the size of the component.",
+          "type": "\"small\" | \"medium\" | \"large\"",
+          "default": "\"large\""
+        }
+      ],
+      "events": [
+        {
+          "name": "igcSelection",
+          "description": "Emitted when item selection is changing, before the selection completes."
+        },
+        {
+          "name": "igcItemCollapsed",
+          "description": "Emitted when tree item is collapsed."
+        },
+        {
+          "name": "igcItemCollapsing",
+          "description": "Emitted when tree item is about to collapse."
+        },
+        {
+          "name": "igcItemExpanded",
+          "description": "Emitted when tree item is expanded."
+        },
+        {
+          "name": "igcItemExpanding",
+          "description": "Emitted when tree item is about to expand."
+        },
+        {
+          "name": "igcItemActivated",
+          "description": "Emitted when the tree's `active` item changes."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders the tree items inside default slot."
+        }
+      ]
     }
   ]
 }

package/index.d.ts

@@ -15,6 +15,7 @@ export { default as IgcDropdownComponent } from './components/dropdown/dropdown.
 export { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group.js';
 export { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header.js';
 export { default as IgcDropdownItemComponent } from './components/dropdown/dropdown-item.js';
+export { default as IgcExpansionPanelComponent } from './components/expansion-panel/expansion-panel.js';
 export { default as IgcIconComponent } from './components/icon/icon.js';
 export { default as IgcIconButtonComponent } from './components/button/icon-button.js';
 export { default as IgcInputComponent } from './components/input/input.js';
@@ -23,6 +24,7 @@ export { default as IgcLinearProgressComponent } from './components/progress/lin
 export { default as IgcListComponent } from './components/list/list.js';
 export { default as IgcListHeaderComponent } from './components/list/list-header.js';
 export { default as IgcListItemComponent } from './components/list/list-item.js';
+export { default as IgcMaskInputComponent } from './components/mask-input/mask-input.js';
 export { default as IgcNavDrawerComponent } from './components/nav-drawer/nav-drawer.js';
 export { default as IgcNavDrawerHeaderItemComponent } from './components/nav-drawer/nav-drawer-header-item.js';
 export { default as IgcNavDrawerItemComponent } from './components/nav-drawer/nav-drawer-item.js';
@@ -38,6 +40,8 @@ export { default as IgcSliderComponent } from './components/slider/slider.js';
 export { default as IgcSliderLabelComponent } from './components/slider/slider-label.js';
 export { default as IgcToastComponent } from './components/toast/toast.js';
 export { default as IgcSwitchComponent } from './components/checkbox/switch.js';
+export { default as IgcTreeComponent } from './components/tree/tree.js';
+export { default as IgcTreeItemComponent } from './components/tree/tree-item.js';
 export { defineComponents } from './components/common/definitions/defineComponents.js';
 export { defineAllComponents } from './components/common/definitions/defineAllComponents.js';
 export { registerIcon, registerIconFromText, } from './components/icon/icon.registry.js';