@haiilo/catalyst 5.2.3 → 5.4.0

package/dist/types/components.d.ts

@@ -6,17 +6,21 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
+import { DatepickerType } from "./components/cat-datepicker/datepicker-type";
+import { ErrorMap } from "./components/cat-form-hint/cat-form-hint";
 import { Placement } from "@floating-ui/dom";
 import { InputType } from "./components/cat-input/input-type";
-import { ErrorMap } from "./components/cat-form-hint/cat-form-hint";
 import { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select";
 import { Observable } from "rxjs";
+import { CatSelectMultipleTaggingValue as CatSelectMultipleTaggingValue1, CatSelectTaggingValue as CatSelectTaggingValue1 } from "./components/cat-select/cat-select";
 export { Breakpoint } from "./utils/breakpoints";
+export { DatepickerType } from "./components/cat-datepicker/datepicker-type";
+export { ErrorMap } from "./components/cat-form-hint/cat-form-hint";
 export { Placement } from "@floating-ui/dom";
 export { InputType } from "./components/cat-input/input-type";
-export { ErrorMap } from "./components/cat-form-hint/cat-form-hint";
 export { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select";
 export { Observable } from "rxjs";
+export { CatSelectMultipleTaggingValue as CatSelectMultipleTaggingValue1, CatSelectTaggingValue as CatSelectTaggingValue1 } from "./components/cat-select/cat-select";
 export namespace Components {
     /**
      * Informs user about important changes or conditions in the interface. Use this
@@ -116,6 +120,10 @@ export namespace Components {
           * Set the button into an active state.
          */
         "active": boolean;
+        /**
+          * The index of a button that is used inside a cat-button-group component
+         */
+        "buttonGroupPosition"?: 'first' | 'last' | 'middle';
         /**
           * Adds a unique identifier for the button. Please note that with this particular component this ID is added inside the web component. If you need an ID on the HTML element, use the regular `id` attribute instead.
          */
@@ -153,10 +161,6 @@ export namespace Components {
           * Display the icon on the right.
          */
         "iconRight": boolean;
-        /**
-          * The SVG source of an icon to be displayed in the button. This takes precenedence over the `icon` name.
-         */
-        "iconSrc"?: string;
         /**
           * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          */
@@ -202,6 +206,12 @@ export namespace Components {
          */
         "variant": 'filled' | 'outlined' | 'text';
     }
+    interface CatButtonGroup {
+        /**
+          * Adds an accessible label for the button group that it is only shown in assistive technologies, like screen readers.
+         */
+        "a11yLabel"?: string;
+    }
     /**
      * Cards are surfaces that display content and actions on a single topic. They
      * should be easy to scan for relevant and actionable information.
@@ -275,6 +285,138 @@ export namespace Components {
          */
         "value"?: string | boolean;
     }
+    /**
+     * Inputs are used to allow users to provide text input when the expected input
+     * is short. As well as plain text, Input supports various types of text,
+     * including passwords and numbers.
+     */
+    interface CatDatepicker {
+        /**
+          * Hint for form autofill feature.
+         */
+        "autoComplete"?: string;
+        /**
+          * Clear the input.
+         */
+        "clear": () => Promise<void>;
+        /**
+          * Whether the input should show a clear button.
+         */
+        "clearable": boolean;
+        /**
+          * Dates that should be disabled inside the picker
+         */
+        "datesDisabled": Array<Date> | Array<string>;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the input.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * Programmatically move focus to the input. Use this method instead of `input.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "doFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
+         */
+        "errorUpdate": boolean | number;
+        /**
+          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
+         */
+        "errors"?: boolean | string[] | ErrorMap;
+        /**
+          * The date format after picker selection.
+         */
+        "format": string;
+        /**
+          * Optional hint text(s) to be displayed with the input.
+         */
+        "hint"?: string | string[];
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal": boolean;
+        /**
+          * The name of an icon to be displayed in the input.
+         */
+        "icon"?: string;
+        /**
+          * Display the icon on the left.
+         */
+        "iconLeft": boolean;
+        /**
+          * A unique identifier for the input.
+         */
+        "identifier"?: string;
+        /**
+          * The label for the input.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * A maximum value for date, time and numeric values.
+         */
+        "max"?: number | string;
+        /**
+          * A minimum value for date, time and numeric values.
+         */
+        "min"?: number | string;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * The placeholder text to display within the input.
+         */
+        "placeholder"?: string;
+        /**
+          * The value is not editable.
+         */
+        "readonly": boolean;
+        /**
+          * A value is required or must be check for the form to be submittable.
+         */
+        "required": boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        /**
+          * A textual prefix to be displayed in the input.
+         */
+        "textPrefix"?: string;
+        /**
+          * A textual suffix to be displayed in the input.
+         */
+        "textSuffix"?: string;
+        /**
+          * Type of datepicker ('date', 'week', 'month', 'year').
+         */
+        "type": DatepickerType;
+        /**
+          * The value of the control.
+         */
+        "value"?: string;
+        /**
+          * Whether the picker should show the week numbers.
+         */
+        "weekNumbers": boolean;
+    }
     interface CatDropdown {
         /**
           * Closes the dropdown.
@@ -294,6 +436,10 @@ export namespace Components {
         "placement": Placement;
     }
     interface CatFormGroup {
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal": boolean;
         /**
           * The space allocated to the input label
          */
@@ -466,6 +612,10 @@ export namespace Components {
           * The unique identifier for a referenced input.
          */
         "for"?: string;
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal": boolean;
         /**
           * A value is required or must be check for the form to be submittable.
          */
@@ -680,6 +830,10 @@ export namespace Components {
           * Optional hint text(s) to be displayed with the select.
          */
         "hint"?: string | string[];
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal": boolean;
         /**
           * A unique identifier for the input.
          */
@@ -912,6 +1066,101 @@ export namespace Components {
          */
         "value"?: string | number;
     }
+    /**
+     * Inputs are used to allow users to provide text input when the expected input
+     * is short. As well as plain text, Input supports various types of text,
+     * including passwords and numbers.
+     */
+    interface CatTimepicker {
+        /**
+          * Whether the select should show a clear button.
+         */
+        "clearable": boolean;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
+         */
+        "errorUpdate": boolean | number;
+        /**
+          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
+         */
+        "errors"?: boolean | string[] | ErrorMap;
+        /**
+          * Optional hint text(s) to be displayed with the input.
+         */
+        "hint"?: string | string[];
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal": boolean;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "hourShort": boolean;
+        /**
+          * A unique identifier for the input.
+         */
+        "identifier"?: string;
+        /**
+          * The label for the input.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * A maximum value for date, time and numeric values.
+         */
+        "max"?: string;
+        /**
+          * A minimum value for date, time and numeric values.
+         */
+        "min"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "minutesStep": number;
+        /**
+          * Enable multiple selection.
+         */
+        "multiple": boolean;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * The text to display in the dropdown if no results are found.
+         */
+        "noItems"?: string;
+        /**
+          * The placeholder text to display within the select.
+         */
+        "placeholder"?: string;
+        /**
+          * The placement of the select.
+         */
+        "placement": Placement;
+        /**
+          * A value is required or must be checked for the form to be submittable.
+         */
+        "required": boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        /**
+          * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
+         */
+        "value"?: string | string[] | CatSelectTaggingValue1 | CatSelectMultipleTaggingValue1;
+    }
     /**
      * Toggles are graphical interface switches that give user control over a
      * feature or option that can be turned on or off.
@@ -1018,6 +1267,10 @@ export interface CatCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatCheckboxElement;
 }
+export interface CatDatepickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatDatepickerElement;
+}
 export interface CatDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatDropdownElement;
@@ -1026,6 +1279,10 @@ export interface CatInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatInputElement;
 }
+export interface CatPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatPaginationElement;
+}
 export interface CatRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatRadioElement;
@@ -1050,6 +1307,10 @@ export interface CatTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatTextareaElement;
 }
+export interface CatTimepickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatTimepickerElement;
+}
 export interface CatToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatToggleElement;
@@ -1094,6 +1355,12 @@ declare global {
         prototype: HTMLCatButtonElement;
         new (): HTMLCatButtonElement;
     };
+    interface HTMLCatButtonGroupElement extends Components.CatButtonGroup, HTMLStencilElement {
+    }
+    var HTMLCatButtonGroupElement: {
+        prototype: HTMLCatButtonGroupElement;
+        new (): HTMLCatButtonGroupElement;
+    };
     /**
      * Cards are surfaces that display content and actions on a single topic. They
      * should be easy to scan for relevant and actionable information.
@@ -1114,6 +1381,17 @@ declare global {
         prototype: HTMLCatCheckboxElement;
         new (): HTMLCatCheckboxElement;
     };
+    /**
+     * Inputs are used to allow users to provide text input when the expected input
+     * is short. As well as plain text, Input supports various types of text,
+     * including passwords and numbers.
+     */
+    interface HTMLCatDatepickerElement extends Components.CatDatepicker, HTMLStencilElement {
+    }
+    var HTMLCatDatepickerElement: {
+        prototype: HTMLCatDatepickerElement;
+        new (): HTMLCatDatepickerElement;
+    };
     interface HTMLCatDropdownElement extends Components.CatDropdown, HTMLStencilElement {
     }
     var HTMLCatDropdownElement: {
@@ -1263,6 +1541,17 @@ declare global {
         prototype: HTMLCatTextareaElement;
         new (): HTMLCatTextareaElement;
     };
+    /**
+     * Inputs are used to allow users to provide text input when the expected input
+     * is short. As well as plain text, Input supports various types of text,
+     * including passwords and numbers.
+     */
+    interface HTMLCatTimepickerElement extends Components.CatTimepicker, HTMLStencilElement {
+    }
+    var HTMLCatTimepickerElement: {
+        prototype: HTMLCatTimepickerElement;
+        new (): HTMLCatTimepickerElement;
+    };
     /**
      * Toggles are graphical interface switches that give user control over a
      * feature or option that can be turned on or off.
@@ -1284,8 +1573,10 @@ declare global {
         "cat-avatar": HTMLCatAvatarElement;
         "cat-badge": HTMLCatBadgeElement;
         "cat-button": HTMLCatButtonElement;
+        "cat-button-group": HTMLCatButtonGroupElement;
         "cat-card": HTMLCatCardElement;
         "cat-checkbox": HTMLCatCheckboxElement;
+        "cat-datepicker": HTMLCatDatepickerElement;
         "cat-dropdown": HTMLCatDropdownElement;
         "cat-form-group": HTMLCatFormGroupElement;
         "cat-icon": HTMLCatIconElement;
@@ -1302,6 +1593,7 @@ declare global {
         "cat-tab": HTMLCatTabElement;
         "cat-tabs": HTMLCatTabsElement;
         "cat-textarea": HTMLCatTextareaElement;
+        "cat-timepicker": HTMLCatTimepickerElement;
         "cat-toggle": HTMLCatToggleElement;
         "cat-tooltip": HTMLCatTooltipElement;
     }
@@ -1405,6 +1697,10 @@ declare namespace LocalJSX {
           * Set the button into an active state.
          */
         "active"?: boolean;
+        /**
+          * The index of a button that is used inside a cat-button-group component
+         */
+        "buttonGroupPosition"?: 'first' | 'last' | 'middle';
         /**
           * Adds a unique identifier for the button. Please note that with this particular component this ID is added inside the web component. If you need an ID on the HTML element, use the regular `id` attribute instead.
          */
@@ -1429,10 +1725,6 @@ declare namespace LocalJSX {
           * Display the icon on the right.
          */
         "iconRight"?: boolean;
-        /**
-          * The SVG source of an icon to be displayed in the button. This takes precenedence over the `icon` name.
-         */
-        "iconSrc"?: string;
         /**
           * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          */
@@ -1490,6 +1782,12 @@ declare namespace LocalJSX {
          */
         "variant"?: 'filled' | 'outlined' | 'text';
     }
+    interface CatButtonGroup {
+        /**
+          * Adds an accessible label for the button group that it is only shown in assistive technologies, like screen readers.
+         */
+        "a11yLabel"?: string;
+    }
     /**
      * Cards are surfaces that display content and actions on a single topic. They
      * should be easy to scan for relevant and actionable information.
@@ -1548,7 +1846,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checked status of the checkbox is changed.
          */
-        "onCatChange"?: (event: CatCheckboxCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatCheckboxCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the checkbox received focus.
          */
@@ -1562,6 +1860,133 @@ declare namespace LocalJSX {
          */
         "value"?: string | boolean;
     }
+    /**
+     * Inputs are used to allow users to provide text input when the expected input
+     * is short. As well as plain text, Input supports various types of text,
+     * including passwords and numbers.
+     */
+    interface CatDatepicker {
+        /**
+          * Hint for form autofill feature.
+         */
+        "autoComplete"?: string;
+        /**
+          * Whether the input should show a clear button.
+         */
+        "clearable"?: boolean;
+        /**
+          * Dates that should be disabled inside the picker
+         */
+        "datesDisabled": Array<Date> | Array<string>;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
+         */
+        "errorUpdate"?: boolean | number;
+        /**
+          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
+         */
+        "errors"?: boolean | string[] | ErrorMap;
+        /**
+          * The date format after picker selection.
+         */
+        "format"?: string;
+        /**
+          * Optional hint text(s) to be displayed with the input.
+         */
+        "hint"?: string | string[];
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal"?: boolean;
+        /**
+          * The name of an icon to be displayed in the input.
+         */
+        "icon"?: string;
+        /**
+          * Display the icon on the left.
+         */
+        "iconLeft"?: boolean;
+        /**
+          * A unique identifier for the input.
+         */
+        "identifier"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * A maximum value for date, time and numeric values.
+         */
+        "max"?: number | string;
+        /**
+          * A minimum value for date, time and numeric values.
+         */
+        "min"?: number | string;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onCatBlur"?: (event: CatDatepickerCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CatDatepickerCustomEvent<InputEvent>) => void;
+        /**
+          * Emitted when the input received focus.
+         */
+        "onCatFocus"?: (event: CatDatepickerCustomEvent<FocusEvent>) => void;
+        /**
+          * The placeholder text to display within the input.
+         */
+        "placeholder"?: string;
+        /**
+          * The value is not editable.
+         */
+        "readonly"?: boolean;
+        /**
+          * A value is required or must be check for the form to be submittable.
+         */
+        "required"?: boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        /**
+          * A textual prefix to be displayed in the input.
+         */
+        "textPrefix"?: string;
+        /**
+          * A textual suffix to be displayed in the input.
+         */
+        "textSuffix"?: string;
+        /**
+          * Type of datepicker ('date', 'week', 'month', 'year').
+         */
+        "type"?: DatepickerType;
+        /**
+          * The value of the control.
+         */
+        "value"?: string;
+        /**
+          * Whether the picker should show the week numbers.
+         */
+        "weekNumbers"?: boolean;
+    }
     interface CatDropdown {
         /**
           * Do not close the dropdown on outside clicks.
@@ -1585,6 +2010,10 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface CatFormGroup {
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal"?: boolean;
         /**
           * The space allocated to the input label
          */
@@ -1701,7 +2130,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatInputCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatInputCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the input received focus.
          */
@@ -1752,6 +2181,10 @@ declare namespace LocalJSX {
           * The unique identifier for a referenced input.
          */
         "for"?: string;
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal"?: boolean;
         /**
           * A value is required or must be check for the form to be submittable.
          */
@@ -1785,6 +2218,10 @@ declare namespace LocalJSX {
           * The icon of the "previous" button.
          */
         "iconPrev"?: string;
+        /**
+          * Emitted when the page of the pagination has changed.
+         */
+        "onCatChange"?: (event: CatPaginationCustomEvent<any>) => void;
         /**
           * The current page.
          */
@@ -1858,7 +2295,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the radio is changed.
          */
-        "onCatChange"?: (event: CatRadioCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatRadioCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the radio received focus.
          */
@@ -1899,7 +2336,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatRadioGroupCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatRadioGroupCustomEvent<InputEvent>) => void;
         /**
           * The value of the radio group.
          */
@@ -1984,6 +2421,10 @@ declare namespace LocalJSX {
           * Optional hint text(s) to be displayed with the select.
          */
         "hint"?: string | string[];
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal"?: boolean;
         /**
           * A unique identifier for the input.
          */
@@ -2019,7 +2460,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatSelectCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatSelectCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the select dropdown is closed.
          */
@@ -2205,7 +2646,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatTextareaCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatTextareaCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the textarea received focus.
          */
@@ -2235,6 +2676,117 @@ declare namespace LocalJSX {
          */
         "value"?: string | number;
     }
+    /**
+     * Inputs are used to allow users to provide text input when the expected input
+     * is short. As well as plain text, Input supports various types of text,
+     * including passwords and numbers.
+     */
+    interface CatTimepicker {
+        /**
+          * Whether the select should show a clear button.
+         */
+        "clearable"?: boolean;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
+         */
+        "errorUpdate"?: boolean | number;
+        /**
+          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
+         */
+        "errors"?: boolean | string[] | ErrorMap;
+        /**
+          * Optional hint text(s) to be displayed with the input.
+         */
+        "hint"?: string | string[];
+        /**
+          * Whether the label is on top or left.
+         */
+        "horizontal"?: boolean;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "hourShort"?: boolean;
+        /**
+          * A unique identifier for the input.
+         */
+        "identifier"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * A maximum value for date, time and numeric values.
+         */
+        "max"?: string;
+        /**
+          * A minimum value for date, time and numeric values.
+         */
+        "min"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "minutesStep"?: number;
+        /**
+          * Enable multiple selection.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * The text to display in the dropdown if no results are found.
+         */
+        "noItems"?: string;
+        /**
+          * Emitted when the select loses the focus.
+         */
+        "onCatBlur"?: (event: CatTimepickerCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CatTimepickerCustomEvent<any>) => void;
+        /**
+          * Emitted when the select dropdown is closed.
+         */
+        "onCatClose"?: (event: CatTimepickerCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the select dropdown is opened.
+         */
+        "onCatOpen"?: (event: CatTimepickerCustomEvent<FocusEvent>) => void;
+        /**
+          * The placeholder text to display within the select.
+         */
+        "placeholder"?: string;
+        /**
+          * The placement of the select.
+         */
+        "placement"?: Placement;
+        /**
+          * A value is required or must be checked for the form to be submittable.
+         */
+        "required"?: boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        /**
+          * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
+         */
+        "value"?: string | string[] | CatSelectTaggingValue1 | CatSelectMultipleTaggingValue1;
+    }
     /**
      * Toggles are graphical interface switches that give user control over a
      * feature or option that can be turned on or off.
@@ -2283,7 +2835,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checked status of the toggle is changed.
          */
-        "onCatChange"?: (event: CatToggleCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatToggleCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the toggle received focus.
          */
@@ -2336,8 +2888,10 @@ declare namespace LocalJSX {
         "cat-avatar": CatAvatar;
         "cat-badge": CatBadge;
         "cat-button": CatButton;
+        "cat-button-group": CatButtonGroup;
         "cat-card": CatCard;
         "cat-checkbox": CatCheckbox;
+        "cat-datepicker": CatDatepicker;
         "cat-dropdown": CatDropdown;
         "cat-form-group": CatFormGroup;
         "cat-icon": CatIcon;
@@ -2354,6 +2908,7 @@ declare namespace LocalJSX {
         "cat-tab": CatTab;
         "cat-tabs": CatTabs;
         "cat-textarea": CatTextarea;
+        "cat-timepicker": CatTimepicker;
         "cat-toggle": CatToggle;
         "cat-tooltip": CatTooltip;
     }
@@ -2381,6 +2936,7 @@ declare module "@stencil/core" {
              * once per view for main call-to-action.
              */
             "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
+            "cat-button-group": LocalJSX.CatButtonGroup & JSXBase.HTMLAttributes<HTMLCatButtonGroupElement>;
             /**
              * Cards are surfaces that display content and actions on a single topic. They
              * should be easy to scan for relevant and actionable information.
@@ -2391,6 +2947,12 @@ declare module "@stencil/core" {
              * number of options.
              */
             "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes<HTMLCatCheckboxElement>;
+            /**
+             * Inputs are used to allow users to provide text input when the expected input
+             * is short. As well as plain text, Input supports various types of text,
+             * including passwords and numbers.
+             */
+            "cat-datepicker": LocalJSX.CatDatepicker & JSXBase.HTMLAttributes<HTMLCatDatepickerElement>;
             "cat-dropdown": LocalJSX.CatDropdown & JSXBase.HTMLAttributes<HTMLCatDropdownElement>;
             "cat-form-group": LocalJSX.CatFormGroup & JSXBase.HTMLAttributes<HTMLCatFormGroupElement>;
             /**
@@ -2460,6 +3022,12 @@ declare module "@stencil/core" {
              * input component.
              */
             "cat-textarea": LocalJSX.CatTextarea & JSXBase.HTMLAttributes<HTMLCatTextareaElement>;
+            /**
+             * Inputs are used to allow users to provide text input when the expected input
+             * is short. As well as plain text, Input supports various types of text,
+             * including passwords and numbers.
+             */
+            "cat-timepicker": LocalJSX.CatTimepicker & JSXBase.HTMLAttributes<HTMLCatTimepickerElement>;
             /**
              * Toggles are graphical interface switches that give user control over a
              * feature or option that can be turned on or off.