igniteui-webcomponents 3.2.0 → 3.3.0-beta.0

package/custom-elements.json

@@ -1717,6 +1717,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 +2595,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 +2658,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.",
@@ -2419,13 +2715,6 @@
           "type": "\"igc-input\"",
           "default": "\"igc-input\""
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
         {
           "name": "type",
           "attribute": "type",
@@ -2506,6 +2795,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 +3045,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 +3061,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 +3129,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 +3148,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 +3166,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",
@@ -4738,6 +5034,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",

package/index.d.ts

@@ -11,6 +11,7 @@ export { default as IgcCheckboxComponent } from './components/checkbox/checkbox.
 export { default as IgcCircularProgressComponent } from './components/progress/circular-progress.js';
 export { default as IgcCircularGradientComponent } from './components/progress/circular-gradient.js';
 export { default as IgcChipComponent } from './components/chip/chip.js';
+export { default as IgcDateTimeInputComponent } from './components/date-time-input/date-time-input.js';
 export { default as IgcDropdownComponent } from './components/dropdown/dropdown.js';
 export { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group.js';
 export { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header.js';
@@ -38,6 +39,9 @@ export { default as IgcRangeSliderComponent } from './components/slider/range-sl
 export { default as IgcSnackbarComponent } from './components/snackbar/snackbar.js';
 export { default as IgcSliderComponent } from './components/slider/slider.js';
 export { default as IgcSliderLabelComponent } from './components/slider/slider-label.js';
+export { default as IgcTabsComponent } from './components/tabs/tabs';
+export { default as IgcTabComponent } from './components/tabs/tab';
+export { default as IgcTabPanelComponent } from './components/tabs/tab-panel';
 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';
@@ -48,6 +52,7 @@ export { registerIcon, registerIconFromText, } from './components/icon/icon.regi
 export { configureTheme } from './theming/config.js';
 export { IgcCalendarResourceStrings } from './components/common/i18n/calendar.resources.js';
 export { DateRangeDescriptor, DateRangeType, } from './components/calendar/common/calendar.model.js';
+export { DatePart, DatePartDeltas, } from './components/date-time-input/date-util.js';
 export { IgcRangeSliderValue } from './components/slider/range-slider.js';
 export { SizableMixin } from './components/common/mixins/sizable.js';
 export { IgcCheckboxBaseComponent } from './components/checkbox/checkbox-base.js';