@haiilo/catalyst 5.3.0 → 6.0.0

package/dist/types/components.d.ts

@@ -6,15 +6,15 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
+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";
 export { Breakpoint } from "./utils/breakpoints";
+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 namespace Components {
@@ -157,10 +157,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.
          */
@@ -235,10 +231,6 @@ export namespace Components {
           * Programmatically remove focus from the checkbox. Use this method instead of `input.blur()`.
          */
         "doBlur": () => Promise<void>;
-        /**
-          * Programmatically simulate a click on the checkbox.
-         */
-        "doClick": () => Promise<void>;
         /**
           * Programmatically move focus to the checkbox. Use this method instead of `input.focus()`.
           * @param options An optional object providing options to control aspects of the focusing process.
@@ -269,7 +261,98 @@ export namespace Components {
          */
         "labelLeft": boolean;
         /**
-          * The name of the input
+          * The name of the input.
+         */
+        "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * Required state of the checkbox.
+         */
+        "required": boolean;
+        /**
+          * The resolved value of the checkbox, based on the checked state and value.
+         */
+        "resolvedValue": string | boolean | null;
+        /**
+          * The value of the checkbox.
+         */
+        "value"?: string;
+    }
+    interface CatDatepicker {
+        /**
+          * Hint for form autofill feature.
+         */
+        "autoComplete"?: string;
+        /**
+          * Whether the input should show a clear button.
+         */
+        "clearable": boolean;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Programmatically remove focus from the datepicker. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically move focus to the datepicker. 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;
+        /**
+          * 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 right.
+         */
+        "iconRight": 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 as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
+         */
+        "max"?: string;
+        /**
+          * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
+         */
+        "min"?: string;
+        /**
+          * The mode of the datepicker, to select a date, time, both, a date range or a week number.
+         */
+        "mode": 'date' | 'time' | 'datetime' | 'daterange' | 'week';
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
          */
         "name"?: string;
         /**
@@ -277,13 +360,37 @@ export namespace Components {
          */
         "nativeAttributes"?: { [key: string]: string };
         /**
-          * Required state of the checkbox
+          * 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;
         /**
-          * The value of the checkbox
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        /**
+          * The step size to use when changing the time.
+         */
+        "step": number;
+        /**
+          * A textual prefix to be displayed in the input.
+         */
+        "textPrefix"?: string;
+        /**
+          * A textual suffix to be displayed in the input.
+         */
+        "textSuffix"?: string;
+        /**
+          * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.
          */
-        "value"?: string | boolean;
+        "value"?: string;
     }
     interface CatDropdown {
         /**
@@ -365,10 +472,6 @@ export namespace Components {
           * 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.
@@ -469,29 +572,7 @@ export namespace Components {
         /**
           * The value of the control.
          */
-        "value"?: string | number;
-    }
-    /**
-     * Labels are used to provide a short description of an input or form element.
-     * @deprecated Use label attribute of form elements instead.
-     */
-    interface CatLabel {
-        /**
-          * 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.
-         */
-        "required": boolean;
-        /**
-          * Whether the label need a marker to shown if the input is required or optional.
-         */
-        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        "value"?: string;
     }
     /**
      * A navigation component to switch between different pages of paged chunks of
@@ -559,10 +640,6 @@ export namespace Components {
           * Programmatically remove focus from the radio button. Use this method instead of `input.blur()`.
          */
         "doBlur": () => Promise<void>;
-        /**
-          * Programmatically simulate a click on the radio button.
-         */
-        "doClick": () => Promise<void>;
         /**
           * Programmatically move focus to the radio button. Use this method instead of `input.focus()`.
           * @param options An optional object providing options to control aspects of the focusing process.
@@ -603,7 +680,7 @@ export namespace Components {
         /**
           * The value of the radio component.
          */
-        "value"?: string;
+        "value": string;
     }
     /**
      * A group of radio buttons.
@@ -848,6 +925,10 @@ export namespace Components {
      * input component.
      */
     interface CatTextarea {
+        /**
+          * Clear the textarea.
+         */
+        "clear": () => Promise<void>;
         /**
           * Whether the textarea is disabled.
          */
@@ -856,10 +937,6 @@ export namespace Components {
           * Programmatically remove focus from the textarea. Use this method instead of `textarea.blur()`.
          */
         "doBlur": () => Promise<void>;
-        /**
-          * Programmatically simulate a click on the textarea.
-         */
-        "doClick": () => Promise<void>;
         /**
           * Programmatically move focus to the textarea. Use this method instead of `textarea.focus()`.
           * @param options An optional object providing options to control aspects of the focusing process.
@@ -932,7 +1009,7 @@ export namespace Components {
         /**
           * The initial value of the control.
          */
-        "value"?: string | number;
+        "value"?: string;
     }
     /**
      * Toggles are graphical interface switches that give user control over a
@@ -951,10 +1028,6 @@ export namespace Components {
           * Programmatically remove focus from the toggle. Use this method instead of `input.blur()`.
          */
         "doBlur": () => Promise<void>;
-        /**
-          * Programmatically simulate a click on the toggle.
-         */
-        "doClick": () => Promise<void>;
         /**
           * Programmatically move focus to the toggle. Use this method instead of `input.focus()`.
           * @param options An optional object providing options to control aspects of the focusing process.
@@ -981,7 +1054,7 @@ export namespace Components {
          */
         "labelLeft": boolean;
         /**
-          * The name of the input
+          * The name of the input.
          */
         "name"?: string;
         /**
@@ -993,9 +1066,13 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * The value of the toggle
+          * The resolved value of the toggle, based on the checked state and value.
          */
-        "value"?: string | boolean;
+        "resolvedValue": string | boolean | null;
+        /**
+          * The value of the toggle.
+         */
+        "value"?: string;
     }
     interface CatTooltip {
         /**
@@ -1040,6 +1117,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;
@@ -1048,6 +1129,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;
@@ -1142,6 +1227,12 @@ declare global {
         prototype: HTMLCatCheckboxElement;
         new (): HTMLCatCheckboxElement;
     };
+    interface HTMLCatDatepickerElement extends Components.CatDatepicker, HTMLStencilElement {
+    }
+    var HTMLCatDatepickerElement: {
+        prototype: HTMLCatDatepickerElement;
+        new (): HTMLCatDatepickerElement;
+    };
     interface HTMLCatDropdownElement extends Components.CatDropdown, HTMLStencilElement {
     }
     var HTMLCatDropdownElement: {
@@ -1175,16 +1266,6 @@ declare global {
         prototype: HTMLCatInputElement;
         new (): HTMLCatInputElement;
     };
-    /**
-     * Labels are used to provide a short description of an input or form element.
-     * @deprecated Use label attribute of form elements instead.
-     */
-    interface HTMLCatLabelElement extends Components.CatLabel, HTMLStencilElement {
-    }
-    var HTMLCatLabelElement: {
-        prototype: HTMLCatLabelElement;
-        new (): HTMLCatLabelElement;
-    };
     /**
      * A navigation component to switch between different pages of paged chunks of
      * data such as a table. Pagination is built with list HTML elements and a
@@ -1315,11 +1396,11 @@ declare global {
         "cat-button-group": HTMLCatButtonGroupElement;
         "cat-card": HTMLCatCardElement;
         "cat-checkbox": HTMLCatCheckboxElement;
+        "cat-datepicker": HTMLCatDatepickerElement;
         "cat-dropdown": HTMLCatDropdownElement;
         "cat-form-group": HTMLCatFormGroupElement;
         "cat-icon": HTMLCatIconElement;
         "cat-input": HTMLCatInputElement;
-        "cat-label": HTMLCatLabelElement;
         "cat-pagination": HTMLCatPaginationElement;
         "cat-radio": HTMLCatRadioElement;
         "cat-radio-group": HTMLCatRadioGroupElement;
@@ -1462,10 +1543,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.
          */
@@ -1573,7 +1650,7 @@ declare namespace LocalJSX {
          */
         "labelLeft"?: boolean;
         /**
-          * The name of the input
+          * The name of the input.
          */
         "name"?: string;
         /**
@@ -1587,19 +1664,137 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checked status of the checkbox is changed.
          */
-        "onCatChange"?: (event: CatCheckboxCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatCheckboxCustomEvent<boolean | string | null>) => void;
         /**
           * Emitted when the checkbox received focus.
          */
         "onCatFocus"?: (event: CatCheckboxCustomEvent<FocusEvent>) => void;
         /**
-          * Required state of the checkbox
+          * Required state of the checkbox.
          */
         "required"?: boolean;
         /**
-          * The value of the checkbox
+          * The resolved value of the checkbox, based on the checked state and value.
          */
-        "value"?: string | boolean;
+        "resolvedValue"?: string | boolean | null;
+        /**
+          * The value of the checkbox.
+         */
+        "value"?: string;
+    }
+    interface CatDatepicker {
+        /**
+          * Hint for form autofill feature.
+         */
+        "autoComplete"?: string;
+        /**
+          * Whether the input 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;
+        /**
+          * The name of an icon to be displayed in the input.
+         */
+        "icon"?: string;
+        /**
+          * Display the icon on the right.
+         */
+        "iconRight"?: 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 as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
+         */
+        "max"?: string;
+        /**
+          * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
+         */
+        "min"?: string;
+        /**
+          * The mode of the datepicker, to select a date, time, both, a date range or a week number.
+         */
+        "mode"?: 'date' | 'time' | 'datetime' | 'daterange' | 'week';
+        /**
+          * 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<string>) => 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!';
+        /**
+          * The step size to use when changing the time.
+         */
+        "step"?: number;
+        /**
+          * A textual prefix to be displayed in the input.
+         */
+        "textPrefix"?: string;
+        /**
+          * A textual suffix to be displayed in the input.
+         */
+        "textSuffix"?: string;
+        /**
+          * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.
+         */
+        "value"?: string;
     }
     interface CatDropdown {
         /**
@@ -1744,7 +1939,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatInputCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatInputCustomEvent<string>) => void;
         /**
           * Emitted when the input received focus.
          */
@@ -1784,29 +1979,7 @@ declare namespace LocalJSX {
         /**
           * The value of the control.
          */
-        "value"?: string | number;
-    }
-    /**
-     * Labels are used to provide a short description of an input or form element.
-     * @deprecated Use label attribute of form elements instead.
-     */
-    interface CatLabel {
-        /**
-          * 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.
-         */
-        "required"?: boolean;
-        /**
-          * Whether the label need a marker to shown if the input is required or optional.
-         */
-        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+        "value"?: string;
     }
     /**
      * A navigation component to switch between different pages of paged chunks of
@@ -1832,6 +2005,10 @@ declare namespace LocalJSX {
           * The icon of the "previous" button.
          */
         "iconPrev"?: string;
+        /**
+          * Emitted when the page of the pagination has changed.
+         */
+        "onCatChange"?: (event: CatPaginationCustomEvent<number>) => void;
         /**
           * The current page.
          */
@@ -1905,7 +2082,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the radio is changed.
          */
-        "onCatChange"?: (event: CatRadioCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatRadioCustomEvent<boolean | string>) => void;
         /**
           * Emitted when the radio received focus.
          */
@@ -1946,7 +2123,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatRadioGroupCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatRadioGroupCustomEvent<boolean | string>) => void;
+        /**
+          * Emitted when the radio group received focus.
+         */
+        "onCatFocus"?: (event: CatRadioGroupCustomEvent<FocusEvent>) => void;
         /**
           * The value of the radio group.
          */
@@ -2070,7 +2251,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.
          */
@@ -2256,7 +2437,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatTextareaCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatTextareaCustomEvent<string>) => void;
         /**
           * Emitted when the textarea received focus.
          */
@@ -2284,7 +2465,7 @@ declare namespace LocalJSX {
         /**
           * The initial value of the control.
          */
-        "value"?: string | number;
+        "value"?: string;
     }
     /**
      * Toggles are graphical interface switches that give user control over a
@@ -2320,7 +2501,7 @@ declare namespace LocalJSX {
          */
         "labelLeft"?: boolean;
         /**
-          * The name of the input
+          * The name of the input.
          */
         "name"?: string;
         /**
@@ -2334,7 +2515,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checked status of the toggle is changed.
          */
-        "onCatChange"?: (event: CatToggleCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatToggleCustomEvent<boolean | string | null>) => void;
         /**
           * Emitted when the toggle received focus.
          */
@@ -2344,9 +2525,13 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The value of the toggle
+          * The resolved value of the toggle, based on the checked state and value.
          */
-        "value"?: string | boolean;
+        "resolvedValue"?: string | boolean | null;
+        /**
+          * The value of the toggle.
+         */
+        "value"?: string;
     }
     interface CatTooltip {
         /**
@@ -2390,11 +2575,11 @@ declare namespace LocalJSX {
         "cat-button-group": CatButtonGroup;
         "cat-card": CatCard;
         "cat-checkbox": CatCheckbox;
+        "cat-datepicker": CatDatepicker;
         "cat-dropdown": CatDropdown;
         "cat-form-group": CatFormGroup;
         "cat-icon": CatIcon;
         "cat-input": CatInput;
-        "cat-label": CatLabel;
         "cat-pagination": CatPagination;
         "cat-radio": CatRadio;
         "cat-radio-group": CatRadioGroup;
@@ -2444,6 +2629,7 @@ declare module "@stencil/core" {
              * number of options.
              */
             "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes<HTMLCatCheckboxElement>;
+            "cat-datepicker": LocalJSX.CatDatepicker & JSXBase.HTMLAttributes<HTMLCatDatepickerElement>;
             "cat-dropdown": LocalJSX.CatDropdown & JSXBase.HTMLAttributes<HTMLCatDropdownElement>;
             "cat-form-group": LocalJSX.CatFormGroup & JSXBase.HTMLAttributes<HTMLCatFormGroupElement>;
             /**
@@ -2457,11 +2643,6 @@ declare module "@stencil/core" {
              * including passwords and numbers.
              */
             "cat-input": LocalJSX.CatInput & JSXBase.HTMLAttributes<HTMLCatInputElement>;
-            /**
-             * Labels are used to provide a short description of an input or form element.
-             * @deprecated Use label attribute of form elements instead.
-             */
-            "cat-label": LocalJSX.CatLabel & JSXBase.HTMLAttributes<HTMLCatLabelElement>;
             /**
              * A navigation component to switch between different pages of paged chunks of
              * data such as a table. Pagination is built with list HTML elements and a