@ukic/canary-web-components 2.0.0-canary.12 → 2.0.0-canary.14

package/dist/types/components.d.ts

@@ -5,17 +5,17 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
-import { IcActivationTypes, IcMenuOption, IcSizes, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
 import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
+import { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
-import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "./utils/types";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
-export { IcActivationTypes, IcMenuOption, IcSizes, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
 export { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
+export { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
-export { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "./utils/types";
 export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 export namespace Components {
     interface IcDataTable {
@@ -39,35 +39,10 @@ export namespace Components {
           * Applies a border to the table container.
          */
         "embedded"?: boolean;
-        /**
-          * Sets the row height on all rows in the table that aren't set using the variableRowHeight method.
-         */
-        "globalRowHeight"?: IcDataTableRowHeights;
         /**
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
-        /**
-          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
-         */
-        "loading"?: boolean;
-        /**
-          * Sets the props for the circular loading indicator used in the loading state.
-         */
-        "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
-    description?: string;
-    label?: string;
-    labelDuration?: number;
-    max?: number;
-    min?: number;
-    progress?: number;
-    showBackground?: boolean;
-  };
-        /**
-          * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
-         */
-        "minimumLoadingDisplayDuration"?: number;
         /**
           * Sets the props for the pagination bar.
          */
@@ -79,10 +54,6 @@ export namespace Components {
     goToPageControl?: boolean;
     alignment?: IcPaginationAlignmentOptions;
   };
-        /**
-          * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
-         */
-        "resetRowHeights": () => Promise<void>;
         /**
           * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -106,49 +77,195 @@ export namespace Components {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+    }
+    interface IcDateInput {
         /**
-          * For long text in cells that aren't set to textWrap, define how they should be truncated. `tooltip` adds a tooltip for the rest of the text, `showHide` adds the ic-typography "See More"/"See Less" buttons.
+          * The format in which the date will be displayed.
          */
-        "truncationPattern"?: IcDataTableTruncationTypes;
+        "dateFormat"?: IcDateFormat;
         /**
-          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+          * The days of the week to disable.
          */
-        "updating"?: boolean;
+        "disableDays"?: IcWeekDays[];
         /**
-          * Sets the props for the linear loading indicator used in the updating state.
+          * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
          */
-        "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
-    description?: string;
-    max?: number;
-    min?: number;
-    progress?: number;
-  };
+        "disableDaysMessage"?: string;
+        /**
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        "disableFuture"?: boolean;
+        /**
+          * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
+         */
+        "disableFutureMessage"?: string;
+        /**
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * Returns the value as a Date object
+          * @returns Date
+         */
+        "getDate": () => Promise<Date>;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * The ID for the input.
+         */
+        "inputId"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
         /**
-          * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
          */
-        "variableRowHeight"?: (params: {
-    [key: string]: any;
-    index: number;
-  }) => IcDataTableRowHeights | null;
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        "setCalendarFocus": () => Promise<void>;
+        "setDisableDays": (days: IcWeekDays[]) => Promise<void>;
+        "showCalendarButton"?: boolean;
+        /**
+          * If `true`, a button which clears the date input when clicked will be displayed.
+         */
+        "showClearButton"?: boolean;
+        /**
+          * The size of the date input to be displayed.
+         */
+        "size"?: IcSizes;
+        "triggerIcChange": (d: Date) => Promise<void>;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
     }
-    interface IcDataTableTitleBar {
+    interface IcDatePicker {
         /**
-          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+          * The format in which the date will be displayed.
          */
-        "description"?: string;
+        "dateFormat"?: IcDateFormat;
         /**
-          * The heading of the title bar. Can be overridden with the `heading` slot. If used with an ic-data-table it will default to the table's `caption` unless overridden.
+          * The days of the week to disable.
          */
-        "heading"?: string;
+        "disableDays"?: IcWeekDays[];
         /**
-          * When `true`, the density select will not be rendered.
+          * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
          */
-        "hideDensitySelect"?: boolean;
+        "disableDaysMessage"?: string;
         /**
-          * The metadata displayed next to the `heading`.
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
          */
-        "metadata"?: string;
+        "disableFuture"?: boolean;
+        /**
+          * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
+         */
+        "disableFutureMessage"?: string;
+        /**
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * The ID for the input field. The default will be an automatically generated value.
+         */
+        "inputId"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "openAtDate": string | Date;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, days outside the current month will be visible in the date picker.
+         */
+        "showDaysOutsideMonth"?: boolean;
+        /**
+          * If `true`, the `Clear` button on the date picker will be visible.
+         */
+        "showPickerClearButton"?: boolean;
+        /**
+          * If `true`, the `Go to today` button on the date picker will be visible.
+         */
+        "showPickerTodayButton"?: boolean;
+        /**
+          * The size of the date picker to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "startOfWeek"?: IcWeekDays;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
     }
     interface IcMenuWithMulti {
         /**
@@ -423,13 +540,13 @@ export namespace Components {
         "value"?: string | string[];
     }
 }
-export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
+export interface IcDateInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLIcDataTableElement;
+    target: HTMLIcDateInputElement;
 }
-export interface IcDataTableTitleBarCustomEvent<T> extends CustomEvent<T> {
+export interface IcDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLIcDataTableTitleBarElement;
+    target: HTMLIcDatePickerElement;
 }
 export interface IcMenuWithMultiCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -444,39 +561,48 @@ export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIcSelectWithMultiElement;
 }
 declare global {
-    interface HTMLIcDataTableElementEventMap {
-        "icRowHeightChange": void;
-    }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    }
+    var HTMLIcDataTableElement: {
+        prototype: HTMLIcDataTableElement;
+        new (): HTMLIcDataTableElement;
+    };
+    interface HTMLIcDateInputElementEventMap {
+        "calendarButtonClicked": { value: Date };
+        "icBlur": { value: Date };
+        "icChange": { value: Date };
+        "icFocus": { value: Date };
+    }
+    interface HTMLIcDateInputElement extends Components.IcDateInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDateInputElementEventMap>(type: K, listener: (this: HTMLIcDateInputElement, ev: IcDateInputCustomEvent<HTMLIcDateInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDateInputElementEventMap>(type: K, listener: (this: HTMLIcDateInputElement, ev: IcDateInputCustomEvent<HTMLIcDateInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLIcDataTableElement: {
-        prototype: HTMLIcDataTableElement;
-        new (): HTMLIcDataTableElement;
+    var HTMLIcDateInputElement: {
+        prototype: HTMLIcDateInputElement;
+        new (): HTMLIcDateInputElement;
     };
-    interface HTMLIcDataTableTitleBarElementEventMap {
-        "icTableDensityUpdate": IcDensityUpdateEventDetail;
+    interface HTMLIcDatePickerElementEventMap {
+        "icChange": { value: Date };
     }
-    interface HTMLIcDataTableTitleBarElement extends Components.IcDataTableTitleBar, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLIcDatePickerElement extends Components.IcDatePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLIcDataTableTitleBarElement: {
-        prototype: HTMLIcDataTableTitleBarElement;
-        new (): HTMLIcDataTableTitleBarElement;
+    var HTMLIcDatePickerElement: {
+        prototype: HTMLIcDatePickerElement;
+        new (): HTMLIcDatePickerElement;
     };
     interface HTMLIcMenuWithMultiElementEventMap {
         "menuKeyPress": { isNavKey: boolean; key: string };
@@ -546,7 +672,8 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ic-data-table": HTMLIcDataTableElement;
-        "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
+        "ic-date-input": HTMLIcDateInputElement;
+        "ic-date-picker": HTMLIcDatePickerElement;
         "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
         "ic-pagination-bar": HTMLIcPaginationBarElement;
         "ic-select-with-multi": HTMLIcSelectWithMultiElement;
@@ -574,39 +701,10 @@ declare namespace LocalJSX {
           * Applies a border to the table container.
          */
         "embedded"?: boolean;
-        /**
-          * Sets the row height on all rows in the table that aren't set using the variableRowHeight method.
-         */
-        "globalRowHeight"?: IcDataTableRowHeights;
         /**
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
-        /**
-          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
-         */
-        "loading"?: boolean;
-        /**
-          * Sets the props for the circular loading indicator used in the loading state.
-         */
-        "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
-    description?: string;
-    label?: string;
-    labelDuration?: number;
-    max?: number;
-    min?: number;
-    progress?: number;
-    showBackground?: boolean;
-  };
-        /**
-          * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
-         */
-        "minimumLoadingDisplayDuration"?: number;
-        /**
-          * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
-         */
-        "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
         /**
           * Sets the props for the pagination bar.
          */
@@ -641,53 +739,202 @@ declare namespace LocalJSX {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+    }
+    interface IcDateInput {
         /**
-          * For long text in cells that aren't set to textWrap, define how they should be truncated. `tooltip` adds a tooltip for the rest of the text, `showHide` adds the ic-typography "See More"/"See Less" buttons.
+          * The format in which the date will be displayed.
          */
-        "truncationPattern"?: IcDataTableTruncationTypes;
+        "dateFormat"?: IcDateFormat;
         /**
-          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+          * The days of the week to disable.
          */
-        "updating"?: boolean;
+        "disableDays"?: IcWeekDays[];
         /**
-          * Sets the props for the linear loading indicator used in the updating state.
+          * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
          */
-        "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
-    description?: string;
-    max?: number;
-    min?: number;
-    progress?: number;
-  };
+        "disableDaysMessage"?: string;
+        /**
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        "disableFuture"?: boolean;
+        /**
+          * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
+         */
+        "disableFutureMessage"?: string;
+        /**
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * The ID for the input.
+         */
+        "inputId"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onIcBlur"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIcChange"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        /**
+          * Emitted when the input gains focus.
+         */
+        "onIcFocus"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, a button which clears the date input when clicked will be displayed.
+         */
+        "showClearButton"?: boolean;
+        /**
+          * The size of the date input to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
         /**
-          * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
+          * The text to display as the validation message. This will override the built-in date validation.
          */
-        "variableRowHeight"?: (params: {
-    [key: string]: any;
-    index: number;
-  }) => IcDataTableRowHeights | null;
+        "validationText"?: string;
+        /**
+          * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
     }
-    interface IcDataTableTitleBar {
+    interface IcDatePicker {
+        /**
+          * The format in which the date will be displayed.
+         */
+        "dateFormat"?: IcDateFormat;
+        /**
+          * The days of the week to disable.
+         */
+        "disableDays"?: IcWeekDays[];
+        /**
+          * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
+         */
+        "disableDaysMessage"?: string;
+        /**
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        "disableFuture"?: boolean;
         /**
-          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+          * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
          */
-        "description"?: string;
+        "disableFutureMessage"?: string;
         /**
-          * The heading of the title bar. Can be overridden with the `heading` slot. If used with an ic-data-table it will default to the table's `caption` unless overridden.
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
          */
-        "heading"?: string;
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * The ID for the input field. The default will be an automatically generated value.
+         */
+        "inputId"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
         /**
-          * When `true`, the density select will not be rendered.
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
          */
-        "hideDensitySelect"?: boolean;
+        "max"?: string | Date;
         /**
-          * The metadata displayed next to the `heading`.
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
          */
-        "metadata"?: string;
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIcChange"?: (event: IcDatePickerCustomEvent<{ value: Date }>) => void;
+        /**
+          * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "openAtDate"?: string | Date;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, days outside the current month will be visible in the date picker.
+         */
+        "showDaysOutsideMonth"?: boolean;
+        /**
+          * If `true`, the `Clear` button on the date picker will be visible.
+         */
+        "showPickerClearButton"?: boolean;
+        /**
+          * If `true`, the `Go to today` button on the date picker will be visible.
+         */
+        "showPickerTodayButton"?: boolean;
+        /**
+          * The size of the date picker to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "startOfWeek"?: IcWeekDays;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
         /**
-          * Emitted when the table density select value is changed.
+          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
          */
-        "onIcTableDensityUpdate"?: (event: IcDataTableTitleBarCustomEvent<IcDensityUpdateEventDetail>) => void;
+        "value"?: string | Date | null | undefined;
     }
     interface IcMenuWithMulti {
         /**
@@ -988,7 +1235,8 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "ic-data-table": IcDataTable;
-        "ic-data-table-title-bar": IcDataTableTitleBar;
+        "ic-date-input": IcDateInput;
+        "ic-date-picker": IcDatePicker;
         "ic-menu-with-multi": IcMenuWithMulti;
         "ic-pagination-bar": IcPaginationBar;
         "ic-select-with-multi": IcSelectWithMulti;
@@ -999,7 +1247,8 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
-            "ic-data-table-title-bar": LocalJSX.IcDataTableTitleBar & JSXBase.HTMLAttributes<HTMLIcDataTableTitleBarElement>;
+            "ic-date-input": LocalJSX.IcDateInput & JSXBase.HTMLAttributes<HTMLIcDateInputElement>;
+            "ic-date-picker": LocalJSX.IcDatePicker & JSXBase.HTMLAttributes<HTMLIcDatePickerElement>;
             "ic-menu-with-multi": LocalJSX.IcMenuWithMulti & JSXBase.HTMLAttributes<HTMLIcMenuWithMultiElement>;
             "ic-pagination-bar": LocalJSX.IcPaginationBar & JSXBase.HTMLAttributes<HTMLIcPaginationBarElement>;
             "ic-select-with-multi": LocalJSX.IcSelectWithMulti & JSXBase.HTMLAttributes<HTMLIcSelectWithMultiElement>;